start sidenotes post

src/lib/UnstyledSidenote.svelte

@@ -0,0 +1,48 @@
+<script>
+    export let floatingCounter = true;
+    export let classes = '';
+    export {classes as class};
+</script>
+
+<style>
+    :global(body) {
+        counter-reset: sidenote unstyled-sidenote;
+    }
+
+    .counter {
+        counter-increment: unstyled-sidenote;
+        margin-left: 0.05rem;
+    }
+    .counter::after {
+        content: counter(unstyled-sidenote);
+        font-size: 0.75em;
+        position: relative;
+        bottom: 0.3em;
+        color: #0083c4;
+    }
+
+    .sidenote {
+        color: var(--content-color-faded);
+        font-size: 0.8rem;
+    }
+    .sidenote.floatingCounter::before {
+        content: counter(unstyled-sidenote);
+        font-size: 0.75rem;
+        color: #0083c4;
+        /* Since the sidenote is floated it counts as a positioned element, 
+        so this would make the counter overlap the start of the text... */
+        position: absolute;
+        /* ...except that we move it out to the left and up a bit, so
+        it's hanging out in space. 100% refers to the width of this
+        pseudo-element, so we handle different-sized counters the same. */
+        transform: translate(
+            calc(-100% - 0.16em),
+            -0.12em
+        );
+    }
+</style>
+
+<span class="counter"></span>
+<span class="sidenote {classes}" class:floatingCounter={floatingCounter}>
+    <slot></slot>
+</span>