fix: spacing

feat: new post design
feat: animate caption
2021-07-11 04:32:15 +07:00 · 2021-07-11 04:23:40 +07:00 · 2021-07-11 03:35:31 +07:00 · 2021-07-11 03:19:24 +07:00 · 2021-07-11 01:01:07 +07:00 · 2021-07-11 00:52:36 +07:00
21 changed files with 10991 additions and 1101 deletions
--- a/gulpfile.js
+++ b/gulpfile.js
@ -1,6 +1,6 @@
 const {series, watch, src, dest, parallel} = require('gulp');

-const sass = require('gulp-sass');
+const sass = require('gulp-sass')(require('sass'));
 const livereload = require('gulp-livereload');
 const zip = require('gulp-zip');
 const concat = require('gulp-concat');
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -11,7 +11,9 @@
    "dev": "gulp dev",
    "semantic-release": "semantic-release"
  },
-  "dependencies": {},
+  "dependencies": {
+    "sass": "^1.35.1"
+  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^1.3.0",
    "autoprefixer": "^10.2.1",
@ -20,12 +22,12 @@
    "gulp-concat": "^2.6.1",
    "gulp-livereload": "^4.0.2",
    "gulp-postcss": "^9.0.0",
-    "gulp-sass": "^4.1.0",
+    "gulp-sass": "5",
    "gulp-uglify": "^3.0.2",
    "gulp-zip": "^5.0.1",
    "postcss": "^8.2.3",
-    "typeface-exo-2": "^0.0.72",
-    "semantic-release": "^17.4.2"
+    "semantic-release": "^17.4.2",
+    "typeface-exo-2": "^0.0.72"
  },
  "files": [
    "dist/**"
@ -35,6 +37,8 @@
    "url": "https://github.com/Damillora/Shian.git"
  },
  "release": {
-    "branches": ["main"]
+    "branches": [
+      "main"
+    ]
  }
 }
