fix sidenotes

src/lib/Post.svelte

@@ -10,23 +10,41 @@
     export let title, date;
 
     // deal with sidenote collisions
-    onMount(async () => {
+    function tileNotes() {
         const minNoteGap = 15;
-        let sidenotes = Array.from(document.getElementsByClassName('sidenote'));
+        // let sidenotes = Array.from(document.getElementsByClassName('sidenote'));
+        let notes = document.querySelectorAll('.sidenote');
+        if (window.getComputedStyle(notes[0]).position === 'fixed') {
+            // fixed position means we are in mobile territory, so 
+            // get rid of the overflow stuff and then exit
+            for (let note of notes) {
+                note.style.top = '';
+            }
+            return;
+        }
+
+        let labels = document.querySelectorAll('label.counter');
         var prev = 0;
-        for (var i=0; i < sidenotes.length; i++) {
+        for (var i=0; i < notes.length; i++) {
-            let note = sidenotes[i];
+            let labelTop = labels[i].getBoundingClientRect().y + window.scrollY;
-            let {y, height} = note.getBoundingClientRect();
+            let noteHeight = notes[i].getBoundingClientRect().height;
-            y += window.scrollY; // getBoundingClientRect is relative to viewport
+            if (labelTop < prev + minNoteGap) {
-            if (y < prev + minNoteGap) {
+                // there is a collision
-                note.style.top = `${prev + minNoteGap}px`;
+                notes[i].style.top = `${prev + minNoteGap}px`;
-                prev = prev + minNoteGap + height;
+                prev = prev + minNoteGap + noteHeight;
             }
             else {
-                prev = y + height;
+                // no collision
+                notes[i].style.top = `${labelTop}px`;
+                prev = labelTop + noteHeight;
             }
         }
-    })
+    }
+
+    onMount(async () => {
+        tileNotes();
+        window.addEventListener('resize', tileNotes);
+    });
 </script>
 
 <svelte:head>

src/lib/Sidenote.svelte

@@ -40,6 +40,7 @@
             position: absolute;
             left: calc(50vw + var(--content-width) / 2 + 1rem);
             max-width: 12rem;
+            hyphens: auto;
         }
     }
 

static/style.css

@@ -12,6 +12,7 @@ html {
     font-size: 20px;
     line-height: 1.3;
     letter-spacing: -0.005em;
+    color: #1e1e1e;
 }
 
 body {

svelte.config.js

@@ -16,6 +16,9 @@ const config = {
     kit: {
         // hydrate the <div id="svelte"> element in src/app.html
         adapter: staticAdapter(),
+        prerender: {
+            default: true,
+        },
     }
 };