rework toc, sidenote fade, and footer

src/lib/Post.svelte

@@ -41,6 +41,42 @@
     .post {
         grid-column: 2 / 3;
     }
+
+    .footer {
+        grid-column: 2 / 3;
+        margin-bottom: 2rem;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    hr {
+        grid-column: 2 / 3;
+        width: 100%;
+        border-top: 1px solid hsl(0 0% 75%);
+        border-bottom: none;
+        margin: 2rem 0;
+    }
+
+    .footer a {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+
+        font-size: 0.9rem;
+        color: var(--content-color-faded);
+        text-decoration: none;
+
+        transition: 150ms;
+        will-change: transform;
+    }
+    .footer a:hover {
+        text-decoration: underline;
+        transform: scale(1.15);
+    }
+
+    .footer svg {
+        width: 1.5em;
+    }
 </style>
 
 <svelte:head>
@@ -61,4 +97,22 @@
     <div class="post">
         <slot></slot>
     </div>
+
+    <hr>
+
+    <div class="footer">
+        <a href="#">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
+            </svg>
+            Previous
+        </a>
+
+        <a href="#">
+            Next
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
+            </svg>
+        </a>
+    </div>
 </div>

src/lib/Sidenote.svelte

@@ -1,4 +1,4 @@
-<style lang="scss">
+<style>
     /* always applicable */
     :global(body) {
         counter-reset: sidenote;
@@ -8,20 +8,21 @@
         counter-increment: sidenote;
         color: #444;
         margin-left: 0.05rem;
+    }
 
-        &:after {
+    .counter:after {
         font-size: 0.75em;
         position: relative;
         bottom: 0.3rem;
         color: #8c0606;
     }
-    }
 
     .sidenote {
         color: #555;
         font-size: 0.8rem;
+    }
 
-        &:before {
+    .sidenote:before {
         content: counter(sidenote) " ";
         /* absolute positioning puts it at the top-left corner of the sidenote, overlapping with the content
         (because the sidenote is floated it counts as a positioned parent, I think) */
@@ -32,7 +33,6 @@
         font-size: 0.75rem;
         color: #8c0606;
     }
-    }
 
     .sidenote-toggle {
         display: none;
@@ -52,10 +52,22 @@
             position: relative;
             float: right;
             clear: right;
-            margin-right: calc(0rem - var(--sidenote-width) - var(--gap)); // gives us 2rem of space between content and sidenote
+            margin-right: calc(0rem - var(--sidenote-width) - var(--gap)); /* gives us 2rem of space between content and sidenote */
             margin-bottom: 0.7rem;
         }
 
+        /* fade-in animation */
+        .sidenote {
+            opacity: 0;
+            animation: fade-in 600ms ease-out;
+            animation-delay: 500ms;
+             animation-fill-mode: forwards; 
+        }
+        @keyframes fade-in {
+            from {opacity: 0;}
+            to {opacity: 1;}
+        }
+
         .nested.sidenote {
             margin-right: 0;
             margin-top: 0.7rem;
@@ -107,12 +119,11 @@
             font-size: 1.25rem;
             color: #8c0606;
             cursor: pointer;
-            
+        }
-            &:hover {
+        .dismiss:hover {
             transform: scale(1.1);
             font-weight: 800;
         }
-        }
 
     }
 </style>

src/lib/Toc.svelte

@@ -6,11 +6,13 @@
 
     items.forEach(i => i.slug = makeSlug(i.text));
 
-    const selector = 'h2[id], h3[id]';
+    let headings = [];
     let currentHeadingSlug = null;
     let currentSubheadingSlug = null;
+
     function setCurrentHeading() {
-        for (const h of document.querySelectorAll(selector)) {
+        const start = performance.now();
+        for (const h of headings) {
             const yPos = h.getBoundingClientRect().y;
             if (yPos > (window.innerHeight / 3)) {
                 break;
@@ -22,16 +24,19 @@
             if (h.tagName === 'H3') {
                 currentSubheadingSlug = h.id
             }
-        console.log(currentHeadingSlug, currentSubheadingSlug);
         }
+        const end = performance.now();
+        console.log(`Elapsed: ${end - start}`);
     }
 
     onMount (() => {
-        document.addEventListener('scroll', setCurrentHeading);
+        // These shouldn't change over the life of the page, so we can cache them
+        headings = Array.from(document.querySelectorAll('h2[id], h3[id]'));
         setCurrentHeading();
     });
 </script>
 
+<svelte:window on:scroll={setCurrentHeading} />
 
 <style>
     #toc {
@@ -60,14 +65,12 @@
         max-width: fit-content;
 
         margin-top: 0;
-        /* 0.5rem for indent, 0.1rem for border */
-        margin-left: 0.6rem;
         margin-bottom: 0.25em;
 
-        padding-right: 1.5rem;
         padding-bottom: 0.25em;
-
         border-bottom: 1px solid currentcolor;
+        /* make the border stretch beyond the text just a bit, because I like the effect */
+        padding-right: 1.5rem;
     }
 
     ul {
@@ -76,9 +79,8 @@
         list-style: none;
     }
 
-    /* margin for indentation */
     li {
-        display: flex;
+        position: relative;
         font-size: 0.9rem;
     }
     li.depth-2 {
@@ -91,15 +93,21 @@
     }
 
     .marker {
-        margin-right: 0.5rem;
+        position: absolute;
+        left: -0.6rem;
     }
     .bar {
         width: 0.1rem;
+        height: 100%;
     }
     .dot {
         width: 0.15rem;
         height: 0.15rem;
         border-radius: 50%;
+        /* vertically center within its containing block */
+        top: 0;
+        bottom: 0;
+        margin: auto 0;
     }
 
     li.current, li:hover {