rework toc, sidenote fade, and footer
This commit is contained in:
parent
0519291bda
commit
3a59f45e58
@ -41,6 +41,42 @@
|
||||
.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>
|
||||
@ -61,4 +97,22 @@
|
||||
<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 lang="scss">
|
||||
<style>
|
||||
/* always applicable */
|
||||
:global(body) {
|
||||
counter-reset: sidenote;
|
||||
@ -8,20 +8,21 @@
|
||||
counter-increment: sidenote;
|
||||
color: #444;
|
||||
margin-left: 0.05rem;
|
||||
}
|
||||
|
||||
&:after {
|
||||
.counter:after {
|
||||
font-size: 0.75em;
|
||||
position: relative;
|
||||
bottom: 0.3rem;
|
||||
color: #8c0606;
|
||||
}
|
||||
}
|
||||
|
||||
.sidenote {
|
||||
color: #555;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
&:before {
|
||||
.sidenote: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) */
|
||||
@ -32,7 +33,6 @@
|
||||
font-size: 0.75rem;
|
||||
color: #8c0606;
|
||||
}
|
||||
}
|
||||
|
||||
.sidenote-toggle {
|
||||
display: none;
|
||||
@ -52,10 +52,22 @@
|
||||
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;
|
||||
@ -107,12 +119,11 @@
|
||||
font-size: 1.25rem;
|
||||
color: #8c0606;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
}
|
||||
.dismiss:hover {
|
||||
transform: scale(1.1);
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,11 +6,13 @@
|
||||
|
||||
items.forEach(i => i.slug = makeSlug(i.text));
|
||||
|
||||
const selector = 'h2[id], h3[id]';
|
||||
let headings = [];
|
||||
let currentHeadingSlug = null;
|
||||
let currentSubheadingSlug = null;
|
||||
|
||||
function setCurrentHeading() {
|
||||
for (const h of document.querySelectorAll(selector)) {
|
||||
const start = performance.now();
|
||||
for (const h of headings) {
|
||||
const yPos = h.getBoundingClientRect().y;
|
||||
if (yPos > (window.innerHeight / 3)) {
|
||||
break;
|
||||
@ -22,16 +24,19 @@
|
||||
if (h.tagName === 'H3') {
|
||||
currentSubheadingSlug = h.id
|
||||
}
|
||||
console.log(currentHeadingSlug, currentSubheadingSlug);
|
||||
}
|
||||
const end = performance.now();
|
||||
console.log(`Elapsed: ${end - start}`);
|
||||
}
|
||||
|
||||
onMount (() => {
|
||||
document.addEventListener('scroll', setCurrentHeading);
|
||||
// These shouldn't change over the life of the page, so we can cache them
|
||||
headings = Array.from(document.querySelectorAll('h2[id], h3[id]'));
|
||||
setCurrentHeading();
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:window on:scroll={setCurrentHeading} />
|
||||
|
||||
<style>
|
||||
#toc {
|
||||
@ -60,14 +65,12 @@
|
||||
max-width: fit-content;
|
||||
|
||||
margin-top: 0;
|
||||
/* 0.5rem for indent, 0.1rem for border */
|
||||
margin-left: 0.6rem;
|
||||
margin-bottom: 0.25em;
|
||||
|
||||
padding-right: 1.5rem;
|
||||
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;
|
||||
}
|
||||
|
||||
ul {
|
||||
@ -76,9 +79,8 @@
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* margin for indentation */
|
||||
li {
|
||||
display: flex;
|
||||
position: relative;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
li.depth-2 {
|
||||
@ -91,15 +93,21 @@
|
||||
}
|
||||
|
||||
.marker {
|
||||
margin-right: 0.5rem;
|
||||
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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user