From 3359eb9575b6115c4b4cc53d7ef113504c89f908 Mon Sep 17 00:00:00 2001
From: Damillora <damillora@damillora.com>
Date: Fri, 16 Apr 2021 20:42:13 +0700
Subject: [PATCH] fix(shian): only fix height of the title row of the header

---
 src/sass/components/_header.scss | 205 +++++++++++++++----------------
 1 file changed, 102 insertions(+), 103 deletions(-)

diff --git a/src/sass/components/_header.scss b/src/sass/components/_header.scss
index c7b67b7..92fac7c 100644
--- a/src/sass/components/_header.scss
+++ b/src/sass/components/_header.scss
@@ -1,122 +1,121 @@
-
 .site-header {
-    position: fixed;
-    z-index: 10;
-    height: 3rem;
-    width: 100%;
-    overflow: hidden;
+  position: fixed;
+  z-index: 10;
+  height: 3rem;
+  width: 100%;
+  overflow: hidden;
+  @include transition;
+  &.enabled {
+    height: 100vh;
+  }
+  @include screen(md) {
+    height: 4rem;
+  }
+
+  &__background {
+    z-index: -1;
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
     @include transition;
-    &.enabled {
-        height: 100vh;
-    }
-    @include screen(md) {
-        height: 4rem;
-    }
 
-    &__background {
-        z-index: -1;
-        width: 100vw;
-        height: 100vh;
-        position: absolute;
-        @include transition;
+    opacity: 0%;
+    top: -23vh;
+    &--enabled {
+      opacity: 100%;
+      top: 0;
+    }
+  }
+  &__overlay {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
 
-        opacity: 0%;
-        top: -23vh;
-        &--enabled {
-            opacity: 100%;
-            top: 0;
-        }
-    }
-    &__overlay {
-        background-color: rgba(0,0,0,0.5);
-    }
+  &__inner {
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    @include transition;
+  }
 
-    &__inner {
-        z-index: 1;
-        width: 100%;
-        height: 100%;
-        @include transition;
-    }
-
-    &.enabled &__inner {
-       background: rgba(0,0,0,0.5);
-    }
-    &.detached &__inner {
-       background: rgba(0,0,0,0.5);
-    }
+  &.enabled &__inner {
+    background: rgba(0, 0, 0, 0.5);
+  }
+  &.detached &__inner {
+    background: rgba(0, 0, 0, 0.5);
+  }
 }
 
 .header {
+  display: flex;
+  flex-direction: column;
+  @include transition;
+  height: 100%;
+
+  &__top {
     display: flex;
-    flex-direction: column;
-    @include transition;
+    flex-direction: row;
     height: 3rem;
     @include screen(md) {
-        height: 4rem;
+      height: 4rem;
     }
+  }
 
-    &__top {
-        display: flex;
-        flex-direction: row;
-        height: 100%;
+  &__title {
+    flex-grow: 1;
+    @include transition;
+    a {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      @include py(0.5rem);
+      @include screen(md) {
+        @include py(1rem);
+      }
+      color: $white;
+      font-size: $text-lg;
+      padding-left: 1rem;
+      height: 100%;
     }
+    &:hover {
+      background-color: $theme-blue;
+    }
+  }
 
-    &__title {
-        flex-grow: 1;
-        @include transition;
-        a {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            @include py(0.5rem);
-            @include screen(md) {
-                @include py(1rem);
-            }
-            color: $white;
-            font-size: $text-lg;
-            padding-left: 1rem;
-            height: 100%;
-        }
-        &:hover {
-            background-color: $theme-blue;
-        }
+  &__nav-button {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 100%;
+    position: relative;
+    cursor: pointer;
+    padding: 0.5rem;
+    @include screen(md) {
+      @include py(1rem);
     }
-
-    &__nav-button {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        height: 100%;
-        position: relative;
-        cursor: pointer;
-        padding: 0.5rem;
-        @include screen(md) {
-            @include py(1rem);
-        }
-        text-align: center;
-        white-space: nowrap;
-        @include transition;
-        &:hover {
-            background-color: $theme-blue;
-        }
-        p {
-            color: $white;
-            margin-right: 0.5rem;
-            display: none;
-            @include screen(md) {
-                display: block;
-            }
-        }
+    text-align: center;
+    white-space: nowrap;
+    @include transition;
+    &:hover {
+      background-color: $theme-blue;
     }
-    &__icon {
-        width: 3rem;
-        color: $white;
-        display: inline-block;
-        @include px(0.50rem);
-        vertical-align: middle;
-        // @include py(0.25rem);
-        // @include screen(md) {
-        //     @include py(0.75rem);
-        // }
+    p {
+      color: $white;
+      margin-right: 0.5rem;
+      display: none;
+      @include screen(md) {
+        display: block;
+      }
     }
+  }
+  &__icon {
+    width: 3rem;
+    color: $white;
+    display: inline-block;
+    @include px(0.5rem);
+    vertical-align: middle;
+    // @include py(0.25rem);
+    // @include screen(md) {
+    //     @include py(0.75rem);
+    // }
+  }
 }