From 73d1027acc3998e51e2d4c4159e96b6bec6c89ce Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Tue, 25 Feb 2020 17:56:03 +0800
Subject: [PATCH] Rewrite styles with SCSS.

---
 assets/css/_dark/dark-main.scss |   54 +-
 assets/css/_module.scss         |   84 +++
 assets/css/archives.scss        |  237 +++---
 assets/css/categories.scss      |   71 +-
 assets/css/category-tag.scss    |   83 +--
 assets/css/home.scss            |  146 ++--
 assets/css/main.scss            | 1209 +++++++++++++++----------------
 assets/css/post.scss            |  258 ++++---
 assets/css/syntax.scss          |  112 +--
 assets/css/tags.scss            |   15 +-
 10 files changed, 1165 insertions(+), 1104 deletions(-)
 create mode 100644 assets/css/_module.scss

diff --git a/assets/css/_dark/dark-main.scss b/assets/css/_dark/dark-main.scss
index 5183063..bdbfac2 100644
--- a/assets/css/_dark/dark-main.scss
+++ b/assets/css/_dark/dark-main.scss
@@ -47,6 +47,19 @@
   --footnote-target-bg: rgb(63, 81, 181);
   --btn-sharing: #6c757d;
 
+  /* tags */
+  --tag-border: rgb(59, 79, 88);
+  --tag-shadow: rgb(32, 33, 33);
+
+  /* categories */
+  --categories-hover-bg: rgb(73, 75, 76);
+
+  /* archives */
+  --timeline-node-bg: rgb(150, 152, 156);
+
+  /* Footer */
+  ---footer-link: rgb(146, 146, 146);
+
   hr {
     border-color: var(--main-border);
   }
@@ -68,40 +81,29 @@
     background-color: var(--card-bg);
   }
 
-  .categories .card-header {
-    background-color: var(--card-header-bg);
+  .categories {
+    .card-header {
+      background-color: var(--card-header-bg);
+    }
+    .list-group-item {
+      // @extend %category-bg;
+      border-left: none;
+      border-right: none;
+      padding-left: 2rem;
+      border-color: var(--main-border);
+      &:last-child {
+        border-bottom-color: var(--card-bg);
+      }
+    }
   }
 
-  .categories .list-group-item {
-    border-left: none;
-    border-right: none;
-    padding-left: 2rem;
-    border-color: var(--main-border);
-  }
-
-  .categories .list-group-item:last-child {
-    border-bottom-color: var(--card-bg);
-  }
-
-  /* tags */
-  --tag-border: rgb(59, 79, 88);
-  --tag-shadow: rgb(32, 33, 33);
-
-  /* categories */
-  --categories-hover-bg: rgb(73, 75, 76);
-
-  /* archives */
-  --timeline-node-bg: rgb(150, 152, 156);
 
   #archives li:nth-child(odd) {
     background-image: linear-gradient(to left,
       rgb(26, 26, 30), rgb(39, 39, 45), rgb(39, 39, 45), rgb(39, 39, 45), rgb(26, 26, 30));
   }
 
-  /* Footer */
-  ---footer-link: rgb(146, 146, 146);
-
-}
+} // dark-scheme
 
 
 @mixin light-mode-invisible {
diff --git a/assets/css/_module.scss b/assets/css/_module.scss
new file mode 100644
index 0000000..230fcf7
--- /dev/null
+++ b/assets/css/_module.scss
@@ -0,0 +1,84 @@
+/*
+* Mainly scss modules, only imported to `assets/css/main.scss`
+*
+* v2.1
+* https://github.com/cotes2020/jekyll-theme-chirpy
+* © 2020 Cotes Chung
+* MIT Licensed
+*/
+
+/*---------- scss placeholder ---------*/
+
+%tag-hover {
+  background: var(--tag-hover, rgb(222, 226, 230));
+  transition: background 0.35s ease-in-out;
+}
+
+%table-cell {
+  padding: .35rem .8rem;
+  font-size: 95%;
+}
+
+%link-hover {
+  color: #d2603a!important;
+  border-bottom: 1px solid #d2603a;
+  text-decoration: none;
+}
+
+%link-color {
+  color: var(--link-color, #2a408e);
+}
+
+%no-bottom-border {
+  border-bottom: none;
+}
+
+%section {
+  line-height: 1.2;
+  margin-bottom: 1rem;
+}
+
+%anchor {
+  padding-top: 3.5rem;
+  margin-top: -2.5rem;
+}
+
+%footer-content {
+  font-weight: 600;
+  color: var(---footer-link, inherit);
+}
+
+
+/*---------- scss mixin ---------*/
+
+@mixin no-text-decoration {
+  text-decoration: none;
+}
+
+@mixin sidebar-icon {
+  color: rgba(255, 255, 255, 0.5);
+  transition: color 0.35s ease-in-out;
+  user-select: none;
+  margin: 0 .25rem;
+}
+
+@mixin icon-round($diameter) {
+  border: 1px solid;
+  border-radius: 50%;
+  width: $diameter;
+  height: $diameter;
+}
+
+@mixin ml-mr($value) {
+  margin-left: $value;
+  margin-right: $value;
+}
+
+@mixin pl-pr($val) {
+  padding-left: $val;
+  padding-right: $val;
+}
+
+@mixin input-placeholder {
+  opacity: 0.6;
+}
diff --git a/assets/css/archives.scss b/assets/css/archives.scss
index 10784ff..35a656e 100644
--- a/assets/css/archives.scss
+++ b/assets/css/archives.scss
@@ -8,109 +8,9 @@
   MIT License
 */
 
-#archives {
-  letter-spacing: 0.03rem;
-}
+$dot-color: #c2c6cc;
 
-#archives li {
-  font-size: 1.1rem;
-  line-height: 3rem;
-}
-
-#archives li:nth-child(odd) {
-  background-color: var(--main-wrapper-bg, #fff);
-  background-image: linear-gradient(to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
-}
-
-#archives li>div {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-#archives span.lead {
-  font-size: 1.5rem;
-  font-family: 'Oswald', sans-serif;
-  position: relative;
-  left: 8px;
-}
-
-#archives span.lead:not(:first-child) {
-  position: relative;
-  left: 4px;
-}
-
-#archives span.lead:not(:first-child)::after {
-  left: 67px;
-}
-
-#archives span.lead::after { /* Year dot */
-  content: "";
-  display: block;
-  position: relative;
-  -webkit-border-radius: 50%;
-  -moz-border-radius: 50%;
-  border-radius: 50%;
-  width: 12px;
-  height: 12px;
-  top: -26px;
-  left: 63px;
-  border: 3px solid;
-  background-color: var(--main-border, #ffffff);
-  border-color: var(--timeline-node-bg, #c2c6cc);
-  box-shadow: 0 0 2px 0 #c2c6cc;
-  z-index: 1;
-}
-
-#archives .date {
-  white-space: nowrap;
-  display: inline-block;
-}
-
-#archives .date.month {
-  width: 1.4rem;
-  text-align: center;
-  font-family: 'Oswald', sans-serif;
-}
-
-#archives .date.day {
-  font-size: 85%;
-  font-family: sans-serif;
-  text-align: center;
-  margin-right: -2px;
-  width: 1.2rem;
-  position: relative;
-  left: -.15rem;
-}
-
-#archives ul>li>div>a {
-/* post title in Archvies */
-  margin-left: 2.5rem;
-  position: relative;
-  top: .1rem;
-}
-
-#archives .date.month ~ a::before {
-  /* A dot for Month and Day */
-  content: "";
-  display: inline-block;
-  position: relative;
-  -webkit-border-radius: 50%;
-  -moz-border-radius: 50%;
-  border-radius: 50%;
-  width: 8px;
-  height: 8px;
-  float: left;
-  top: 1.35rem;
-  left: 69px;
-  background-color: var(--timeline-node-bg, #c2c6cc);
-  box-shadow: 0 0 3px 0 #c2c6cc;
-  z-index: 1;
-}
-
-/* timeline for date */
-#archives ul>li::after,
-#archives ul>li:first-child::before {
+%date-timeline {
   content: "";
   width: 4px;
   left: 75px;
@@ -120,30 +20,127 @@
   background-color: var(--main-border, rgba(0, 0, 0, 0.075));
 }
 
