commons.scss in jekyll-theme-chirpy-4.3.0

- old
+ new

@@ -5,20 +5,13 @@
 
 @mixin mode-toggle($dark-mode: false) {
   @if $dark-mode {
     @include dark-scheme;
 
-    .mode-toggle {
-      transform: rotateY(180deg);
-    }
-
   } @else {
     @include light-scheme;
 
-    .mode-toggle {
-      transform: none;
-    }
   }
 
 }
 
 html:not([mode]),
@@ -71,10 +64,29 @@
 ::-webkit-scrollbar-thumb {
   background-color: var(--scrollbar-thumb-bg);
   border-radius: calc(#{$scrollbar-size} / 2);
 }
 
+.highlight {
+  border-color: transparent;
+  transition: border-color 0.5s ease;
+
+  &:hover {
+    border-color: var(--scrollbar-thumb-bg);
+    transition: border-color 0.2s ease;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    /* add border to act as background-color */
+    border-right-style: inset;
+    border-right-width: calc(100vw + 100vh);
+    border-color: inherit;
+    background-color: var(--highlight-bg-color);
+  }
+
+}
+
 /* --- Typography --- */
 
 h1 {
   @extend %heading;
 
@@ -643,35 +655,35 @@
   /* Hide scrollbar for IE, Edge and Firefox */
   -ms-overflow-style: none;  /* IE and Edge */
   scrollbar-width: none;  /* Firefox */
 
   a {
-    @include sidebar-links;
+    @extend %sidebar-links;
 
     &:hover {
       @include no-text-decoration;
 
-      color: #fff;
+      color: var(--sidebar-active-color) !important;
     }
   }
 
   #avatar {
-    &:hover > a {
-      border-color: #fff;
-    }
-
     > a {
       display: block;
       width: 6rem;
       height: 6rem;
       border-radius: 50%;
-      border: 2px solid #b6b6b6;
+      border: 2px solid rgba(222, 222, 222, 0.7);
       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;
+
+      &:hover {
+        border-color: white;
+      }
     }
 
     img {
       width: 100%;
       height: 100%;
@@ -688,19 +700,22 @@
     }
   } // #avatar
 
   .site-title {
     a {
+      @extend %clickable-transition;
+
       font-weight: 900;
       font-size: 1.5rem;
       letter-spacing: 0.5px;
+      color: rgba(134, 133, 133, 99%);
     }
   }
 
   .site-subtitle {
     font-size: 95%;
-    color: #828282;
+    color: var(--sidebar-muted-color);
     line-height: 1.2rem;
     word-spacing: 1px;
     margin: 0.5rem 1.5rem 0.5rem 1.5rem;
     min-height: 3rem; // avoid vertical shifting in multi-line words
     user-select: none;
@@ -717,20 +732,20 @@
 
   .nav-item {
     text-align: center;
     display: table;
     height: $tab-height;
-    &:hover {
-      .nav-link {
-        color: #f8f9facf;
-      }
-    }
+
     &.active {
       .nav-link {
-        color: #fcfcfc;
+        color: var(--sidebar-active-color);
       }
     }
+
+    &:not(.active) > a {
+      @extend %clickable-transition;
+    }
   }
 
   ul {
     height: $tab-height * $tab-count;
     margin-bottom: 2rem;
@@ -801,40 +816,39 @@
       text-align: center;
     }
 
     a {
       @extend %icon;
+      @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;
-
-        margin: 0;
-        font-size: 1.05rem;
-        text-align: center;
-        position: relative;
-        bottom: 1px;
+        @extend %sidebar-links;
+        @extend %cursor-pointer;
+        @extend %clickable-transition;
       }
 
     }
 
     .icon-border {
-      background-color: #525354;
+      background-color: var(--sidebar-muted-color);
       content: "";
       width: 3px;
       height: 3px;
       border-radius: 50%;
-      position: relative;
-      top: 12px;
     }
 
-    a:hover,
-    #mode-toggle-wrapper i:hover {
-      color: #fff;
+    #mode-toggle-wrapper:hover > i {
+      color: var(--sidebar-active-color);
     }
 
   } // .sidebar-bottom
 
 } // #sidebar
@@ -871,11 +885,10 @@
   left: $sidebar-width; /* same as sidebar width */
   right: 0;
   transition: top 0.2s ease-in-out;
   z-index: 50;
   border-bottom: 1px solid rgba(0, 0, 0, 0.07);
-  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05);
   background-color: var(--topbar-wrapper-bg);
 }
 
 #topbar {
   i { // icons
@@ -909,27 +922,33 @@
 
 #search-wrapper {
   display: flex;
   width: 85%;
   border-radius: 1rem;
-  border: 1px solid var(--search-wrapper-bg);
+  border: 1px solid var(--search-wrapper-border-color);
   background: var(--search-wrapper-bg);
   padding: 0 0.5rem;
+
   i {
     z-index: 2;
     font-size: 0.9rem;
     color: var(--search-icon-color);
   }
+
   .fa-times-circle { /* button 'clean up' */
+    @extend %cursor-pointer;
+
     visibility: hidden;
   }
 }
 
 #search-cancel { /* 'Cancel' link */
   color: var(--link-color);
   margin-left: 1rem;
   display: none;
+
+  @extend %cursor-pointer;
 }
 
 #search-input {
   background: center;
   border: 0;
@@ -1080,22 +1099,31 @@
 }
 
 /* --- 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;
+  transition: transform 0.2s ease-out;
+  -webkit-transition: transform 0.2s ease-out;
+
+  i {
+    line-height: $size;
+    position: relative;
+    bottom: 2px;
+  }
 }
 
 #back-to-top:hover {
   transform: translate3d(0, -5px, 0);
   -webkit-transform: translate3d(0, -5px, 0);
@@ -1589,23 +1617,14 @@
       .nav-item {
         text-align: left;
 
         .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;
             }
           }
         }
@@ -1615,38 +1634,43 @@
 
     .sidebar-bottom {
       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 {
-        font-size: 1rem;
-        width: 3rem;
+      > span,
+      > a {
+        @include ml-mr(0.15rem);
+
+        height: $icon-block-size;
+        margin-bottom: 0.5rem; // wrap line
       }
 
       i {
-        @include icon-round(2rem);
+        background-color: var(--sidebar-btn-bg);
+        font-size: 1rem;
+        width: $icon-block-size;
+        height: $icon-block-size;
+        border-radius: 50%;
+        position: relative;
 
-        padding-top: 0.44rem;
-        margin-top: .7rem; // multi line space
-        bottom: 0;
-      }
-
-      #mode-toggle-wrapper {
-        width: 3rem;
-
-        i {
-          top: 11px;
+        &::before {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
         }
       }
 
       .icon-border {
-        top: 26px;
+        top: 0.9rem;
       }
 
     } // .sidebar-bottom
 
   } // #sidebar