Simplify contents sidebar styles and markup

css/default.css

@@ -615,12 +615,17 @@ hr {
     div#contents-big {
         position: sticky;
         top: 6rem;
+        max-height: calc(100vh - 7rem);
+        max-height: calc(100dvh - 7rem);
         left: 100%;
         clear: both;
+        display: flex;
+        flex-direction: column;
         max-width: 68%;
         margin-right: 4em;
-        padding: 0.8rem 1.15rem 0.9rem 1.45rem;
+        padding: 0.8rem;
         background-color: var(--color-surface);
+        background-clip: padding-box;
         border: 1px solid var(--color-border);
         border-radius: 1.25rem;
         box-shadow: var(--color-shadow-soft);
@@ -629,6 +634,36 @@ hr {
         text-align: left;
     }
 
+    div#contents-big .toc-scroll {
+        min-height: 0;
+        overflow-x: hidden;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        scrollbar-gutter: stable;
+        scrollbar-width: thin;
+        scrollbar-color: var(--color-border-strong) transparent;
+    }
+
+    div#contents-big .toc-scroll::-webkit-scrollbar {
+        width: 0.7rem;
+    }
+
+    div#contents-big .toc-scroll::-webkit-scrollbar-track {
+        margin-block: 0.45rem;
+        background: transparent;
+    }
+
+    div#contents-big .toc-scroll::-webkit-scrollbar-thumb {
+        background-color: var(--color-border-strong);
+        border: 0.18rem solid transparent;
+        border-radius: 999px;
+        background-clip: content-box;
+    }
+
+    div#contents-big .toc-scroll::-webkit-scrollbar-thumb:hover {
+        background-color: var(--color-tag1);
+    }
+
     div#contents-big .mini-header {
         margin: 0 0 0.45rem;
         color: var(--color-tag1);
@@ -644,7 +679,7 @@ hr {
 
     div#contents-big li > a {
         display: block;
-        margin-left: 0;
+        margin: 0 0.2rem;
         padding: 0.14rem 0.32rem;
         border-radius: 0.55rem;
         border: 1px solid transparent;
@@ -677,28 +712,17 @@ hr {
     }
 
     div#contents-big .mini-header a {
-        display: inline-flex;
+        display: inline;
-        align-items: center;
-        justify-content: center;
-        width: 1.25rem;
-        height: 1.25rem;
         margin-left: 0.25rem;
-        background-color: var(--color-surface-muted);
-        border: 1px solid var(--color-border);
-        border-radius: 999px;
         color: var(--color-link);
-        font-size: 0.78rem;
+        font-size: 0.85rem;
         line-height: 1;
-        vertical-align: middle;
+        vertical-align: baseline;
-        transition:
+        transition: color 0.18s ease;
-            color 0.18s ease,
-            background-color 0.18s ease,
-            border-color 0.18s ease;
     }
 
     div#contents-big .mini-header a:hover {
-        background-color: var(--color-linkhbg);
+        background-color: transparent;
-        border-color: var(--color-border-strong);
         color: var(--color-linkh);
         transform: none;
     }

templates/note.html

@@ -10,9 +10,10 @@ $partial("templates/head.html")$
         <!-- A table of contents on the left side, but only for screens
                 that are big enough -->
         <div id="contents-big">
-            <p class="mini-header">Notes <a id="up-arrow" href="/">←</a></p>
+            <p class="mini-header"> <a href="#">Contents</a></p>
-            <p class="mini-header">Contents <a id="up-arrow" href="#">↑</a></p>
+            <div class="toc-scroll">
-            $toc$
+                $toc$
+            </div>
         </div>
     </div>
     <div class="text-space">