feat(css): add :target highlighting for anchor navigation
- Highlight heading with accent border-left when targeted via URL hash - Show pilcrow anchor visibly on targeted headings - Add scroll-margin-top for better scroll positioning
This commit is contained in:
25
docs/static/style.css
vendored
25
docs/static/style.css
vendored
@@ -218,6 +218,29 @@ h6:hover .heading-anchor {
|
|||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Highlight heading when :target (clicked anchor) */
|
||||||
|
h1:target,
|
||||||
|
h2:target,
|
||||||
|
h3:target,
|
||||||
|
h4:target,
|
||||||
|
h5:target,
|
||||||
|
h6:target {
|
||||||
|
scroll-margin-top: 1rem;
|
||||||
|
padding-left: 0.5rem;
|
||||||
|
border-left: 3px solid var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Always show pilcrow on targeted heading */
|
||||||
|
h1:target .heading-anchor,
|
||||||
|
h2:target .heading-anchor,
|
||||||
|
h3:target .heading-anchor,
|
||||||
|
h4:target .heading-anchor,
|
||||||
|
h5:target .heading-anchor,
|
||||||
|
h6:target .heading-anchor {
|
||||||
|
visibility: visible;
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
@@ -588,4 +611,4 @@ th {
|
|||||||
td code {
|
td code {
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user