From 83bbe4ac939edfd1706e68c080562e3462f83519 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sat, 25 Mar 2023 02:58:58 +0800
Subject: [PATCH] feat(ui): redesign the sidebar

---
 _data/assets/cross_origin.yml      |   2 +-
 _includes/sidebar.html             |  24 +-
 _sass/addon/commons.scss           | 395 +++++++++--------------------
 _sass/addon/module.scss            |   7 +-
 _sass/addon/variables.scss         |  10 +-
 _sass/colors/dark-typography.scss  |  12 +-
 _sass/colors/light-typography.scss |   8 +-
 _sass/jekyll-theme-chirpy.scss     |   4 +-
 _tabs/tags.md                      |   2 +-
 assets/css/style.scss              |   8 +-
 10 files changed, 159 insertions(+), 313 deletions(-)

diff --git a/_data/assets/cross_origin.yml b/_data/assets/cross_origin.yml
index 01d558f..75aa59e 100644
--- a/_data/assets/cross_origin.yml
+++ b/_data/assets/cross_origin.yml
@@ -11,7 +11,7 @@ cdns:
 
 # fonts
 
-webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;700;900&display=swap
+webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;900&display=swap
 
 # Libraries
 
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index 5dd8fc2..6dee0ec 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -1,11 +1,10 @@
 <!-- The Side Bar -->
 
 <div id="sidebar" class="d-flex flex-column align-items-end">
-  <div class="profile-wrapper text-center">
-    <div id="avatar">
-      <a href="{{ '/' | relative_url }}" class="mx-auto">
-        {% if site.avatar != empty and site.avatar %}
-          {% capture avatar_url %}
+  <div class="profile-wrapper">
+    <a href="{{ '/' | relative_url }}" id="avatar" class="rounded-circle">
+      {% if site.avatar != empty and site.avatar %}
+        {% capture avatar_url %}
             {% if site.avatar contains '://' %}
               {{ site.avatar }}
             {% elsif site.img_cdn != empty and site.img_cdn %}
@@ -14,10 +13,9 @@
               {{ site.avatar | relative_url }}
             {% endif %}
           {% endcapture %}
-          <img src="{{ avatar_url | strip }}" alt="avatar" onerror="this.style.display='none'">
-        {% endif %}
-      </a>
-    </div>
+        <img src="{{ avatar_url | strip }}" width="112" height="112" alt="avatar" onerror="this.style.display='none'">
+      {% endif %}
+    </a>
 
     <div class="site-title">
       <a href="{{ '/' | relative_url }}">{{ site.title }}</a>
@@ -26,11 +24,11 @@
   </div>
   <!-- .profile-wrapper -->
 
-  <ul class="w-100">
+  <ul class="flex-grow-1 w-100 pl-0">
     <!-- home -->
     <li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
       <a href="{{ '/' | relative_url }}" class="nav-link">
-        <i class="fa-fw fas fa-home ml-xl-3 mr-xl-3 unloaded"></i>
+        <i class="fa-fw fas fa-home"></i>
         <span>{{ site.data.locales[include.lang].tabs.home | upcase }}</span>
       </a>
     </li>
@@ -38,7 +36,7 @@
     {% for tab in site.tabs %}
       <li class="nav-item{% if tab.url == page.url %}{{ " active" }}{% endif %}">
         <a href="{{ tab.url | relative_url }}" class="nav-link">