-#archives ul>li::after {
-  height: 2.8rem;
-  top: -1.3rem;
-}
+#archives {
+  letter-spacing: 0.03rem;
+  li {
+    font-size: 1.1rem;
+    line-height: 3rem;
+    &:nth-child(odd) {
+      background-color: var(--main-wrapper-bg, #fff);
+      background-image: linear-gradient(to left, #fff, #fbfbfb, #fbfbfb, #fbfbfb, #fff);
+    }
+    >div {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
 
-#archives ul>li:first-child::before {
-  height: 3.06rem;
-  top: -1.61rem;
-}
+  span.lead {
+    font-size: 1.5rem;
+    font-family: 'Oswald', sans-serif;
+    position: relative;
+    left: 8px;
 
-#archives ul:not(:last-child)>li:last-child::after {
-  height: 3.4rem;
-}
+    &:not(:first-child) {
+      position: relative;
+      left: 4px;
+      &::after {
+        left: 67px;
+      }
+    }
+
+    &::after {
+      /* Year dot */
+      content: "";
+      display: block;
+      position: relative;
+      -webkit-border-radius: 50%;
+      -moz-border-radius: 50%;
+      border-radius: 50%;
+      width: 12px;
+      height: 12px;
+      top: -26px;
+      left: 63px;
+      border: 3px solid;
+      background-color: var(--main-border, #ffffff);
+      border-color: var(--timeline-node-bg, $dot-color);
+      box-shadow: 0 0 2px 0 $dot-color;
+      z-index: 1;
+    }
+  } // #archives span.lead
+
+  .date {
+    white-space: nowrap;
+    display: inline-block;
+    &.month {
+      width: 1.4rem;
+      text-align: center;
+      font-family: 'Oswald', sans-serif;
+      ~a::before {
+        /* A dot for Month and Day */
+        content: "";
+        display: inline-block;
+        position: relative;
+        -webkit-border-radius: 50%;
+        -moz-border-radius: 50%;
+        border-radius: 50%;
+        width: 8px;
+        height: 8px;
+        float: left;
+        top: 1.35rem;
+        left: 69px;
+        background-color: var(--timeline-node-bg, $dot-color);
+        box-shadow: 0 0 3px 0 $dot-color;
+        z-index: 1;
+      }
+    }
+    &.day {
+      font-size: 85%;
+      font-family: sans-serif;
+      text-align: center;
+      margin-right: -2px;
+      width: 1.2rem;
+      position: relative;
+      left: -.15rem;
+    }
+  } // #archives .date
+
+  ul {
+    >li {
+      >div>a {
+        /* post title in Archvies */
+        margin-left: 2.5rem;
+        position: relative;
+        top: .1rem;
+      }
+      &::after {
+        @extend %date-timeline;
+        height: 2.8rem;
+        top: -1.3rem;
+      }
+      &:first-child::before {
+        @extend %date-timeline;
+        height: 3.06rem;
+        top: -1.61rem;
+      }
+    }
+    &:not(:last-child)>li:last-child::after {
+      height: 3.4rem;
+    }
+    &:last-child>li:last-child::after {
+      display: none;
+    }
+  } // #archives ul
+
+} // #archives
 
-#archives ul:last-child>li:last-child::after {
-  display: none;
-}
 
 @media all and (max-width: 576px) {
   #archives {
     margin-top: -1rem;
-  }
-
-  #archives ul {
-    letter-spacing: 0;
+    ul {
+      letter-spacing: 0;
+    }
   }
 }
diff --git a/assets/css/categories.scss b/assets/css/categories.scss
index 9b1804f..f8fa208 100644
--- a/assets/css/categories.scss
+++ b/assets/css/categories.scss
@@ -8,35 +8,43 @@
   MIT License
 */
 
-.categories {
-  margin-bottom: 2rem;
-}
-
-.categories .card-header {
-  padding-right: 12px;
-}
-
-.categories .card-header>span>i:first-child,
-.categories .list-group-item>i {
+%category-icon-color {
   color: gray;
 }
 
-.categories .list-group-item {
-  border-left: none;
-  border-right: none;
-  padding-left: 2rem;
-}
+.categories {
+  margin-bottom: 2rem;
+  .card-header {
+    padding-right: 12px;
+  }
+  .list-group-item {
+    border-left: none;
+    border-right: none;
+    padding-left: 2rem;
+  }
 
-.categories .collapsing .list-group-item:first-child,
-.categories .collapse .list-group-item:first-child {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
+  .card-header>span>i:first-child {
+    @extend %category-icon-color;
+  }
 
-.categories i.far,
-.categories i.fas { // fontawesome icons
-  font-size: 86%;
-}
+  .list-group-item {
+    >i {
+      @extend %category-icon-color;
+    }
+    .collapsing &:first-child,
+    .collapse &:first-child {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+  }
+
+  i {
+    &.far, &.fas {
+      font-size: 86%; // fontawesome icons
+    }
+  }
+
+} // .categories
 
 .category-trigger {
   width: 1.7rem;
@@ -44,6 +52,12 @@
   border-radius: 50%;
   text-align: center;
   color: #6c757d!important;
+  >i.fas {
+    position: relative;
+    height: .7rem;
+    width: 1rem;
+    transition: 300ms ease all;
+  }
 }
 
 @media (hover: hover) { // only works on desktop
@@ -52,15 +66,8 @@
   }
 }
 
-.category-trigger>i.fas {
-  position: relative;
-  height: .7rem;
-  width: 1rem;
-  transition: 300ms ease all;
-}
-
 .rotate {
   -ms-transform: rotate(-90deg); /* IE 9 */
   -webkit-transform: rotate(-90deg); /* Safari 3-8 */
   transform: rotate(-90deg);
-}
+}
\ No newline at end of file
diff --git a/assets/css/category-tag.scss b/assets/css/category-tag.scss
index 58c3302..c70b851 100644
--- a/assets/css/category-tag.scss
+++ b/assets/css/category-tag.scss
@@ -8,33 +8,29 @@
   MIT License
 */
 
-#page-category ul>li,
-#page-tag ul>li {
-  line-height: 1.5rem;
-  padding: .6rem 0;
-}
-
-#page-category ul>li::before,
-#page-tag ul>li::before {
-  background: #999;
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
-  display: block;
-  content: "";
-  position: relative;
-  top: .6rem;
-  margin-right: .5rem;
-}
-
-#page-tag ul>li>a,
-#page-category ul>li>a, { /* post's title */
-  font-size: 1.1rem;
-}
-
-#page-category ul>li>span:last-child,
-#page-tag ul>li>span:last-child { /* post's date */
-  white-space: nowrap;
+#page-category, #page-tag {
+  ul>li {
+    line-height: 1.5rem;
+    padding: .6rem 0;
+    &::before { // dot
+      background: #999;
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      display: block;
+      content: "";
+      position: relative;
+      top: .6rem;
+      margin-right: .5rem;
+    }
+    >a { /* post's title */
+      font-size: 1.1rem;
+    }
+    >span:last-child {
+      white-space: nowrap;
+    }
+    /* post's date */
+  }
 }
 
 #page-tag h1>i { // tag icon
@@ -45,10 +41,12 @@
   font-size: 1.25rem;
 }
 
-#page-category a:hover,
-#page-tag a:hover,
-#access-lastmod a:hover {
-  margin-bottom: -1px;  // Avoid jumping
+a:hover {
+  #page-category &,
+  #page-tag &,
+  #access-lastmod & {
+    margin-bottom: -1px; // Avoid jumping
+  }
 }
 
 .dash {
@@ -57,17 +55,16 @@
 }
 
 @media all and (max-width: 576px) {
-
-  #page-category ul>li::before,
-  #page-tag ul>li::before {
-    margin: 0 .5rem;
+  #page-category, #page-tag {
+    ul>li {
+      &::before {
+        margin: 0 .5rem;
+      }
+      >a {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
   }
-
-  #page-tag ul>li>a,
-  #page-category ul>li>a {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
 }
\ No newline at end of file
diff --git a/assets/css/home.scss b/assets/css/home.scss
index 963f259..a3e3fc0 100644
--- a/assets/css/home.scss
+++ b/assets/css/home.scss
@@ -1,6 +1,5 @@
 ---
 ---
-
 /*!
   Style for Homepage
   v2.0
@@ -12,95 +11,90 @@
 #post-list {
   margin-top: 1rem;
   padding-right: .5rem;
+  .post-meta {
+    i:not(:first-child) { // post-meta icons on HOME
+      margin-left: 1.5rem;
+    }
+  }
 }
 
 .pagination {
   font-size: 1rem;
-}
-
-.pagination a:hover {
-  text-decoration: none;
+  a:hover {
+    text-decoration: none;
+  }
 }
 
 .post-preview {
   padding-top: 1.5rem;
   padding-bottom: 1rem;
   border-bottom: 1px solid rgba(158, 158, 158, 0.17);
+  >h1 {
+    font-size: 1.4rem;
+    margin: 0;
+  }
+  i.far { /* fontawesome icons */
+    font-size: 86%;
+  }
+  .post-content {
+    margin-top: .6rem;
+    margin-bottom: .6rem;
+    color: var(--text-color, dimgray);
+    >p { /* Make preview shorter in Home page*/
+      margin: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+  }
 }
 
