update: header transparent, animation, banner, etc
This commit is contained in:
parent
e3081ca386
commit
ce43bb9a6a
|
@ -23,13 +23,16 @@ yat:
|
||||||
date_format: "%b %-d, %Y"
|
date_format: "%b %-d, %Y"
|
||||||
|
|
||||||
# If you want more debug log, you can set true
|
# 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
|
||||||
# google_analytics: [Tracking ID]
|
# google_analytics: [Tracking ID]
|
||||||
|
|
||||||
# If you want to generate website sitemap, you can set true
|
# If you want to generate website sitemap, you can set true
|
||||||
# sitemap: true
|
# sitemap: false
|
||||||
|
|
||||||
# Translate languges
|
# Translate languges
|
||||||
# langs refer to https://cloud.google.com/translate/docs/languages
|
# langs refer to https://cloud.google.com/translate/docs/languages
|
||||||
|
|
|
@ -8,16 +8,19 @@
|
||||||
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/2.0.0/trianglify.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/2.0.0/trianglify.min.js"></script>
|
||||||
<script>
|
<script>
|
||||||
function setRandomBgImage(selector, seed) {
|
function setRandomBgImage(selector, seed, zoom = 1) {
|
||||||
var element = document.querySelector(selector);
|
var element = document.querySelector(selector);
|
||||||
if (!element) return;
|
if (!element) return;
|
||||||
var pattern = Trianglify({
|
var pattern = Trianglify({
|
||||||
width: screen.width,
|
width: screen.width * zoom,
|
||||||
height: element.offsetHeight,
|
height: element.offsetHeight * zoom,
|
||||||
seed: seed
|
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>
|
</script>
|
||||||
|
|
|
@ -44,12 +44,14 @@
|
||||||
|
|
||||||
{%- else -%}
|
{%- else -%}
|
||||||
|
|
||||||
|
<div class="page-banner-default">
|
||||||
<h1 class="page-banner-heading">
|
<h1 class="page-banner-heading">
|
||||||
{{ heading | default: page.title | escape }}
|
{{ heading | default: page.title | escape }}
|
||||||
</h1>
|
</h1>
|
||||||
<h3 class="page-banner-subheading">
|
<h3 class="page-banner-subheading">
|
||||||
{{ subheading | default: page.subtitle | escape }}
|
{{ subheading | default: page.subtitle | escape }}
|
||||||
</h3>
|
</h3>
|
||||||
|
<div>
|
||||||
|
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
</div>
|
</div>
|
||||||
|
@ -72,6 +74,7 @@
|
||||||
|
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
|
|
||||||
|
{%- assign zoom = 1.5 -%}
|
||||||
{%- include extensions/trianglify.html -%}
|
{%- include extensions/trianglify.html -%}
|
||||||
|
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
|
|
|
@ -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">
|
<div class="wrapper">
|
||||||
{%- assign default_paths = site.pages | where: "dir", "/" | map: "path" -%}
|
{%- assign default_paths = site.pages | where: "dir", "/" | map: "path" -%}
|
||||||
|
@ -42,3 +57,45 @@
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</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>
|
||||||
|
|
|
@ -31,7 +31,7 @@ $footer-height: $header-height * 1.05 !default;
|
||||||
$footer-text-color: rgba(lighten(invert($theme-color), 30%), 50%) !default;
|
$footer-text-color: rgba(lighten(invert($theme-color), 30%), 50%) !default;
|
||||||
$footer-background-color: darken($theme-color, 5%) !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-text-color: lighten($white-color, 0%) !default;
|
||||||
$banner-background: darken(#333, 5%) !default;
|
$banner-background: darken(#333, 5%) !default;
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
*/
|
*/
|
||||||
.site-header {
|
.site-header {
|
||||||
background: $header-background-color;
|
background-color: $header-background-color;
|
||||||
height: $header-height;
|
height: $header-height;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
transition: height 0.2s, text-shadow 0.2s, top 0.2s;
|
||||||
|
|
||||||
// Positioning context for the mobile navigation icon
|
// Positioning context for the mobile navigation icon
|
||||||
@include flex-sticky(0);
|
@include flex-sticky(0);
|
||||||
|
@ -16,7 +59,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-brand {
|
.site-brand {
|
||||||
@include vertical-center(absolute);
|
line-height: $header-height;
|
||||||
margin-right: 50px;
|
margin-right: 50px;
|
||||||
|
|
||||||
.site-brand-inner {
|
.site-brand-inner {
|
||||||
|
@ -68,6 +111,7 @@
|
||||||
|
|
||||||
@include media-query($on-palm) {
|
@include media-query($on-palm) {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
right: $spacing-unit / 2;
|
right: $spacing-unit / 2;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
||||||
|
@ -113,9 +157,14 @@
|
||||||
.site-footer {
|
.site-footer {
|
||||||
@include relative-font-size(0.9);
|
@include relative-font-size(0.9);
|
||||||
color: $footer-text-color;
|
color: $footer-text-color;
|
||||||
background: $footer-background-color;
|
background-color: $footer-background-color;
|
||||||
padding: $spacing-unit * 0.8 0;
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
transition: background-color 0.2s;
|
||||||
|
|
||||||
|
.site-footer-inner {
|
||||||
|
transition: border-top 0.2s;
|
||||||
|
padding: $spacing-unit * 0.8 0;
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
$a-color: invert(mix(invert($theme-color), #0030ae));
|
$a-color: invert(mix(invert($theme-color), #0030ae));
|
||||||
|
@ -184,7 +233,7 @@
|
||||||
@include relative-font-size(1.5);
|
@include relative-font-size(1.5);
|
||||||
|
|
||||||
display: block;
|
display: block;
|
||||||
font-weight: 600;
|
font-weight: $base-font-weight * 1.5;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -271,6 +320,7 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
height: $banner-height;
|
height: $banner-height;
|
||||||
background-color: $banner-background;
|
background-color: $banner-background;
|
||||||
|
transition: height 0.2s;
|
||||||
|
|
||||||
.page-banner-img {
|
.page-banner-img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -294,7 +344,10 @@
|
||||||
padding: 10px 5px;
|
padding: 10px 5px;
|
||||||
text-shadow: 1px 1px 2px #333;
|
text-shadow: 1px 1px 2px #333;
|
||||||
|
|
||||||
.page-banner-heading {
|
& > *:first-child {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
> :nth-child(1) {
|
||||||
@include relative-font-size(2.825);
|
@include relative-font-size(2.825);
|
||||||
letter-spacing: -1px;
|
letter-spacing: -1px;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
|
@ -305,14 +358,17 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@extend %post-header;
|
> :nth-child(2) {
|
||||||
|
font-weight: $base-font-weight * 1.5;
|
||||||
.post-title {
|
|
||||||
@include relative-font-size(2.925);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@include media-query($on-palm) {
|
||||||
|
height: $banner-height / 1.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Layout and sidebar
|
* Layout and sidebar
|
||||||
|
@ -326,6 +382,7 @@
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
|
transition: top 0.2s, display 0.2s;
|
||||||
|
|
||||||
@include flex-sticky($header-height + 20px);
|
@include flex-sticky($header-height + 20px);
|
||||||
|
|
||||||
|
@ -347,7 +404,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.segment-name {
|
.segment-name {
|
||||||
font-weight: 600;
|
font-weight: $base-font-weight * 1.5;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue