From 77c6d76d465f3a32fa4b4852bfc6615318542d9f Mon Sep 17 00:00:00 2001
From: Damillora <damillora@damillora.com>
Date: Sun, 11 Jul 2021 03:19:24 +0700
Subject: [PATCH] feat: new caption design

---
 src/sass/components/_pageheader.scss |  1 +
 src/sass/components/_postheader.scss | 25 ++++++++++++++++++++++++-
 src/sass/ghost.scss                  | 18 +++++++++++++++++-
 3 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/sass/components/_pageheader.scss b/src/sass/components/_pageheader.scss
index 1dd3134..deb0f07 100644
--- a/src/sass/components/_pageheader.scss
+++ b/src/sass/components/_pageheader.scss
@@ -36,6 +36,7 @@
 
   &__contents {
     z-index: 1;
+    width: 100%;
     padding-top: 3rem;
     @include screen(md) {
       padding-top: 4rem;
diff --git a/src/sass/components/_postheader.scss b/src/sass/components/_postheader.scss
index f899733..53455b3 100644
--- a/src/sass/components/_postheader.scss
+++ b/src/sass/components/_postheader.scss
@@ -1,4 +1,6 @@
 .post-header {
+  width: 100%;
+
   &__heading {
     @include my(0.5rem);
 
@@ -44,7 +46,6 @@
     flex-direction: row;
     justify-content: center;
     @include my(0.5rem);
-    @include py(0.5rem);
   }
   &__author-images {
     display: flex;
@@ -69,4 +70,26 @@
   &__social {
     color: $white;
   }
+  &__caption {
+    text-align: center;
+    font-size: 0.75rem;
+    margin-top: 0;
+    margin-bottom: 0;
+    @include screen(md) {
+      text-align: center;
+      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;
+    }
+  }
 }
diff --git a/src/sass/ghost.scss b/src/sass/ghost.scss
index 0923e69..d701434 100644
--- a/src/sass/ghost.scss
+++ b/src/sass/ghost.scss
@@ -13,6 +13,8 @@
     flex-direction: column;
     align-items: center;
     object-fit: contain;
+    position: relative;
+
     .kg-image {
       width: 100%;
     }
@@ -35,9 +37,23 @@
   }
   .kg-card figcaption {
     font-size: $text-sm;
+    background: var(--bg-color);
     color: var(--highlight-color);
-    margin-top: 0.5rem;
+    padding: 0.25rem 1rem;
+    border-radius: 1rem;
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
     text-align: center;
+
+    @include screen(md) {
+      padding: 0.5rem 2rem;
+    }
+  }
+  .kg-image-card figcaption {
+    position: absolute;
+    bottom: 2rem;
+
+    box-shadow: 0px 0px 4px 1px var(--accent-color);
   }
 
   .kg-gallery-container {