-.post-preview>h1 {
-  font-size: 1.4rem;
-  margin: 0;
-}
+.page-item {
+  .page-link {
+    color: var(--text-color, #555555);
+    width: 2.5rem;
+    height: 2.5rem;
+    padding: 0;
+    text-align: center;
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    align-items: center;
+    border-radius: 50%;
+    border: 1px solid var(--main-border, #f1f1f1);
+    font-family: 'Lato', sans-serif;
+    background-color: var(--button-bg);
+  }
+  &.active {
+    .page-link {
+      background-color: var(--btn-active-bg, #2a408e);
+      border-color: var(--btn-active-border-color, #007bff);
+      box-shadow: 0 0 8px 0 var(--main-wrapper-bg, #4b92d2) !important;
+      color: var(--text-color, #f8f8f8);
+    }
+  }
+  &.disabled {
+    cursor: not-allowed;
+    .page-link {
+      color: rgba(108, 117, 125, 0.57);
+      border-color: var(--main-border, #f1f1f1);
+      background-color: var(--button-bg);
+    }
+  }
+  &:first-child .page-link,
+  &:last-child .page-link {
+    border-radius: 50%;
+  }
+  &:not(:last-child) {
+    margin-right: 0.6rem;
+  }
 
-.post-preview i.far {
-  /* fontawesome icons */
-  font-size: 86%;
-}
+} // .page-item
 
-.post-preview .post-content {
-  margin-top: .6rem;
-  margin-bottom: .6rem;
-  color: var(--text-color, dimgray);
-}
-
-/* Make preview shorter in Home page*/
-.post-preview .post-content>p {
-  margin: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-
-.page-item .page-link {
-  color: var(--text-color, #555555);
-  width: 2.5rem;
-  height: 2.5rem;
-  padding: 0;
-  text-align: center;
-  display: -webkit-box;
-  display: flex;
-  -webkit-box-pack: center;
-  justify-content: center;
-  -webkit-box-align: center;
-  align-items: center;
-  border-radius: 50%;
-  border: 1px solid var(--main-border, #f1f1f1);
-  font-family: 'Lato', sans-serif;
-  background-color: var(--button-bg);
-}
-
-.page-item.active .page-link {
-  background-color: var(--btn-active-bg, #2a408e);
-  border-color: var(--btn-active-border-color, #007bff);
-  box-shadow: 0 0 8px 0 var(--main-wrapper-bg, #4b92d2) !important;
-  color: var(--text-color, #f8f8f8);
-}
-
-.page-item.disabled .page-link {
-  color: rgba(108, 117, 125, 0.57);
-  border-color: var(--main-border, #f1f1f1);
-  background-color: var(--button-bg);
-}
-
-.page-item.disabled {
-  cursor: not-allowed;
-}
-
-.page-item:first-child .page-link,
-.page-item:last-child .page-link {
-  border-radius: 50%;
-}
-
-.page-item:not(:last-child) {
-  margin-right: 0.6rem;
-}
-
-#post-list .post-meta i:not(:first-child) { // post-meta icons on HOME
-  margin-left: 1.5rem;
-}
 
 @media all and (max-width: 576px) {
   #post-list .post-meta>span i:not(:first-child) {
diff --git a/assets/css/main.scss b/assets/css/main.scss
index d89bbf2..6b5865a 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -10,20 +10,7 @@
 
 @import "_fonts";
 @import "_dark/dark-main";
-
-@mixin sidebar-icon {
-  color: rgba(255, 255, 255, 0.5);
-  transition: color 0.35s ease-in-out;
-  user-select: none;
-  margin: 0 .25rem;
-}
-
-@mixin icon-round($diameter) {
-  border: 1px solid;
-  border-radius: 50%;
-  width: $diameter;
-  height: $diameter;
-}
+@import "_module";
 
 html, body {
   height: 100%;
@@ -46,8 +33,7 @@ body {
 /*--- sidebar layout ---*/
 
 #sidebar {
-  padding-left: 0;
-  padding-right: 0;
+  @include pl-pr(0);
   position: fixed;
   top: 0;
   left: 0;
@@ -59,41 +45,76 @@ body {
   transition: transform 0.4s ease;
   background: rgb(42, 30, 107);
   background: var(--sidebar-bg,
-    radial-gradient(circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%));
-}
+  radial-gradient(circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%));
 
-#sidebar a {
-  @include sidebar-icon;
-}
+  a {
+    @include sidebar-icon;
+  }
 
-#sidebar .sidebar-bottom .icon-border+a { // the icon behide mode-toggle
-  margin-left: .1rem;
-}
+  .sidebar-bottom {
+    .icon-border+a { // the icon behide mode-toggle
+      margin-left: .1rem;
+    }
+  }
+  .nav-link {
+    border-radius: 0;
+    font-size: .95rem;
+    font-weight: 600;
+    letter-spacing: 1px;
+  }
+  .nav-item {
+    height: 20%;
+    &:hover {
+      .nav-link {
+        color: #f8f9facf;
+      }
+    }
+    &.active {
+      .nav-link {
+        color: #fcfcfc;
+      }
+    }
+  }
 
-#sidebar .nav-item {
-  height: 20%;
-}
+  ul {
+    height: 16.5rem;
+    display: -webkit-box;
+    display: -ms-flexbox;
+  }
 
-#sidebar .nav-link {
-  border-radius: 0;
-  font-size: .95rem;
-  font-weight: 600;
-  letter-spacing: 1px;
-}
+  .sidebar-bottom {
+    font-size: 1.2rem;
+    margin: 2rem 2.5rem 1.6rem;
 
-#sidebar .nav-item:hover .nav-link {
-  color: #f8f9facf;
-}
+    a {
+      margin-bottom: .5rem; // icons may have multi lines
+    }
 
-#sidebar .nav-item.active .nav-link {
-  color: #fcfcfc;
-}
+    a:hover, #mode-toggle-wrapper>i:hover {
+      color: #fff;
+    }
 
-#sidebar ul {
-  height: 16.5rem;
-  display: -webkit-box;
-  display: -ms-flexbox;
-}
+    #mode-toggle-wrapper {
+      i {
+        @include sidebar-icon;
+        margin-right: 0;
+        font-size: 1.05rem;
+        text-align: center;
+        position: relative;
+        bottom: 1px;
+      }
+    }
+
+    .icon-border {
+      background: #525354;
+      width: 3px;
+      height: 3px;
+      border-radius: 50%;
+      margin-top: .8rem;
+    }
+  }
+
+} // #sidebar
 
 #sidebar ul > li.active:nth-child(1) ~ li:last-child::after,
 #sidebar ul > li.nav-item:nth-child(1):hover ~ li:last-child::after {
@@ -130,19 +151,21 @@ body {
   visibility: visible;
 }
 
-#sidebar ul > li:last-child > a {
-  margin-right: -3px;
-  max-width: calc(100% - 3px);
-}
-
-#sidebar ul > li:last-child::after {
-  visibility: hidden;
-  content: "";
-  position: relative;
-  width: 3px;
-  height: 26px;
-  background-color: var(--nav-cursor, #fcfcfc);
-  pointer-events: none;
+#sidebar ul>li:last-child {
+  >a {
+    margin-right: -3px;
+    max-width: calc(100% - 3px);
+  }
+  &::after {
+    visibility: hidden;
+    content: "";
+    position: relative;
+    right: 1px;
+    width: 3px;
+    height: 26px;
+    background-color: var(--nav-cursor, #fcfcfc);
+    pointer-events: none;
+  }
 }
 
 @media (hover: hover) {
@@ -163,54 +186,53 @@ body {
   margin-top: 2rem;
 }
 
-#avatar>a {
-  display: block;
-  width: 6rem;
-  height: 6rem;
-  border-radius: 50%;
-  border: 2px solid #b6b6b6;
-  overflow: hidden;
-  transform: translateZ(0); /* fixed the zoom in Safari */
-  -webkit-transition: border-color 0.35s ease-in-out;
-  -moz-transition: border-color 0.35s ease-in-out;
-  transition: border-color 0.35s ease-in-out;
-}
+#avatar {
+  >a {
+    display: block;
+    width: 6rem;
+    height: 6rem;
+    border-radius: 50%;
+    border: 2px solid #b6b6b6;
+    overflow: hidden;
+    transform: translateZ(0); // fixed the zoom in Safari
+    -webkit-transition: border-color 0.35s ease-in-out;
+    -moz-transition: border-color 0.35s ease-in-out;
+    transition: border-color 0.35s ease-in-out;
+  }
 
-#avatar:hover>a {
-  border-color: #fff;
-}
+  &:hover>a {
+    border-color: #fff;
+  }
 
-#avatar img {
-  width: 100%;
-  height: 100%;
-  background-size: cover;
-  background-repeat: no-repeat;
-  -webkit-transition: all .5s !important;
-  -moz-transition: all .5s !important;
-  transition: all .5s !important;
-}
-
-#avatar img:hover {
-  -ms-transform: scale(1.2);
-  -moz-transform: scale(1.2);
-  -webkit-transform: scale(1.2);
-  transform: scale(1.2);
-}
+  img {
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    -webkit-transition: all .5s !important;
+    -moz-transition: all .5s !important;
+    transition: all .5s !important;
+    &:hover {
+      -ms-transform: scale(1.2);
+      -moz-transform: scale(1.2);
+      -webkit-transform: scale(1.2);
+      transform: scale(1.2);
+    }
+  }
+} // #avatar
 
 #site-title {
   text-align: center;
-}
-
-#site-title a {
-  color: #b6b6b6;
-  font-weight: 900;
-  font-size: 1.5rem;
-  letter-spacing: .5px;
-}
-
-#site-title a:hover {
-  color: #fff;
-  text-decoration: none;
+  a {
+    color: #b6b6b6;
+    font-weight: 900;
+    font-size: 1.5rem;
+    letter-spacing: .5px;
+    &:hover {
+      color: #fff;
+      text-decoration: none;
+    }
+  }
 }
 
 #site-subtitle {
