feat: new caption design

BREAKING CHANGE: please update your stylesheets accordingly

src/sass/components/_header.scss

@@ -34,6 +34,8 @@
     z-index: 1;
     width: 100%;
     height: 100%;
+    display: flex;
+    flex-direction: column;
     @include transition;
   }
 
@@ -48,12 +50,16 @@
 .header {
   display: flex;
   flex-direction: column;
-  height: 100%;
   @include transition;
 
+  @include screen(md) {
+    height: 4rem;
+    flex-direction: row;
+  }
   &__top {
     display: flex;
     flex-direction: row;
+    flex-grow: 1;
     height: 3rem;
     @include screen(md) {
       height: 4rem;
@@ -89,8 +95,10 @@
     cursor: pointer;
     text-align: center;
     white-space: nowrap;
-
     @include transition;
+    @include screen(md) {
+      display: none; 
+    }
     &:hover {
       background-color: $theme-blue;
     }

src/sass/components/_menu.scss

@@ -1,11 +1,57 @@
 .menu {
-  max-height: 0px;
   display: flex;
   flex-direction: column;
   @include transition;
-  overflow: hidden;
+
-  &.enabled {
+  @include screen(md) {
-    max-height: 100vh;
+    flex-direction: row;
+  }
+
+  // Dark mode special menu
+  &--dark-mode {
+    .menu__text {
+      display: block;
+      @include screen(md) {
+        display: none;
+      }
+    }
+    .menu__icon {
+      display: inline-block;
+    }
+  }
+
+  &--permanent-icon {
+    .menu__icon {
+      display: inline-block;
+    }
+  }
+
+  &__nav {
+    display: flex;
+    flex-direction: column;
+
+    @include screen(md) {
+      flex-direction: row;
+    }
+  }
+  &__nav-main {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow-y: hidden;
+    @include transition;
+
+    @include screen(md) {
+      flex-direction: row;
+    }
+
+    &.hidden {
+      height: 0;
+
+      @include screen(md) {
+        height: 100%;
+      }
+    }
   }
   &__item {
     color: $white;
@@ -16,6 +62,10 @@
     cursor: pointer;
     @include transition;
 
+    @include screen(md) {
+      height: 4rem;
+    }
+
     &:hover {
       background-color: $theme-blue;
     }
@@ -42,6 +92,10 @@
     text-align: center;
     @include px(0.5rem);
     @include py(0.75rem);
+    
+    @include screen(md) {
+      display: none;
+    }
   }
   &__text {
     display: inline-block;
@@ -94,4 +148,4 @@
       text-decoration: underline;
     }
   }
-}
+}

src/sass/components/_pageheader.scss

@@ -36,6 +36,7 @@
 
   &__contents {
     z-index: 1;
+    width: 100%;
     padding-top: 3rem;
     @include screen(md) {
       padding-top: 4rem;

src/sass/components/_postheader.scss

@@ -1,4 +1,6 @@
 .post-header {
+  width: 100%;
+
   &__heading {
     @include my(0.5rem);
 
@@ -8,7 +10,7 @@
       align-items: center;
     }
     &--tag-text {
-      margin-left: 0.5rem;
+      margin-right: 0.5rem;
       color: $white;
     }
     &--tag-color {
@@ -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;
+    }
+  }
 }

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 {
@@ -131,3 +147,16 @@
     white-space: nowrap;
   }
 }
+
+.site-header {
+  &.search-enabled {
+    height: 100%;
+  }
+
+  &.search-enabled &__inner {
+    background: rgba(0, 0, 0, 0.5);
+  }
+  &.search-detached &__inner {
+    background: rgba(0, 0, 0, 0.5);
+  }
+}