diff --git a/src/lib/Codeblock.svelte b/src/lib/Codeblock.svelte new file mode 100644 index 0000000..0537b6b --- /dev/null +++ b/src/lib/Codeblock.svelte @@ -0,0 +1,9 @@ + + +
Hello world!
++diff --git a/src/lib/Sidenote.svelte b/src/lib/Sidenote.svelte index c47f206..2058604 100644 --- a/src/lib/Sidenote.svelte +++ b/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; } } } diff --git a/src/lib/Toc.svelte b/src/lib/Toc.svelte index 547a1bc..0e12b0e 100644 --- a/src/lib/Toc.svelte +++ b/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; } } diff --git a/src/projects/fantasy/BookPreview.svelte b/src/projects/fantasy/BookPreview.svelte new file mode 100644 index 0000000..cdafad3 --- /dev/null +++ b/src/projects/fantasy/BookPreview.svelte @@ -0,0 +1,169 @@ + + + + + + + + + ++
+ {description} + More +
+