@@ -233,42 +255,8 @@ body {
   padding-top: 3rem;
   height: 100%;
   overflow: auto;
-}
-
-#search-result-wrapper .post-content {
-  margin-top: 2rem;
-}
-
-
-#sidebar .sidebar-bottom {
-  font-size: 1.2rem;
-  margin: 2rem 2.5rem 1.6rem;
-
-  a {
-    margin-bottom: .5rem; // icons may have multi lines
-  }
-
-  a:hover, #mode-toggle-wrapper>i:hover {
-    color: #fff;
-  }
-
-  #mode-toggle-wrapper {
-    i {
-      @include sidebar-icon;
-      margin-right: 0;
-      font-size: 1.05rem;
-      text-align: center;
-      position: relative;
-      bottom: 1px;
-    }
-  }
-
-  .icon-border {
-    background: #525354;
-    width: 3px;
-    height: 3px;
-    border-radius: 50%;
-    margin-top: .8rem;
+  .post-content {
+    margin-top: 2rem;
   }
 }
 
@@ -296,11 +284,17 @@ body {
   font-size: 1rem;
   color: gray;
   padding-left: .5rem;
-}
-
-#breadcrumb span:not(:last-child)::after {
-  content: "›";
-  padding: 0 .3rem;
+  a:hover {
+    @extend %link-hover;
+  }
+  span {
+    &:not(:last-child) {
+      &::after {
+        content: "›";
+        padding: 0 .3rem;
+      }
+    }
+  }
 }
 
 #sidebar-trigger,
@@ -316,16 +310,14 @@ body {
   background: var(--search-wrapper-bg, #f5f5f5);
   padding: 0 .5rem;
   transition: background-color .15s ease-in-out,border-color .15s ease-in-out;
-}
-
-#search-wrapper i {
-  z-index: 2;
-  font-size: .9rem;
-  color: var(--search-icon, #c2c6cc);
-}
-
-#search-wrapper .fa-times-circle { /* button 'clean up' */
-  visibility: hidden;
+  i {
+    z-index: 2;
+    font-size: .9rem;
+    color: var(--search-icon, #c2c6cc);
+  }
+  .fa-times-circle { /* button 'clean up' */
+    visibility: hidden;
+  }
 }
 
 #search-cancel { /* 'Cancel' link */
@@ -342,65 +334,65 @@ body {
   color: var(--text-color);
 }
 
-#search-input:focus {
-  box-shadow: none;
-  background: center;
+#search-input {
+  &:focus {
+    box-shadow: none;
+    background: center;
+    &.form-control {
+      &::-webkit-input-placeholder { @include input-placeholder }
+      &::-moz-placeholder { @include input-placeholder }
+      &:-ms-input-placeholder { @include input-placeholder }
+      &::placeholder { @include input-placeholder }
+    }
+  }
 }
 
-#search-input:focus.form-control::-webkit-input-placeholder { opacity: 0.6; }
-#search-input:focus.form-control::-moz-placeholder { opacity: 0.6; }
-#search-input:focus.form-control:-ms-input-placeholder { opacity: 0.6; }
-#search-input:focus.form-control::placeholder { opacity: 0.6; }
-
 #search-hints {
   display: none;
-}
-
-#search-hints .post-tag {
-  display: inline-block;
-  line-height: 1rem;
-  font-size: 1rem;
-  background: var(--tag-bg, #f8f9fa);
-  border: none;
-  padding: .5rem;
-  margin: 0 1rem 1rem 0;
-}
-
-#search-hints .post-tag::before {
-  content: "#";
-  padding-right: .2rem;
+  .post-tag {
+    display: inline-block;
+    line-height: 1rem;
+    font-size: 1rem;
+    background: var(--tag-bg, #f8f9fa);
+    border: none;
+    padding: .5rem;
+    margin: 0 1rem 1rem 0;
+    &::before {
+      content: "#";
+      padding-right: .2rem;
+    }
+  }
 }
 
 #search-results {
   padding-bottom: 6rem;
-}
-
-#search-results a {
-  font-size: 1.4rem;
-  font-weight: 400;
-  line-height: 2.5rem;
-}
-
-#search-results>div:not(:last-child) {
-  margin-bottom: 1rem;
-}
-
-#search-results>div i { /* icons */
-  color: #818182;
-  margin-right: .15rem;
-  font-size: 80%;
-}
-
-#search-results>div i:not(:first-child) {
-  margin-left: 1rem;
-}
-
-#search-results>div>p{
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
+  a {
+    @extend %link-color;
+    @extend %no-bottom-border;
+    font-size: 1.4rem;
+    font-weight: 400;
+    line-height: 2.5rem;
+    &:hover {
+      @extend %link-hover;
+    }
+  }
+  >div {
+    &:not(:last-child) {
+      margin-bottom: 1rem;
+    }
+    i { // icons
+      color: #818182;
+      margin-right: .15rem;
+      font-size: 80%;
+    }
+    >p {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+    }
+  }
 }
 
 #topbar-title {
@@ -429,10 +421,9 @@ body {
   background: var(--mask-bg, #c1c3c5);
   opacity: 0.5;
   z-index: 1;
-}
-
-.sidebar-expand~#mask {
-  display: block!important;
+  @at-root .sidebar-expand~& {
+    display: block!important;
+  }
 }
 
 /*--- main wrapper ---*/
@@ -444,71 +435,74 @@ $footer-height: 5rem;
   position: relative;
   min-height: 100%;
   padding-bottom: $footer-height;
-  padding-left: 0;
-  padding-right: 0;
+  @include pl-pr(0);
   margin-left: 260px;
   transition: transform 0.4s ease;
   -webkit-transition: transform 0.4s ease;
 }
 
-#main>div.row:first-child>div:nth-child(1),
-#main>div.row:first-child>div:nth-child(2) {
-  margin-top: 3rem; /* same as the height of topbar */
-}
-
-#main>div.row:first-child>div:first-child {
-  /* 3rem for topbar, 6rem for footer */
-  min-height: calc(100vh - 3rem - 6rem);
+#main>div.row:first-child>div {
+  &:nth-child(1), &:nth-child(2) {
+    margin-top: 3rem; /* same as the height of topbar */
+  }
+  &:first-child {
+    /* 3rem for topbar, 6rem for footer */
+    min-height: calc(100vh - 3rem - 6rem);
+  }
 }
 
 #post-wrapper {
   /* 350px for post extended block  */
   min-height: calc(100vh - 3rem - 6rem - 470px) !important;
+  .post-content {
+    a:hover {
+      @extend %link-hover;
+    }
+  }
 }
 
 #topbar-wrapper.row,
 #main>.row,
 #search-result-wrapper>.row {
