keep working on sidenotes

src/components/Sidenote.astro

@@ -1,4 +1,6 @@
 ---
+import Icon from '@components/Icon.astro';
+
 const id = crypto.randomUUID();
 SIDENOTE_COUNT += 1
 ---
@@ -14,11 +16,17 @@ another block-level element inside a <p> -->
         <span class="counter floating">{ SIDENOTE_COUNT }</span>
         <slot />
     </span>
+    <button class="dismiss">
+        <label for={id}>
+            <Icon name="chevron-down" />
+        </label>
+    </button>
 </span>
 
 
 <style>
 .sidenote {
+    display: block;
     position: relative;
     font-size: var(--content-size-sm);
     hyphens: auto;
@@ -70,6 +78,12 @@ breakpoint between desktop/mobile will be content-width + 2(gap) + 2(15rem) + (s
     }
 }
 
+.content {
+    display: block;
+    max-width: var(--content-width);
+    margin: 0 auto;
+}
+
 .counter.anchor {
     color: var(--accent-color);
     font-size: 0.75em;
@@ -85,6 +99,28 @@ breakpoint between desktop/mobile will be content-width + 2(gap) + 2(15rem) + (s
     color: var(--accent-color);
 }
 
+.dismiss {
+    display: block;
+    width: 2rem;
+    margin: 0.5rem auto 0;
+
+    color: var(--neutral-gray);
+    border-radius: 100%;
+    background: transparent;
+    border: 1px solid var(--neutral-gray);
+    padding: 0.25rem;
+
+    &:hover, &:active {
+        color: var(--accent-color);
+        border-color: var(--accent-color);
+    }
+
+    cursor: pointer;
+    & label {
+        cursor: pointer;
+    }
+}
+
 /* this is just to track the state of the mobile sidenote, it doesn't need to be seen */
 .toggle {
     display: none;

src/components/icons/chevron-down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+</svg>

src/components/icons/x-mark.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+</svg>

src/styles/vars.css

@@ -27,6 +27,7 @@
     --heading-color: hsl(0deg 0% 27%);
     --link-color: var(--primary-color);
     --nav-link-color: white;
+    --neutral-gray: hsl(0deg 0% 30%);
 
     /* dark-mode colors (defined here so that we only have to update them in one place) */
     --dark-bg-color: hsl(220deg 10% 13%);
@@ -39,6 +40,7 @@
     --dark-heading-color: hsl(35deg 25% 88%);
     --dark-link-color: hsl(202deg 50% 50%);
     --dark-nav-link-color: var(--dark-heading-color);
+    --dark-neutral-gray: hsl(220deg 10% 45%);
 
     &[data-theme="dark"] {
         --bg-color: var(--dark-bg-color);
@@ -51,6 +53,7 @@
         --heading-color: var(--dark-heading-color);
         --link-color: var(--dark-link-color);
         --nav-link-color: var(--dark-nav-link-color);
+        --neutral-gray: var(--dark-neutral-gray);
     }
 
     &:not([data-theme="light"]) {
@@ -64,6 +67,9 @@
             --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);
+            --neutral-gray: var(--dark-neutral-gray);
         }
     }
 }