From a6ce765082d94015ea9014ca5a7c03f0e70f386a Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Thu, 20 Oct 2022 02:05:29 +0800
Subject: [PATCH] style: improve SCSS style

---
 .stylelintrc.json                  |  21 ++-
 _sass/addon/commons.scss           |  69 +++------
 _sass/addon/module.scss            |   2 +-
 _sass/addon/syntax.scss            |  28 ++--
 _sass/addon/variables.scss         |   4 -
 _sass/colors/dark-syntax.scss      |  35 +++--
 _sass/colors/dark-typography.scss  |  35 +++--
 _sass/colors/light-syntax.scss     |   5 +-
 _sass/colors/light-typography.scss |  25 ++-
 _sass/layout/archives.scss         |  16 +-
 _sass/layout/categories.scss       |  16 +-
 _sass/layout/category-tag.scss     |   2 +-
 _sass/layout/home.scss             |  43 +++---
 _sass/layout/post.scss             | 235 +++++++++++++----------------
 _sass/layout/tags.scss             |   2 +-
 15 files changed, 242 insertions(+), 296 deletions(-)

diff --git a/.stylelintrc.json b/.stylelintrc.json
index eff2560..0dfc8b2 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -1,3 +1,22 @@
 {
-  "extends": "stylelint-config-standard-scss"
+  "extends": "stylelint-config-standard-scss",
+  "rules": {
+    "no-descending-specificity": null,
+    "shorthand-property-no-redundant-values": null,
+    "at-rule-no-vendor-prefix": null,
+    "property-no-vendor-prefix": null,
+    "selector-no-vendor-prefix": null,
+    "value-no-vendor-prefix": null,
+    "color-function-notation": "legacy",
+    "alpha-value-notation": "number",
+    "selector-not-notation": "simple",
+    "color-hex-length": "long",
+    "declaration-block-single-line-max-declarations": 3,
+    "font-family-no-missing-generic-family-keyword": [
+      true,
+      {
+        "ignoreFontFamilies": ["Font Awesome 5 Free"]
+      }
+    ]
+  }
 }
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index 5965b28..24478b0 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -5,22 +5,22 @@
 html {
   @media (prefers-color-scheme: light) {
     &:not([data-mode]),
-    &[data-mode=light] {
+    &[data-mode="light"] {
       @include light-scheme;
     }
 
-    &[data-mode=dark] {
+    &[data-mode="dark"] {
       @include dark-scheme;
     }
   }
 
   @media (prefers-color-scheme: dark) {
     &:not([data-mode]),
-    &[data-mode=dark] {
+    &[data-mode="dark"] {
       @include dark-scheme;
     }
 
-    &[data-mode=light] {
+    &[data-mode="light"] {
       @include light-scheme;
     }
   }
@@ -32,7 +32,7 @@ body {
   background: var(--body-bg);
   color: var(--text-color);
   -webkit-font-smoothing: antialiased;
-  font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
+  font-family: "Source Sans Pro", "Microsoft Yahei", sans-serif;
   line-height: 1.75;
 }
 
@@ -114,11 +114,8 @@ blockquote {
   }
 
   @include prompt("tip", "\f0eb", 400);
-
   @include prompt("info", "\f06a");
-
   @include prompt("warning", "\f06a");
-
   @include prompt("danger", "\f071");
 }
 
@@ -167,7 +164,6 @@ footer {
 
     &:hover {
       @extend %link-hover;
-
       @include no-text-decoration;
     }
   }
@@ -192,7 +188,7 @@ i { /* fontawesome icons */
 img[data-src] {
   margin: 0.5rem 0;
 
-  &[data-loaded=true] {
+  &[data-loaded="true"] {
     animation: fade-in linear 0.5s;
   }
 
@@ -239,7 +235,6 @@ img[data-src] {
   .post-content {
     font-size: 0.9rem;
   }
-
 }
 
 #panel-wrapper {
@@ -261,12 +256,12 @@ img[data-src] {
     &:hover {
       background-color: #2a408e;
       border-color: #2a408e;
-      color: #fff;
+      color: #ffffff;
       transition: none;
     }
   }
 
-  [data-topbar-visible=true] & > div {
+  [data-topbar-visible="true"] & > div {
     top: 6rem;
   }
 }
@@ -291,7 +286,6 @@ img[data-src] {
 
     color: inherit;
   }
-
 }
 
 .footnotes > ol {
@@ -311,7 +305,7 @@ img[data-src] {
 
     /* [scroll-focus] added by `smooth-scroll.js` */
     &:target:not([scroll-focus]),
-    &[scroll-focus=true] > p {
+    &[scroll-focus="true"] > p {
       background-color: var(--footnote-target-bg);
       width: fit-content;
       -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */
@@ -416,7 +410,6 @@ img[data-src] {
       }
     }
   } /* a */
-
 }
 
 .pageviews .fa-spinner {
@@ -459,7 +452,6 @@ img[data-src] {
     &.img-link {
       @extend %img-caption;
     }
-
   }
 
   > ol,
@@ -492,20 +484,17 @@ img[data-src] {
           color: var(--checkbox-checked-color);
         }
       }
-
     }
 
-    input[type=checkbox] {
+    input[type="checkbox"] {
       margin: 0 0.5rem 0.2rem -1.3rem;
       vertical-align: middle;
     }
-
   } /* ul */
 
   dl > dd {
     margin-left: 1rem;
   }
-
 } /* .post-content */
 
 .tag:hover {
@@ -697,7 +686,7 @@ $sidebar-display: "sidebar-display";
       font-weight: 900;
       font-size: 1.5rem;
       letter-spacing: 0.5px;
-      color: rgba(134, 133, 133, 99%);
+      color: rgba(134, 133, 133, 0.99);
     }
   }
 
@@ -788,9 +777,7 @@ $sidebar-display: "sidebar-display";
           @include fix-cursor($top);
         }
       }
-
     } /* @for */
-
   } /* ul */
 
   .sidebar-bottom {
@@ -841,9 +828,7 @@ $sidebar-display: "sidebar-display";
       height: 3px;
       border-radius: 50%;
     }
