From af1450d90bb8f6ab8c8693ce9434783578789b25 Mon Sep 17 00:00:00 2001
From: Jeffrey Tse <jeffreytse.mail@gmail.com>
Date: Fri, 13 Sep 2019 17:26:19 +0800
Subject: feat: add favicon and header logo
---
_config.yml | 1 +
_includes/head.html | 3 +++
_includes/views/site-brand.html | 8 +++++++-
_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;
}
}
--
cgit v1.2.3