diff options
| -rw-r--r-- | _includes/head.html | 4 | ||||
| -rw-r--r-- | _includes/views/banner.html | 18 | ||||
| -rw-r--r-- | _includes/views/site-brand.html | 7 | ||||
| -rw-r--r-- | _sass/yat.scss | 2 | ||||
| -rw-r--r-- | _sass/yat/_base.scss | 39 | ||||
| -rw-r--r-- | _sass/yat/_layout.scss | 52 | ||||
| -rw-r--r-- | assets/main.scss | 4 | ||||
| -rw-r--r-- | index.html | 3 |
8 files changed, 74 insertions, 55 deletions
diff --git a/_includes/head.html b/_includes/head.html index 03d16ba..770a7bf 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -4,10 +4,8 @@ <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="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 -%} {%- if jekyll.environment == 'production' and site.google_analytics -%} diff --git a/_includes/views/banner.html b/_includes/views/banner.html index 7878997..baa8465 100644 --- a/_includes/views/banner.html +++ b/_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 -%} diff --git a/_includes/views/site-brand.html b/_includes/views/site-brand.html index cbb3b6c..e1ad4a8 100644 --- a/_includes/views/site-brand.html +++ b/_includes/views/site-brand.html @@ -1,7 +1,4 @@ -<a class="site-title" rel="author" href="{{ "/" | relative_url }}"> - {%- if site.favicon -%} - <img class="site-favicon" title="{{ site.title | escape }}" src="{{ - site.favicon }}"> - {%- endif -%} +<a class="site-brand-inner" rel="author" href="{{ "/" | relative_url }}"> + <img class="site-favicon" title="{{ site.title | escape }}" src="{{ site.favicon }}" onerror="this.style.display='none'"> {{ site.title | escape }} </a> diff --git a/_sass/yat.scss b/_sass/yat.scss index 52162d7..c36c55c 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: 350px !default; +$banner-height: 380px !default; $banner-text-color: lighten($white-color, 0%) !default; $banner-background: darken(#333, 5%) !default; diff --git a/_sass/yat/_base.scss b/_sass/yat/_base.scss index 15eacde..e92c561 100644 --- a/_sass/yat/_base.scss +++ b/_sass/yat/_base.scss @@ -227,15 +227,6 @@ table { } /** - * Vertical center - */ -%vertical-center { - position: absolute; - top: 50%; - transform: translateY(-50%); -} - -/** * Flex layout */ %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; +} + diff --git a/_sass/yat/_layout.scss b/_sass/yat/_layout.scss index 3db7dde..757593f 100644 --- a/_sass/yat/_layout.scss +++ b/_sass/yat/_layout.scss @@ -16,36 +16,30 @@ } .site-brand { - @extend %vertical-center; - - float: left; - height: 100%; - max-height: 100%; + @include vertical-center(absolute); margin-right: 50px; - .site-favicon { - 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 { + .site-brand-inner { @include relative-font-size(1.125); font-weight: $base-font-weight; - line-height: $header-height; - text-shadow: 0 0 3px #080808d1; + filter: drop-shadow(0 0 2px #08080880); + 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; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - height: 100%; - max-width: 1000%; - background-size: cover; - background-position: center center; - overflow: hidden; + @include center-image; } } @@ -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; diff --git a/assets/main.scss b/assets/main.scss index 393c8e9..112a9ef 100644 --- a/assets/main.scss +++ b/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"; @@ -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 --- |