diff options
author | Jeffrey Tse <jeffreytse.mail@gmail.com> | 2019-09-13 17:26:19 +0800 |
---|---|---|
committer | Jeffrey Tse <jeffreytse.mail@gmail.com> | 2019-09-13 17:26:19 +0800 |
commit | af1450d90bb8f6ab8c8693ce9434783578789b25 (patch) | |
tree | 4cca957a1f7d3f8f2aa22d8ef11146501f461f58 | |
parent | 9241888333d7c0bce62c292a97373b8c26a714d4 (diff) |
feat: add favicon and header logo
-rw-r--r-- | _config.yml | 1 | ||||
-rw-r--r-- | _includes/head.html | 3 | ||||
-rw-r--r-- | _includes/views/site-brand.html | 8 | ||||
-rw-r--r-- | _sass/yat/_layout.scss | 23 |
4 files changed, 31 insertions, 4 deletions
diff --git a/_config.yml b/_config.yml index 43d288c..692cc8c 100644 --- a/_config.yml +++ b/_config.yml @@ -15,6 +15,7 @@ description: >- # this means to ignore newlines until "baseurl:" baseurl: "" # the subpath of your site, e.g. /blog url: "" # the base hostname & protocol for your site, e.g. http://example.com +favicon: "" # the favicon for your site # Yat date format # refer to https://shopify.github.io/liquid/filters/date/ if you want to customize this diff --git a/_includes/head.html b/_includes/head.html index 68a2ba2..ec6ab58 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -4,6 +4,9 @@ <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 -%} diff --git a/_includes/views/site-brand.html b/_includes/views/site-brand.html index 5652aff..cbb3b6c 100644 --- a/_includes/views/site-brand.html +++ b/_includes/views/site-brand.html @@ -1 +1,7 @@ -<a class="site-title" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a> +<a class="site-title" rel="author" href="{{ "/" | relative_url }}"> + {%- if site.favicon -%} + <img class="site-favicon" title="{{ site.title | escape }}" src="{{ + site.favicon }}"> + {%- endif -%} + {{ site.title | escape }} +</a> diff --git a/_sass/yat/_layout.scss b/_sass/yat/_layout.scss index 4d4eeae..3db7dde 100644 --- a/_sass/yat/_layout.scss +++ b/_sass/yat/_layout.scss @@ -16,17 +16,34 @@ } .site-brand { + @extend %vertical-center; + float: left; + height: 100%; + max-height: 100%; 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 { - @include relative-font-size(1.625); + @include relative-font-size(1.125); font-weight: $base-font-weight; line-height: $header-height; + text-shadow: 0 0 3px #080808d1; letter-spacing: -1px; - &, - &:visited { + &, &:visited { color: $header-text-color; } } |