Compare commits
No commits in common. "3a59f45e584e07abcabc1f0615e9655b3487f0ec" and "5817d94043fc61be1fef8bd7bfd8b3c1178afc42" have entirely different histories.
3a59f45e58
...
5817d94043
@ -9,8 +9,7 @@
|
||||
a {
|
||||
/* Works better to set the size here for line-height reasons */
|
||||
font-size: 0.9em;
|
||||
/* color: hsl(0, 0%, 25%); */
|
||||
color: var(--accent-color);
|
||||
color: hsl(0, 0%, 50%);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
@ -19,43 +18,29 @@
|
||||
|
||||
svg {
|
||||
width: 1em;
|
||||
/* tiny tweak for optical alignment */
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
.before {
|
||||
display: none;
|
||||
padding-right: 0.25em;
|
||||
margin-left: -1.25em;
|
||||
margin-right: 0.5rem;
|
||||
margin-left: calc(-1em - 0.5rem);
|
||||
}
|
||||
|
||||
@media(min-width: 58rem) {
|
||||
.before {
|
||||
display: inline;
|
||||
opacity: 0;
|
||||
transition: opacity 150ms;
|
||||
}
|
||||
|
||||
.h:hover .before, .before:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.h:hover {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:element this={tag} {id} class="h">
|
||||
<span class="before">
|
||||
<a href="#{id}">
|
||||
<a href="#{id}" class="before">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
|
||||
</svg></a></span><span> <!-- Looks ugly but necessary to get rid of spurious whitespace -->
|
||||
</svg></a><span> <!-- Looks ugly but necessary to get rid of spurious whitespace -->
|
||||
<slot></slot>
|
||||
</span>
|
||||
<!-- Icon from https://heroicons.com/ -->
|
||||
|
||||
@ -41,42 +41,6 @@
|
||||
.post {
|
||||
grid-column: 2 / 3;
|
||||
}
|
||||
|
||||
.footer {
|
||||
grid-column: 2 / 3;
|
||||
margin-bottom: 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
hr {
|
||||
grid-column: 2 / 3;
|
||||
width: 100%;
|
||||
border-top: 1px solid hsl(0 0% 75%);
|
||||
border-bottom: none;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
font-size: 0.9rem;
|
||||
color: var(--content-color-faded);
|
||||
text-decoration: none;
|
||||
|
||||
transition: 150ms;
|
||||
will-change: transform;
|
||||
}
|
||||
.footer a:hover {
|
||||
text-decoration: underline;
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
.footer svg {
|
||||
width: 1.5em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:head>
|
||||
@ -97,22 +61,4 @@
|
||||
<div class="post">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="footer">
|
||||
<a href="#">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
|
||||
</svg>
|
||||
Previous
|
||||
</a>
|
||||
|
||||
<a href="#">
|
||||
Next
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,4 +1,4 @@
|
||||
<style>
|
||||
<style lang="scss">
|
||||
/* always applicable */
|
||||
:global(body) {
|
||||
counter-reset: sidenote;
|
||||
@ -8,21 +8,20 @@
|
||||
counter-increment: sidenote;
|
||||
color: #444;
|
||||
margin-left: 0.05rem;
|
||||
}
|
||||
|
||||
.counter:after {
|
||||
&:after {
|
||||
font-size: 0.75em;
|
||||
position: relative;
|
||||
bottom: 0.3rem;
|
||||
color: #8c0606;
|
||||
}
|
||||
}
|
||||
|
||||
.sidenote {
|
||||
color: #555;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.sidenote:before {
|
||||
&:before {
|
||||
content: counter(sidenote) " ";
|
||||
/* absolute positioning puts it at the top-left corner of the sidenote, overlapping with the content
|
||||
(because the sidenote is floated it counts as a positioned parent, I think) */
|
||||
@ -33,6 +32,7 @@
|
||||
font-size: 0.75rem;
|
||||
color: #8c0606;
|
||||
}
|
||||
}
|
||||
|
||||
.sidenote-toggle {
|
||||
display: none;
|
||||
@ -52,22 +52,10 @@
|
||||
position: relative;
|
||||
float: right;
|
||||
clear: right;
|
||||
margin-right: calc(0rem - var(--sidenote-width) - var(--gap)); /* gives us 2rem of space between content and sidenote */
|
||||
margin-right: calc(0rem - var(--sidenote-width) - var(--gap)); // gives us 2rem of space between content and sidenote
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
/* fade-in animation */
|
||||
.sidenote {
|
||||
opacity: 0;
|
||||
animation: fade-in 600ms ease-out;
|
||||
animation-delay: 500ms;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
@keyframes fade-in {
|
||||
from {opacity: 0;}
|
||||
to {opacity: 1;}
|
||||
}
|
||||
|
||||
.nested.sidenote {
|
||||
margin-right: 0;
|
||||
margin-top: 0.7rem;
|
||||
@ -119,11 +107,12 @@
|
||||
font-size: 1.25rem;
|
||||
color: #8c0606;
|
||||
cursor: pointer;
|
||||
}
|
||||
.dismiss:hover {
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,43 +6,31 @@
|
||||
|
||||
items.forEach(i => i.slug = makeSlug(i.text));
|
||||
|
||||
let headings = [];
|
||||
const selector = 'h1[id], h2[id], h3[id], h4[id], h6[id]';
|
||||
let currentHeadingSlug = null;
|
||||
let currentSubheadingSlug = null;
|
||||
|
||||
function setCurrentHeading() {
|
||||
const start = performance.now();
|
||||
for (const h of headings) {
|
||||
for (const h of document.querySelectorAll(selector)) {
|
||||
const yPos = h.getBoundingClientRect().y;
|
||||
if (yPos > (window.innerHeight / 3)) {
|
||||
break;
|
||||
}
|
||||
if (h.tagName === 'H2') {
|
||||
currentHeadingSlug = h.id;
|
||||
currentSubheadingSlug = null;
|
||||
}
|
||||
if (h.tagName === 'H3') {
|
||||
currentSubheadingSlug = h.id
|
||||
}
|
||||
}
|
||||
const end = performance.now();
|
||||
console.log(`Elapsed: ${end - start}`);
|
||||
}
|
||||
|
||||
onMount (() => {
|
||||
// These shouldn't change over the life of the page, so we can cache them
|
||||
headings = Array.from(document.querySelectorAll('h2[id], h3[id]'));
|
||||
document.addEventListener('scroll', setCurrentHeading);
|
||||
setCurrentHeading();
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:window on:scroll={setCurrentHeading} />
|
||||
|
||||
<style>
|
||||
/* move everything out to the left and center it vertically */
|
||||
#toc {
|
||||
position: sticky;
|
||||
top: 1.5rem;
|
||||
margin-right: 2rem;
|
||||
margin-right: 4rem;
|
||||
|
||||
max-width: 14rem;
|
||||
color: var(--content-color-faded);
|
||||
@ -54,7 +42,7 @@
|
||||
|
||||
@keyframes fade-in {
|
||||
from {opacity: 0}
|
||||
to {opacity: 1}
|
||||
to {opacity: 100%}
|
||||
}
|
||||
|
||||
/* margin-left is to match the padding on the top-level list items,
|
||||
@ -65,12 +53,14 @@
|
||||
max-width: fit-content;
|
||||
|
||||
margin-top: 0;
|
||||
/* 0.5rem for indent, 0.1rem for border */
|
||||
margin-left: 0.6rem;
|
||||
margin-bottom: 0.25em;
|
||||
|
||||
padding-bottom: 0.25em;
|
||||
border-bottom: 1px solid currentcolor;
|
||||
/* make the border stretch beyond the text just a bit, because I like the effect */
|
||||
padding-right: 1.5rem;
|
||||
padding-bottom: 0.25em;
|
||||
|
||||
border-bottom: 1px solid currentcolor;
|
||||
}
|
||||
|
||||
ul {
|
||||
@ -79,42 +69,22 @@
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* margin for indentation, padding so that the accent bar for the current
|
||||
item isn't right on top of it */
|
||||
li {
|
||||
position: relative;
|
||||
margin-left: var(--indent, 0);
|
||||
padding-left: 0.5rem;
|
||||
margin-bottom: 0.15rem;
|
||||
font-size: 0.9rem;
|
||||
border-left: 0.1rem solid transparent;
|
||||
}
|
||||
li.depth-2 {
|
||||
align-items: stretch;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
li.depth-3 {
|
||||
align-items: center;
|
||||
margin-bottom: 0.05rem;
|
||||
}
|
||||
|
||||
.marker {
|
||||
position: absolute;
|
||||
left: -0.6rem;
|
||||
}
|
||||
.bar {
|
||||
width: 0.1rem;
|
||||
height: 100%;
|
||||
}
|
||||
.dot {
|
||||
width: 0.15rem;
|
||||
height: 0.15rem;
|
||||
border-radius: 50%;
|
||||
/* vertically center within its containing block */
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto 0;
|
||||
}
|
||||
|
||||
li.current, li:hover {
|
||||
li:hover {
|
||||
color: var(--content-color);
|
||||
border-left: 0.1rem solid var(--accent-color);
|
||||
}
|
||||
.current .marker, li:hover .marker {
|
||||
background-color: var(--accent-color);
|
||||
li.current {
|
||||
color: var(--content-color);
|
||||
border-left: 0.1rem solid var(--accent-color);
|
||||
}
|
||||
|
||||
a {
|
||||
@ -130,17 +100,12 @@
|
||||
</h5>
|
||||
<ul>
|
||||
{#each items as item}
|
||||
{#if item.depth === 2}
|
||||
<li class="depth-2" class:current={item.slug === currentHeadingSlug} style:align-items="stretch">
|
||||
<span class="marker bar"></span>
|
||||
<li
|
||||
style:--indent="{(item.depth - 2) * 0.75}em"
|
||||
class:current={item.slug === currentHeadingSlug}
|
||||
>
|
||||
<a href="#{item.slug}">{item.text}</a>
|
||||
</li>
|
||||
{:else if item.depth === 3}
|
||||
<li class="depth-3" class:current={item.slug === currentSubheadingSlug} style:align-items="center" style:margin-left="0.75em">
|
||||
<span class="marker dot"></span>
|
||||
<a href="#{item.slug}">{item.text}</a>
|
||||
</li>
|
||||
{/if}
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user