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;
     }
   }