custom scrollbar, better search ui, animation effect for fixing font flickering

assets/sass/abstracts/_mixins.scss

@@ -242,3 +242,38 @@
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24pt" height="24pt" viewBox="0 0 24 24" version="1.1">
 <path style="stroke:none;fill-rule:nonzero;fill:rgb(100,100,100);fill-opacity:1;" d="M 4 2 C 2.894531 2 2 2.894531 2 4 L 2 17 C 2 17.550781 2.449219 18 3 18 C 3.550781 18 4 17.550781 4 17 L 4 4 L 17 4 C 17.550781 4 18 3.550781 18 3 C 18 2.449219 17.550781 2 17 2 Z M 8 6 C 6.894531 6 6 6.894531 6 8 L 6 20 C 6 21.105469 6.894531 22 8 22 L 20 22 C 21.105469 22 22 21.105469 22 20 L 22 8 C 22 6.894531 21.105469 6 20 6 Z M 8 8 L 20 8 L 20 20 L 8 20 Z M 8 8 "/></svg>');
 }
+
+@mixin webkit-scrollbars($foreground-color, $background-color) {
+  &::-webkit-scrollbar {
+      width:  0.45em;
+      height: 0.45em;
+  }
+
+  &::-webkit-scrollbar-thumb {
+      background: $foreground-color;
+  }
+
+  &::-webkit-scrollbar-track {
+      background: $background-color;
+  }
+}
+
+@mixin webkit-scrollbars2($foreground-color, $background-color) {
+  ::-webkit-scrollbar {
+      width:  0.45em;
+      height: 0.45em;
+  }
+
+  ::-webkit-scrollbar-thumb {
+      background: $foreground-color;
+  }
+
+  ::-webkit-scrollbar-track {
+      background: $background-color;
+  }
+}
+
+@mixin moz-scrollbars($foreground-color, $background-color) {
+  scrollbar-width: thin;
+  scrollbar-color: $foreground-color $background-color;
+}

assets/sass/components/_bio.scss

@@ -3,7 +3,7 @@
   @include justify-content(center);
   @include align-items(flex-start);
   @include flex-direction(column);
-  @include animation('slide-in-down .5s .2s 1 ease both');
+  @include animation('slide-in-down .4s .2s 1 ease both');
 
   width: 100%;
   font-family: $title-font;

assets/sass/components/_search.scss

@@ -5,11 +5,17 @@
   z-index: z('search');
   margin-bottom: 0.5rem;  
   
+  @include box-shadow(0, 0, 0, 3px, transparent);
+  @include transition(all, 0.15s, ease-in);
   @include flexbox();
   @include align-items(center);
   @include themify($themes) {
     border: 2px solid themed('search-border-color');
     background-color: themed("search-background-color");
+    &:focus-within {
+      border: 2px solid themed('search-border-active-color');
+      @include box-shadow(0, 0, 0, 3px, themed('search-border-outline-color'));
+    }
   }
 
   .icon {
@@ -42,8 +48,15 @@
     margin-top: 0.25rem;
     max-height: 350px;
     overflow: auto;
+    
     a {
       text-decoration: none !important;
+      &:not(:last-child) {
+        @include themify($themes) {
+          font-family: $title-font;
+          border-bottom: 2px dashed themed("search-placeholder-color");
+        }
+      }
     }
   }
 
