add scroll-margin-top property to content sub-headings (fixes #717)

This commit is contained in:
2021-12-31 10:27:59 -05:00
parent 04145189e8
commit 1bbee816c2
3 changed files with 12 additions and 13 deletions
+10 -6
View File
@@ -114,29 +114,33 @@ code {
margin-right: auto;
}
// AnchorJS styles
// sub-heading anchor styles
.h-anchor {
margin: 0 0.25em;
padding: 0 0.25em;
color: var(--medium-light) !important;
background: none !important;
color: var(--medium-light);
background: none;
font-weight: 300;
line-height: 1;
opacity: 0; // overridden by JS on mobile devices
opacity: 0; // overridden on hover
user-select: none;
&::before {
content: "\0023"; // pound sign
content: "\0023"; // pound sign `#`, done here to keep content DOM cleaner
}
&:hover {
color: var(--link) !important;
color: var(--link);
}
}
// make anchor `#` link show up on hover over the corresponding heading
h2,
h3,
h4 {
// offset (approximately) with sticky header so jumped-to content isn't hiding behind it
scroll-margin-top: 90px;
&:hover {
.h-anchor {
opacity: 1;