From 2574118f40a956184705f87dea4d88e7c246a055 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Wed, 4 Oct 2023 14:29:44 -0500 Subject: [PATCH] perf(ui): standardize metadata text styles (#1295) --- _sass/addon/commons.scss | 5 ++--- _sass/addon/module.scss | 6 +++++- _sass/colors/typography-dark.scss | 1 + _sass/colors/typography-light.scss | 1 + _sass/layout/post.scss | 16 ++++------------ 5 files changed, 13 insertions(+), 16 deletions(-) diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index d54e76a..65d72c9 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -132,12 +132,11 @@ kbd { } footer { - font-size: 0.8rem; background-color: var(--main-bg); height: $footer-height; border-top: 1px solid var(--main-border-color); - @extend %text-color; + @extend %text-meta; a { @extend %text-highlight; @@ -382,7 +381,7 @@ main { } .post-meta { - font-size: 0.85rem; + @extend %text-meta; a { &:not([class]):hover { diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss index 9119b3d..f1fdd84 100644 --- a/_sass/addon/module.scss +++ b/_sass/addon/module.scss @@ -123,10 +123,14 @@ } %text-highlight { - color: inherit; + color: var(--text-muted-hightlight-color); font-weight: 600; } +%text-meta { + font-size: 0.85rem; +} + %sup-fn-target { &:target { background-color: var(--footnote-target-bg); diff --git a/_sass/colors/typography-dark.scss b/_sass/colors/typography-dark.scss index 2142d33..1ccfa03 100644 --- a/_sass/colors/typography-dark.scss +++ b/_sass/colors/typography-dark.scss @@ -11,6 +11,7 @@ /* Common color */ --text-color: rgb(175, 176, 177); --text-muted-color: #868686; + --text-muted-hightlight-color: #aeaeae; --heading-color: #cccccc; --label-color: #a7a7a7; --blockquote-border-color: rgb(66, 66, 66); diff --git a/_sass/colors/typography-light.scss b/_sass/colors/typography-light.scss index f8c3891..e875aef 100644 --- a/_sass/colors/typography-light.scss +++ b/_sass/colors/typography-light.scss @@ -11,6 +11,7 @@ /* Common color */ --text-color: #34343c; --text-muted-color: #757575; + --text-muted-hightlight-color: inherit; --heading-color: #2a2a2a; --label-color: #585858; --blockquote-border-color: #eeeeee; diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index 955c958..72a4a46 100644 --- a/_sass/layout/post.scss +++ b/_sass/layout/post.scss @@ -22,10 +22,6 @@ padding-right: $pr; } -%text-color { - color: var(--text-color); -} - h1 + .post-meta { > span + span::before { @include dot; @@ -33,7 +29,7 @@ h1 + .post-meta { em, time { - color: var(--text-color); + @extend %text-highlight; } em { @@ -44,13 +40,10 @@ h1 + .post-meta { } .post-tail-wrapper { + @extend %text-meta; + margin-top: 6rem; border-bottom: 1px double var(--main-border-color); - font-size: 0.85rem; - - .post-tail-bottom a { - color: inherit; - } .license-wrapper { line-height: 1.2rem; @@ -64,7 +57,7 @@ h1 + .post-meta { } span:last-child { - font-size: 0.85rem; + @extend %text-meta; } } /* .license-wrapper */ @@ -320,7 +313,6 @@ h1 + .post-meta { .card { h4 { - @extend %text-color; @extend %text-clip; } }