-
   } /* .sidebar-bottom */
-
 } /* #sidebar */
 
 @media (hover: hover) {
@@ -884,14 +869,14 @@ $sidebar-display: "sidebar-display";
   border-bottom: 1px solid rgba(0, 0, 0, 0.07);
   background-color: var(--topbar-wrapper-bg);
 
-  [data-topbar-visible=false] & {
+  [data-topbar-visible="false"] & {
     top: -$topbar-height; /* same as topbar height. */
   }
 }
 
 #topbar {
   i { /* icons */
-    color: #999;
+    color: #999999;
   }
 
   #breadcrumb {
@@ -1139,7 +1124,7 @@ $sidebar-display: "sidebar-display";
   }
 
   .toast-body {
-    font-family: 'Lato';
+    font-family: Lato, sans-serif;
     line-height: 1.25rem;
 
     button {
@@ -1166,7 +1151,6 @@ $sidebar-display: "sidebar-display";
       animation: popup 0.8s;
     }
   }
-
 }
 
 /*
@@ -1208,7 +1192,7 @@ $sidebar-display: "sidebar-display";
     }
 
     .post-content {
-      > blockquote[class^=prompt-] {
+      > blockquote[class^="prompt-"] {
         @include pl-pr(1.25rem);
         @include ml-mr(-1.25rem);
 
@@ -1216,7 +1200,6 @@ $sidebar-display: "sidebar-display";
         max-width: none;
       }
     }
-
   }
 
   #avatar > a {
@@ -1227,7 +1210,6 @@ $sidebar-display: "sidebar-display";
   .site-subtitle {
     @include ml-mr(1.8rem);
   }
-
 }
 
 @media all and (max-width: 768px) {
@@ -1249,6 +1231,7 @@ $sidebar-display: "sidebar-display";
 @media all and (max-width: 849px) {
   @mixin slide($append: null) {
     $basic: transform 0.4s ease;
+
     @if $append {
       -webkit-transition: $basic, $append;
       transition: $basic, $append;
@@ -1347,11 +1330,10 @@ $sidebar-display: "sidebar-display";
       margin-top: 3rem;
     }
   }
-
 } /* max-width: 849px */
 
 @media all and (max-width: 849px) and (orientation: portrait) {
-  [data-topbar-visible=false] #topbar-wrapper {
+  [data-topbar-visible="false"] #topbar-wrapper {
     top: 0;
   }
 }
@@ -1370,7 +1352,8 @@ $sidebar-display: "sidebar-display";
     overflow-y: scroll;
   }
 
-  #main-wrapper, footer {
+  #main-wrapper,
+  footer {
     margin-left: $sidebar-width;
   }
 
@@ -1404,7 +1387,6 @@ $sidebar-display: "sidebar-display";
   #topbar-title {
     text-align: left;
   }
-
 }
 
 /* Pad horizontal */
@@ -1458,7 +1440,8 @@ $sidebar-display: "sidebar-display";
     font-size: 90%;
   }
 
-  #main-wrapper, footer {
+  #main-wrapper,
+  footer {
     margin-left: $sidebar-width-small;
   }
 
