From 387fc671026e5c5929e6b577be96650bf99bb81c Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Thu, 23 Sep 2021 18:58:18 +0800
Subject: [PATCH 1/3] Improve the vertical alignment of icons

- sidebar bottom icons
- back to top icon
---
 _sass/addon/commons.scss | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index 1bc8a0b..bbe0193 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -806,6 +806,11 @@ $sidebar-display: "sidebar-display";
       vertical-align: middle;
     }
 
+    i {
+      line-height: 1.75rem; // default line-height in body
+      vertical-align: middle;
+    }
+
     #mode-toggle-wrapper {
       @extend %icon;
 
@@ -1081,18 +1086,27 @@ $sidebar-display: "sidebar-display";
 /* --- button back-to-top --- */
 
 #back-to-top {
+  $size: 2.7em;
+
   display: none;
   z-index: 1;
   cursor: pointer;
   position: fixed;
   background: var(--button-bg);
   color: var(--btn-backtotop-color);
-  height: 2.6em;
-  width: 2.7em;
+  padding: 0;
+  width: $size;
+  height: $size;
   border-radius: 50%;
   border: 1px solid var(--btn-backtotop-border-color);
   transition: 0.2s ease-out;
   -webkit-transition: 0.2s ease-out;
+
+  i {
+    line-height: $size;
+    position: relative;
+    bottom: 2px;
+  }
 }
 
 #back-to-top:hover {

From 50c88f7205790e36df58e94ea1f64cc9f4650561 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Thu, 23 Sep 2021 21:40:31 +0800
Subject: [PATCH 2/3] Prevent the back-to-top button from flickering when
 switching the theme mode

---
 _sass/addon/commons.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index bbe0193..ee125b6 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -1099,8 +1099,8 @@ $sidebar-display: "sidebar-display";
   height: $size;
   border-radius: 50%;
   border: 1px solid var(--btn-backtotop-border-color);
-  transition: 0.2s ease-out;
-  -webkit-transition: 0.2s ease-out;
+  transition: transform 0.2s ease-out;
+  -webkit-transition: transform 0.2s ease-out;
 
   i {
     line-height: $size;

From 1ce350e33eb800206568f5325f09c3237e47b83c Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Thu, 23 Sep 2021 22:28:38 +0800
Subject: [PATCH 3/3] Beautify the style of categories button

---
 _sass/colors/dark-typography.scss  |  1 +
 _sass/colors/light-typography.scss |  5 ++++-
 _sass/layout/categories.scss       | 27 ++++++++++++++-------------
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss
index f5d8459..9d48001 100644
--- a/_sass/colors/dark-typography.scss
+++ b/_sass/colors/dark-typography.scss
@@ -77,6 +77,7 @@
   /* categories */
   --categories-border: rgb(64, 66, 69);
   --categories-hover-bg: rgb(73, 75, 76);
+  --categories-icon-hover-color: white;
 
   /* archives */
   --timeline-node-bg: rgb(150, 152, 156);
diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss
index 7d8cada..9f9b92d 100644
--- a/_sass/colors/light-typography.scss
+++ b/_sass/colors/light-typography.scss
@@ -65,9 +65,12 @@
   --tag-hover: rgb(222, 226, 230);
   --tb-odd-bg: #fbfcfd;
   --tb-border-color: #eaeaea;
-  --categories-hover-bg: var(--btn-border-color);
   --dash-color: silver;
 
+  /* Categories */
+  --categories-hover-bg: var(--btn-border-color);
+  --categories-icon-hover-color: darkslategray;
+
   /* Archive */
   --timeline-color: rgba(0, 0, 0, 0.075);
   --timeline-node-bg: #c2c6cc;
diff --git a/_sass/layout/categories.scss b/_sass/layout/categories.scss
index 8b32c67..29a3463 100644
--- a/_sass/layout/categories.scss
+++ b/_sass/layout/categories.scss
@@ -8,24 +8,22 @@
 
 .categories {
   margin-bottom: 2rem;
+
   .card-header {
     padding-right: 12px;
   }
 
   i {
-    &.far,
-    &.fas {
-      font-size: 86%; // fontawesome icons
-    }
+    @extend %category-icon-color;
+
+    font-size: 86%; // fontawesome icons
   }
 
   .list-group-item {
     border-left: none;
     border-right: none;
     padding-left: 2rem;
-    > i {
-      @extend %category-icon-color;
-    }
+
     &:first-child {
       border-top-left-radius: 0;
       border-top-right-radius: 0;
@@ -33,10 +31,6 @@
 
   }
 
-  .card-header > span > i:first-child {
-    @extend %category-icon-color;
-  }
-
 } // .categories
 
 .category-trigger {
@@ -45,11 +39,18 @@
   border-radius: 50%;
   text-align: center;
   color: #6c757d !important;
-  > i.fas {
+
+  &:hover {
+    i {
+      color: var(--categories-icon-hover-color);
+    }
+  }
+
+  i {
     position: relative;
     height: 0.7rem;
     width: 1rem;
-    transition: 300ms ease all;
+    transition: transform 300ms ease;
   }
 }