fix super nitpicky indented headings

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>
   );
 };

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;

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,