book previews

src/lib/Codeblock.svelte

@@ -0,0 +1,9 @@
+<script>
+    let classes = '';
+    export {classes as class};
+</script>
+
+<p>Hello world!</p>
+<pre class={classes}>
+    <slot></slot>
+</pre>

src/lib/Sidenote.svelte

@@ -70,7 +70,7 @@
             bottom: 0;
             // since headings have relative position, any that come after
             // the current sidenote in the DOM get stacked on top by default
-            z-index: 1;
+            z-index: 10;
 
             // give us a horizontal buffer for the counter and dismiss button
             --padding-x: calc(var(--content-padding) + 1.5rem);
@@ -80,9 +80,13 @@
 
             // show the sidenote only when the corresponding checkbox is checked
             transform: translateY(calc(100% + 2rem));
-            transition: transform 100ms;
+            transition: transform 125ms;
+            // when moving from shown -> hidden, ease-in
+            transition-timing-function: ease-in;
             .sidenote-toggle:checked + & {
                 transform: translateY(0);
+                // when moving hidden -> shown, ease-out
+                transition-timing-function: ease-out;
             }
         }
     }

src/lib/Toc.svelte

@@ -55,15 +55,15 @@
         position: sticky;
         top: 1.5rem;
         margin-left: 1rem;
-        margin-right: 2.5rem;
+        margin-right: 4rem;
 
         max-width: 18rem;
         color: var(--content-color-faded);
 
         // minimum desirable TOC width is 8rem
-        // add 3rem for margins, giving total gutter width of 11.5rem
+        // add 4rem for margins, giving total gutter width of 12.5rem
         // multiply by 2 since there are two equally-sized gutters, then add content-width (52.5rem)
-        @media(max-width: 75.5rem) {
+        @media(max-width: 77.5rem) {
             display: none;
         }
     }