From ddb9fdff8d43c11dbf3cebe9655fa9911d9432af Mon Sep 17 00:00:00 2001
From: Jake Jarvis <jake@jarv.is>
Date: Sat, 12 Mar 2022 11:07:33 -0500
Subject: [PATCH] fix super nitpicky indented headings

---
 components/Heading/Heading.tsx             | 13 +++----------
 components/HeadingAnchor/HeadingAnchor.tsx | 22 ++++++++++++++++++++++
 components/NoteTitle/NoteTitle.tsx         |  2 +-
 lib/styles/stitches.config.ts              |  1 +
 pages/index.tsx                            |  4 ++--
 5 files changed, 29 insertions(+), 13 deletions(-)
 create mode 100644 components/HeadingAnchor/HeadingAnchor.tsx

diff --git a/components/Heading/Heading.tsx b/components/Heading/Heading.tsx
index 19b06bd3..7ef45f05 100644
--- a/components/Heading/Heading.tsx
+++ b/components/Heading/Heading.tsx
@@ -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>
   );
 };
diff --git a/components/HeadingAnchor/HeadingAnchor.tsx b/components/HeadingAnchor/HeadingAnchor.tsx
new file mode 100644
index 00000000..3ec4e023
--- /dev/null
+++ b/components/HeadingAnchor/HeadingAnchor.tsx
@@ -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;
diff --git a/components/NoteTitle/NoteTitle.tsx b/components/NoteTitle/NoteTitle.tsx
index 5791e6f5..7ef33d7b 100644
--- a/components/NoteTitle/NoteTitle.tsx
+++ b/components/NoteTitle/NoteTitle.tsx
@@ -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,
diff --git a/lib/styles/stitches.config.ts b/lib/styles/stitches.config.ts
index e7dde363..90265b8e 100644
--- a/lib/styles/stitches.config.ts
+++ b/lib/styles/stitches.config.ts
@@ -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: {
diff --git a/pages/index.tsx b/pages/index.tsx
index 9fdce029..d1599650 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -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,