@@ -1469,7 +1452,6 @@ $sidebar-display: "sidebar-display";
     word-break: keep-all;
     white-space: nowrap;
   }
-
 }
 
 /* panel hidden */
@@ -1527,7 +1509,6 @@ $sidebar-display: "sidebar-display";
       width: 85%;
     }
   }
-
 }
 
 @media all and (min-width: 1400px) {
@@ -1537,7 +1518,8 @@ $sidebar-display: "sidebar-display";
 }
 
 @media all and (min-width: 1650px) {
-  #main-wrapper, footer {
+  #main-wrapper,
+  footer {
     margin-left: $sidebar-width-large;
   }
 
@@ -1609,7 +1591,6 @@ $sidebar-display: "sidebar-display";
         word-spacing: 0;
         margin-top: 0;
       }
-
     } /* .profile-wrapper (min-width: 1650px) */
 
     ul {
@@ -1635,7 +1616,6 @@ $sidebar-display: "sidebar-display";
             }
           }
         }
-
       }
     }
 
@@ -1679,9 +1659,6 @@ $sidebar-display: "sidebar-display";
       .icon-border {
         top: 0.9rem;
       }
-
     } /* .sidebar-bottom */
-
   } /* #sidebar */
-
 } /* min-width: 1650px */
diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss
index a07dc6e..d9353ab 100644
--- a/_sass/addon/module.scss
+++ b/_sass/addon/module.scss
@@ -7,7 +7,7 @@
 %heading {
   color: var(--heading-color);
   font-weight: 400;
-  font-family: 'Lato', 'Microsoft Yahei', sans-serif;
+  font-family: Lato, "Microsoft Yahei", sans-serif;
 }
 
 %section {
diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss
index cd861b3..fcccbea 100644
--- a/_sass/addon/syntax.scss
+++ b/_sass/addon/syntax.scss
@@ -8,22 +8,22 @@
 html {
   @media (prefers-color-scheme: light) {
     &:not([data-mode]),
-    &[data-mode=light] {
+    &[data-mode="light"] {
       @include light-syntax;
     }
 
-    &[data-mode=dark] {
+    &[data-mode="dark"] {
       @include dark-syntax;
     }
   }
 
   @media (prefers-color-scheme: dark) {
     &:not([data-mode]),
-    &[data-mode=dark] {
+    &[data-mode="dark"] {
       @include dark-syntax;
     }
 
-    &[data-mode=light] {
+    &[data-mode="light"] {
       @include light-syntax;
     }
   }
@@ -98,7 +98,6 @@ $code-radius: 6px;
   .gp {
     user-select: none;
   }
-
 } /* .highlight */
 
 code {
@@ -152,16 +151,15 @@ td.rouge-code {
     border-bottom: none !important;
     pointer-events: none;
   }
-
 }
 
 /* Hide line numbers for default, console, and terminal code snippets */
 div {
-  &[class^='highlighter-rouge'],
+  &[class^="highlighter-rouge"],
+  &.nolineno,
   &.language-plaintext.highlighter-rouge,
   &.language-console.highlighter-rouge,
-  &.language-terminal.highlighter-rouge,
-  &.nolineno {
+  &.language-terminal.highlighter-rouge {
     pre.lineno {
       display: none;
     }
@@ -252,6 +250,10 @@ div {
       }
     }
 
+    &:focus {
+      outline: none;
+    }
+
     &:not([timeout]):hover {
       background-color: rgba(128, 128, 128, 0.37);
 
@@ -259,18 +261,12 @@ div {
         color: white;
       }
     }
-
-    &:focus {
-      outline: none;
-    }
-
   }
-
 }
 
 @media all and (max-width: 576px) {
   .post-content {
-    > div[class^='language-'] {
+    > div[class^="language-"] {
       @include ml-mr(-1.25rem);
 
       border-radius: 0;
diff --git a/_sass/addon/variables.scss b/_sass/addon/variables.scss
index 5e75f7f..99614a5 100644
--- a/_sass/addon/variables.scss
+++ b/_sass/addon/variables.scss
@@ -13,20 +13,16 @@ $sidebar-width-large: 350px !default;  /* screen width: >= 1650px */
 $tab-count: 5 !default;   /* backward compatible (version <= 4.0.2) */
 $tab-height: 3rem !default;
 $tab-cursor-height: 1.6rem !default;
-
 $cursor-width: 2px !default;    /* the cursor width of the selected tab */
 
 /* other framework sizes */
 
 $topbar-height: 3rem !default;
-
 $search-max-width: 210px !default;
-
 $footer-height: 5rem !default;
 $footer-height-mobile: 6rem !default;   /* screen width: <= 576px */
 
 $main-content-max-width: 1250px !default;
-
 $bottom-min-height: 35rem !default;
 
 /* syntax highlight */
diff --git a/_sass/colors/dark-syntax.scss b/_sass/colors/dark-syntax.scss
index 8030487..3912ed3 100644
--- a/_sass/colors/dark-syntax.scss
+++ b/_sass/colors/dark-syntax.scss
@@ -3,7 +3,24 @@
  */
 
 @mixin dark-syntax {
+  --highlight-bg-color: #252525;
+  --highlighter-rouge-color: #de6b18;
+  --highlight-lineno-color: #6c6c6d;
+  --inline-code-bg: #272822;
+  --code-header-text-color: #6a6a6a;
+  --code-header-muted-color: rgb(60, 60, 60);
+  --code-header-icon-color: rgb(86, 86, 86);
+  --clipboard-checked-color: #2bcc2b;
+  --filepath-text-color: #bdbdbd;
+
+  pre { color: #bfbfbf; } /* override Bootstrap */
+
+  .highlight {
+    .gp { color: #818c96; }
+  }
+
   /* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
+
   .highlight pre { background-color: var(--highlight-bg-color); }
   .highlight .hll { background-color: var(--highlight-bg-color); }
   .highlight .c { color: #75715e; } /* Comment */
@@ -67,22 +84,4 @@
   .highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
   .highlight .gd { color: #f92672; background-color: #561c08; } /* Generic.Deleted & Diff Deleted */
   .highlight .gi { color: #a6e22e; background-color: #0b5858; } /* Generic.Inserted & Diff Inserted */
-
-  /* -----  custom styles ------ */
-
-  --highlight-bg-color: #252525;
-  --highlighter-rouge-color: #de6b18;
-  --highlight-lineno-color: #6c6c6d;
-  --inline-code-bg: #272822;
-  --code-header-text-color: #6a6a6a;
-  --code-header-muted-color: rgb(60 60 60);
-  --code-header-icon-color: rgb(86 86 86);
-  --clipboard-checked-color: #2bcc2b;
-  --filepath-text-color: #bdbdbd;
-
-  .highlight {
-    .gp { color: #818c96; }
-  }
-
-  pre { color: #bfbfbf; } /* override Bootstrap */
 }
diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss
index 2ded76a..cc645aa 100644
--- a/_sass/colors/dark-typography.scss
+++ b/_sass/colors/dark-typography.scss
@@ -24,15 +24,15 @@
   --btn-box-shadow: var(--main-bg);
   --card-header-bg: rgb(51, 50, 50);
   --label-color: rgb(108, 117, 125);
-  --checkbox-color: rgb(118 120 121);
+  --checkbox-color: rgb(118, 120, 121);
   --checkbox-checked-color: var(--link-color);
 
   /* Sidebar */
   --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
   --sidebar-muted-color: #6d6c6b;
-  --sidebar-active-color: rgb(255 255 255 / 80%);
+  --sidebar-active-color: rgb(255, 255, 255, 0.8);
   --nav-cursor-color: rgb(183, 182, 182);
-  --sidebar-btn-bg: rgb(117 116 116 / 20%);
+  --sidebar-btn-bg: rgb(117, 116, 116, 0.2);
 
   /* Topbar */
   --topbar-text-color: var(--text-color);
@@ -48,7 +48,7 @@
   --btn-paginator-hover-color: rgb(64, 65, 66);
   --btn-paginator-border-color: var(--btn-border-color);
   --btn-text-color: var(--text-color);
-  --pin-bg: rgb(34 35 37);
+  --pin-bg: rgb(34, 35, 37);
   --pin-color: inherit;
 
   /* Posts */
@@ -65,18 +65,18 @@
   --card-bg: rgb(39, 40, 43);
   --card-border-color: rgb(53, 53, 60);
   --card-box-shadow: var(--main-bg);
-  --preview-img-bg: radial-gradient(circle, rgb(22 22 24) 0%, rgb(32 32 32) 100%);
+  --preview-img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%);
   --kbd-wrap-color: #6a6a6a;
   --kbd-text-color: #d3d3d3;
   --kbd-bg-color: #242424;
-  --prompt-text-color: rgb(216 212 212 / 75%);
+  --prompt-text-color: rgb(216, 212, 212, 0.75);
   --prompt-tip-bg: rgba(77, 187, 95, 0.2);
-  --prompt-tip-icon-color: rgb(5 223 5 / 68%);
-  --prompt-info-bg: rgb(7 59 104 / 80%);
+  --prompt-tip-icon-color: rgb(5, 223, 5, 0.68);
+  --prompt-info-bg: rgb(7, 59, 104, 0.8);
   --prompt-info-icon-color: #0075d1;
-  --prompt-warning-bg: rgb(90 69 3 / 95%);
-  --prompt-warning-icon-color: rgb(255 165 0 / 80%);
-  --prompt-danger-bg: rgb(86 28 8 / 80%);
+  --prompt-warning-bg: rgb(90, 69, 3, 0.95);
+  --prompt-warning-icon-color: rgb(255, 165, 0, 0.8);
+  --prompt-danger-bg: rgb(86, 28, 8, 0.8);
   --prompt-danger-icon-color: #cd0202;
 
   /* tags */
@@ -104,11 +104,11 @@
   }
 
   /* posts' toc, override BS */
-  nav[data-toggle=toc] .nav-link.active,
-  nav[data-toggle=toc] .nav-link.active:focus,
-  nav[data-toggle=toc] .nav-link.active:hover,
-  nav[data-toggle=toc] .nav > li > a:focus,
-  nav[data-toggle=toc] .nav > li > a:hover {
+  nav[data-toggle="toc"] .nav-link.active,
+  nav[data-toggle="toc"] .nav-link.active:focus,
+  nav[data-toggle="toc"] .nav-link.active:hover,
+  nav[data-toggle="toc"] .nav > li > a:focus,
+  nav[data-toggle="toc"] .nav > li > a:hover {
     color: var(--toc-highlight) !important;
     border-left-color: var(--toc-highlight) !important;
   }
@@ -150,8 +150,7 @@
 
   color-scheme: dark;
 
-  #disqus_thread {
+  #disqus_thread { /* stylelint-disable-line selector-id-pattern */
     color-scheme: none;
   }
-
 } /* dark-scheme */
diff --git a/_sass/colors/light-syntax.scss b/_sass/colors/light-syntax.scss
index 236e568..aeac91f 100644
--- a/_sass/colors/light-syntax.scss
+++ b/_sass/colors/light-syntax.scss
@@ -76,9 +76,8 @@
   --code-header-icon-color: #d1d1d1;
   --clipboard-checked-color: #43c743;
 
-  [class^=prompt-] {
+  [class^="prompt-"] {
     --inline-code-bg: #fbfafa;
-    --highlighter-rouge-color: rgb(82 82 82);
+    --highlighter-rouge-color: rgb(82, 82, 82);
   }
-
 } /* light-syntax */
diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss
index 581aac9..5e653f9 100644
--- a/_sass/colors/light-typography.scss
+++ b/_sass/colors/light-typography.scss
@@ -13,11 +13,11 @@
   --text-color: #34343c;
   --text-muted-color: gray;
   --heading-color: black;
-  --blockquote-border-color: #eee;
+  --blockquote-border-color: #eeeeee;
   --blockquote-text-color: #9a9a9a;
   --link-color: #2a408e;
   --link-underline-color: #dee2e6;
-  --button-bg: #fff;
+  --button-bg: #ffffff;
   --btn-border-color: #e9ecef;
   --btn-backtotop-color: #686868;
   --btn-backtotop-border-color: #f1f1f1;
@@ -35,8 +35,8 @@
   /* Topbar */
   --topbar-text-color: rgb(78, 78, 78);
   --topbar-wrapper-bg: white;
-  --search-wrapper-bg: rgb(245 245 245 / 50%);
-  --search-wrapper-border-color: rgb(245 245 245);
+  --search-wrapper-bg: rgb(245, 245, 245, 0.5);
+  --search-wrapper-border-color: rgb(245, 245, 245);
   --search-tag-bg: #f8f9fa;
   --search-icon-color: #c2c6cc;
   --input-focus-border-color: var(--btn-border-color);
@@ -53,7 +53,7 @@
   /* Posts */
   --btn-share-hover-color: var(--link-color);
   --card-border-color: #f1f1f1;
-  --card-box-shadow: rgba(234, 234, 234, 0.7686274509803922);
+  --card-box-shadow: rgba(234, 234, 234, 0.76);
   --label-color: #616161;
   --relate-post-date: rgba(30, 55, 70, 0.4);
   --footnote-target-bg: lightcyan;
@@ -64,22 +64,22 @@
   --tb-odd-bg: #fbfcfd;
   --tb-border-color: #eaeaea;
   --dash-color: silver;
-  --preview-img-bg: radial-gradient(circle, rgb(255 255 255) 0%, rgb(249 249 249) 100%);
+  --preview-img-bg: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(249, 249, 249) 100%);
   --kbd-wrap-color: #bdbdbd;
   --kbd-text-color: var(--text-color);
   --kbd-bg-color: white;
-  --prompt-text-color: rgb(46 46 46 / 77%);
-  --prompt-tip-bg: rgb(123 247 144 / 20%);
+  --prompt-text-color: rgb(46, 46, 46, 0.77);
+  --prompt-tip-bg: rgb(123, 247, 144, 0.2);
   --prompt-tip-icon-color: #03b303;
   --prompt-info-bg: #e1f5fe;
   --prompt-info-icon-color: #0070cb;
-  --prompt-warning-bg: rgb(255 243 205);
+  --prompt-warning-bg: rgb(255, 243, 205);
   --prompt-warning-icon-color: #ef9c03;
-  --prompt-danger-bg: rgb(248 215 218 / 56%);
+  --prompt-danger-bg: rgb(248, 215, 218, 0.56);
   --prompt-danger-icon-color: #df3c30;
 
-  [class^=prompt-] {
-    --link-underline-color: rgb(219 216 216);
+  [class^="prompt-"] {
+    --link-underline-color: rgb(219, 216, 216);
   }
 
   /* Categories */
@@ -90,5 +90,4 @@
   --timeline-color: rgba(0, 0, 0, 0.075);
   --timeline-node-bg: #c2c6cc;
   --timeline-year-dot-color: #ffffff;
-
 } /* light-scheme */
diff --git a/_sass/layout/archives.scss b/_sass/layout/archives.scss
index 1677104..70cf379 100644
--- a/_sass/layout/archives.scss
+++ b/_sass/layout/archives.scss
@@ -41,8 +41,6 @@
       content: "";
       display: inline-block;
       position: relative;
-      -webkit-border-radius: 50%;
-      -moz-border-radius: 50%;
       border-radius: 50%;
       width: 12px;
       height: 12px;
@@ -53,7 +51,6 @@
       box-shadow: 0 0 2px 0 #c2c6cc;
       z-index: 1;
     }
-
   }
 
   ul {
@@ -65,8 +62,8 @@
       text-overflow: ellipsis;
 
       &:nth-child(odd) {
-        background-color: var(--main-bg, #fff);
-        background-image: linear-gradient(to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
+        background-color: var(--main-bg, #ffffff);
+        background-image: linear-gradient(to left, #ffffff, #fbfbfb, #fbfbfb, #fbfbfb, #ffffff);
       }
 
       &::before {
@@ -81,7 +78,6 @@
     &:last-child li:last-child::before {
       height: 1.5rem;
     }
-
   } /* #archives ul */
 
   .date {
@@ -97,8 +93,7 @@
 
     &.day {
       font-size: 85%;
-      font-family: 'Lato', sans-serif;
-
+      font-family: Lato, sans-serif;
     }
   }
 
@@ -117,8 +112,6 @@
       content: "";
       display: inline-block;
       position: relative;
-      -webkit-border-radius: 50%;
-      -moz-border-radius: 50%;
       border-radius: 50%;
       width: 8px;
       height: 8px;
@@ -130,8 +123,7 @@
       z-index: 1;
     }
   }
-
-} // #archives
+} /* #archives */
 
 @media all and (max-width: 576px) {
   #archives {
diff --git a/_sass/layout/categories.scss b/_sass/layout/categories.scss
index 29a3463..551c557 100644
--- a/_sass/layout/categories.scss
+++ b/_sass/layout/categories.scss
@@ -28,10 +28,8 @@
       border-top-left-radius: 0;
       border-top-right-radius: 0;
     }
-
   }
-
-} // .categories
+} /* .categories */
 
 .category-trigger {
   width: 1.7rem;
@@ -40,18 +38,18 @@
   text-align: center;
   color: #6c757d !important;
 
-  &:hover {
-    i {
-      color: var(--categories-icon-hover-color);
-    }
-  }
-
   i {
     position: relative;
     height: 0.7rem;
     width: 1rem;
     transition: transform 300ms ease;
   }
+
+  &:hover {
+    i {
+      color: var(--categories-icon-hover-color);
+    }
+  }
 }
 
 @media (hover: hover) { // only works on desktop
diff --git a/_sass/layout/category-tag.scss b/_sass/layout/category-tag.scss
index e6d12d2..2ce151a 100644
--- a/_sass/layout/category-tag.scss
+++ b/_sass/layout/category-tag.scss
@@ -14,7 +14,7 @@
     padding: 0.6rem 0;
 
     &::before { // dot
-      background: #999;
+      background: #999999;
       width: 5px;
       height: 5px;
       border-radius: 50%;
diff --git a/_sass/layout/home.scss b/_sass/layout/home.scss
index 00a29d2..632fbe0 100644
--- a/_sass/layout/home.scss
+++ b/_sass/layout/home.scss
@@ -4,7 +4,7 @@
 
 .pagination {
   color: var(--btn-patinator-text-color);
-  font-family: 'Lato', sans-serif;
+  font-family: Lato, sans-serif;
 
   a:hover {
     text-decoration: none;
@@ -49,9 +49,8 @@
     &:last-child .page-link {
       border-radius: 50%;
     }
-  } // .page-item
-
-} // .pagination
+  } /* .page-item */
+} /* .pagination */
 
 #post-list {
   margin-top: 1rem;
@@ -83,6 +82,18 @@
       em {
         @extend %normal-font-style;
       }
+
+      .pin {
+        i {
+          transform: rotate(45deg);
+          padding-left: 3px;
+          color: var(--pin-color);
+        }
+
+        span {
+          display: none;
+        }
+      }
     }
 
     .post-content {
@@ -100,21 +111,8 @@
         -webkit-box-orient: vertical;
       }
     }
-
-    .pin {
-      > i {
-        transform: rotate(45deg);
-        padding-left: 3px;
-        color: var(--pin-color);
-      }
-
-      > span {
-        display: none;
-      }
-    }
-
-  } // .post-preview
-} // #post-list
+  } /* .post-preview */
+} /* #post-list */
 
 /* Hide SideBar and TOC */
 @media all and (max-width: 830px) {
@@ -125,9 +123,7 @@
       &:not(:first-child):not(:last-child) {
         display: none;
       }
-
     }
-
   }
 }
 
