From c4540bfe26a7e0dce0d06e85ecb7bfc6622767b9 Mon Sep 17 00:00:00 2001
From: Damillora <damillora@damillora.com>
Date: Thu, 22 Apr 2021 16:40:07 +0700
Subject: [PATCH] feat(shian): dynamic page header size depending on content

---
 src/sass/common/_base.scss           |  1 +
 src/sass/components/_pageheader.scss | 81 +++++++++++++++++-----------
 2 files changed, 51 insertions(+), 31 deletions(-)

diff --git a/src/sass/common/_base.scss b/src/sass/common/_base.scss
index 22cb41a..daab1cb 100644
--- a/src/sass/common/_base.scss
+++ b/src/sass/common/_base.scss
@@ -75,6 +75,7 @@ body {
   h5,
   h6 {
     font-weight: 300;
+    color: var(--accent-color);
   }
   h1 {
     font-size: $text-4xl;
diff --git a/src/sass/components/_pageheader.scss b/src/sass/components/_pageheader.scss
index 7ecf8b4..3c407f0 100644
--- a/src/sass/components/_pageheader.scss
+++ b/src/sass/components/_pageheader.scss
@@ -1,37 +1,56 @@
 .page-header {
-    position: relative;
+  position: relative;
+  width: 100%;
+  min-height: 50vh;
+  font-weight: 300;
+  overflow: hidden;
+  @include screen(md) {
+    min-height: 70vh;
+  }
+  display: flex;
+  align-items: flex-end;
+
+  &__background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: -10;
     width: 100%;
-    min-height: 200px;
-    height: 70vh;
+    height: 100%;
+  }
+  &__overlay {
+    z-index: -10;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  &__contents {
+    z-index: 1;
+    padding-top: 3rem;
+    @include screen(md) {
+      padding-top: 4rem;
+    }
     color: $white;
-    font-weight: 300;
-    min-height: 300px;
-    height: 70vh;
+    a,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      color: $white;
+    }
+  }
 
-    &__background {
-        width: 100%;
-        height: 100%;
-    }
-    &__overlay {
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0,0,0,0.5);
-    }
-
-    &__contents {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        @include py(0.5rem);
-        a {
-            color: $white;
-        }
-    }
-
-    &__icon {
-        width: 6rem;
-        height: 6rem;
+  &__icon {
+    width: 3rem;
+    height: 3rem;
+    @include screen(md) {
+      width: 4rem;
+      height: 4rem;
     }
+  }
 }
-