-  margin-left: 0;
-  margin-right: 0;
+  @include ml-mr(0);
 }
 
 footer {
   position: absolute;
   bottom: 0;
   padding: 0 1rem;
-  height: $footer-height; /* see the height of #main-wrapper */
+  height: $footer-height;
   font-size: 0.8rem;
   color: #7a7b7d;
   background-color: var(--main-wrapper-bg, #ffffff);
-}
-
-
-footer>div.d-flex {
-  line-height: 1.2rem;
-  width: 95%;
-  max-width: 1045px;
-  border-top: 1px solid var(--footer-border, #f3f3f3);
-  margin-bottom: 1rem;
-}
-
-footer a:link,
-footer a:hover {
-  text-decoration: none;
-}
-
-footer>.d-flex>div {
-  width: 350px;
-}
-
-footer .footer-left a,
-footer .footer-right a {
-  font-weight: 600;
-  color: var(---footer-link, inherit);
-}
-
-footer .footer-right {
-  text-align: right;
+  >div.d-flex {
+    line-height: 1.2rem;
+    width: 95%;
+    max-width: 1045px;
+    border-top: 1px solid var(--footer-border, #f3f3f3);
+    margin-bottom: 1rem;
+    >div {
+      width: 350px;
+    }
+  }
+  a {
+    &:link {
+      @include no-text-decoration;
+    }
+    &:hover {
+      @extend  %link-hover;
+      @include no-text-decoration;
+    }
+  }
+  .footer-left a {
+    @extend %footer-content;
+  }
+  .footer-right {
+    text-align: right;
+    a {
+      @extend %footer-content;
+    }
+  }
 }
 
 /*--- Panels ---*/
@@ -520,74 +514,79 @@ footer .footer-right {
   margin-top: 3rem;
   margin-bottom: 6rem;
   color: #6c757d;
+  &:only-child {
+    position: -webkit-sticky; /* Safari */
+    position: sticky;
+  }
+  &.topbar-down {
+    top: 6rem;
+  }
+  >div {
+    padding-left: 1rem;
+    border-left: 1px solid rgba(158, 158, 158, 0.17);
+    &:not(:first-child) {
+      margin-top: 4rem;
+    }
+  }
+  h3 {
+    padding-top: .5rem;
+    padding-bottom: .5rem;
+    margin-top: 0;
+    margin-bottom: 0;
+    letter-spacing: -0.02em;
+    font-size: 1rem;
+    font-family: 'Oswald', sans-serif;
+  }
+  .post-content {
+    font-size: .9rem;
+  }
 }
 
-.access:only-child {
-  position: -webkit-sticky; /* Safari */
-  position: sticky;
+
+#access-tags {
+  >div.post-content>div {
+    max-width: 80%;
+  }
+  .post-tag {
+    display: inline-block;
+    line-height: 1rem;
+    font-size: 0.85rem;
+    background: none;
+    border: 1px solid var(--main-border, #e9ecef);
+    border-radius: .8rem;
+    padding: .3rem .5rem;
+    margin: 0 .35rem .5rem 0;
+    &:hover {
+      background-color: #2a408e;
+      border-color: #2a408e;
+      color: #fff;
+      transition: none;
+    }
+  }
 }
 
-.access.topbar-down {
-  top: 6rem;
-}
+#access-lastmod {
+  ul {
+    >li {
+      height: 1.8rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+      list-style: none;
+    }
+    a {
+      color: #6c757d;
+    }
+  }
 
-.access>div {
-  padding-left: 1rem;
-  border-left: 1px solid rgba(158, 158, 158, 0.17);
-}
-
-.access>div:not(:first-child) {
-  margin-top: 4rem;
-}
-
-.access h3 {
-  padding-top: .5rem;
-  padding-bottom: .5rem;
-  margin-top: 0;
-  margin-bottom: 0;
-  letter-spacing: -0.02em;
-  font-size: 1rem;
-  font-family: 'Oswald', sans-serif;
-}
-
-.access .post-content {
-  font-size: .9rem;
-}
-
-#access-tags>div.post-content>div {
-  max-width: 80%;
-}
-
-#access-tags .post-tag {
-  display: inline-block;
-  line-height: 1rem;
-  font-size: 0.85rem;
-  background: none;
-  border: 1px solid var(--main-border, #e9ecef);
-  border-radius: .8rem;
-  padding: .3rem .5rem;
-  margin: 0 .35rem .5rem 0;
-}
-
-#access-tags .post-tag:hover {
-  background-color: #2a408e;
-  border-color: #2a408e;
-  color: #fff;
-  transition: none;
-}
-
-#access-lastmod ul>li {
-  height: 1.8rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  list-style: none;
-}
-
-#access-lastmod ul a {
-  color: #6c757d;
+  a {
+    @extend %no-bottom-border;
+    &:hover {
+      @extend %link-hover;
+    }
+  }
 }
 
 /*--- button back-to-top ---*/
@@ -620,15 +619,21 @@ h1 {
 }
 
 h2 {
+  @extend %section;
+  @extend %anchor;
   font-size: 1.35rem;
   font-weight: 400;
 }
 
 h3 {
+  @extend %section;
+  @extend %anchor;
   font-size: 1.25rem;
 }
 
 h4 {
+  @extend %section;
+  @extend %anchor;
   font-size: 1.15rem;
 }
 
@@ -636,155 +641,162 @@ h5 {
   font-size: 1.1rem;
 }
 
-h2, h3, h4 {
-  line-height: 1.2;
-  margin-bottom: 1rem;
-}
-
 blockquote {
   border-left: 5px solid var(--blockquote-border, #eee);
   padding-left: 1rem;
   color: var(--blockquote-text, #9a9a9a);
-}
-
-.post-content blockquote a {
-  color: var(--link-color, #2a408e);
+  .post-content & {
+    a {
+      color: var(--link-color, #2a408e);
+    }
+  }
 }
 
 kbd {
   margin: 0 .3rem;
 }
 
-h2, h3, h4, sup {
-  padding-top: 3.5rem;
-  margin-top: -2.5rem;
+sup {
+  @extend %anchor;
 }
 
 .footnotes ol {
   margin-top: .5rem;
+  >li {
+    padding-top: .2rem;
+    margin-top: -0.2rem;
+    >p {
+      padding-left: .2em;
+    }
+    &:not(:last-child) {
+      margin-bottom: -.8rem;
+    }
+    &:target>p {
+      background-color: var(--footnote-target-bg, lightcyan);
+      width: fit-content;
+      -webkit-transition: background-color 1.5s ease-in-out;
+      /* Safari prior 6.1 */
+      transition: background-color 1.5s ease-in-out;
+    }
+  }
 }
 
-.footnotes ol>li {
-  padding-top: .2rem;
-  margin-top: -0.2rem;
+.footnote {
+  @at-root a#{&} {
+    margin: 0 .2em;
+    border-bottom-style: none !important;
+    -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */
+    transition: background-color 1.5s ease-in-out;
+  }
+  @at-root sup:target>a#{&} {
+    background-color: var(--footnote-target-bg, lightcyan);
+    padding: 0 2px;
+  }
 }
 
-.footnotes ol>li>p {
-  padding-left: .2em;
+.reversefootnote {
+  @at-root a#{&} {
+    font-size: .6rem;
+    position: absolute;
+    line-height: 1;
+    padding-top: .5em;
+    margin-left: .5em;
+    border-bottom-style: none !important;
+  }
 }
 
-.footnotes ol>li:not(:last-child) {
-  margin-bottom: -.8rem;
+a {
+  @at-root p>#{&} {
+    @extend %link-color;
+  }
+  @at-root span>#{&} {
+    @extend %link-color;
+  }
+  .post-preview & {
+    @extend %link-color;
+    &:hover {
+      @extend %link-hover;
+    }
+  }
+  #page .categories & {
+    @extend %link-color;
+    @extend %no-bottom-border;
+  }
+  #tags & {
+    @extend %link-color;
+  }
+  #page-category & {
+    @extend %link-color;
+    @extend %no-bottom-border;
+  }
+  #page-tag & {
+    @extend %link-color;
+    @extend %no-bottom-border;
+  }
+  #archives & {
+    @extend %link-color;
+    @extend %no-bottom-border;
+  }
+  .license-wrapper .license-text &:hover {
+    @extend %link-hover;
+  }
+  #page .post-content &:hover {
+    @extend %link-hover;
+  }
+
+} // a
+
+.post {
+  h1 {
+    margin-top: 3rem;
+  }
+  em { /* MarkDown italic */
+    padding-right: .2rem;
+  }
+  a:hover {
+    code {
+      @extend %link-hover;
+    }
+  }
 }
 
-.footnotes ol>li:target>p {
-  background-color: var(--footnote-target-bg, lightcyan);
-  width: fit-content;
-  -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */
-  transition: background-color 1.5s ease-in-out;
-}
-
-a.footnote {
-  margin: 0 .2em;
-  border-bottom-style: none !important;
-  -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */
-  transition: background-color 1.5s ease-in-out;
-}
-
-sup:target>a.footnote {
-  background-color: var(--footnote-target-bg, lightcyan);
-  padding: 0 2px;
-}
-
-a.reversefootnote {
-  font-size: .6rem;
-  position: absolute;
-  line-height: 1;
-  padding-top: .5em;
-  margin-left: .5em;
-  border-bottom-style: none !important;
-}
-
-.post-content a {
-  color: var(--link-color, #2a408e);
-  border-bottom: 1px dotted var(--link-underline-color, #c2c6cc);
-}
-
-p>a, span>a,
-.post-preview a,
-.categories a,
-#tags a,
-#page-category a,
-#page-tag a,
-#archives a,
-#search-results a {
-  color: var(--link-color, #2a408e);
-}
-
-.categories a,
-.access a,
-#archives a,
-#page-tag a,
-#page-category a,
-#search-results a {
-  border-bottom: none;
-}
-
-.post h1 {
-  margin-top: 3rem;
-}
-
-#breadcrumb a:hover,
-#search-results a:hover,
-.post-preview a:hover,
-.post-meta a:hover,
-.post-content a:hover,
-.post a:hover code,
-footer a:hover,
-#post-wrapper .post-content a:hover,
-.license-wrapper .license-text a:hover,
-#page .post-content a:hover,
-#access-lastmod a:hover {
-  color: #d2603a;
-  border-bottom: 1px solid #d2603a;
-  text-decoration: none;
-}
-
-.post em { /* MarkDown italic */
-  padding-right: .2rem;
-}
 
 /*--- Begin of Markdown table style ---*/
 
