initial work on sidenotes

package.json

@@ -10,7 +10,9 @@
     "@sveltejs/adapter-static": "^1.0.0-next.21",
     "@sveltejs/kit": "next",
     "mdsvex": "^0.9.8",
-    "svelte": "^3.42.6"
+    "node-sass": "^6.0.1",
+    "svelte": "^3.42.6",
+    "svelte-preprocess": "^4.9.8"
   },
   "type": "module"
 }

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>

src/routes/__layout.svelte

@@ -1,6 +1,10 @@
 <style>
+
+
     :global(main) {
-        max-width: 42rem;
+        --content-width: 42rem;
+        box-sizing: border-box;
+        max-width: var(--content-width);
         margin: 0 auto;
         padding:  0 15px;
     }

src/routes/_posts/imagining-a-passwordless-future.svx

@@ -3,6 +3,9 @@ title: Imagining A Passwordless Future
 description: Can replace passwords with something more user-friendly?
 date: 2021-04-30
 ---
+<script>
+    import Sidenote from '$lib/Sidenote.svelte';
+</script>
 Passwords are the *worst*.
 
 How many times have you groaned becuase *yet another* password-related thing
@@ -22,10 +25,9 @@ are a pain, and it seems to be a pretty intractable problem.
 
 You know what aren't a pain, or at least not nearly to the same extent? Keys.
 That's right, physical stick-em-in-a-lock-and-turn metal keys. They've been
-around since forever, and I doubt they'll be going anywhere any time soon.
+around since forever,<Sidenote>This is an example sidenote.</Sidenote>
+and I doubt they'll be going anywhere any time soon.
 
-[External link](https://www.google.com)
+I really hate passwords.
 
-[Internal link](/posts)
-
-[Internal absolute link](http://localhost:3000/simpler-socketio)
+I use them, of course, because I can't not. And I use a password manager, because to my mind that's the current best compromise between being secure and absolutely losing your mind, but it still isn't great. Sometimes my password manager bugs out and refuses to auto-fill the password box, so I have to go hunt it down and copy-paste it in.<Sidenote>If I'm lucky. If I'm unlucky, the site will have disabled pasting into password inputs because "security," and I'm stuck having to type in a 16-character string of gibberish on a mobile phone, because that's how life is.</Sidenote> Other times I'll create a password, the password manager will happily file it away, and then I'll discover that it didn't meet the site's requirements, because my auto-generated gibberish string didn't include the *right* special characters, and now I have the wrong password saved. 

static/style.css

@@ -4,6 +4,7 @@
     font-style: normal;
     font-weight: 400;
     src: url(/Tajawal-Regular.woff2) format('woff2');
+    font-display: block;
 }
 
 html {
@@ -77,3 +78,5 @@ pre > code {
     font-size: 0.8rem;
     background-color: transparent;
 }
+
+/* TESTING */

svelte.config.js

@@ -1,14 +1,18 @@
 import { mdsvex } from 'mdsvex';
 import staticAdapter from '@sveltejs/adapter-static';
+import svp from 'svelte-preprocess';
 import slug from './src/lib/slug.js';
 
 
 const config = {
 	extensions: ['.svelte', '.svx'],
-	preprocess: mdsvex({
+	preprocess: [
+		mdsvex({
 			layout: './src/lib/Post.svelte',
 			rehypePlugins: [slug],
 		}),
+		svp.scss(),
+	],
 	kit: {
 		// hydrate the <div id="svelte"> element in src/app.html
 		target: '#svelte',