-          <i class="fa-fw {{ tab.icon }} ml-xl-3 mr-xl-3 unloaded"></i>
+          <i class="fa-fw {{ tab.icon }}"></i>
           {% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}
 
           <span>{{ site.data.locales[include.lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
@@ -49,7 +47,7 @@
   </ul>
   <!-- ul.nav.flex-column -->
 
-  <div class="sidebar-bottom mt-auto d-flex flex-wrap justify-content-center align-items-center">
+  <div class="sidebar-bottom d-flex flex-wrap  align-items-center w-100">
     {% unless site.theme_mode %}
       <button class="mode-toggle btn" aria-label="Switch Mode">
         <i class="fas fa-adjust"></i>
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index 36f33b5..2a2bc68 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -35,7 +35,6 @@ body {
   color: var(--text-color);
   -webkit-font-smoothing: antialiased;
   font-family: $font-family-base;
-  line-height: 1.75;
 }
 
 /* --- Typography --- */
@@ -732,6 +731,9 @@ mjx-container {
 /* --- sidebar layout --- */
 
 $sidebar-display: 'sidebar-display';
+$btn-gap: 0.8rem; // for the bottom icons
+$btn-border-width: 3px;
+$btn-mb: 0.5rem;
 
 #sidebar {
   @include pl-pr(0);
@@ -754,198 +756,177 @@ $sidebar-display: 'sidebar-display';
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 
+  %sidebar-link-hover {
+    &:hover {
+      color: var(--sidebar-active-color);
+    }
+  }
+
   a {
     @extend %sidebar-links;
 
     &:hover {
       @extend %no-decoration;
-
-      color: var(--sidebar-active-color) !important;
     }
   }
 
   #avatar {
-    > a {
-      display: block;
-      width: 6rem;
-      height: 6rem;
-      border-radius: 50%;
-      border: 2px solid rgba(222, 222, 222, 0.7);
-      overflow: hidden;
-      transform: translateZ(0); /* fixed the zoom in Safari */
-      transition: border-color 0.35s ease-in-out;
-
-      &:hover {
-        border-color: white;
-      }
-    }
+    display: block;
+    width: 7rem;
+    height: 7rem;
+    overflow: hidden;
+    box-shadow: var(--avatar-border-color) 0 0 0 2px;
+    transform: translateZ(0); /* fixed the zoom in Safari */
 
     img {
-      width: 100%;
-      height: 100%;
       transition: transform 0.5s;
 
       &:hover {
         transform: scale(1.2);
       }
     }
-  } /* #avatar */
+  }
+
+  .profile-wrapper {
+    @include mt-mb(2.5rem);
+    @extend %clickable-transition;
+
+    padding-left: 2.5rem;
+    padding-right: 1.25rem;
+    width: 100%;
+  }
 
   .site-title {
-    margin-top: 0.55rem;
+    font-weight: 900;
+    font-size: 1.75rem;
+    line-height: 1.2;
+    letter-spacing: 0.25px;
+    color: rgba(134, 133, 133, 0.99);
+    margin-top: 1.25rem;
+    margin-bottom: 0.5rem;
 
     a {
       @extend %clickable-transition;
-
-      font-weight: 900;
-      font-size: 1.5rem;
-      letter-spacing: 0.5px;
-      color: rgba(134, 133, 133, 0.99);
+      @extend %sidebar-link-hover;
     }
   }
 
   .site-subtitle {
     font-size: 95%;
     color: var(--sidebar-muted-color);
-    line-height: 1.25rem;
+    margin-top: 0.25rem;
     word-spacing: 1px;
-    margin: 0.2rem 1.5rem 0.5rem 1.5rem;
-    min-height: 3rem; /* avoid vertical shifting in multi-line words */
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
   }
 
-  .nav-link {
-    border-radius: 0;
-    font-size: 0.95rem;
-    font-weight: 600;
-    letter-spacing: 1px;
-    display: table-cell;
-    vertical-align: middle;
-  }
-
-  .nav-item {
-    text-align: center;
-    display: table;
-    height: $tab-height;
-
-    &.active {
-      .nav-link {
-        color: var(--sidebar-active-color);
-      }
-    }
-
-    &:not(.active) > a {
-      @extend %clickable-transition;
-    }
-  }
-
   ul {
-    height: $tab-height * $tab-count;
     margin-bottom: 2rem;
-    padding-left: 0;
 
-    li {
+    li.nav-item {
+      opacity: 0.9;
       width: 100%;
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
 
-      &:last-child {
-        a {
-          position: relative;
-          left: calc($cursor-width / 2);
-          width: 100%;
+      a.nav-link {
+        @include pt-pb(0.6rem);
+
+        display: flex;
+        align-items: center;
+        border-radius: 0.75rem;
+        font-weight: 600;
+
+        &:hover {
+          background-color: var(--sidebar-hover-bg);
         }
 
-        /* the cursor */
-        &::after {
-          display: table;
-          visibility: hidden;
-          content: '';
-          position: relative;
-          right: 1px;
-          width: $cursor-width;
-          height: $tab-cursor-height;
-          border-radius: 1px;
-          background-color: var(--nav-cursor-color);
-          pointer-events: none;
+        i {
+          font-size: 95%;
+          opacity: 0.8;
+          margin-right: 1.5rem;
+        }
+
+        span {
+          font-size: 90%;
+          letter-spacing: 0.2px;
         }
       }
-    } /* li */
 
-    @mixin fix-cursor($top) {
-      top: $top;
-      visibility: visible;
-    }
+      &.active {
+        .nav-link {
+          color: var(--sidebar-active-color);
+          background-color: var(--sidebar-hover-bg);
 
-    @for $i from 1 through $tab-count {
-      $offset: $tab-count - $i;
-      $top: (-$offset * $tab-height) +
-        (($tab-height - $tab-cursor-height) * 0.5);
-
-      @if $i < $tab-count {
-        > li.active:nth-child(#{$i}),
-        > li.nav-item:nth-child(#{$i}):hover {
-          ~ li:last-child::after {
-            @include fix-cursor($top);
+          span {
+            opacity: 1;
           }
         }
-      } @else {
-        > li.active:nth-child(#{$i}):last-child::after,
-        > li.nav-item:nth-child(#{$i}):last-child:hover::after {
-          @include fix-cursor($top);
-        }
       }
-    } /* @for */
-  } /* ul */
+
+      &:not(:first-child) {
+        margin-top: 0.25rem;
+      }
+    }
+  }
 
   .sidebar-bottom {
-    margin-bottom: 2.1rem;
+    @include pl-pr(2rem);
 
-    @include ml-mr(auto);
-    @include pl-pr(1rem);
+    margin-bottom: 1.5rem;
 
-    %icon {
-      width: 2.4rem;
+    %button {
+      width: 1.75rem;
+      height: 1.75rem;
+      margin-bottom: $btn-mb; // multi line gap
+      border-radius: 50%;
+      color: var(--sidebar-btn-color);
+      background-color: var(--sidebar-btn-bg);
       text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:hover {
+        background-color: var(--sidebar-hover-bg);
+      }
     }
 
     a {
-      @extend %icon;
+      @extend %button;
+      @extend %sidebar-link-hover;
       @extend %clickable-transition;
+
+      &:not(:last-child) {
+        margin-right: $btn-gap;
+      }
     }
 
     i {
-      font-size: 1.2rem;
       line-height: 1.75rem;
     }
 
     .mode-toggle {
       padding: 0;
       border: 0;
-      margin-bottom: 1px;
-      background-color: transparent;
 
-      @extend %icon;
+      @extend %button;
       @extend %sidebar-links;
-
-      > i {
-        @extend %clickable-transition;
-      }
-
-      &:hover > i {
-        color: var(--sidebar-active-color);
-      }
+      @extend %sidebar-link-hover;
     }
 
     .icon-border {
       @extend %no-cursor;
+      @include ml-mr(calc(($btn-gap - $btn-border-width) / 2));
 
       background-color: var(--sidebar-muted-color);
       content: '';
-      width: 3px;
-      height: 3px;
+      width: $btn-border-width;
+      height: $btn-border-width;
       border-radius: 50%;
+      margin-bottom: $btn-mb;
     }
   } /* .sidebar-bottom */
 } /* #sidebar */
@@ -955,16 +936,15 @@ $sidebar-display: 'sidebar-display';
     transition: top 0.5s ease;
   }
 
+  .nav-link {
+    transition: background-color 0.3s ease-in-out;
+  }
+
   .post-preview {
     transition: background-color 0.35s ease-in-out;
   }
 }
 
-.profile-wrapper {
-  margin-top: 2rem;
-  width: 100%;
-}
-
 #search-result-wrapper {
   display: none;
   height: 100%;
@@ -1162,6 +1142,8 @@ $sidebar-display: 'sidebar-display';
 }
 
 #core-wrapper {
+  line-height: 1.75;
+
   .categories,
   #tags,
   #archives {
@@ -1337,14 +1319,10 @@ $sidebar-display: 'sidebar-display';
     }
   }
 
-  #avatar > a {
+  #avatar {
     width: 5rem;
     height: 5rem;
   }
-
-  .site-subtitle {
-    @include ml-mr(1.8rem);
-  }
 }
 
 @media all and (max-width: 768px) {
@@ -1400,10 +1378,6 @@ $sidebar-display: 'sidebar-display';
 
     transform: translateX(-#{$sidebar-width}); /* hide */
     -webkit-transform: translateX(-#{$sidebar-width});
-
-    .cursor {
-      transition: none;
-    }
   }
 
   #main-wrapper {
@@ -1486,8 +1460,10 @@ $sidebar-display: 'sidebar-display';
     margin-left: $sidebar-width;
   }
 
-  .profile-wrapper {
-    margin-top: 3rem;
+  #sidebar {
+    .profile-wrapper {
+      margin-top: 3rem;
+    }
   }
 
   #search-hints {
@@ -1528,50 +1504,10 @@ $sidebar-display: 'sidebar-display';
 
 /* Compact icons in sidebar & panel hidden */
 @media all and (min-width: 850px) and (max-width: 1199px) {
-  #sidebar {
-    width: $sidebar-width-small;
-
-    .site-subtitle {
-      margin-left: 1rem;
-      margin-right: 1rem;
-    }
-
-    .sidebar-bottom {
-      a,
-      span {
-        width: 2rem;
-      }
-
-      .icon-border {
-        left: -3px;
-      }
-    }
-  }
-
-  #topbar-wrapper {
-    left: $sidebar-width-small;
-  }
-
   #search-results > div {
     max-width: 700px;
   }
 
-  .site-title {
-    font-size: 1.3rem;
-    margin-left: 0 !important;
-  }
-
-  .site-subtitle {
-    @include ml-mr(1rem);
-
-    font-size: 90%;
-  }
-
-  #main-wrapper,
-  footer {
-    margin-left: $sidebar-width-small;
-  }
-
   #breadcrumb {
     width: 65%;
     overflow: hidden;
@@ -1642,6 +1578,8 @@ $sidebar-display: 'sidebar-display';
 }
 
 @media all and (min-width: 1650px) {
+  $icon-gap: 1rem;
+
   #main-wrapper,
   footer {
     margin-left: $sidebar-width-large;
@@ -1677,114 +1615,31 @@ $sidebar-display: 'sidebar-display';
   #sidebar {
     width: $sidebar-width-large;
 
+    $icon-gap: 1rem; // for the bottom icons
+
     .profile-wrapper {
-      margin-top: 4rem;
-      margin-bottom: 1rem;
-
-      &.text-center {
-        text-align: left !important;
-      }
-
-      %profile-ml {
-        margin-left: 4.5rem;
-      }
-
-      #avatar {
-        @extend %profile-ml;
-
-        > a {
-          width: 6.2rem;
-          height: 6.2rem;
-
-          &.mx-auto {
-            margin-left: 0 !important;
-          }
-        }
-      }
-
-      .site-title {
-        @extend %profile-ml;
-
-        margin-top: 0.4rem;
-
-        a {
-          font-size: 1.7rem;
-          letter-spacing: 1px;
-        }
-      }
-
-      .site-subtitle {
-        @extend %profile-ml;
-
-        word-spacing: 0;
-        margin-top: 0;
-      }
-    } /* .profile-wrapper (min-width: 1650px) */
+      margin-top: 3.5rem;
+      margin-bottom: 2.5rem;
+      padding-left: 3.5rem;
+    }
 
     ul {
-      padding-left: 2.5rem;
-
-      > li:last-child {
-        > a {
-          position: static;
-        }
-      }
-
-      .nav-item {
-        text-align: left;
-
-        .nav-link {
-          > span {
-            letter-spacing: 2px;
-          }
-
-          > i {
-            &.unloaded {
-              display: inline-block !important;
-            }
-          }
-        }
+      li.nav-item {
+        @include pl-pr(2.75rem);
       }
     }
 
     .sidebar-bottom {
-      padding-left: 3.5rem;
-      width: 100%;
+      padding-left: 2.75rem;
+      margin-bottom: 1.75rem;
 
-      $icon-block-size: 2rem;
-
-      &.justify-content-center {
-        justify-content: flex-start !important;
-      }
-
-      > span,
-      > button.mode-toggle,
-      > 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: $icon-block-size;
-        height: $icon-block-size;
-        border-radius: 50%;
-        position: relative;
-
-        &::before {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-        }
+      a:not(:last-child) {
+        margin-right: $icon-gap;
       }
 
       .icon-border {
-        top: 0.9rem;
+        @include ml-mr(calc(($icon-gap - $btn-border-width) / 2));
       }
-    } /* .sidebar-bottom */
-  } /* #sidebar */
+    }
+  }
 } /* min-width: 1650px */
diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss
index 603554a..7a40066 100644
--- a/_sass/addon/module.scss
+++ b/_sass/addon/module.scss
@@ -69,7 +69,7 @@
 }
 
 %clickable-transition {
-  transition: color 0.35s ease-in-out;
+  transition: all 0.3s ease-in-out;
 }
 
 %no-cursor {
@@ -138,6 +138,11 @@
   margin-right: $value;
 }
 
+@mixin pt-pb($val) {
+  padding-top: $val;
+  padding-bottom: $val;
+}
+
 @mixin pl-pr($val) {
   padding-left: $val;
   padding-right: $val;
diff --git a/_sass/addon/variables.scss b/_sass/addon/variables.scss
index bc6f866..ba0f0bb 100644
--- a/_sass/addon/variables.scss
+++ b/_sass/addon/variables.scss
@@ -5,15 +5,7 @@
 /* sidebar */
 
 $sidebar-width: 260px !default; /* the basic width */
-$sidebar-width-small: 210px !default; /* screen width: >= 850px, <= 1199px (iPad landscape) */
-$sidebar-width-large: 350px !default; /* screen width: >= 1650px */
-
-/* tabs of sidebar */
-
-$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 */
+$sidebar-width-large: 300px !default; /* screen width: >= 1650px */
 
 /* other framework sizes */
 
diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss
index ffb3599..be7cf16 100644
--- a/_sass/colors/dark-typography.scss
+++ b/_sass/colors/dark-typography.scss
@@ -36,9 +36,11 @@
   /* Sidebar */
   --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
   --sidebar-muted-color: #6d6c6b;
-  --sidebar-active-color: rgb(255, 255, 255, 0.8);
-  --nav-cursor-color: rgb(183, 182, 182);
-  --sidebar-btn-bg: rgb(117, 116, 116, 0.2);
+  --sidebar-active-color: rgb(255, 255, 255, 0.95);
+  --sidebar-hover-bg: rgb(54, 54, 54, 0.33);
+  --sidebar-btn-bg: rgb(84, 83, 83, 0.3);
+  --sidebar-btn-color: #787878;
+  --avatar-border-color: rgb(206, 206, 206, 0.9);
 
   /* Topbar */
   --topbar-text-color: var(--text-color);
@@ -68,8 +70,8 @@
   --relate-post-date: var(--text-muted-color);
   --card-bg: #1e1e1e;
   --card-hovor-bg: #464d51;
-  --card-shadow: rgb(21, 21, 21, 0.72) 0 6px 10px 0,
-    rgb(137, 135, 135, 0.3) 0 0 0 1px;
+  --card-shadow: rgb(21, 21, 21, 0.72) 0 6px 18px 0,
+    rgb(137, 135, 135, 0.24) 0 0 0 1px;
   --kbd-wrap-color: #6a6a6a;
   --kbd-text-color: #d3d3d3;
   --kbd-bg-color: #242424;
diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss
index b83d452..f5c1c2c 100644
--- a/_sass/colors/light-typography.scss
+++ b/_sass/colors/light-typography.scss
@@ -36,11 +36,13 @@
   );
 
   /* Sidebar */