@@ -57,7 +70,6 @@
 .menu-item {
   padding: 0.25rem;
 
-
   &__title {
     font-size: 1rem;
     @include themify($themes) {
@@ -77,6 +89,10 @@
 }
 
 #search-results {
+  @include themify($themes) {
+    // @include webkit-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
+  }
+  
   &.dropdown {
     display: none;
     &.is-active {
@@ -96,6 +112,11 @@
 
   .dropdown {
     &-content {
+      @include themify($themes) {
+        @include moz-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
+        @include webkit-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
+      }
+
       @include flexbox();
       @include flex-direction(column);
     }
@@ -126,6 +147,10 @@
   width: 100%;  
   overflow: hidden;
 
+  @include themify($themes) {
+    @include webkit-scrollbars2(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
+  }
+
   &__top {
     width: 100%;
     height: $grid_navbar_height;
@@ -180,11 +205,13 @@
   &__body {
     width: 100%;
     height: 100vh;
-    overflow: auto;   
+    overflow-y: auto;
     
     @include themify($themes) {
       color: themed('body-color');
       background-color: themed('body-background-color');
+
+      @include moz-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
     }
   }
 

assets/sass/components/_summary.scss

@@ -1,6 +1,7 @@
 .summary-card {
   margin: 0 0.5rem;
   padding: 0 0.5rem;
+  @include animation('slide-in-down .2s .25s 1 ease-in both');
 
   .title {
     a {
@@ -38,6 +39,7 @@
   &__image {
     width: 100%;
     height: 100%;
+    @include animation('slide-in-left .15s .6s 1 ease-in both');
    
     &-wrapper {
       height: 100%;
@@ -79,6 +81,7 @@
 
 .summary-classic {
   padding: 0 1rem;
+  @include animation('slide-in-down .2s .25s 1 ease-in both');
 
   .title {
     font-size: 24px;
@@ -126,6 +129,7 @@
     width: 100%;
     height: 100%;
     object-fit: contain;
+    @include animation('slide-in-left .1s .6s 1 ease-in both');
         
     &-wrapper {
       max-width: 130px;
@@ -161,6 +165,7 @@
 
 .summary-compact {
   padding: 0 1rem;
+  @include animation('slide-in-down .2s .25s 1 ease-in both');
   
   &__flexbox {
     @include flexbox();

assets/sass/layout/_header.scss

@@ -1,4 +1,9 @@
 .header {
+  @include flexbox();
+  @include justify-content(center);
+  @include align-items(center);
+  @include flex-direction(column);
+
   .title {
     font-family: $title-font;
     font-weight: 900;

assets/sass/pages/_single.scss

@@ -11,6 +11,7 @@
     line-height: 3rem;
     overflow-wrap: break-word;
 
+    @include animation('slide-in-down .2s .25s 1 ease-in both');
     @include themify($themes) {
       color: themed("single-header-title-color");
     }
@@ -46,6 +47,7 @@
   }
 
   &__contents {
+    @include animation('slide-in-left .15s .6s 1 ease-in both');
     &--gallery {
       overflow: hidden;
     }
@@ -482,6 +484,13 @@ pre:not(.chroma) {
     }
   }
 
+  table, tr, td {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    border-collapse: collapse;
+  }
+
   .lntd {
     &:first-child {
       width: 10px;
@@ -503,19 +512,20 @@ pre:not(.chroma) {
     }
   }
 
-  table, tr, td {
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    border-collapse: collapse;
-  }
-
   /* LineNumbersTable */  
   .lnt {
     @include themify($codeblock) {
       color: themed('content-pre-number-color');
     }
   }
+
+  table.lntable {
+    overflow-x: auto;
+    @include themify($themes) {
+      @include webkit-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
+      @include moz-scrollbars(themed('custom-scrollbar-foreground-color'), themed('custom-scrollbar-background-color'));
+    }
+  }
 }
 
 li .highlight > .chroma {

assets/sass/themes/_dark.scss

@@ -72,11 +72,13 @@ $dark: (
     search-placeholder-color: #727072,
     search-color: #FCFCFA,
     search-icon-color: #727072,
-    search-border-color: #1e1e1e,
+    search-border-color: #1d1d1d,
+    search-border-outline-color: rgba(33, 33, 33, 0.6),
+    search-border-active-color: #2f2f2f,
     search-content-color: inherit,
     search-background-color: #212121,
     search-content-background-color: lighten(#403E41, 5%),
-    search-hover-background-color: #727072,
+    search-hover-background-color: #403E41,
     search-highlight-color: #FF6188,
     selection-color: #FCFCFA,
     selection-background-color: #FF6188,
@@ -98,4 +100,6 @@ $dark: (
     contact-input-color: #FCFCFA,
     contact-input-background-color: lighten(#403E41, 5%),
     contact-button-background-color: lighten(#403E41, 5%),
+    custom-scrollbar-foreground-color: #9e9e9e,
+    custom-scrollbar-background-color: #eee,
 );

assets/sass/themes/_hacker.scss

@@ -72,7 +72,9 @@ $hacker: (
     search-placeholder-color: #727072,
     search-color: #1FFF2A,
     search-icon-color: #727072,
-    search-border-color: #111111,
+    search-border-color: #0d0e0f,
+    search-border-outline-color: rgba(161, 173, 100, 0.2),
+    search-border-active-color: #414141,
     search-background-color: #252526,
     search-content-color: #1FFF2A,
     search-content-background-color: lighten(#252526, 7%),
@@ -98,4 +100,6 @@ $hacker: (
     contact-input-color: #FCFCFA,
     contact-input-background-color: lighten(#252526, 4%),
     contact-button-background-color: lighten(#252526, 4%),
+    custom-scrollbar-foreground-color: #616161,
+    custom-scrollbar-background-color: #FCFCFA,
 );

assets/sass/themes/_kimbie.scss

@@ -71,7 +71,9 @@ $kimbie: (
   search-placeholder-color: #6e583b,
   search-color: #d3af86,
   search-icon-color: #6e583b,
-  search-border-color: #5e452b,
+  search-border-color: #6e583b,
+  search-border-outline-color: rgba(240, 100, 49, 0.25),
+  search-border-active-color: #5e452b,
   search-content-color: #d3af86,
   search-background-color: #362712,
   search-content-background-color: #362712,
@@ -97,4 +99,6 @@ $kimbie: (
   contact-input-color: #e3b583,
   contact-input-background-color: #362712,
   contact-button-background-color: #362712,
+  custom-scrollbar-foreground-color: #5e452b,
+  custom-scrollbar-background-color: #d3af86,
 ) !default;

assets/sass/themes/_light.scss

@@ -71,7 +71,9 @@ $light: (
     search-placeholder-color: #bdbdbd,
     search-color: #424242,
     search-icon-color: #bdbdbd,
-    search-border-color: darken(#eceff1, 8%),
+    search-border-color: #e0e0e0,
+    search-border-outline-color: rgba(207, 216, 220, 0.6),
+    search-border-active-color: #b0bec5,
     search-background-color: #eeeeee,
     search-content-color: #424242,
     search-content-background-color: #eeeeee,
@@ -97,4 +99,6 @@ $light: (
     contact-input-color: #424242,
     contact-input-background-color: #eee,
     contact-button-background-color: #eee,
+    custom-scrollbar-foreground-color: #cfd8dc,
+    custom-scrollbar-background-color: #FCFCFA,
 );

assets/sass/themes/_solarized.scss

@@ -71,6 +71,8 @@ $solarized: (
     search-placeholder-color: #B58900,
     search-color: #B58900,
     search-border-color: darken(#FBF1D1, 10%),
+    search-border-outline-color: rgba(133, 153, 0, 0.2),
+    search-border-active-color: lighten(#B58900, 10%),
     search-icon-color: #B58900,
     search-background-color: #FBF1D1,
     search-content-color: #B58900,
@@ -96,4 +98,6 @@ $solarized: (
     contact-input-color: #B58900,
     contact-input-background-color: #FBF1D1,
     contact-button-background-color: #FBF1D1,
+    custom-scrollbar-foreground-color: #b0bec5,
+    custom-scrollbar-background-color: #EEE8D5,
 );