--- a/src/sass/app.scss
+++ b/src/sass/app.scss
@ -19,3 +19,6 @@
@import './components/gameitem';
@import './components/copyarea';
@import './components/floatingyuriko';
+@import './components/tag';
+@import './components/forms';
+@import './components/button';
--- a/src/sass/common/_base.scss
+++ b/src/sass/common/_base.scss
@ -38,7 +38,9 @@ body {
 }

 .main {
-  padding: 1rem;
+  margin: 1rem;
+  @include px(1rem);
+  
  @include screen(sm) {
    @include px(2rem);
  }
@ -58,76 +60,75 @@ body {
 .main {
  margin-left: auto;
  margin-right: auto;
+}
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @include my(1rem);
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 300;
+  color: var(--accent-color);
+}
+h1 {
+  font-size: $text-4xl;
+}
+h2 {
+  font-size: $text-3xl;
+}
+h3 {
+  font-size: $text-2xl;
+}
+h4 {
+  font-size: $text-xl;
+}
+h5 {
+  font-size: $text-lg;
+}
+h6 {
+  font-size: $text-base;
+}

-  p,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    @include my(1rem);
+a {
+  color: var(--accent-color);
+  &:hover {
+    text-decoration: underline;
  }
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-weight: 300;
-    color: var(--accent-color);
-  }
-  h1 {
-    font-size: $text-4xl;
-  }
-  h2 {
-    font-size: $text-3xl;
-  }
-  h3 {
-    font-size: $text-2xl;
-  }
-  h4 {
-    font-size: $text-xl;
-  }
-  h5 {
-    font-size: $text-lg;
-  }
-  h6 {
-    font-size: $text-base;
-  }
-
-  a {
-    color: var(--accent-color);
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-  ul {
-    list-style-type: disc;
-    li p {
-      @include my(0rem);
-    }
-  }
-  ol {
-    list-style-type: decimal;
-  }
-  code {
-    background-color: var(--accent-bg-color);
-    color: var(--accent-color);
-    white-space: pre-wrap;
-  }
-  blockquote {
-    border-left: 0.5rem solid var(--accent-color);
-    @include my(2rem);
-    padding: 0.5rem 0 0.5rem 2rem;
-  }
-  pre {
-    background: var(--accent-bg-color);
-    color: var(--accent-color);
-    padding: 0.5rem;
-    border: 1px solid var(--accent-color);
+}
+ul {
+  list-style-type: disc;
+  li p {
+    @include my(0rem);
  }
 }
+ol {
+  list-style-type: decimal;
+}
+code {
+  background-color: var(--accent-bg-color);
+  color: var(--accent-color);
+  white-space: pre-wrap;
+}
+blockquote {
+  border-left: 0.5rem solid var(--accent-color);
+  @include my(2rem);
+  padding: 0.5rem 0 0.5rem 2rem;
+}
+pre {
+  background: var(--accent-bg-color);
+  color: var(--accent-color);
+  padding: 0.5rem;
+  border: 1px solid var(--accent-color);
+}

 .card-list {
  display: flex;
--- a/src/sass/components/_button.scss
+++ b/src/sass/components/_button.scss
@ -0,0 +1,12 @@
+.button {
+  border: solid 2px var(--accent-color);
+  background: var(--accent-color);
+  color: var(--accent-bg-color);
+  padding: 0.25rem 1rem;
+  font-size: 1.125rem;
+  @include transition;
+}
+.button:hover {
+  background: var(--highlight-bg-color);
+  color: var(--highlight-color);
+}
--- a/src/sass/components/_floatingyuriko.scss
+++ b/src/sass/components/_floatingyuriko.scss
@ -1,12 +1,12 @@
 .floating-yuriko {
-    position: fixed;
-    right: 1rem;
-    bottom: 1rem;
-    margin-bottom: 0px;
-    cursor: pointer;
-    img {
-        height: 20vh;
-    }
+  position: fixed;
+  right: 1rem;
+  bottom: 1rem;
+  margin-bottom: 0px;
+  cursor: pointer;
+  &__image {
+    height: 20vh;
+  }
 }

 .hvr-float {
@ -22,7 +22,9 @@
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
 }
-.hvr-float:hover, .hvr-float:focus, .hvr-float:active {
+.hvr-float:hover,
+.hvr-float:focus,
+.hvr-float:active {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
-}
+}
--- a/src/sass/components/_forms.scss
+++ b/src/sass/components/_forms.scss
@ -0,0 +1,12 @@
+.input {
+  border: solid 1px var(--accent-color);
+  padding: 0.5rem;
+  font-size: 1rem;
+  width: 100%;
+  border-radius: 0.25rem;
+  resize: none;
+}
+.input:focus-within {
+  outline: none;
+}
+
--- a/src/sass/components/_gallery.scss
+++ b/src/sass/components/_gallery.scss
@ -27,15 +27,15 @@
        justify-content: center;
        align-items: center;

-        &.hidden {
+        &--hidden {
            height: 0;
            opacity: 0;
            visibility: hidden;
        }

-        img {
-            max-height: 100%;
-        }
+    }
+    &__popup-image {
+        max-height: 100%;
    }

    &__exit {
--- a/src/sass/components/_gameitem.scss
+++ b/src/sass/components/_gameitem.scss
@ -1,38 +1,38 @@
 .game-item {
-    padding: 0.25rem 1rem;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    @include transition;
-    
-    @include screen(lg) {
-        flex-direction: row;
-    }
-    &:hover {
-        background-color: var(--highlight-bg-color);
-    }
-    
-    &__title {
-        flex-grow: 1;
-    }
-    &__caption {
-        font-size: $text-2xl;
-        @include my(0.25rem);
-    }
-    
-    &__content {
-        @include my(0.5rem);
-        display: block;
+  padding: 0.25rem 1rem;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  @include transition;

-        p {
-            @include my(0.25rem);
-            white-space: nowrap;
-            text-align: right;
-        }
-        flex-shrink: 1;
-    }
-    &__icon {
-        padding: 0.5rem;
-        vertical-align: middle;
-    }
-}
+  @include screen(lg) {
+    flex-direction: row;
+  }
+  &:hover {
+    background-color: var(--highlight-bg-color);
+  }
+
+  &__title {
+    flex-grow: 1;
+  }
+  &__caption {
+    font-size: $text-2xl;
+    @include my(0.25rem);
+  }
+
+  &__content {
+    @include my(0.5rem);
+    display: block;
+
+    flex-shrink: 1;
+  }
+  &__text {
+    @include my(0.25rem);
+    white-space: nowrap;
+    text-align: right;
+  }
+  &__icon {
+    padding: 0.5rem;
+    vertical-align: middle;
+  }
+}
--- a/src/sass/components/_header.scss
+++ b/src/sass/components/_header.scss
@ -6,7 +6,7 @@
  overflow: hidden;
  @include transition;
  &.enabled {
-    height: 100vh;
+    height: 100%;
  }
  @include screen(md) {
    height: 4rem;
@ -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);
@ -34,6 +34,8 @@
    z-index: 1;
    width: 100%;
    height: 100%;
+    display: flex;
+    flex-direction: column;
    @include transition;
  }

@ -50,9 +52,14 @@
  flex-direction: column;
  @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;
@ -60,23 +67,22 @@
  }

  &__title {
+    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%;
    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;
+      text-decoration: none;
    }
  }

