update: header transparent, animation, banner, etc

_config.yml

@@ -23,13 +23,16 @@ yat:
   date_format: "%b %-d, %Y"
 
 # If you want more debug log, you can set true
-# debug: true
+# debug: false
+
+# If you want transparent header, you can set true
+# header_transparent: false
 
 # Google analytics
 # google_analytics: [Tracking ID]
 
 # If you want to generate website sitemap, you can set true
-# sitemap: true
+# sitemap: false
 
 # Translate languges
 # langs refer to https://cloud.google.com/translate/docs/languages

_includes/extensions/trianglify.html

@@ -8,16 +8,19 @@
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/2.0.0/trianglify.min.js"></script>
 <script>
-  function setRandomBgImage(selector, seed) {
+  function setRandomBgImage(selector, seed, zoom = 1) {
     var element = document.querySelector(selector);
     if (!element) return;
     var pattern = Trianglify({
-      width: screen.width,
-      height: element.offsetHeight,
+      width: screen.width * zoom,
+      height: element.offsetHeight * zoom,
       seed: seed
     });
-    element.appendChild(pattern.canvas());
+
+    var image = document.createElement("div");
+    image.style.backgroundImage = "url(" + pattern.png() + ")";
+    element.appendChild(image);
   }
 
-  setRandomBgImage('{{ selector }}', '{{ seed }}');
+  setRandomBgImage('{{ selector }}', '{{ seed }}', {{ zoom | default: 1}});
 </script>

_includes/views/banner.html

@@ -44,12 +44,14 @@
 
         {%- else -%}
 
-        <h1 class="page-banner-heading">
-          {{ heading | default: page.title | escape }}
-        </h1>
-        <h3 class="page-banner-subheading">
-          {{ subheading | default: page.subtitle | escape }}
-        </h3>
+          <div class="page-banner-default">
+            <h1 class="page-banner-heading">
+              {{ heading | default: page.title | escape }}
+            </h1>
+            <h3 class="page-banner-subheading">
+              {{ subheading | default: page.subtitle | escape }}
+            </h3>
+          <div>
 
         {%- endif -%}
       </div>
@@ -72,6 +74,7 @@
 
     {%- endif -%}
 
+    {%- assign zoom = 1.5 -%}
     {%- include extensions/trianglify.html -%}
 
   {%- endif -%}

_includes/views/header.html

@@ -1,4 +1,19 @@
-<header class="site-header" role="banner">
+
+{%- include functions.html func='log' level='debug' msg='Get banner value' -%}
+{% assign name = 'banner' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get header_transparent value' -%}
+{% assign name = 'header_transparent' %}
+{%- include functions.html func='get_value' -%}
+{% assign header_transparent = return %}
+
+{%- if banner and header_transparent -%}
+  {%- assign header_transparent_class = "site-header-transparent" -%}
+{%- endif -%}
+
+<header class="site-header {{ header_transparent_class }}" role="banner">
 
   <div class="wrapper">
     {%- assign default_paths = site.pages | where: "dir", "/" | map: "path" -%}
@@ -42,3 +57,45 @@
     {%- endif -%}
   </div>
 </header>
+
+<script>
+  (function() {
+    var supportPageOffset = window.pageXOffset !== undefined;
+    var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
+
+    function scrollY() {
+      return supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
+    }
+
+    var lastScrollY = scrollY();
+    var dataset = document.documentElement.dataset;
+
+    function storeScrollData() {
+      var y = scrollY();
+
+      {%- if banner and header_transparent -%}
+      dataset.headerTransparent = "";
+      {%- endif -%}
+
+      var scrollStatus = "";
+
+      if (y <= 0) {
+        scrollStatus = "top";
+      } else if ((window.innerHeight + y) >= document.body.offsetHeight) {
+        scrollStatus = "bottom";
+      } else {
+        var isScrollDown = (y - lastScrollY > 0) ? true : false;
+        scrollStatus = isScrollDown ? "down" : "up";
+      }
+
+      lastScrollY = y;
+      dataset.scrollStatus = scrollStatus;
+    }
+
+    window.addEventListener('scroll', function(e) {
+      storeScrollData();
+    });
+
+    storeScrollData();
+  })();
+</script>

_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: 380px !default;
+$banner-height: 400px !default;
 $banner-text-color: lighten($white-color, 0%) !default;
 $banner-background: darken(#333, 5%) !default;
 

_sass/yat/_layout.scss

@@ -1,10 +1,53 @@
+/**
+ * Animation for transparent header
+ */
+html {
+  &[data-header-transparent] {
+    header.site-header {
+      position: fixed;
+    }
+  }
+
+  &[data-scroll-status='top'] {
+    header.site-header-transparent {
+      height: 0;
+      text-shadow: 0 0 3px #08080880;
+    }
+
+    header.site-header .page-link {
+      text-shadow: 0 0 2px #080808d0;
+      filter: drop-shadow(0 0 2px #08080880);
+    }
+
+    footer.site-footer {
+      color: #888;
+      background-color: transparent;
+
+      .site-footer-inner {
+        border-top: solid 1px #eee;
+      }
+    }
+  }
+
+  &[data-scroll-status='down'] {
+    header.site-header {
+      top: -$header-height;
+    }
+
+    .framework .sidebar {
+      top: 20px;
+    }
+  }
+}
+
 /**
  * Site header
  */
 .site-header {
-  background: $header-background-color;
+  background-color: $header-background-color;
   height: $header-height;
   width: 100%;
+  transition: height 0.2s, text-shadow 0.2s, top 0.2s;
 
   // Positioning context for the mobile navigation icon
   @include flex-sticky(0);
@@ -16,7 +59,7 @@
 }
 
 .site-brand {
-  @include vertical-center(absolute);
+  line-height: $header-height;
   margin-right: 50px;
 
   .site-brand-inner {
@@ -68,6 +111,7 @@
 
   @include media-query($on-palm) {
     position: absolute;
+    top: 0;
     right: $spacing-unit / 2;
     text-align: left;
 
@@ -113,9 +157,14 @@
 .site-footer {
   @include relative-font-size(0.9);
   color: $footer-text-color;
-  background: $footer-background-color;
-  padding: $spacing-unit * 0.8 0;
+  background-color: $footer-background-color;
   text-align: left;
+  transition: background-color 0.2s;
+
+  .site-footer-inner {
+    transition: border-top 0.2s;
+    padding: $spacing-unit * 0.8 0;
+  }
 
   a {
     $a-color: invert(mix(invert($theme-color), #0030ae));
@@ -184,7 +233,7 @@
     @include relative-font-size(1.5);
 
     display: block;
-    font-weight: 600;
+    font-weight: $base-font-weight * 1.5;
   }
 }
 
@@ -271,6 +320,7 @@
   position: relative;
   height: $banner-height;
   background-color: $banner-background;
+  transition: height 0.2s;
 
   .page-banner-img {
     position: absolute;
@@ -294,22 +344,28 @@
     padding: 10px 5px;
     text-shadow: 1px 1px 2px #333;
 
-    .page-banner-heading {
-      @include relative-font-size(2.825);
-      letter-spacing: -1px;
-      line-height: 1;
-      margin-bottom: 10px;
+    & > *:first-child {
+      margin: 0;
 
-      @include media-query($on-palm) {
-        @include relative-font-size(2.425);
+      > :nth-child(1) {
+        @include relative-font-size(2.825);
+        letter-spacing: -1px;
+        line-height: 1;
+        margin-bottom: 10px;
+
+        @include media-query($on-palm) {
+          @include relative-font-size(2.425);
+        }
+      }
+
+      > :nth-child(2) {
+        font-weight: $base-font-weight * 1.5;
       }
     }
+  }
 
-    @extend %post-header;
-
-    .post-title {
-      @include relative-font-size(2.925);
-    }
+  @include media-query($on-palm) {
+    height: $banner-height / 1.5;
   }
 }
 
@@ -326,6 +382,7 @@
 
   .sidebar {
     padding-left: 8px;
+    transition: top 0.2s, display 0.2s;
 
     @include flex-sticky($header-height + 20px);
 
@@ -347,7 +404,7 @@
   }
 
   .segment-name {
-    font-weight: 600;
+    font-weight: $base-font-weight * 1.5;
     margin-bottom: 8px;
     position: relative;