finish sidenotes

src/components/Sidenote.astro

@@ -6,7 +6,7 @@ SIDENOTE_COUNT += 1
 ---
 
 <label for={id} class="counter anchor">{ SIDENOTE_COUNT }</label>
-<input {id} type="checkbox" class="toggle" />
+<input {id} type="checkbox" class="sidenote-toggle" />
 
 <!-- we have to use spans for everything, otherwise Astro "helpfully" inserts
 ending </p> tags before every sidenote because you technically can't have
@@ -24,6 +24,25 @@ another block-level element inside a <p> -->
 </span>
 
 
+<!-- make sure that only one sidenote is active at a time -->
+<script>
+let activeSidenote = null;
+document.querySelectorAll('.sidenote-toggle').forEach(el => {
+    el.addEventListener('change', evt => {
+        if (evt.target.checked) {
+            if (activeSidenote) {
+                activeSidenote.checked = false;
+            }
+            activeSidenote = evt.target;
+        }
+        else if (activeSidenote.id === evt.target.id) {
+            activeSidenote = null;
+        }
+    });
+});
+</script>
+
+
 <style>
 .sidenote {
     display: block;
@@ -59,14 +78,13 @@ breakpoint between desktop/mobile will be content-width + 2(gap) + 2(15rem) + (s
         --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 + & {
+        .sidenote-toggle:checked + & {
             border-top: 2px solid var(--accent-color);
             transform: translateY(0);
             /* when moving hidden -> shown, ease-out */
@@ -90,6 +108,15 @@ breakpoint between desktop/mobile will be content-width + 2(gap) + 2(15rem) + (s
     margin-left: 0.065rem;
     position: relative;
     bottom: 0.375rem;
+
+    @media(max-width: 89rem) {
+        &::before {
+            content: '[';
+        }
+        &::after {
+            content: ']';
+        }
+    }
 }
 
 .counter.floating {
@@ -101,6 +128,10 @@ breakpoint between desktop/mobile will be content-width + 2(gap) + 2(15rem) + (s
 
 .dismiss {
     display: block;
+    @media(min-width: 89rem) {
+        display: none;
+    }
+
     width: 2rem;
     margin: 0.5rem auto 0;
 
@@ -122,7 +153,7 @@ breakpoint between desktop/mobile will be content-width + 2(gap) + 2(15rem) + (s
 }
 
 /* this is just to track the state of the mobile sidenote, it doesn't need to be seen */
-.toggle {
+.sidenote-toggle {
     display: none;
 }
 </style>