@ -89,18 +95,20 @@
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
-    
    @include transition;
+    @include screen(md) {
+      display: none; 
+    }
    &:hover {
      background-color: $theme-blue;
    }
-    p {
-      color: $white;
-      margin-right: 0.5rem;
-      display: none;
-      @include screen(md) {
-        display: block;
-      }
+  }
+  &__nav-button-text {
+    color: $white;
+    margin-right: 0.5rem;
+    display: none;
+    @include screen(md) {
+      display: block;
    }
  }
  &__icon {
--- a/src/sass/components/_mediaitem.scss
+++ b/src/sass/components/_mediaitem.scss
@ -1,24 +1,23 @@
 .media-item {
-    padding: 0.25rem 1rem;
+  padding: 0.25rem 1rem;
+  width: 100%;
+  @include transition;
+
+  &:hover {
+    background-color: var(--highlight-bg-color);
+  }
+
+  &__caption {
+    font-size: $text-2xl;
+    @include my(0.25rem);
+  }
+
+  &__content {
    width: 100%;
-    @include transition;
-
-    &:hover {
-        background-color: var(--highlight-bg-color);
-    }
-    
-    &__caption {
-        font-size: $text-2xl;
-        @include my(0.25rem);
-    }
-    
-    &__content {
-        width: 100%;
-        @include my(0.5rem);
-        display: block;
-
-        p {
-            @include my(0.25rem);
-        }
-    }
-}
+    @include my(0.5rem);
+    display: block;
+  }
+  &__text {
+    @include my(0.25rem);
+  }
+}
--- a/src/sass/components/_menu.scss
+++ b/src/sass/components/_menu.scss
@ -1,10 +1,57 @@
 .menu {
-  max-height: 0px;
-  display: block;
+  display: flex;
+  flex-direction: column;
  @include transition;
-  overflow: hidden;
-  &.enabled {
-    max-height: 100vh;
+
+  @include screen(md) {
+    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;
@ -14,36 +61,91 @@
    align-items: center;
    cursor: pointer;
    @include transition;
-    
+
+    @include screen(md) {
+      height: 4rem;
+    }
+
    &:hover {
      background-color: $theme-blue;
    }

-    a {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      width: 100%;
-      height: 100%;
-    }
-    i {
-      display: inline-block;
-      width: 4rem;
-      height: 3rem;
-      color: $white;
-      text-align: center;
-      @include px(0.5rem);
-      @include py(0.75rem);
-    }
-    p {
-      display: inline-block;
-      flex-grow: 1;
-      @include px(1rem);
+    &--hidden {
+      max-height: 0;
+      overflow: hidden;
+      @include transition;
    }
  }
+
+  &__link {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+  }
+  &__icon {
+    display: inline-block;
+    width: 4rem;
+    height: 3rem;
+    color: $white;
+    text-align: center;
+    @include px(0.5rem);
+    @include py(0.75rem);
+    
+    @include screen(md) {
+      display: none;
+    }
+  }
+  &__text {
+    display: inline-block;
+    flex-grow: 1;
+    color: $white;
+    @include px(1rem);
+  }
+
  &__separator {
    margin-left: 5rem;
    margin-right: 4rem;
    border-top: 0.125rem solid $white;
  }
-}
+
+  &__search-input {
+    display: inline-block;
+    flex-grow: 1;
+    color: $white;
+    @include px(0.5rem);
+    @include mx(0.5rem);
+    @include py(0.25rem);
+    appearance: none;
+    background-color: transparent;
+    outline: none;
+    border-bottom: 1px solid $white;
+    &:focus-visible {
+      outline: none;
+      border-bottom: 1px solid $white;
+    }
+  }
+  &__search-results {
+    flex-grow: 1;
+    overflow-y: scroll;
+  }
+  &__search-result {
+    color: $white;
+    display: block;
+    align-items: center;
+    @include px(2rem);
+    @include py(1rem);
+    @include transition;
+
+    &:hover {
+      background-color: $theme-blue;
+    }
+  }
+  &__search-title {
+    color: $white;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
--- a/src/sass/components/_pageheader.scss
+++ b/src/sass/components/_pageheader.scss
@ -10,6 +10,21 @@
  display: flex;
  align-items: flex-end;

+  &--short {
+    min-height: 3rem;
+
+    @include screen(md) {
+      min-height: 4rem;
+    }
+  }
+
+  &__heading {
+    color: $white;
+    @include my(0.5rem);
+  }
+  &__text {
+    @include my(0.5rem);
+  }
  &__background {
    position: absolute;
    top: 0;
@ -29,20 +44,12 @@

  &__contents {
    z-index: 1;
+    width: 100%;
    padding-top: 3rem;
    @include screen(md) {
      padding-top: 4rem;
    }
    color: $white;
-    a,
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      color: $white;
-    }
  }

  &__icon {
--- a/src/sass/components/_postcard.scss
+++ b/src/sass/components/_postcard.scss
@ -18,13 +18,13 @@
      min-width: 300px;
      max-width: 450px;
    }
-    img {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-    }
+  }
+  &__image-inner {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
  }
  &__image::after {
    display: block;
@ -36,32 +36,30 @@
      padding-left: 1rem;
    }
  }
-  
+
  &__tag-row {
    padding-top: 1rem;
    @include screen(md) {
      padding-top: 0;
    }
-
-    * {
-      display: inline-block;
-      padding-right: 0.25rem;
-    }
  }
  &__tag-color {
    display: inline-block;
+    padding-right: 0.25rem;
    border-radius: 9999px;
    vertical-align: text-bottom;
    height: 1rem;
    width: 1rem;
  }
  &__tag-name {
+    display: inline-block;
+    padding-right: 0.25rem;
    font-size: $text-sm;
-    &:hover {
-      text-decoration: underline;
-    }
+    color: var(--text-color);
  }
  &__paywall {
+    display: inline-block;
+    padding-right: 0.25rem;
    font-size: $text-sm;
    &:hover {
      text-decoration: underline;
@ -74,6 +72,7 @@
    color: var(--accent-color);
    font-size: $text-xl;
    font-weight: 300;
+    @include my(0rem);

    @include screen(md) {
      font-size: $text-2xl;
@ -84,10 +83,12 @@
  }

  &__time {
+    @include my(0rem);
    font-size: $text-xs;
  }

  &__author-list {
+    @include my(0rem);
    font-size: $text-xs;
    display: flex;
    flex-direction: row;
@ -98,30 +99,25 @@
  &__author-images {
    display: flex;
    flex-direction: row;
-  }
-  &__author-image {
-    height: 2rem;
    margin-left: 0.25rem;
    margin-right: 0.75rem;
-    
-    img {
-      border-radius: 9999px;
-      height: 100%;
-    }
+  }
+  &__author-image {
+    border-radius: 9999px;
+    height: 2rem;
  }
  &__author-names {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
-
-    a:hover {
-      text-decoration: underline;
-    }
+  }
+  &__author-name {
+    color: var(--text-color);
  }
  &__excerpt {
-      margin-top: 0.5rem;
-      margin-bottom: 1rem;
-      font-size: $text-sm;
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
+    font-size: $text-sm;
  }
 }
--- a/src/sass/components/_postheader.scss
+++ b/src/sass/components/_postheader.scss
@ -1,95 +1,123 @@
 .post-header {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p {
+  width: 100%;
+  margin-top: 3rem;
+  margin-bottom: 1rem;
+
+  &__heading {
    @include my(0.5rem);
+    
+    &--tag {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+    &--tag-text {
+      margin-right: 0.5rem;
+    }
+    &--tag-color {
+      display: inline-block;
+      border-radius: 9999px;
+      vertical-align: text-bottom;
+      margin-right: 0.5rem;
+      height: 4rem;
+      width: 4rem;
+    }
  }
  &__tag-row {
    padding-top: 1rem;
    @include screen(md) {
      padding-top: 0;
    }
-
-    * {
-      display: inline-block;
-      padding-right: 0.25rem;
-    }
  }
-
-  &__tag-heading {
-    display: flex;
-    flex-direction: row;
-    h1 {
-        margin-left: 0.5rem;
-    }
-  }
-  &__tag-heading-color {
+  &__tag-info {
    display: inline-block;
-    border-radius: 9999px;
-    vertical-align: text-bottom;
-    height: 4rem;
-    width: 4rem;
-  }
-
-  &__tag-color {
-    display: inline-block;
-    border-radius: 9999px;
-    vertical-align: text-bottom;
-    height: 1rem;
-    width: 1rem;
-  }
-  &__tag-name {
-    font-size: $text-base;
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-  &__paywall {
-    font-size: $text-base;
-    &:hover {
-      text-decoration: underline;
-    }
-    color: var(--accent-color);
+    padding-right: 0.25rem;
  }

  &__time {
    font-size: $text-sm;
+    @include my(0.5rem);
+  }
+  &__title {
+    @include my(0.5rem);
  }
-
  &__author-list {
    font-size: $text-sm;
    display: flex;
    flex-direction: row;
    justify-content: center;
-    @include my(0.5rem);
-    @include py(0.5rem);
+    @include my(1rem);
  }
  &__author-images {
    display: flex;
    flex-direction: row;
-  }
-  &__author-image {
-    height: 2rem;
+    align-items: center;
    margin-left: 0.25rem;
    margin-right: 0.75rem;
-
-    img {
-      border-radius: 9999px;
-      height: 100%;
-    }
+  }
+  &__author-image {
+    border-radius: 9999px;
+    height: 2rem;
  }
  &__author-names {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
+  }
+  &__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;
+    }
+  }

-    a:hover {
-      text-decoration: underline;
+  &__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);
+      z-index: 120;
+      @include transition;
+  
+      @include screen(md) {
+        padding: 0.5rem 2rem;
+      }
+    }
+    &:hover figcaption {
+      transform: translateY(100%) translateY(2rem);
    }
  }
 }
--- 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;
--- a/src/sass/components/_postnavigator.scss
+++ b/src/sass/components/_postnavigator.scss
@ -58,9 +58,6 @@
  &__nav-content {
    display: flex;
    flex-direction: column;
-    p {
-      margin: 0;
-    }

    &--previous-post {
      align-items: start;
@ -77,7 +74,11 @@
      }
    }
  }
+  &__nav-indicator {
+    margin: 0;
+  }
  &__nav-title {
+    margin: 0;
    font-size: $text-xl;
    color: var(--accent-color);
  }
--- a/src/sass/components/_tag.scss
+++ b/src/sass/components/_tag.scss
@ -0,0 +1,25 @@
+.tag {
+  &__color {
+    display: inline-block;
+    border-radius: 9999px;
+    vertical-align: text-bottom;
+    height: 1rem;
+    width: 1rem;
+  }
+  &__name {
+    font-size: $text-base;
+    &:hover {
+      text-decoration: underline;
+    }
+    &--post-header {
+      color: var(--text-color);
+    }
+  }
+  &__paywall {
+    font-size: $text-base;
+    &:hover {
+      text-decoration: underline;
+    }
+    color: var(--accent-color);
+  }
+}
--- a/src/sass/ghost.scss
+++ b/src/sass/ghost.scss
@ -13,9 +13,34 @@
    flex-direction: column;
    align-items: center;
    object-fit: contain;
+    position: relative;
+
    .kg-image {
      width: 100%;
    }
+
+    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: 2rem;
+      box-shadow: 0px 0px 4px 1px var(--accent-color);
+      z-index: 120;
+      @include transition;
+  
+      @include screen(md) {
+        padding: 0.5rem 2rem;
+      }
+    }
+    &:hover figcaption {
+      transform: translateY(100%) translateY(2rem);
+    }
  }
  .kg-width-wide .kg-image {
    min-width: 100vw;
@ -33,13 +58,6 @@
  .kg-width-full .kg-image {
    min-width: 100vw;
  }
-  .kg-card figcaption {
-    font-size: $text-sm;
-    color: var(--highlight-color);
-    margin-top: 0.5rem;
-    text-align: center;
-  }
-
  .kg-gallery-container {
    min-width: 100vw;
    @include screen(md) {
@ -131,3 +149,21 @@
    white-space: nowrap;
  }
 }
+
+.site-header {
+  
+  &.search-enabled {
+    height: 100%;
+  }
+
+  &.search-enabled &__background {
+    opacity: 100%;
+    top: 0;
+  }
+  &.search-enabled &__inner {
+    background: rgba(0, 0, 0, 0.5);
+  }
+  &.search-detached &__inner {
+    background: rgba(0, 0, 0, 0.5);
+  }
+}
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Damillora	08284c78ce	fix: spacing	2021-07-11 04:32:15 +07:00
Damillora	12329cb4a8	feat: new post design	2021-07-11 04:23:40 +07:00
Damillora	478d47217b	feat: animate caption	2021-07-11 03:35:31 +07:00
Damillora	77c6d76d46	feat: new caption design	2021-07-11 03:19:24 +07:00
Damillora	a1d30b3b13	chore: update depends	2021-07-11 01:01:07 +07:00
Damillora	62ab8aa6ba	fix(shian): make search toggles not conflict with menu toggles	2021-07-11 00:52:36 +07:00
Damillora	78c1bd6421	feat(shian): add permanent icon menus	2021-07-11 00:26:56 +07:00
Damillora	6def68f493	perf(shian): switch back to usual nav menu BREAKING CHANGE: please update your stylesheets accordingly	2021-07-11 00:24:55 +07:00
Damillora	4f53496885	chore: update gulp-sass	2021-07-08 02:32:21 +07:00
Damillora	fa7253e18b	feat: basic forms	2021-05-15 14:40:19 +07:00
Damillora	cc4febf595	feat(shian): search styles	2021-05-07 21:41:48 +07:00
Damillora	f873e60897	fix(shian): fix colors	2021-04-22 22:01:33 +07:00
Damillora	2a23ca143f	perf(shian): overhaul styling to minimize CSS processing BREAKING CHANGE: several styles are rewritten completely for performance reasons. please update accordingly.	2021-04-22 20:32:54 +07:00