fix sidenote collisions

src/lib/Post.svelte

@@ -1,4 +1,5 @@
 <script context="module">
+    import { onMount } from 'svelte';
     import { formatDate } from './datefmt.js';
     import { makeSlug } from '$lib/slug.js';
     import Link from './Link.svelte';
@@ -7,6 +8,25 @@
 
 <script>
     export let title, date;
+
+    // deal with sidenote collisions
+    onMount(async () => {
+        const minNoteGap = 15;
+        let sidenotes = Array.from(document.getElementsByClassName('sidenote'));
+        var prev = 0;
+        for (var i=0; i < sidenotes.length; i++) {
+            let note = sidenotes[i];
+            let {y, height} = note.getBoundingClientRect();
+            y += window.scrollY; // getBoundingClientRect is relative to viewport
+            if (y < prev + minNoteGap) {
+                note.style.top = `${prev + minNoteGap}px`;
+                prev = prev + minNoteGap + height;
+            }
+            else {
+                prev = y + height;
+            }
+        }
+    })
 </script>
 
 <svelte:head>