-div.post-content>table,
-div.post-content li>table {
-  min-width: 60%;
-  border-collapse: collapse;
-  border-spacing: 0;
-  margin-bottom: 1.5rem;
+div.post-content {
+  >table, li>table {
+    min-width: 60%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    margin-bottom: 1.5rem;
+  }
 }
 
-table thead {
-  border-bottom: solid 2px rgba(210, 215, 217, 0.75);
-}
+table {
+  thead {
+    border-bottom: solid 2px rgba(210, 215, 217, 0.75);
+    +tbody tr {
+      &:nth-child(2n) {
+        background-color: var(--tb-even-bg);
+      }
+      &:last-child:nth-child(2n) {
+        border-bottom: solid 1px var(--tb-odd-bg, rgba(210, 215, 217, 0.75));
+      }
+      &:nth-child(2n + 1) {
+        background-color: var(--tb-odd-bg, #f8f9fa);
+      }
+    }
+    th {
+      @extend %table-cell;
+    }
+  }
 
-table thead+tbody tr:nth-child(2n) {
-  background-color: var(--tb-even-bg);
-}
+  tbody td {
+    @extend %table-cell;
+  }
 
-table thead+tbody tr:last-child:nth-child(2n) {
-  border-bottom: solid 1px var(--tb-odd-bg, rgba(210, 215, 217, 0.75));
-}
+} // table
 
-table thead+tbody tr:nth-child(2n + 1) {
-  background-color: var(--tb-odd-bg, #f8f9fa);
-}
-
-table thead th,
-table tbody td {
-  padding: .35rem .8rem;
-  font-size: 95%;
-}
 
 /*--- post ---*/
 
@@ -795,15 +807,16 @@ table tbody td {
 .post-meta {
   font-size: 0.85rem;
   word-spacing: 1px;
-}
-
-.post-meta a {
-  color: var(--link-color, #2a408e);
-  border-bottom: 1px dotted var(--link-underline-color, #c2c6cc);
-}
-
-.post-meta a:not(:last-child) {
-  margin-right: 2px;
+  a {
+    color: var(--link-color, #2a408e);
+    border-bottom: 1px dotted var(--link-underline-color, #c2c6cc);
+    &:not(:last-child) {
+      margin-right: 2px;
+    }
+    &:hover {
+      @extend %link-hover;
+    }
+  }
 }
 
 .post-content {
@@ -812,6 +825,17 @@ table tbody td {
   margin-top: 2rem;
   overflow-wrap: break-word;
   word-wrap: break-word;
+  a {
+    @extend %link-color;
+    border-bottom: 1px dotted var(--link-underline-color, #c2c6cc);
+    &:hover {
+      @extend %link-hover;
+    }
+  }
+}
+
+.tag:hover {
+  @extend %tag-hover;
 }
 
 .post-tag {
@@ -823,22 +847,15 @@ table tbody td {
   padding: 0 .4rem;
   color: #818182;
   line-height: 1.6rem;
-}
-
-.post-tag:not(:first-child) {
-  margin-left: .2rem;
-}
-
-.tag:hover,
-.post-tag:hover {
-  background: var(--tag-hover, rgb(222, 226, 230));
-  transition: background 0.35s ease-in-out;
-}
-
-.post-tag:hover {
-  border-bottom: none;
-  text-decoration: none;
-  color: #d2603a;
+  &:not(:first-child) {
+    margin-left: .2rem;
+  }
+  &:hover {
+    @extend %tag-hover;
+    border-bottom: none;
+    text-decoration: none;
+    color: #d2603a;
+  }
 }
 
 /* --- buttons --- */
@@ -852,10 +869,9 @@ table tbody td {
 
 .loaded {
   display: block !important;
-}
-
-.d-flex.loaded {
-  display: flex !important;
+  @at-root .d-flex#{&} {
+    display: flex !important;
+  }
 }
 
 .unloaded {
@@ -889,7 +905,7 @@ table tbody td {
 }
 
 .no-text-decoration {
-  text-decoration: none;
+  @include no-text-decoration;
 }
 
 .tooltip-inner { /* Overrided BS4 Tooltip */
@@ -924,6 +940,10 @@ table tbody td {
 
   #post-wrapper {
     min-height: calc(100vh - 3rem - 10rem - 470px) !important;
+    h1 {
+      margin-top: 2.2rem;
+      font-size: 1.55rem;
+    }
   }
 
   #avatar>a {
@@ -932,13 +952,7 @@ table tbody td {
   }
 
   #site-subtitle {
-    margin-left: 1.8rem;
-    margin-right: 1.8rem;
-  }
-
-  #post-wrapper h1 {
-    margin-top: 2.2rem;
-    font-size: 1.55rem;
+    @include ml-mr(1.8rem);
   }
 
   .post-content {
@@ -960,21 +974,18 @@ table tbody td {
 
   footer {
     height: $footer-height;
-  }
-
-  footer>div.d-flex {
-    width: 90%;
-    padding: 1.5rem 0;
-    margin-bottom: .3rem;
-    flex-wrap: wrap;
-    justify-content: left!important;
-    -ms-flex-pack: distribute!important;
-    justify-content: space-around!important;
-  }
-
-  footer .footer-left,
-  footer .footer-right {
-    text-align: center;
+    >div.d-flex {
+      width: 90%;
+      padding: 1.5rem 0;
+      margin-bottom: .3rem;
+      flex-wrap: wrap;
+      justify-content: left!important;
+      -ms-flex-pack: distribute!important;
+      justify-content: space-around!important;
+    }
+    .footer-left, .footer-right {
+      text-align: center;
+    }
   }
 
 }
@@ -1027,21 +1038,19 @@ table tbody td {
 
   .sidebar-expand {
     transform: translateX(0) !important;
-  }
-
-  .sidebar-expand~#main-wrapper {
-    transform: translateX(260px) !important;
+    ~#main-wrapper {
+      transform: translateX(260px) !important;
+    }
   }
 
   #sidebar {
-    transform: translateX(-260px); /* hide */
+    transform: translateX(-260px); // hide
     -webkit-transform: translateX(-260px);
-  }
-
-  #sidebar .cursor {
-    -webkit-transition: none;
-    -moz-transition: none;
-    transition: none;
+    .cursor {
+      -webkit-transition: none;
+      -moz-transition: none;
+      transition: none;
+    }
   }
 
   #main-wrapper {
@@ -1054,10 +1063,9 @@ table tbody td {
 
   #page h1.dynamic-title {
     display: none;
-  }
-
-  #page h1.dynamic-title ~ .post-content {
-    margin-top: 3rem;
+    ~.post-content {
+      margin-top: 3rem;
+    }
   }
 
   #breadcrumb,
@@ -1086,12 +1094,13 @@ table tbody td {
     display: block;
   }
 
-  #search-wrapper.loaded~a {
-    margin-right: 1rem;
-  }
-
-  #search-wrapper .fa-times-circle {
-    right: 5.2rem;
+  #search-wrapper {
+    &.loaded~a {
+      margin-right: 1rem;
+    }
+    .fa-times-circle {
+      right: 5.2rem;
+    }
   }
 
   #search-input {
@@ -1121,10 +1130,9 @@ table tbody td {
   .footnotes ol>li {
     padding-top: 3.5rem;
     margin-top: -4.3rem;
-  }
-
-  .footnotes ol>li:first-child {
-    margin-top: -3.5rem;
+    &:first-child {
+      margin-top: -3.5rem;
+    }
   }
 }
 
@@ -1142,11 +1150,9 @@ table tbody td {
   #sidebar {
     width: 210px;
     .sidebar-bottom {
-      margin-left: 1.5rem;
-      margin-right: 1.5rem;
+      @include ml-mr(1.5rem);
       .icon-border {
-        margin-left: .25rem;
-        margin-right: .25rem;
+        @include ml-mr(.25rem);
       }
     }
   }
@@ -1166,8 +1172,7 @@ table tbody td {
 
   #site-subtitle {
     font-size: 90%;
-    margin-left: 1rem;
-    margin-right: 1rem;
+    @include ml-mr(1rem);
   }
 
   #main-wrapper {
@@ -1243,19 +1248,16 @@ table tbody td {
 
   #search-results>div {
     max-width: 46%;
-  }
-
-  #search-results>div:nth-child(odd) {
-    margin-right: 1.5rem;
-  }
-
-  #search-results>div:nth-child(even) {
-    margin-left: 1.5rem;
-  }
-
-  #search-results>div:last-child:nth-child(odd) {
-    position: relative;
-    right: 24.3%;
+    &:nth-child(odd) {
+      margin-right: 1.5rem;
+    }
+    &:nth-child(even) {
+      margin-left: 1.5rem;
+    }
+    &:last-child:nth-child(odd) {
+      position: relative;
+      right: 24.3%;
+    }
   }
 
   footer>div.d-felx {
@@ -1268,24 +1270,22 @@ table tbody td {
 
   #main>div.row {
     padding-left: calc((100% - 1150px) / 2);
-  }
-
-  #main>div.row>div.col-xl-8 {
-    max-width: 850px;
+    >div.col-xl-8 {
+      max-width: 850px;
+    }
   }
 
   #search-result-wrapper {
     padding-right: 2rem;
+    >div {
+      max-width: 1110px;
+    }
   }
 
   #search-wrapper .fa-times-circle {
     right: 2.6rem;
   }
 
-  #search-result-wrapper>div {
-    max-width: 1110px;
-  }
-
 }
 
 @media all and (min-width: 1400px) and (max-width: 1650px) {
@@ -1302,15 +1302,16 @@ table tbody td {
 
   #main>div.row>div.col-xl-8 {
     padding-left: 0;
+    >div:first-child {
+      padding-left: .55rem !important;
+      padding-right: 1.9rem !important;
+    }
   }
 
-  #main>div.row>div.col-xl-8>div:first-child {
-    padding-left: .55rem !important;
-    padding-right: 1.9rem !important;
-  }
+  $side-bar-width: 350px;
 
   #main-wrapper {