-  --sidebar-bg: #eeeeee;
+  --sidebar-bg: #f6f8fa;
   --sidebar-muted-color: #a2a19f;
-  --sidebar-active-color: #424242;
-  --nav-cursor-color: #757575;
+  --sidebar-active-color: #1d1d1d;
+  --sidebar-hover-bg: rgb(227, 227, 227, 0.64);
   --sidebar-btn-bg: white;
+  --sidebar-btn-color: #8e8e8e;
+  --avatar-border-color: white;
 
   /* Topbar */
   --topbar-text-color: rgb(78, 78, 78);
diff --git a/_sass/jekyll-theme-chirpy.scss b/_sass/jekyll-theme-chirpy.scss
index c72e4c3..778a3cc 100644
--- a/_sass/jekyll-theme-chirpy.scss
+++ b/_sass/jekyll-theme-chirpy.scss
@@ -1,7 +1,5 @@
 /*!
- * The styles for Jekyll theme Chirpy
- *
- * Chirpy v5.6.1 (https://github.com/cotes2020/jekyll-theme-chirpy)
+ * Chirpy v5.6.0 (https://github.com/cotes2020/jekyll-theme-chirpy)
  * © 2019 Cotes Chung
  * MIT Licensed
  */
diff --git a/_tabs/tags.md b/_tabs/tags.md
index c8e213a..ded3adc 100644
--- a/_tabs/tags.md
+++ b/_tabs/tags.md
@@ -1,5 +1,5 @@
 ---
 layout: tags
-icon: fas fa-tag
+icon: fas fa-tags
 order: 2
 ---
diff --git a/assets/css/style.scss b/assets/css/style.scss
index 6ff7046..a8805f4 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -1,12 +1,6 @@
 ---
 ---
 
-/*
-  If the number of TAB files has changed, the following variable is required.
-  And it must be defined before `@import`.
-*/
-$tab-count: {{ site.tabs | size | plus: 1 }}; // plus 1 for home tab
-
-@import "{{ site.theme }}";
+@import '{{ site.theme }}';
 
 /* append your custom style below */