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>

src/layouts/BaseLayout.astro

@@ -42,7 +42,6 @@ import ThemeSwitcher from '@components/ThemeSwitcher.astro';
 
                     text-decoration: underline;
                     text-underline-offset: 0.5rem;
-                    /*border-bottom: 2px solid transparent;*/
                     text-decoration-color: transparent;
                     transition: text-decoration-color 0.2s ease, opacity 0.2s ease;
 
@@ -55,7 +54,6 @@ import ThemeSwitcher from '@components/ThemeSwitcher.astro';
 
                     &:hover, &:active {
                         text-decoration-color: var(--accent-color);
-                        /*border-bottom-color: var(--accent-color);*/
                     }
                 }
             }

src/styles/main.css

@@ -11,3 +11,7 @@ body {
     color: var(--content-color);
     background-color: var(--bg-color);
 }
+
+a {
+    color: var(--link-color);
+}

src/styles/prose.css

@@ -7,6 +7,7 @@
         margin-bottom: 0.25rem;
         color: var(--heading-color);
         letter-spacing: 0.015em;
+        line-height: 1.25
     }
 
     h1 {

src/styles/vars.css

@@ -25,6 +25,7 @@
     --accent-color-faded: hsl(0deg 25% 55%);
     /* misc */
     --heading-color: hsl(0deg 0% 27%);
+    --link-color: var(--primary-color);
     --nav-link-color: white;
 
     /* dark-mode colors (defined here so that we only have to update them in one place) */
@@ -36,6 +37,7 @@
     --dark-accent-color: hsl(18deg 70% 55%);
     --dark-accent-color-faded: hsl(18deg 30% 45%);
     --dark-heading-color: hsl(35deg 25% 88%);
+    --dark-link-color: hsl(202deg 50% 50%);
     --dark-nav-link-color: var(--dark-heading-color);
 
     &[data-theme="dark"] {
@@ -47,6 +49,8 @@
         --accent-color: var(--dark-accent-color);
         --accent-color-faded: var(--accent-color-faded);
         --heading-color: var(--dark-heading-color);
+        --link-color: var(--dark-link-color);
+        --nav-link-color: var(--dark-nav-link-color);
     }
 
     &:not([data-theme="light"]) {