@@ -165,15 +161,12 @@
         width: 2rem;
         height: 2rem;
       }
-
     }
 
     .page-index {
       display: none;
     }
-
-  } // .pagination
-
+  } /* .pagination */
 }
 
 /* Panel hidden */
diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss
index ad66e27..613b9f6 100644
--- a/_sass/layout/post.scss
+++ b/_sass/layout/post.scss
@@ -26,6 +26,15 @@
   color: var(--text-color);
 }
 
+img.preview-img {
+  margin: 0;
+  border-radius: 6px;
+
+  &.bg[data-loaded="true"] {
+    background: var(--preview-img-bg);
+  }
+}
+
 h1 + .post-meta {
   span + span::before {
     @include dot;
@@ -40,23 +49,94 @@ h1 + .post-meta {
   }
 }
 
-img.preview-img {
-  margin: 0;
-  border-radius: 6px;
-
-  &.bg[data-loaded=true] {
-    background: var(--preview-img-bg);
-  }
-}
-
 .post-tail-wrapper {
   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;
+
+    > a {
+      color: var(--text-color);
+
+      &:hover {
+        @extend %link-hover;
+      }
+    }
+
+    span:last-child {
+      font-size: 0.85rem;
+    }
+  } /* .license-wrapper */
+
   .post-meta a:not(:hover) {
     @extend %link-underline;
   }
+
+  .share-wrapper {
+    vertical-align: middle;
+    user-select: none;
+
+    .share-icons {
+      font-size: 1.2rem;
+
+      > i {
+        position: relative;
+        bottom: 1px;
+
+        @extend %cursor-pointer;
+
+        &:hover {
+          @extend %btn-share-hovor;
+        }
+      }
+
+      a {
+        &:not(:last-child) {
+          margin-right: 0.25rem;
+        }
+
+        &:hover {
+          text-decoration: none;
+
+          >i {
+            @extend %btn-share-hovor;
+          }
+        }
+      }
+
+      .fab {
+        &.fa-twitter {
+          @include btn-sharing-color(rgba(29, 161, 242, 1));
+        }
+
+        &.fa-facebook-square {
+          @include btn-sharing-color(rgb(66, 95, 156));
+        }
+
+        &.fa-telegram {
+          @include btn-sharing-color(rgb(39, 159, 217));
+        }
+
+        &.fa-linkedin {
+          @include btn-sharing-color(rgb(0, 119, 181));
+        }
+
+        &.fa-weibo {
+          @include btn-sharing-color(rgb(229, 20, 43));
+        }
+      }
+    } /* .share-icons */
+
+    .fas.fa-link {
+      @include btn-sharing-color(rgb(171, 171, 171));
+    }
+  } /* .share-wrapper */
 }
 
 .post-tags {
@@ -74,7 +154,7 @@ img.preview-img {
 
     &:hover {
       background: #2a408e;
-      color: #fff;
+      color: #ffffff;
       border-color: #2a408e;
     }
 
@@ -121,7 +201,6 @@ img.preview-img {
     margin-top: 0.3rem;
     white-space: normal;
   }
-
 } /* .post-navigation */
 
 @keyframes fade-up {
@@ -130,6 +209,7 @@ img.preview-img {
     position: relative;
     top: 2rem;
   }
+
   to {
     opacity: 1;
     position: relative;
@@ -158,7 +238,7 @@ img.preview-img {
   }
 }
 
-nav[data-toggle=toc] {
+nav[data-toggle="toc"] {
   .nav {
     .nav > li > a.active {
       font-weight: 600 !important;
@@ -179,6 +259,20 @@ nav[data-toggle=toc] {
     color: var(--relate-post-date);
   }
 
+  p {
+    font-size: 0.9rem;
+    margin-bottom: 0.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
+  a:hover {
+    text-decoration: none;
+  }
+
   .card {
     border-color: var(--card-border-color);
     background-color: var(--card-bg);
@@ -197,37 +291,6 @@ nav[data-toggle=toc] {
       box-shadow: 0 10px 15px -4px rgba(0, 0, 0, 0.15);
     }
   }
-
-  p {
-    font-size: 0.9rem;
-    margin-bottom: 0.5rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-  }
-
-  a:hover {
-    text-decoration: none;
-  }
-
-  ul {
-    list-style-type: none;
-    padding-inline-start: 1.5rem;
-
-    > li::before {
-      background: #c2c9d4;
-      width: 5px;
-      height: 5px;
-      border-radius: 1px;
-      display: block;
-      content: "";
-      position: relative;
-      top: 1rem;
-      right: 1rem;
-    }
-  }
 }
 
 #tail-wrapper {
@@ -237,82 +300,15 @@ nav[data-toggle=toc] {
     margin-bottom: 2rem;
   }
 
-  #disqus_thread {
+  #disqus_thread { /* stylelint-disable-line selector-id-pattern */
     min-height: 8.5rem;
   }
-
-}
-
-.post-tail-bottom a {
-  color: inherit;
 }
 
 %btn-share-hovor {
   color: var(--btn-share-hover-color) !important;
 }
 
-.share-wrapper {
-  vertical-align: middle;
-  user-select: none;
-
-  .share-icons {
-    font-size: 1.2rem;
-
-    a {
-      &:not(:last-child) {
-        margin-right: 0.25rem;
-      }
-
-      &:hover {
-        text-decoration: none;
-
-        > i {
-          @extend %btn-share-hovor;
-        }
-      }
-    }
-
-    > i {
-      position: relative;
-      bottom: 1px;
-
-      @extend %cursor-pointer;
-
-      &:hover {
-        @extend %btn-share-hovor;
-      }
-    }
-
-    .fab {
-      &.fa-twitter {
-        @include btn-sharing-color(rgba(29, 161, 242, 1));
-      }
-
-      &.fa-facebook-square {
-        @include btn-sharing-color(rgb(66, 95, 156));
-      }
-
-      &.fa-telegram {
-        @include btn-sharing-color(rgb(39, 159, 217));
-      }
-
-      &.fa-linkedin {
-        @include btn-sharing-color(rgb(0, 119, 181));
-      }
-
-      &.fa-weibo {
-        @include btn-sharing-color(rgb(229, 20, 43));
-      }
-    }
-
-  } /* .share-icons */
-
-  .fas.fa-link {
-    @include btn-sharing-color(rgb(171, 171, 171));
-  }
-
-} /* .share-wrapper */
-
 .share-label {
   @include label(inherit, 400, inherit);
 
@@ -321,23 +317,6 @@ nav[data-toggle=toc] {
   }
 }
 
-.license-wrapper {
-  line-height: 1.2rem;
-
-  > a {
-    color: var(--text-color);
-
-    &:hover {
-      @extend %link-hover;
-    }
-  }
-
-  span:last-child {
-    font-size: 0.85rem;
-  }
-
-} /* .license-wrapper */
-
 @media all and (max-width: 576px) {
   .preview-img[data-src] {
     margin-top: 2.2rem;
diff --git a/_sass/layout/tags.scss b/_sass/layout/tags.scss
index ab6c7b5..4cf5d3b 100644
--- a/_sass/layout/tags.scss
+++ b/_sass/layout/tags.scss
@@ -14,6 +14,6 @@
   span {
     margin-left: 0.6em;
     font-size: 0.7em;
-    font-family: 'Oswald', sans-serif;
+    font-family: Oswald, sans-serif;
   }
 }