forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
feat(post): add highlight animation on footnote nav
+29
-1
+11
src/components/widgets/FootnoteScroll.astro
+11
src/components/widgets/FootnoteScroll.astro
···
19
19
window.scrollTo({
20
20
top: targetPosition
21
21
})
22
+
23
+
// Highlight effect
24
+
const highlightTarget = target.closest('cite') || target.closest('sup') || target
25
+
highlightTarget.classList.add('footnote-highlight')
26
+
highlightTarget.addEventListener(
27
+
'animationend',
28
+
() => {
29
+
highlightTarget.classList.remove('footnote-highlight')
30
+
},
31
+
{ once: true }
32
+
)
22
33
})
23
34
})
24
35
}
+18
-1
src/styles/post.css
+18
-1
src/styles/post.css
···
450
450
opacity: 0.875;
451
451
text-decoration: none;
452
452
transition: color 0.2s ease-out;
453
-
padding-right: 0.5em;
453
+
padding-right: 0.125em;
454
454
}
455
455
456
456
.prose [data-footnote-ref]:hover,
457
457
.prose [data-footnote-backref]:hover {
458
458
color: var(--text-primary);
459
+
}
460
+
461
+
/* Footnote highlight animation */
462
+
.prose .footnotes li.footnote-highlight,
463
+
.prose sup.footnote-highlight,
464
+
.prose cite.footnote-highlight {
465
+
animation: footnote-highlight 1.35s ease-out;
466
+
}
467
+
468
+
@keyframes footnote-highlight {
469
+
0%,
470
+
87% {
471
+
background-color: var(--selection);
472
+
}
473
+
100% {
474
+
background-color: transparent;
475
+
}
459
476
}
460
477
461
478
/* Code blocks */