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;
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
@@ -588,4 +611,4 @@ th {
|
||||
td code {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user