diff options
| -rw-r--r-- | _config.yml | 7 | ||||
| -rw-r--r-- | _includes/extensions/trianglify.html | 13 | ||||
| -rw-r--r-- | _includes/views/banner.html | 15 | ||||
| -rw-r--r-- | _includes/views/header.html | 59 | ||||
| -rw-r--r-- | _sass/yat.scss | 2 | ||||
| -rw-r--r-- | _sass/yat/_layout.scss | 93 |
6 files changed, 156 insertions, 33 deletions
diff --git a/_config.yml b/_config.yml index ba070b4..9e0f722 100644 --- a/_config.yml +++ b/_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 diff --git a/_includes/extensions/trianglify.html b/_includes/extensions/trianglify.html index 22003dc..c11458e 100644 --- a/_includes/extensions/trianglify.html +++ b/_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> diff --git a/_includes/views/banner.html b/_includes/views/banner.html index baa8465..45ea62c 100644 --- a/_includes/views/banner.html +++ b/_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 -%} diff --git a/_includes/views/header.html b/_includes/views/header.html index 06a20ed..10637c2 100644 --- a/_includes/views/header.html +++ b/_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> diff --git a/_sass/yat.scss b/_sass/yat.scss index c36c55c..446a791 100644 --- a/_sass/yat.scss +++ b/_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; diff --git a/_sass/yat/_layout.scss b/_sass/yat/_layout.scss index 757593f..571bb4f 100644 --- a/_sass/yat/_layout.scss +++ b/_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,23 +344,29 @@ 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; - @extend %post-header; + @include media-query($on-palm) { + @include relative-font-size(2.425); + } + } - .post-title { - @include relative-font-size(2.925); + > :nth-child(2) { + font-weight: $base-font-weight * 1.5; + } } } + + @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; |