From 12329cb4a8ccd1589eb8879bced85f848b5e3896 Mon Sep 17 00:00:00 2001
From: Damillora <damillora@damillora.com>
Date: Sun, 11 Jul 2021 04:10:22 +0700
Subject: [PATCH] feat: new post design

---
 src/sass/components/_header.scss     |  8 ++--
 src/sass/components/_pageheader.scss |  8 ++++
 src/sass/components/_postheader.scss | 59 ++++++++++++++++++++--------
 src/sass/components/_postlist.scss   |  2 +-
 src/sass/components/_tag.scss        |  2 +-
 src/sass/ghost.scss                  |  7 +++-
 6 files changed, 63 insertions(+), 23 deletions(-)

diff --git a/src/sass/components/_header.scss b/src/sass/components/_header.scss
index 46d2c5f..7ba2bd1 100644
--- a/src/sass/components/_header.scss
+++ b/src/sass/components/_header.scss
@@ -21,10 +21,10 @@
 
     opacity: 0%;
     top: -23vh;
-    &--enabled {
-      opacity: 100%;
-      top: 0;
-    }
+  }
+  &.enabled &__background {
+    opacity: 100%;
+    top: 0;
   }
   &__overlay {
     background-color: rgba(0, 0, 0, 0.5);
diff --git a/src/sass/components/_pageheader.scss b/src/sass/components/_pageheader.scss
index deb0f07..e8042bb 100644
--- a/src/sass/components/_pageheader.scss
+++ b/src/sass/components/_pageheader.scss
@@ -10,6 +10,14 @@
   display: flex;
   align-items: flex-end;
 
+  &--short {
+    min-height: 3rem;
+
+    @include screen(md) {
+      min-height: 4rem;
+    }
+  }
+
   &__heading {
     color: $white;
     @include my(0.5rem);
diff --git a/src/sass/components/_postheader.scss b/src/sass/components/_postheader.scss
index 53455b3..139c103 100644
--- a/src/sass/components/_postheader.scss
+++ b/src/sass/components/_postheader.scss
@@ -1,9 +1,11 @@
 .post-header {
   width: 100%;
+  padding-top: 3rem;
+  padding-bottom: 1rem;
 
   &__heading {
     @include my(0.5rem);
-
+    
     &--tag {
       display: flex;
       flex-direction: row;
@@ -11,12 +13,12 @@
     }
     &--tag-text {
       margin-right: 0.5rem;
-      color: $white;
     }
     &--tag-color {
       display: inline-block;
       border-radius: 9999px;
       vertical-align: text-bottom;
+      margin-right: 0.5rem;
       height: 4rem;
       width: 4rem;
     }
@@ -37,7 +39,6 @@
     @include my(0.5rem);
   }
   &__title {
-    color: $white;
     @include my(0.5rem);
   }
   &__author-list {
@@ -45,7 +46,7 @@
     display: flex;
     flex-direction: row;
     justify-content: center;
-    @include my(0.5rem);
+    @include my(1rem);
   }
   &__author-images {
     display: flex;
@@ -64,9 +65,6 @@
     flex-grow: 1;
     justify-content: center;
   }
-  &__author-name {
-    color: $white;
-  }
   &__social {
     color: $white;
   }
@@ -80,16 +78,45 @@
       font-size: 0.875rem;
     }
   }
-  &__caption-text {
-    background: var(--bg-color);
-    color: var(--highlight-color);
-    padding: 0.25rem 1rem;
-    border-radius: 1rem;
-    font-size: $text-sm;
-    box-shadow: 0px 0px 4px 1px var(--accent-color);
 
-    @include screen(md) {
-      padding: 0.5rem 2rem;
+  &__featured-image {
+    @include my(2rem);
+    @include mx(0);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    object-fit: contain;
+    position: relative;
+
+    img {
+      min-width: 100vw;
+      object-fit: cover;
+      height: 50vh;
+      @include screen(md) {
+        height: 70vh;
+      }
+    }
+
+    figcaption {
+      font-size: $text-sm;
+      background: var(--bg-color);
+      color: var(--highlight-color);
+      padding: 0.25rem 1rem;
+      border-radius: 1rem;
+      margin-left: 0.5rem;
+      margin-right: 0.5rem;
+      text-align: center;
+      position: absolute;
+      bottom: 1rem;
+      box-shadow: 0px 0px 4px 1px var(--accent-color);
+      @include transition;
+  
+      @include screen(md) {
+        padding: 0.5rem 2rem;
+      }
+    }
+    &:hover figcaption {
+      transform: translateY(100%) translateY(2rem);
     }
   }
 }
diff --git a/src/sass/components/_postlist.scss b/src/sass/components/_postlist.scss
index 77b38a3..adaa6c7 100644
--- a/src/sass/components/_postlist.scss
+++ b/src/sass/components/_postlist.scss
@@ -1,5 +1,5 @@
 .post-list {
-    @include my(2rem);
+    @include my(1rem);
     display: grid;
     grid-template-columns: 1fr;
     row-gap: 1rem;
diff --git a/src/sass/components/_tag.scss b/src/sass/components/_tag.scss
index d83d909..0251cac 100644
--- a/src/sass/components/_tag.scss
+++ b/src/sass/components/_tag.scss
@@ -12,7 +12,7 @@
       text-decoration: underline;
     }
     &--post-header {
-      color: $white;
+      color: var(--text-color);
     }
   }
   &__paywall {
diff --git a/src/sass/ghost.scss b/src/sass/ghost.scss
index a944b4c..67d75c6 100644
--- a/src/sass/ghost.scss
+++ b/src/sass/ghost.scss
@@ -38,7 +38,7 @@
       }
     }
     &:hover figcaption {
-      transform: translateY(150%);
+      transform: translateY(100%) translateY(2rem);
     }
   }
   .kg-width-wide .kg-image {
@@ -150,10 +150,15 @@
 }
 
 .site-header {
+  
   &.search-enabled {
     height: 100%;
   }
 
+  &.search-enabled &__background {
+    opacity: 100%;
+    top: 0;
+  }
   &.search-enabled &__inner {
     background: rgba(0, 0, 0, 0.5);
   }