update: adjust header brand favicon, banner, etc

2 files changed, 49 insertions, 42 deletions

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;