keep working on sidenotes, copy latest real post over to test

src/components/Post.astro

@@ -47,7 +47,7 @@ h1 {
 .subtitle {
     font-size: 0.85em;
     font-style: italic;
-    margin-top: -0.5rem;
+    margin-top: -0.25rem;
 }
 
 .post {

src/components/Sidenote.astro

@@ -6,13 +6,87 @@ SIDENOTE_COUNT += 1
 <label for={id} class="counter anchor">{ SIDENOTE_COUNT }</label>
 <input {id} type="checkbox" class="toggle" />
 
-<div class="sidenote">
-    <div class="content">
+<!-- we have to use spans for everything, otherwise Astro "helpfully" inserts
+ending </p> tags before every sidenote because you technically can't have
+another block-level element inside a <p> -->
+<span class="sidenote">
+    <span class="content">
         <span class="counter floating">{ SIDENOTE_COUNT }</span>
         <slot />
-    </div>
-</div>
+    </span>
+</span>
 
 
 <style>
+.sidenote {
+    position: relative;
+    font-size: var(--content-size-sm);
+    hyphens: auto;
+
+/* note: our minimum desirable sidenote width is 15rem, and the gutters are symmetrical, so our
+breakpoint between desktop/mobile will be content-width + 2(gap) + 2(15rem) + (scollbar buffer) */
+    @media(min-width: 89rem) {
+        --gap: 2.5rem;
+        --gutter-width: calc(50vw - var(--content-width) / 2);
+        --scrollbar-buffer: 1.5rem;
+        --sidenote-width: min(
+            24rem,
+            calc(var(--gutter-width) - var(--gap) - var(--scrollbar-buffer))
+        );
+
+        width: var(--sidenote-width);
+        float: right;
+        clear: right;
+        margin-right: calc(-1 * var(--sidenote-width) - var(--gap));
+        margin-bottom: 0.75rem;
+    }
+
+    @media(max-width: 89rem) {
+        position: fixed;
+        left: 0;
+        right: 0;
+        bottom: 0;
+
+        /* horizontal buffer for the counter and dismiss button */
+        --padding-x: calc(var(--content-padding) + 1.5rem);
+        padding: 1rem var(--padding-x);
+        background-color: var(--bg-color);
+        box-shadow: 0 -2px 4px -1px rgba(0, 0, 0, 0.06), 0 -2px 12px -2px rgba(0, 0, 0, 0.1);
+
+        /* show the sidenote only when the corresponding checkbox is checked */
+        transform: translateY(calc(100% + 2rem));
+        transition: transform 0.125s;
+        /* when moving from shown -> hidden, ease-in */
+        transition-timing-function: ease-in;
+        .toggle:checked + & {
+            border-top: 2px solid var(--accent-color);
+            transform: translateY(0);
+            /* when moving hidden -> shown, ease-out */
+            transition-timing-function: ease-out;
+            /* the active sidenote should be on top of any other sidenotes as well
+            (this isn't critical unless you have JS disabled, but it's still annoying) */
+            z-index: 20;
+        }
+    }
+}
+
+.counter.anchor {
+    color: var(--accent-color);
+    font-size: 0.75em;
+    margin-left: 0.065rem;
+    position: relative;
+    bottom: 0.375rem;
+}
+
+.counter.floating {
+    position: absolute;
+    /* move it out to the left by its own width + a fixed gap */
+    transform: translateX(calc(-100% - 0.4em));
+    color: var(--accent-color);
+}
+
+/* this is just to track the state of the mobile sidenote, it doesn't need to be seen */
+.toggle {
+    display: none;
+}
 </style>