jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-26 17:48:30 -04:00
Code Issues

fix super nitpicky indented headings

Browse Source
This commit is contained in:
Jake Jarvis 2022-03-12 11:07:33 -05:00
parent 50071eef58
commit ddb9fdff8d
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
5 changed files with 29 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/Heading/Heading.tsx
View File

@ -1,20 +1,15 @@
import innerText from "react-innertext";
import HeadingAnchor from "../HeadingAnchor/HeadingAnchor";
import { styled } from "../../lib/styles/stitches.config";
import type { ComponentProps } from "react";
const Anchor = styled("a", {
const Anchor = styled(HeadingAnchor, {
margin: "0 0.25em",
padding: "0 0.25em",
color: "$mediumLight",
fontWeight: 300,
textDecoration: "none",
opacity: 0, // overridden on hover below (except on small screens)
"&::before": {
// pound sign `#`, done here to keep content DOM cleaner
content: "\\0023",
},
"&:hover": {
color: "$link",
},
@ -62,9 +57,7 @@ const Heading = ({ as, id, children, ...rest }: HeadingProps) => {
{children}
{/* add anchor link to H2s and H3s. ID is already generated by rehype-slug. `#` character inserted via CSS. */}
{id && (as === "h2" || as === "h3") && (
<Anchor href={`#${id}`} title={`Jump to "${innerText(children)}"`} tabIndex={-1} aria-hidden={true} />
)}
{id && (as === "h2" || as === "h3") && <Anchor id={id} title={innerText(children)} />}
</H>
);
};

22
components/HeadingAnchor/HeadingAnchor.tsx Normal file
View File

@ -0,0 +1,22 @@
import { styled } from "../../lib/styles/stitches.config";
import type { ComponentProps } from "react";
const PoundSignLink = styled("a", {
textDecoration: "none",
"&::before": {
// pound sign `#`, done here to keep content DOM cleaner
content: "\\0023",
},
});
export type HeadingAnchorProps = ComponentProps<typeof PoundSignLink> & {
id: string;
title: string;
};
const HeadingAnchor = ({ id, title, ...rest }: HeadingAnchorProps) => (
<PoundSignLink href={`#${id}`} title={`Jump to "${title}"`} tabIndex={-1} aria-hidden={true} {...rest} />
);
export default HeadingAnchor;

2
components/NoteTitle/NoteTitle.tsx
View File

@ -4,7 +4,7 @@ import type { ComponentProps } from "react";
import type { NoteType } from "../../types";
const Title = styled("h1", {
margin: "0.3em 0 0.5em -0.03em",
margin: "0.3em 0 0.5em -1px", // misaligned left margin, super nitpicky
fontSize: "2.1em",
lineHeight: 1.3,
fontWeight: 700,

1
lib/styles/stitches.config.ts
View File

@ -65,6 +65,7 @@ export const { styled, css, getCssText, globalCss, keyframes, createTheme, theme
medium: "(max-width: 768px)",
// used rarely only for SUPER narrow windows:
small: "(max-width: 380px)",
// ...note: things then COMPLETELY break at 300px.
},
utils: {

4
pages/index.tsx
View File

@ -34,7 +34,7 @@ const ColorfulLink = ({
};
const H1 = styled("h1", {
margin: "0 0 0.5em -0.03em",
margin: "0 0 0.5em -1px", // misaligned left margin, super nitpicky
fontSize: "1.8em",
fontWeight: 500,
lineHeight: 1.1,
@ -46,7 +46,7 @@ const H1 = styled("h1", {
});
const H2 = styled("h2", {
margin: "0.5em 0 0.5em -0.03em",
margin: "0.5em 0 0.5em -1px", // misaligned left margin, super nitpicky
fontSize: "1.35em",
fontWeight: 400,
lineHeight: 1.4,