-    margin-left: 350px;
+    margin-left: $side-bar-width
   }
 
   #panel-wrapper {
@@ -1318,7 +1319,7 @@ table tbody td {
   }
 
   #topbar-wrapper {
-    left: 350px;
+    left: $side-bar-width
   }
 
   #topbar {
@@ -1329,14 +1330,6 @@ table tbody td {
     margin-right: 3%;
   }
 
-  #sidebar {
-    width: 350px;
-  }
-
-  #sidebar ul {
-    margin-left: 5%;
-  }
-
   #profile-wrapper {
     margin-top: 4rem;
     margin-bottom: 3rem;
@@ -1348,11 +1341,10 @@ table tbody td {
     -webkit-box-pack: normal !important;
     -ms-flex-pack: normal !important;
     justify-content: normal !important;
-  }
-
-  #avatar > a {
-    width: 6.2rem;
-    height: 6.2rem;
+    >a {
+      width: 6.2rem;
+      height: 6.2rem;
+    }
   }
 
   .profile-text {
@@ -1385,62 +1377,68 @@ table tbody td {
     margin: .3rem 0 0 0;
   }
 
-  #sidebar ul>li>a {
-    padding-left: 2.5rem;
-    -webkit-box-pack: start!important;
-    -ms-flex-pack: start!important;
-    justify-content: flex-start!important;
-  }
+  #sidebar {
+    width: $side-bar-width;
+    ul {
+      margin-left: 5%;
+      >li>a {
+        padding-left: 2.5rem;
+        -webkit-box-pack: start!important;
+        -ms-flex-pack: start!important;
+        justify-content: flex-start!important;
+      }
+    }
 
-  #sidebar .nav-link>span {
-    letter-spacing: 3px;
-  }
+    .nav-link {
+      >span {
+        letter-spacing: 3px;
+      }
+      >i {
+        @include icon-round(1.65rem);
+        line-height: 1rem;
+        font-size: .6rem;
+        padding: .5em 0 0 .1em;
+        display: inline-block!important;
+      }
+    }
 
-  #sidebar .nav-link>i {
-    @include icon-round(1.65rem);
-    line-height: 1rem;
-    font-size: .6rem;
-    padding: .5em 0 0 .1em;
-    display: inline-block!important;
-  }
-
-  #sidebar .sidebar-bottom {
-    margin-left: 3.5rem;
-    margin-right: 3rem;
-    font-size: 1.3rem;
-    a {
-      border: 1px solid;
-      border-radius: 50%;
-      font-size: 1rem;
-      width: 2rem;
-      height: 2rem;
-      text-align: center;
-      i {
+    .sidebar-bottom {
+      margin-left: 3.5rem;
+      margin-right: 3rem;
+      font-size: 1.3rem;
+      a {
+        border: 1px solid;
+        border-radius: 50%;
+        font-size: 1rem;
+        width: 2rem;
+        height: 2rem;
         text-align: center;
-        width: 1.25em;
-        padding-top: .44rem;
+        i {
+          text-align: center;
+          width: 1.25em;
+          padding-top: .44rem;
+        }
       }
-    }
 
-    #mode-toggle-wrapper {
-      font-size: .9rem;
-      i {
-        @include icon-round(2rem);
-        padding-top: .44rem;
-        bottom: 0;
+      #mode-toggle-wrapper {
+        font-size: .9rem;
+        i {
+          @include icon-round(2rem);
+          padding-top: .44rem;
+          bottom: 0;
+        }
       }
-    }
 
-    .icon-border {
-      margin-left: .2rem;
-      margin-right: .2rem;
-      margin-top: .85rem;
-    }
+      .icon-border {
+        @include ml-mr(.2rem);
+        margin-top: .85rem;
+        +a {
+          margin-left: 0;
+        }
+      }
 
-    .icon-border+a {
-      margin-left: 0;
-    }
-  } // #sidebar .sidebar-bottom
+    } // .sidebar-bottom
+  } // #sidebar
 
   footer>div.d-flex {
     width: 87%;
@@ -1449,16 +1447,14 @@ table tbody td {
 
   #search-result-wrapper {
     width: calc(100% - 350px); // 350px is the with of sidebar
+    >div {
+      max-width: 1150px;
+    }
   }
 
-  #search-result-wrapper>div {
-    max-width: 1150px;
-  }
-
-}
+} // min-width: 1650px
 
 @media all and (min-width: 1700px) {
-
   #topbar-wrapper {
     padding-right: calc(100% - 350px - 1570px) /* 100% - 350px - (1920px - 350px); */
   }
@@ -1482,7 +1478,6 @@ table tbody td {
 
 }
 
-
 @media (min-width: 1920px) {
   #main>div.row {
     padding-left: 190px;
diff --git a/assets/css/post.scss b/assets/css/post.scss
index 43dfece..2853c76 100644
--- a/assets/css/post.scss
+++ b/assets/css/post.scss
@@ -11,6 +11,20 @@
 $prompt-older: "{{ site.data.label.post.button.previous }}";
 $prompt-newer: "{{ site.data.label.post.button.next }}";
 
+@mixin btn-sharing-color($light-color, $important: false) {
+  @if $important {
+    color: var(--btn-sharing, $light-color)!important;
+  } @else {
+    color: var(--btn-sharing, $light-color);
+  }
+}
+
+@mixin btn-post-nav {
+  width: 50%;
+  position: relative;
+  border-color: var(--main-border, #e9ecef);
+}
+
 .post img {
   margin-top: .5rem;
   margin-bottom: 1.5rem;
@@ -34,37 +48,27 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   padding-top: 3rem;
   padding-bottom: 2rem;
 
-  @mixin post-nav-btn {
-    width: 50%;
-    position: relative;
-    border-color: var(--main-border, #e9ecef);
-  }
-
   .btn {
-    @include post-nav-btn;
+    @include btn-post-nav;
     color: var(--link-color, #2a408e);
-  }
-
-  .btn:hover {
-    background: #2a408e;
-    color: #fff;
-    border-color: #2a408e;
-  }
-
-  .btn.disabled {
-    @include post-nav-btn;
-    pointer-events: auto;
-    cursor: not-allowed;
-    background: none;
-    color: gray;
-  }
-
-  .btn.disabled:hover {
-    border-color: none;
-  }
-
-  .btn.btn-outline-primary.disabled:focus {
-    box-shadow: none;
+    &:hover {
+      background: #2a408e;
+      color: #fff;
+      border-color: #2a408e;
+    }
+    &.disabled {
+      @include btn-post-nav;
+      pointer-events: auto;
+      cursor: not-allowed;
+      background: none;
+      color: gray;
+      &:hover {
+        border-color: none;
+      }
+    }
+    &.btn-outline-primary.disabled:focus {
+      box-shadow: none;
+    }
   }
 
   p {
@@ -74,38 +78,30 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
     white-space: normal;
   }
 
-  a::before,
-  span::before {
-    color: var(--text-muted-color, gray);
-    font-size: .65rem;
-    text-transform: uppercase;
+  a, span {
+    &::before {
+      color: var(--text-muted-color, gray);
+      font-size: .65rem;
+      text-transform: uppercase;
+    }
+    &:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      left: .5px;
+      &::before {
+        content: $prompt-older
+      }
+    }
+    &:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      right: .5px;
+      &::before {
+        content: $prompt-newer
+      }
+    }
   }
-
-  a:first-child,
-  span:first-child {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    left: .5px;
-  }
-
-  a:last-child,
-  span:last-child {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    right: .5px;
-  }
-
-  a:first-child::before,
-  span:first-child::before {
-    content: $prompt-older
-  }
-
-  a:last-child::before,
-  span:last-child::before {
-    content: $prompt-newer
-  }
-}
-
+} // .post-navigation
 
 @keyframes fade-up {
   from {
@@ -127,16 +123,14 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   top: 2rem;
   transition: top 0.2s ease-in-out;
   animation: fade-up .8s;
-}
-
-#toc-wrapper.topbar-down {
-  top: 6rem;
-}
-
-#toc-wrapper>h3 {
-  font-size: 1rem;
-  font-family: 'Oswald', sans-serif;
-  color: gray;
+  &.topbar-down {
+    top: 6rem;
+  }
+  >h3 {
+    font-size: 1rem;
+    font-family: 'Oswald', sans-serif;
+    color: gray;
+  }
 }
 
 #toc li>a {
@@ -148,13 +142,12 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 
 /*--- Related Posts ---*/
 
-#related-posts > h3 {
-  color: gray;
-  font-size: 1.1rem;
-  font-family: 'Oswald', sans-serif;
-}
-
 #related-posts {
