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 @@
{%- seo -%}
+ {%- if site.favicon -%}
+
+ {%- endif -%}
{%- 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 @@
-{{ site.title | escape }}
+
+ {%- if site.favicon -%}
+
+ {%- endif -%}
+ {{ site.title | escape }}
+
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;
}
}