jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-18 16:05:33 -04:00
Code Issues Activity

stop being lazy with css selectors

Browse Source
This commit is contained in:
Jake Jarvis
2022-01-30 11:38:37 -05:00
parent 9f34cec930
commit f0259dbab5
24 changed files with 498 additions and 471 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,7 +20,7 @@
.anchor {
margin: 0 0.25em;
padding: 0 0.25em;
color: var(--medium-light) !important;
color: var(--medium-light);
font-weight: 300;
opacity: 0; /* overridden on hover below (except on small screens) */
}
@@ -28,7 +28,7 @@
content: "\0023"; /* pound sign `#`, done here to keep content DOM cleaner */
}
.anchor:hover {
color: var(--link) !important;
color: var(--link);
}
/* make anchor link show up on hover over its corresponding heading */
.heading:hover .anchor {

2
components/Heading/Heading.tsx
View File

@@ -16,7 +16,7 @@ const Heading = ({ as: Component, id, className, children, ...rest }: Props) =>
{/* add anchor link to H2s and H3s. ID is already generated by rehype-slug. `#` character inserted via CSS. */}
{id && (Component === "h2" || Component === "h3") && (
<a className={styles.anchor} href={`#${id}`} tabIndex={-1} aria-hidden="true" />
<a className={styles.anchor} href={`#${id}`} tabIndex={-1} aria-hidden={true} />
)}
</Component>
);