even more styled components

components/Heading/Heading.module.css

@@ -0,0 +1,51 @@
+.heading {
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+  line-height: 1.5;
+
+  /* offset (approximately) with sticky header so jumped-to content isn't hiding behind it */
+  scroll-margin-top: 4em;
+}
+
+/* special bottom border for <h2>s */
+.h2 {
+  padding-bottom: 0.25em;
+  border-bottom: 1px solid var(--kinda-light);
+}
+
+.h3,
+.h4 {
+  scroll-margin-top: 5em;
+}
+
+/* sub-heading anchor styles */
+.heading :global(.h-anchor) {
+  margin: 0 0.25em;
+  padding: 0 0.25em;
+  color: var(--medium-light);
+  background: none;
+  font-weight: 300;
+  opacity: 0; /* overridden on hover */
+  user-select: none;
+}
+.heading :global(.h-anchor::before) {
+  content: "\0023"; /* pound sign `#`, done here to keep content DOM cleaner */
+}
+.heading :global(.h-anchor:hover) {
+  color: var(--link);
+}
+/* make anchor `#` link show up on hover over the corresponding heading */
+.heading:hover :global(.h-anchor) {
+  opacity: 1;
+}
+
+@media screen and (max-width: 768px) {
+  .h2 {
+    scroll-margin-top: 5em;
+  }
+
+  .h3,
+  .h4 {
+    scroll-margin-top: 6em;
+  }
+}

components/Heading/Heading.tsx

@@ -0,0 +1,49 @@
+import type { HTMLAttributes } from "react";
+
+import styles from "./Heading.module.css";
+
+type Props = HTMLAttributes<HTMLHeadingElement> & {
+  as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+};
+
+const Heading = ({ as: Component, children, ...rest }: Props) => {
+  return (
+    <Component className={`${styles.heading} ${styles[Component] || ""}`} {...rest}>
+      {children}
+    </Component>
+  );
+};
+
+// TODO: do this less manually...
+export const H1 = ({ children, ...props }: Props) => (
+  <Heading as="h1" {...props}>
+    {children}
+  </Heading>
+);
+export const H2 = ({ children, ...props }: Props) => (
+  <Heading as="h2" {...props}>
+    {children}
+  </Heading>
+);
+export const H3 = ({ children, ...props }: Props) => (
+  <Heading as="h3" {...props}>
+    {children}
+  </Heading>
+);
+export const H4 = ({ children, ...props }: Props) => (
+  <Heading as="h4" {...props}>
+    {children}
+  </Heading>
+);
+export const H5 = ({ children, ...props }: Props) => (
+  <Heading as="h5" {...props}>
+    {children}
+  </Heading>
+);
+export const H6 = ({ children, ...props }: Props) => (
+  <Heading as="h6" {...props}>
+    {children}
+  </Heading>
+);
+
+export default Heading;