giersig.eu/indiekit-blog
1
0
Fork 0
Code Issues Actions Packages Projects Releases Activity

feat: add heading anchors for direct linking to article sections

Browse Source 
Uses markdown-it-anchor to generate linkable IDs on h2-h4 headings.
Headings become clickable links with a subtle # indicator on hover.
Includes scroll-margin-top so anchored headings don't hide behind
the sticky header.
This commit is contained in:
Ricardo
2026-02-17 19:09:09 +01:00
parent ed24ac47bd
commit 4e2f579e71
4 changed files with 68 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
css/tailwind.css
View File

@@ -468,6 +468,31 @@
scroll-margin-top: 80px; /* Prevent header overlap when scrolling to anchors */
}
/* Heading anchors — generated by markdown-it-anchor */
.prose h2[id],
.prose h3[id],
.prose h4[id] {
scroll-margin-top: 80px;
}
.prose :is(h2, h3, h4) > a.header-anchor {
color: inherit;
text-decoration: none;
}
.prose :is(h2, h3, h4) > a.header-anchor:hover {
text-decoration: underline;
text-decoration-color: var(--tw-prose-links, currentColor);
text-underline-offset: 4px;
}
.prose :is(h2, h3, h4) > a.header-anchor::after {
content: " #";
opacity: 0;
font-weight: normal;
transition: opacity 0.15s;
}
.prose :is(h2, h3, h4):hover > a.header-anchor::after {
opacity: 0.4;
}
.post-list li {
content-visibility: auto;
contain-intrinsic-size: auto 200px;