add supporting components for sidenotes post

posts/sidenotes.mdx

@@ -6,7 +6,8 @@ draft: true
 ---
 
 import Sidenote from '@components/Sidenote.astro';
-import UnstyledSidenote from '@components/UnstyledSidenote.astro';
+import UnstyledSidenote from '@projects/sidenotes/UnstyledSidenote.astro';
+import '@projects/sidenotes/sidenote.css';
 
 One of my major goals when building this blog was to have sidenotes. I've always been a fan of sidenotes on the web, because the most comfortable reading width for a column of text is <em>far</em> less than the absurd amounts of screen width we tend to have available, and what else are we going to use it for?<Sidenote>Some sites use it for ads, of course, which is yet another example of how advertising ruins everything.</Sidenote>
 

src/projects/sidenotes/UnstyledSidenote.astro

@@ -0,0 +1,51 @@
+---
+export interface Props {
+    floatingCounter: boolean,
+    class: string,
+};
+
+const { class: classList, floatingCounter} = Astro.props;
+---
+
+<span class="counter"></span>
+<span class={`sidenote ${classList} ${floatingCounter ? 'floatingCounter' : ''}`}>
+    <slot></slot>
+</span>
+
+<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>

src/projects/sidenotes/sidenote.css

@@ -0,0 +1,51 @@
+    .counter {
+        counter-increment: sidenote;
+    }
+
+    .counter::before {
+        content: counter(sidenote);
+        color: var(--accent-color);
+        font-size: 0.75rem;
+        position: relative;
+        bottom: 0.2rem;
+        margin-left: 0.1rem;
+    }
+
+    .sidenote-absolute {
+        position: absolute;
+        left: calc(50% + min(100%, var(--content-width)) / 2 + 1rem);
+        max-width: 12rem;
+        font-size: 0.75rem;
+    }
+    .sidenote-absolute::before {
+        content: counter(sidenote);
+        color: var(--accent-color);
+        font-size: 0.75rem;
+        position: relative;
+        bottom: 0.2rem;
+        margin-right: 0.1rem;
+    }
+
+    .sn-float {
+        float: right;
+    }
+    .sn-clear {
+        float: right;
+        clear: right;
+    }
+    .sn-gutter {
+        float: right;
+        width: 14rem;
+        margin-right: -14rem;
+    }
+    .sn-gap {
+        float: right;
+        width: 14rem;
+        margin-right: -16rem;
+    }
+    .sn-var-width {
+        float: right;
+        --width: min(14rem, calc(50vw - var(--content-width) / 2) - 2rem);
+        width: var(--width);
+        margin-right: calc(0rem - var(--width) - 2rem);
+    }

tsconfig.json

@@ -7,6 +7,7 @@
       "@components/*": ["./src/components/*"],
       "@layouts/*": ["./src/layouts/*"],
       "@lib/*": ["./src/lib/*"],
+      "@projects/*": ["./src/projects/*"],
       "@styles/*": ["./src/styles/*"]
     }
   }