Add ToC scroolbar for huge articles

Signed-off-by: GitHub Action <[email protected]>

assets/scss/_colors.scss

@@ -7,6 +7,7 @@ $highlight-grey: #7d828a !default;
 $midnightblue: #2c3e50 !default;
 $typewriter: hsl(172, 100%, 36%) !default;
 $codebackground: #272822 !default;
+$pagescrollbar-thumb: hsl(0, 0%, 53%) !default;
 
 // Scroll to Top Default colors
 $stt-stroke: #ccc !default;

assets/scss/_scrolltotop.scss

@@ -0,0 +1,32 @@
+.scroll-up {
+    .scroll {
+        #st-ring {
+            stroke: $stt-stroke;
+        }
+
+        #st-circle {
+            fill: $stt-circle;
+        }
+
+        #st-arrow {
+            fill: $stt-arrow;
+        }
+    }
+
+    position: fixed;
+    bottom: 10%;
+    right: 2%;
+    z-index: 1;
+    opacity: 0;
+    transition: all 0.5s ease;
+}
+
+.hide {
+    opacity: 0;
+    transform: translateY(20px);
+}
+
+.show {
+    opacity: 1;
+    transform: translateY(0);
+}

assets/scss/style.scss

@@ -4,7 +4,7 @@
 {{ if ne false .Site.Params.usesAnimation }}
 @import "animate.scss";
 {{ end }}
-@import "scroll.scss";
+@import "scrolltotop.scss";
 @import "socialshare.scss";
 {{ if (fileExists "assets/scss/userstyles.scss") }}
 @import "userstyles.scss";
@@ -27,7 +27,7 @@
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #888;
+  background: $pagescrollbar-thumb;
 
   &:hover {
     background: $text;
@@ -251,6 +251,7 @@ table {
   box-shadow: -1px -2px 3px rgba(0, 0, 0, 0.45);
   background-color: $dark-grey;
   animation-duration: .3s;
+  animation-fill-mode: forwards;
 }
 
 .hdr-wrapper {
@@ -755,11 +756,35 @@ a.footnote-ref {
 
   ul {
     padding-left: 1em;
+    padding-right: 1em;
     margin: 0;
   }
 
+  /* scrollbar customization for ToC */
+  /* Width */
+  &>::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  /* Track */
+  &>::-webkit-scrollbar-track {
+    background: darken($pagescrollbar-thumb, 10%);
+  }
+
+  /* Handle */
+  &>::-webkit-scrollbar-thumb {
+    background: $midnightblue ;
+  }
+
+  /* Handle on hover */
+  &>::-webkit-scrollbar-thumb:hover {
+    background: lighten($midnightblue, 10%);
+  }
+
   &>ul {
     list-style-type: none;
+    overflow-y: auto;
+    height: calc(100vh - 300px);
 
     ul ul {
       font-size: .9em;