initial work on sidenotes

2021-10-25 08:09:37 -07:00
parent 14d74ccdee
commit d6cbd1487c
7 changed files with 4245 additions and 12 deletions
--- a/src/lib/Sidenote.svelte
+++ b/src/lib/Sidenote.svelte
@ -0,0 +1,97 @@
+<style lang="scss">
+    /* always applicable */
+    :global(body) {
+        counter-reset: sidenote;
+    }
+
+    .counter {
+        counter-increment: sidenote;
+        color: #444;
+
+        &:after {
+            font-size: 0.75rem;
+            position: relative;
+            bottom: 0.3rem;
+        }
+    }
+
+    .sidenote {
+        font-size: 0.8rem;
+
+        &:before {
+            content: counter(sidenote) " ";
+            position: relative;
+            font-size: 0.75rem;
+            bottom: 0.2rem;
+        }
+    }
+
+    .sidenote-toggle {
+        display: none;
+    }
+
+    /* desktop display */
+    @media(min-width: 70em) {
+        .counter:after {
+            content: counter(sidenote);
+        }
+
+        .sidenote {
+            position: absolute;
+            left: calc(50vw + var(--content-width) / 2 + 1rem);
+            max-width: 12rem;
+        }
+    }
+
+    /* mobile display */
+    @media (max-width: 70em) {
+        .counter:after {
+            content: "[" counter(sidenote) "]";
+        }
+
+        .counter:hover:after {
+            color: #000;
+            cursor: pointer;
+        }
+
+        .sidenote {
+            box-sizing: border-box;
+            position: fixed;
+            left: 0;
+            bottom: 0;
+            width: 100vw;
+            padding-top: 1rem;
+            padding-bottom: 1rem;
+            padding-right: 2rem;
+            background-color: #fff;
+            box-shadow: 0 -2px 4px -1px rgba(0, 0, 0, 0.06), 0 -2px 12px -2px rgba(0, 0, 0, 0.1);
+            display: none;
+        }
+
+        .sidenote-toggle:checked + .sidenote {
+            display: block;
+        }
+    }
+
+    /* slight tweaks for in between state */
+    @media (min-width: 52.5em) and (max-width: 70em) {
+        .sidenote {
+            padding-left: calc(50vw - 19rem);
+        }
+    }
+    @media (max-width: 52.5em) {
+        .sidenote {
+            padding-left: 2rem;
+        }
+    }
+</style>
+
+<script>
+    let id = Math.random().toString().slice(2);
+</script>
+
+<label for={id} class="counter"></label>
+<input type="checkbox" class="sidenote-toggle" {id}/>
+<span class="sidenote">
+    <slot></slot>
+</span>