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 {