+  >h3 {
+    color: gray;
+    font-size: 1.1rem;
+    font-family: 'Oswald', sans-serif;
+  }
   .card {
     border: 1px solid var(--main-wrapper-bg, #f1f1f1);
     background-color: var(--card-bg);
@@ -165,12 +158,11 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
     h3 {
       color: var(--relate-post-title, #353a3d);
     }
-  }
-
-  .card:hover {
-    -webkit-transform: translate3d(0, -3px, 0);
-    transform: translate3d(0, -3px, 0);
-    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
+    &:hover {
+      -webkit-transform: translate3d(0, -3px, 0);
+      transform: translate3d(0, -3px, 0);
+      filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
+    }
   }
 
   .timeago {
@@ -194,18 +186,17 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   ul {
     list-style-type: none;
     padding-inline-start: 1.5rem;
-  }
-
-  ul>li::before {
-    background: #c2c9d4;
-    width: 5px;
-    height: 5px;
-    border-radius: 1px;
-    display: block;
-    content: "";
-    position: relative;
-    top: 1rem;
-    right: 1rem;
+    >li::before {
+      background: #c2c9d4;
+      width: 5px;
+      height: 5px;
+      border-radius: 1px;
+      display: block;
+      content: "";
+      position: relative;
+      top: 1rem;
+      right: 1rem;
+    }
   }
 }
 
@@ -223,32 +214,31 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 
   a:hover,
   i:hover {
+    @include btn-sharing-color(#2a408e, true);
     text-decoration: none;
-    color: var(--link-color, #2a408e)!important;
   }
 
   .share-icon {
     font-size: 1.2rem;
-
-    .fab.fa-twitter {
-      color: var(--btn-sharing, rgba(29, 161, 242, 1.00));
-    }
-
-    .fab.fa-facebook-square {
-      color: var(--btn-sharing, rgb(66, 95, 156));
-    }
-    .fab.fa-telegram {
-      color: var(--btn-sharing, rgb(39, 159, 217));
-    }
-
-    .fab.fa-weibo {
-      color: var(--btn-sharing, rgb(229, 20, 43));
+    .fab {
+      &.fa-twitter {
+        @include btn-sharing-color(rgba(29, 161, 242, 1.00));
+      }
+      &.fa-facebook-square {
+        @include btn-sharing-color(rgb(66, 95, 156));
+      }
+      &.fa-telegram {
+        @include btn-sharing-color(rgb(39, 159, 217));
+      }
+      &.fa-weibo {
+        @include btn-sharing-color(rgb(229, 20, 43));
+      }
     }
 
   } // .share-icon
 
   .fas.fa-link {
-    color: var(--btn-sharing, rgb(171, 171, 171));
+    @include btn-sharing-color(rgb(171, 171, 171));
   }
 
 } // .share-wrapper
@@ -256,23 +246,19 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 
 .share-label {
   font-family: 'Oswald', sans-serif;
-}
-
-.share-label::after {
-  content: ":";
+  &::after {
+    content: ":";
+  }
 }
 
 .license-wrapper {
   line-height: 1.2rem;
-
   .license-text>a {
     font-weight: 600;
   }
-
   i {
     font-weight: 400;
   }
-
   span:last-child {
     font-size: .85rem;
   }
@@ -283,10 +269,9 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   .post-tail-bottom {
     -ms-flex-wrap: wrap!important;
     flex-wrap: wrap!important;
-  }
-
-  .post-tail-bottom>div:first-child {
-    margin-bottom: 1rem;
+    >div:first-child {
+      margin-bottom: 1rem;
+    }
   }
 }
 
@@ -297,20 +282,23 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 }
 
 @media all and (min-width: 768px) {
-  .post .post-meta > div:not(:first-child)::before {
-    content: "\2022";
-    color: rgba(158, 158, 158, 0.8);
-    font-weight: bold;
-    padding-left: .5rem;
-    padding-right: .3rem;
-  }
-
-  .post .post-meta.flex-column {
-    -webkit-box-orient: horizontal!important;
-    -webkit-box-direction: normal!important;
-    -ms-flex-direction: row!important;
-    flex-direction: row!important;
-  }
+  .post {
+    .post-meta {
+      >div:not(:first-child)::before {
+        content: "\2022";
+        color: rgba(158, 158, 158, 0.8);
+        font-weight: bold;
+        padding-left: .5rem;
+        padding-right: .3rem;
+      }
+      &.flex-column {
+        -webkit-box-orient: horizontal!important;
+        -webkit-box-direction: normal!important;
+        -ms-flex-direction: row!important;
+        flex-direction: row!important;
+      }
+    }
+  } // .post
 }
 
 @media all and (min-width: 768px) and (max-width: 830px) {
diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss
index 6002f8d..6a6fe69 100644
--- a/assets/css/syntax.scss
+++ b/assets/css/syntax.scss
@@ -77,68 +77,77 @@
 
 /*-- Codes Snippet --*/
 
-div.highlight,
-figure.highlight,
-.highlighter-rouge {
+%highlight-pre-bg {
   background: var(--highlight-pre-bg, #f7f7f7)
 }
 
-.highlight {
-  overflow: auto;
+%code-snippet-radius {
+  border-radius: 5px;
 }
 
-.highlight .lineno {
-  margin: .8rem 0rem;
-  padding: 0 .5rem;
-  min-width: 2.2rem;
-  text-align: right;
-  color: var(--highlight-lineno, #c2c6cc);
-  border-right: 1px solid var(--highlight-lineno-border, #e9ecef);
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -o-user-select: none;
-  user-select: none;
-}
-.highlight table {
-  padding: 0;
-  border: 0;
-}
-
-.highlight td {
-  padding: 0;
-  border: 0;
-}
-
-.highlight pre {
-  margin-bottom: 0;
-  font-size: .85rem;
-  line-height: 1.4rem;
-  word-wrap: normal;  /* Fixed Safari overflow-x */
-}
-
-.highlight table td pre {
-  overflow: visible;  /* Fixed iOS safari overflow-x */
-  word-break: normal; /* Fixed iOS safari linenos code break */
-}
-
-/* Override BS Inline-code style */
 .highlighter-rouge {
-  margin-bottom: 1.2em;
+  @extend %highlight-pre-bg;
+  @extend %code-snippet-radius;
+  margin-bottom: 1.2em; /* Override BS Inline-code style */
 }
 
+.highlight {
+  @extend %code-snippet-radius;
+  @at-root div#{&} {
+    @extend %highlight-pre-bg;
+  }
+  @at-root figure#{&} {
+    @extend %highlight-pre-bg;
+  }
+  overflow: auto;
+
+  .lineno {
+    margin: .8rem 0rem;
+    padding: 0 .5rem;
+    min-width: 2.2rem;
+    text-align: right;
+    color: var(--highlight-lineno, #c2c6cc);
+    border-right: 1px solid var(--highlight-lineno-border, #e9ecef);
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+  }
+  table {
+    padding: 0;
+    border: 0;
+    td pre {
+      overflow: visible;  /* Fixed iOS safari overflow-x */
+      word-break: normal; /* Fixed iOS safari linenos code break */
+    }
+  }
+  td {
+    padding: 0;
+    border: 0;
+  }
+  pre {
+    margin-bottom: 0;
+    font-size: .85rem;
+    line-height: 1.4rem;
+    word-wrap: normal;
+    /* Fixed Safari overflow-x */
+  }
+
+} // .highlight
+
 code {
   -webkit-hyphens: none;
   -ms-hyphens: none;
   -moz-hyphens: none;
   hyphens: none;
-}
 
-code.highlighter-rouge {
-  padding: 2px 4px;
-  margin: 0 .3rem;
-  border-radius: 4px;
+  &.highlighter-rouge {
+    padding: 2px 4px;
+    margin: 0 .3rem;
+    border-radius: 4px;
+  }
 }
 
 td.rouge-code {
@@ -146,11 +155,6 @@ td.rouge-code {
   padding-right: 1rem;
 }
 
-/* code snippet radius */
-.highlighter-rouge,
-.highlight {
-  border-radius: 5px;
-}
 
 /* Hide line numbers for defualt, console, and terminal code snippets */
 div[class^='highlighter-rouge'] pre.lineno,
@@ -171,11 +175,9 @@ div.language-terminal.highlighter-rouge td.rouge-code {
     -webkit-box-shadow: inset 0 0 2px #c2c6cc;
     box-shadow: inset 0 0 2px #c2c6cc;
   }
-
   .highlighter-rouge {
     color: black;
   }
-
   code.highlighter-rouge {
     border: 1px solid #e9ecef;
   }
diff --git a/assets/css/tags.scss b/assets/css/tags.scss
index 8dc4613..3f4b3fd 100644
--- a/assets/css/tags.scss
+++ b/assets/css/tags.scss
@@ -17,14 +17,9 @@
   letter-spacing: 0;
   border: 1px solid var(--tag-border, #dee2e6) !important;
   box-shadow: 0 0 3px 0 var(--tag-shadow, #e9ecef);
-}
-
-.tag span {
-  margin-left: 0.6em;
-  font-size: 0.7em;
-  font-family: 'Oswald', sans-serif;
-}
-
-a.tag:hover {
-  text-decoration: none;
+  span {
+    margin-left: 0.6em;
+    font-size: 0.7em;
+    font-family: 'Oswald', sans-serif;
+  }
 }
\ No newline at end of file