Improve the layout of sidebar icons

_data/contact.yml

@@ -2,7 +2,7 @@
 
 -
   type: github
-  icon: 'fab fa-github-alt'
+  icon: 'fab fa-github'
 -
   type: twitter
   icon: 'fab fa-twitter'

_includes/sidebar.html

@@ -49,7 +49,7 @@
 
   </ul> <!-- ul.nav.flex-column -->
 
-  <div class="sidebar-bottom mt-auto d-flex flex-wrap justify-content-center">
+  <div class="sidebar-bottom mt-auto d-flex flex-wrap justify-content-center align-items-center">
 
     {% for entry in site.data.contact %}
       {% capture url %}

_sass/addon/commons.scss

@@ -7,16 +7,9 @@
   @if $dark-mode {
     @include dark-scheme;
 
-    .mode-toggle {
-      transform: rotateY(180deg);
-    }
-
   } @else {
     @include light-scheme;
 
-    .mode-toggle {
-      transform: none;
-    }
   }
 
 }
@@ -645,12 +638,12 @@ $sidebar-display: "sidebar-display";
   scrollbar-width: none;  /* Firefox */
 
   a {
-    @include sidebar-links;
+    @extend %sidebar-links;
 
     &:hover {
       @include no-text-decoration;
 
-      color: var(--sidebar-hover-color) !important;
+      color: var(--sidebar-active-color) !important;
     }
   }
 
@@ -808,20 +801,18 @@ $sidebar-display: "sidebar-display";
       @extend %clickable-transition;
     }
 
+    i {
+      line-height: 1.75rem; // default line-height in body
+      vertical-align: middle;
+    }
+
     #mode-toggle-wrapper {
       @extend %icon;
 
       i {
-        @include sidebar-links;
+        @extend %sidebar-links;
-
         @extend %cursor-pointer;
         @extend %clickable-transition;
-
-        margin: 0;
-        font-size: 1.05rem;
-        text-align: center;
-        position: relative;
-        bottom: 1px;
       }
 
     }
@@ -832,13 +823,10 @@ $sidebar-display: "sidebar-display";
       width: 3px;
       height: 3px;
       border-radius: 50%;
-      position: relative;
-      top: 12px;
     }
 
-    a:hover,
+    #mode-toggle-wrapper:hover > i {
-    #mode-toggle-wrapper i:hover {
+      color: var(--sidebar-active-color);
-      color: var(--sidebar-hover-color);
     }
 
   } // .sidebar-bottom
@@ -1602,19 +1590,10 @@ $sidebar-display: "sidebar-display";
 
         .nav-link {
           > span {
-            letter-spacing: 3px;
+            letter-spacing: 2px;
           }
 
           > i {
-            @include icon-round(1.65rem);
-
-            line-height: 1.5rem;
-            font-size: 0.6rem;
-            padding-top: 1px;
-            padding-left: 1px;
-            position: relative;
-            bottom: 1px;
-
             &.unloaded {
               display: inline-block !important;
             }
@@ -1628,35 +1607,40 @@ $sidebar-display: "sidebar-display";
       padding-left: 3.5rem;
       width: 100%;
 
+      $icon-block-size: 2rem;
+
       &.justify-content-center {
         -webkit-box-pack: start !important;
         -ms-flex-pack: start !important;
         justify-content: flex-start !important;
       }
 
-      a {
+      > span,
+      > a {
+        @include ml-mr(0.15rem);
+
+        height: $icon-block-size;
+        margin-bottom: 0.5rem; // wrap line
+      }
+
+      i {
+        background-color: var(--sidebar-btn-bg);
         font-size: 1rem;
-        width: 3rem;
+        width: $icon-block-size;
-      }
+        height: $icon-block-size;
+        border-radius: 50%;
+        position: relative;
 
-      i {
+        &::before {
-        @include icon-round(2rem);
+          position: absolute;
-
+          top: 50%;
-        padding-top: 0.44rem;
+          left: 50%;
-        margin-top: .7rem; // multi line space
+          transform: translate(-50%, -50%);
-        bottom: 0;
-      }
-
-      #mode-toggle-wrapper {
-        width: 3rem;
-
-        i {
-          top: 11px;
         }
       }
 
       .icon-border {
-        top: 26px;
+        top: 0.9rem;
       }
 
     } // .sidebar-bottom

_sass/addon/module.scss

@@ -65,18 +65,11 @@
   text-decoration: none;
 }
 
-@mixin sidebar-links {
+%sidebar-links {
-  color: rgba(117, 117, 117, 83%);
+  color: rgba(117, 117, 117, 0.9);
   user-select: none;
 }
 
-@mixin icon-round($diameter) {
-  border: 1px solid;
-  border-radius: 50%;
-  width: $diameter;
-  height: $diameter;
-}
-
 @mixin ml-mr($value) {
   margin-left: $value;
   margin-right: $value;

_sass/addon/variables.scss

@@ -11,7 +11,7 @@ $sidebar-width-large: 350px !default;  // screen width: >= 1650px
 /* tabs of sidebar */
 
 $tab-count: 5 !default;   // backward compatible (version <= 4.0.2)
-$tab-height: 3.2rem !default;
+$tab-height: 3rem !default;
 $tab-cursor-height: 1.6rem !default;
 
 $cursor-width: 2px !default;    // the cursor width of the selected tab

_sass/colors/dark-typography.scss

@@ -32,9 +32,9 @@
   /* Sidebar */
   --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
   --sidebar-muted-color: #6d6c6b;
-  --sidebar-hover-color: rgb(255 255 255 / 68%);
+  --sidebar-active-color: rgb(255 255 255 / 80%);
-  --sidebar-active-color: rgb(255 255 255 / 68%);
   --nav-cursor-color: rgb(183, 182, 182);
+  --sidebar-btn-bg: rgb(117 116 116 / 20%);
 
   /* Topbar */
   --topbar-text-color: var(--text-color);

_sass/colors/light-typography.scss

@@ -30,9 +30,9 @@
   /* Sidebar */
   --sidebar-bg: #eeeeee;
   --sidebar-muted-color: #a2a19f;
-  --sidebar-hover-color: #696868;
+  --sidebar-active-color: #424242;
-  --sidebar-active-color: #455a64;
+  --nav-cursor-color: #757575;
-  --nav-cursor-color: #455a64;
+  --sidebar-btn-bg: white;
 
   /* Topbar */
   --topbar-text-color: rgb(78, 78, 78);

_tabs/about.md

@@ -1,6 +1,6 @@
 ---
 title: About
-icon: fas fa-info
+icon: fas fa-info-circle
 order: 4
 ---
 

_tabs/tags.md

@@ -1,6 +1,6 @@
 ---
 layout: tags
 title: Tags
-icon: fas fa-tags
+icon: fas fa-tag
 order: 2
 ---