jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-04-17 09:28:43 -04:00
Code Issues Activity

update heading anchor links to always show on mobile

Browse Source
This commit is contained in:
Jake Jarvis
2022-01-28 13:07:17 -05:00
parent 766f39a15a
commit 56bf0358ef
3 changed files with 57 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
components/Heading/Heading.module.css
View File

@@ -22,7 +22,7 @@
padding: 0 0.25em;
color: var(--medium-light) !important;
font-weight: 300;
opacity: 0; /* overridden on hover */
opacity: 0; /* overridden on hover below (except on small screens) */
}
.anchor::before {
content: "\0023"; /* pound sign `#`, done here to keep content DOM cleaner */
@@ -30,7 +30,7 @@
.anchor:hover {
color: var(--link) !important;
}
/* make anchor `#` link show up on hover over the corresponding heading */
/* make anchor link show up on hover over its corresponding heading */
.heading:hover .anchor {
opacity: 1;
}
@@ -39,4 +39,9 @@
.heading {
scroll-margin-top: 6.5rem;
}
/* don't require hover to show anchor link on small (likely touch) screens */
.anchor {
opacity: 1;
}
}