feat(article): Scrollspy for the table of contents (#425)

* Add first try at scrollspy (broken right now)

* Scrollspy actually works now

* Fix VS Code errors by setting JS version

* Recompute offsets when window size changes

* Improve list compatibility for toc active selection

Support up to 6 levels of indentation, properly support <ol>

* Remove debug string

* Add more docs in smoothAnchors

* Use a map to match ids to navigation elements

assets/scss/partials/base.scss

@@ -1,7 +1,6 @@
 html {
     font-size: 62.5%;
     overflow-y: scroll;
-    scroll-behavior: smooth;
 }
 
 * {

assets/scss/partials/layout/article.scss

@@ -123,7 +123,6 @@
 }
 
 .article-page.has-toc {
-    scroll-behavior: smooth;
 
     .left-sidebar {
         display: none;
@@ -194,6 +193,10 @@
     color: var(--card-text-color-main);
     overflow: hidden;
 
+    ::-webkit-scrollbar-thumb {
+        background-color: var(--card-separator-color);
+    }
+
     #TableOfContents {
         overflow-x: auto;
         max-height: 75vh;
@@ -208,7 +211,7 @@
             list-style-type: none;
             counter-reset: item;
 
-            li:before {
+            li a::before {
                 counter-increment: item;
                 content: counters(item, ".") ". ";
                 font-weight: bold;
@@ -221,7 +224,7 @@
         }
 
         li {
-            margin: 15px 20px;
+            margin: 15px 0 15px 20px;
             padding: 5px;
 
             & > ol,
@@ -235,6 +238,38 @@
                 }
             }
         }
+        li.active-class > a {
+            border-left: var(--heading-border-size) solid var(--accent-color);
+            font-weight: bold;
+        }
+
+        ul li.active-class > a {
+            display: block;
+        }
+
+        @function repeat($str, $n) {
+            $result: "";
+            @for $_ from 0 to $n {
+                $result: $result + $str;
+            }
+            @return $result;
+        }
+
+        // Support up to 6 levels of indentation for lists in ToCs
+        @for $i from 0 to 5 {
+            & > ul #{repeat("> li > ul", $i)} > li.active-class > a {
+                $n: 25 + $i * 35;
+                margin-left: calc(-#{$n}px - 1em);
+                padding-left: calc(#{$n}px + 1em - var(--heading-border-size));
+            }
+
+            & > ol #{repeat("> li > ol", $i)} > li.active-class > a {
+                $n: 9 + $i * 35;
+                margin-left: calc(-#{$n}px - 1em);
+                padding-left: calc(#{$n}px + 1em - var(--heading-border-size));
+                display: block;
+            }
+        }
     }
 }