From 2a23ca143f18034a17192fd74aeb9e1efa94995e Mon Sep 17 00:00:00 2001 From: Damillora Date: Thu, 22 Apr 2021 20:29:31 +0700 Subject: [PATCH] perf(shian): overhaul styling to minimize CSS processing BREAKING CHANGE: several styles are rewritten completely for performance reasons. please update accordingly. --- src/sass/app.scss | 1 + src/sass/common/_base.scss | 131 +++++++++++------------ src/sass/components/_floatingyuriko.scss | 22 ++-- src/sass/components/_gallery.scss | 8 +- src/sass/components/_gameitem.scss | 72 ++++++------- src/sass/components/_header.scss | 41 ++++--- src/sass/components/_mediaitem.scss | 43 ++++---- src/sass/components/_menu.scss | 45 ++++---- src/sass/components/_pageheader.scss | 16 ++- src/sass/components/_postcard.scss | 41 ++++--- src/sass/components/_postheader.scss | 92 ++++++---------- src/sass/components/_postnavigator.scss | 7 +- src/sass/components/_tag.scss | 25 +++++ 13 files changed, 269 insertions(+), 275 deletions(-) create mode 100644 src/sass/components/_tag.scss diff --git a/src/sass/app.scss b/src/sass/app.scss index fc3fffd..db51612 100644 --- a/src/sass/app.scss +++ b/src/sass/app.scss @@ -19,3 +19,4 @@ @import './components/gameitem'; @import './components/copyarea'; @import './components/floatingyuriko'; +@import './components/tag'; diff --git a/src/sass/common/_base.scss b/src/sass/common/_base.scss index daab1cb..7600b83 100644 --- a/src/sass/common/_base.scss +++ b/src/sass/common/_base.scss @@ -58,76 +58,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; diff --git a/src/sass/components/_floatingyuriko.scss b/src/sass/components/_floatingyuriko.scss index 1c18d1e..6fae42d 100644 --- 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); -} \ No newline at end of file +} diff --git a/src/sass/components/_gallery.scss b/src/sass/components/_gallery.scss index 4e107b3..263837a 100644 --- 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 { diff --git a/src/sass/components/_gameitem.scss b/src/sass/components/_gameitem.scss index e7c08e1..732e19f 100644 --- 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; - } -} \ No newline at end of file + @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; + } +} diff --git a/src/sass/components/_header.scss b/src/sass/components/_header.scss index 8519e2d..e36b43f 100644 --- a/src/sass/components/_header.scss +++ b/src/sass/components/_header.scss @@ -60,23 +60,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 +88,18 @@ cursor: pointer; text-align: center; white-space: nowrap; - + @include transition; &: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 { diff --git a/src/sass/components/_mediaitem.scss b/src/sass/components/_mediaitem.scss index a74d1ec..7d2efdc 100644 --- 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); - } - } -} \ No newline at end of file + @include my(0.5rem); + display: block; + } + &__text { + @include my(0.25rem); + } +} diff --git a/src/sass/components/_menu.scss b/src/sass/components/_menu.scss index 240e317..7def28c 100644 --- a/src/sass/components/_menu.scss +++ b/src/sass/components/_menu.scss @@ -14,32 +14,33 @@ align-items: center; cursor: pointer; @include transition; - + &: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); - } + &__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); + } + &__text { + display: inline-block; + flex-grow: 1; + color: $white; + @include px(1rem); } &__separator { margin-left: 5rem; diff --git a/src/sass/components/_pageheader.scss b/src/sass/components/_pageheader.scss index 3c407f0..1dd3134 100644 --- a/src/sass/components/_pageheader.scss +++ b/src/sass/components/_pageheader.scss @@ -10,6 +10,13 @@ display: flex; align-items: flex-end; + &__heading { + color: $white; + @include my(0.5rem); + } + &__text { + @include my(0.5rem); + } &__background { position: absolute; top: 0; @@ -34,15 +41,6 @@ padding-top: 4rem; } color: $white; - a, - h1, - h2, - h3, - h4, - h5, - h6 { - color: $white; - } } &__icon { diff --git a/src/sass/components/_postcard.scss b/src/sass/components/_postcard.scss index c1cc519..b1cd0c5 100644 --- 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,7 +36,7 @@ padding-left: 1rem; } } - + &__tag-row { padding-top: 1rem; @include screen(md) { @@ -74,6 +74,7 @@ color: var(--accent-color); font-size: $text-xl; font-weight: 300; + @include my(0rem); @include screen(md) { font-size: $text-2xl; @@ -84,10 +85,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 +101,22 @@ &__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; - } } &__excerpt { - margin-top: 0.5rem; - margin-bottom: 1rem; - font-size: $text-sm; + margin-top: 0.5rem; + margin-bottom: 1rem; + font-size: $text-sm; } } diff --git a/src/sass/components/_postheader.scss b/src/sass/components/_postheader.scss index 0f661f7..37f1fce 100644 --- a/src/sass/components/_postheader.scss +++ b/src/sass/components/_postheader.scss @@ -1,65 +1,43 @@ .post-header { - h1, - h2, - h3, - h4, - h5, - h6, - p { + &__heading { @include my(0.5rem); + + &--tag { + display: flex; + flex-direction: row; + align-items: center; + } + &--tag-text { + margin-left: 0.5rem; + color: $white; + } + &--tag-color { + display: inline-block; + border-radius: 9999px; + vertical-align: text-bottom; + 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 { + color: $white; + @include my(0.5rem); } - &__author-list { font-size: $text-sm; display: flex; @@ -71,25 +49,21 @@ &__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; - - a:hover { - text-decoration: underline; - } + } + &__author-name { + color: $white; } } diff --git a/src/sass/components/_postnavigator.scss b/src/sass/components/_postnavigator.scss index 79fc3b6..e0fe5bf 100644 --- 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); } diff --git a/src/sass/components/_tag.scss b/src/sass/components/_tag.scss new file mode 100644 index 0000000..d83d909 --- /dev/null +++ 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: $white; + } + } + &__paywall { + font-size: $text-base; + &:hover { + text-decoration: underline; + } + color: var(--accent-color); + } +}