feat: add favicon and header logo

_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

_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 -%}

_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>

_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;
     }
   }