update: adjust header brand favicon, banner, etc

_includes/head.html

@@ -4,9 +4,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="google-translate-customization" content="108d9124921d80c3-80e20d618ff053c8-g4f02ec6f3dba68b7-c"></meta>
   {%- seo -%}
-  {%- if site.favicon -%}
   <link rel="shortcut icon" href="{{ site.favicon }}">
-  {%- endif -%}
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
   {%- feed_meta -%}

_includes/views/banner.html

@@ -21,7 +21,7 @@
 {% if banner %}
 
   {% assign auto_banner = true %}
-  {% assign array = banner | split: '//' %}
+  {% assign array = banner | split: '/' %}
   {% assign protocol = array[0]  %}
 
   {% if array.size > 1 and (protocol == '' or protocol == 'http:' or protocol == 'https:') %}
@@ -57,9 +57,23 @@
   </section>
 
   {%- if auto_banner -%}
+
     {%- assign selector = ".page-banner-img" -%}
-    {%- assign seed = page.id | append: '-seed-' | append: banner -%}
+
+    {%- if banner == "default" -%}
+
+      {%- assign heading = page.heading | default: page.title | escape -%}
+      {%- assign subheading = page.subheading | default: page.subtitle | escape -%}
+      {%- assign seed = page.date | append: heading | append: subheading -%}
+
+    {%- else -%}
+
+      {%- assign seed = 'theme-' | append: banner -%}
+
+    {%- endif -%}
+
     {%- include extensions/trianglify.html -%}
+
   {%- endif -%}
 
 {%- endif -%}

_includes/views/site-brand.html

@@ -1,7 +1,4 @@
-<a class="site-title" rel="author" href="{{ "/" | relative_url }}">
+<a class="site-brand-inner" rel="author" href="{{ "/" | relative_url }}">
-  {%- if site.favicon -%}
+  <img class="site-favicon" title="{{ site.title | escape }}" src="{{ site.favicon }}" onerror="this.style.display='none'">
-    <img class="site-favicon" title="{{ site.title | escape }}" src="{{
-    site.favicon }}">
-  {%- endif -%}
   {{ site.title | escape }}
 </a>

_sass/yat.scss

@@ -31,7 +31,7 @@ $footer-height: $header-height * 1.05 !default;
 $footer-text-color: rgba(lighten(invert($theme-color), 30%), 50%) !default;
 $footer-background-color: darken($theme-color, 5%) !default;
 
-$banner-height: 350px !default;
+$banner-height: 380px !default;
 $banner-text-color: lighten($white-color, 0%) !default;
 $banner-background: darken(#333, 5%) !default;
 

_sass/yat/_base.scss

@@ -226,15 +226,6 @@ table {
   }
 }
 
-/**
- * Vertical center
- */
-%vertical-center {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
 /**
  * Flex layout
  */
@@ -256,3 +247,33 @@ table {
   transform: scale(0.9999); /* <-- fix the sticky x overflow issue */
   top: $top;
 }
+
+/**
+ * Vertical center
+ */
+@mixin vertical-center($position) {
+  position: $position;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/**
+ * Horizontal center
+ */
+@mixin horizontal-center($position) {
+  position: $position;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/**
+ * Center background image
+ */
+@mixin center-image {
+  height: 100%;
+  max-width: 1000%;
+  background-size: cover;
+  background-position: center center;
+  overflow: hidden;
+}
+

_sass/yat/_layout.scss

@@ -16,36 +16,30 @@
 }
 
 .site-brand {
-  @extend %vertical-center;
+  @include vertical-center(absolute);
-
-  float: left;
-  height: 100%;
-  max-height: 100%;
   margin-right: 50px;
 
-  .site-favicon {
+  .site-brand-inner {
-    margin-right: 10px;
-    height: 65%;
-    max-height: 65%;
-    border-radius: 65%;
-    box-shadow: 0 0 2px #080808d1;
-    transition: 0.2s;
-
-    &:hover {
-      box-shadow: 0 0 5px #080808d1;
-    }
-  }
-
-  .site-title {
     @include relative-font-size(1.125);
     font-weight: $base-font-weight;
-    line-height: $header-height;
+    filter: drop-shadow(0 0 2px #08080880);
-    text-shadow: 0 0 3px #080808d1;
+    text-shadow: 0 0 2px #080808d0;
     letter-spacing: -1px;
+    transition: drop-shadow 0.2s;
 
     &, &:visited {
       color: $header-text-color;
     }
+
+    &:hover {
+      filter: drop-shadow(0 0 3px #080808a0);
+    }
+
+    .site-favicon {
+      display: inline-block;
+      height: $header-height / 1.5;
+      margin-right: 5px;
+    }
   }
 }
 
@@ -157,7 +151,7 @@
  */
 .page-content {
   @extend %flex-1; /* <-- Keep footer on the bottom */
-  padding: $spacing-unit 0;
+  padding: $spacing-unit * 1.5 0;
 }
 
 .page-heading {
@@ -280,19 +274,12 @@
 
   .page-banner-img {
     position: absolute;
+    width: 100%;
     height: 100%;
     overflow: hidden;
 
     & > *:first-child {
-      position: relative;
+      @include center-image;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      height: 100%;
-      max-width: 1000%;
-      background-size: cover;
-      background-position: center center;
-      overflow: hidden;
     }
   }
 
@@ -301,9 +288,8 @@
   }
 
   .page-banner-inner {
-    @extend %vertical-center;
+    @include vertical-center(relative);
 
-    position: relative;
     color: $banner-text-color;
     padding: 10px 5px;
     text-shadow: 1px 1px 2px #333;

assets/main.scss

@@ -4,7 +4,7 @@
 
 // Default theme colors
 $theme-colors: (
-  spacegrey: #222222,
+  spacegrey: #353535,
   inkpurple: #543581,
   aquablue: #00aaa0,
   azureblue: #2863b1,
@@ -19,7 +19,7 @@ $theme-color: map-get($theme-colors, "spacegrey");
 @if map-has-key($theme-colors, $theme-name) {
   $theme-color: map-get($theme-colors, $theme-name);
 } @else if str-index($theme-name, "#") == 1 {
-  $theme-color: {{ site.theme_color | default: '#222' }};
+  $theme-color: {{ site.theme_color | default: '#353535' }};
 }
 
 @import "yat";

index.html

@@ -1,4 +1,7 @@
 ---
+# Feel free to add content and custom Front Matter to this file.
+# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
+
 layout: home
 title: home
 ---