refactor font loaders/declarations

2025-07-03 15:16:40 -04:00 · 2025-04-02 13:49:43 -04:00
parent 5c0e473bbe
commit 2b7f3c66a9
21 changed files with 237 additions and 227 deletions
--- a/app/contact/form.tsx
+++ b/app/contact/form.tsx
@ -99,7 +99,7 @@ const ContactForm = () => {
        <Link href="https://jarv.is" plain openInNewTab>
          links
        </Link>
-        ](https://jarv.is), and <code>`code`</code>.
+        ](https://jarv.is), and <code style={{ fontFamily: "var(--fonts-mono)" }}>`code`</code>.
      </div>

      <div style={{ margin: "1em 0" }}>
--- a/app/contact/page.tsx
+++ b/app/contact/page.tsx
@ -29,7 +29,14 @@ const Page = () => {
      <p>
        🔐 You can grab my public key here:{" "}
        <Link href="https://jrvs.io/pgp" title="My Public Key">
-          <code style={{ fontSize: "0.925em", letterSpacing: "0.075em", wordSpacing: "-0.3em" }}>
+          <code
+            style={{
+              fontFamily: "var(--fonts-mono)",
+              fontSize: "0.925em",
+              letterSpacing: "0.075em",
+              wordSpacing: "-0.3em",
+            }}
+          >
            6BF3 79D3 6F67 1480 2B0C 9CF2 51E6 9A39
          </code>
        </Link>
--- a/app/fonts.ts
+++ b/app/fonts.ts
@ -0,0 +1,32 @@
+// a weird system but makes it impossible to accidentally end up with multiple imports of the same font. see:
+// https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#reusing-fonts
+
+import { Geist as GeistSansLoader, Geist_Mono as GeistMonoLoader } from "next/font/google";
+
+export const GeistSans = GeistSansLoader({
+  subsets: ["latin"],
+  display: "swap",
+  fallback: [
+    // https://github.com/system-fonts/modern-font-stacks#system-ui
+    "system-ui",
+    "sans-serif",
+  ],
+  preload: true,
+});
+
+export const GeistMono = GeistMonoLoader({
+  subsets: ["latin"],
+  display: "swap",
+  fallback: [
+    // https://github.com/primer/css/blob/4113637b3bb60cad1e2dca82e70d92ad05694399/src/support/variables/typography.scss#L37
+    "ui-monospace",
+    "SFMono-Regular",
+    "'SF Mono'",
+    "Menlo",
+    "Consolas",
+    "'Liberation Mono'",
+    "monospace",
+  ],
+  adjustFontFallback: false,
+  preload: true,
+});
--- a/app/global.css
+++ b/app/global.css
@ -1,19 +0,0 @@
-body {
-  font-family: var(--fonts-sans) !important;
-  background-color: var(--colors-background-inner);
-}
-
-code,
-kbd,
-samp,
-pre {
-  font-family: var(--fonts-mono) !important;
-}
-
-/* https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/ */
-@media (prefers-reduced-motion: reduce) {
-  * {
-    animation: none !important;
-    transition: none !important;
-  }
-}
--- a/app/layout.module.css
+++ b/app/layout.module.css
@ -1,4 +1,9 @@
-.flex {
+.body {
+  font-family: var(--fonts-sans);
+  background-color: var(--colors-background-inner);
+}
+
+.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -1,20 +1,19 @@
-import clsx from "clsx";
 import { JsonLd } from "react-schemaorg";
 import Analytics from "./analytics";
 import { ThemeProvider, ThemeScript } from "../contexts/ThemeContext";
 import Header from "../components/Header";
 import Footer from "../components/Footer";
 import { SkipToContentLink, SkipToContentTarget } from "../components/SkipToContent";
+import { setRootCssVariables } from "../lib/helpers/styles";
 import * as config from "../lib/config";
 import { BASE_URL, MAX_WIDTH } from "../lib/config/constants";
 import defaultMetadata from "../lib/config/metadata";
 import type { Metadata } from "next";
 import type { Person, WebSite } from "schema-dts";

-import { GeistMono, GeistSans } from "../lib/styles/fonts";
+import { GeistMono, GeistSans } from "./fonts";
 import "modern-normalize/modern-normalize.css"; // https://github.com/sindresorhus/modern-normalize/blob/main/modern-normalize.css
 import "./themes.css";
-import "./global.css";

 import styles from "./layout.module.css";

@ -70,14 +69,20 @@ const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
        />
      </head>

-      <body
-        className={clsx(GeistMono.variable, GeistSans.variable)}
-        style={{ ["--max-width" as string]: `${MAX_WIDTH}px` }}
-      >
+      <body className={styles.body}>
+        <style
+          precedence={styles.layout}
+          {...setRootCssVariables({
+            "fonts-sans": GeistSans.style.fontFamily,
+            "fonts-mono": GeistMono.style.fontFamily,
+            "max-width": `${MAX_WIDTH}px`,
+          })}
+        />
+
        <ThemeProvider>
          <SkipToContentLink />

-          <div className={styles.flex}>
+          <div className={styles.layout}>
            <Header />

            <main className={styles.default}>
--- a/app/page.module.css
+++ b/app/page.module.css
@ -3,7 +3,6 @@
  font-size: 1.925em;
  font-weight: 500;
  line-height: 1.2;
-  color: var(--colors-text);
 }

 .page h2 {
@ -11,14 +10,12 @@
  font-size: 1.3em;
  font-weight: 400;
  line-height: 1.5;
-  color: var(--colors-text);
 }

 .page p {
  margin: 0.85em 0;
  font-size: 1.05em;
  line-height: 1.7;
-  color: var(--colors-text);
 }

 .page p:last-of-type {
@ -34,36 +31,41 @@
  display: inline-block;
  margin-left: 0.1em;
  font-size: 1.2em;
-  animation: wave 5s ease 1s infinite;
-  transform-origin: 65% 80%;
 }

-@keyframes wave {
-  0% {
-    transform: rotate(0deg);
-  }
-  5% {
-    transform: rotate(14deg);
-  }
-  10% {
-    transform: rotate(-8deg);
-  }
-  15% {
-    transform: rotate(14deg);
-  }
-  20% {
-    transform: rotate(-4deg);
-  }
-  25% {
-    transform: rotate(10deg);
-  }
-  30% {
-    transform: rotate(0deg);
+@media (prefers-reduced-motion: no-preference) {
+  .wave {
+    animation: wave 5s ease 1s infinite;
+    transform-origin: 65% 80%;
  }

-  /* pause for ~9 out of 10 seconds */
-  100% {
-    transform: rotate(0deg);
+  @keyframes wave {
+    0% {
+      transform: rotate(0deg);
+    }
+    5% {
+      transform: rotate(14deg);
+    }
+    10% {
+      transform: rotate(-8deg);
+    }
+    15% {
+      transform: rotate(14deg);
+    }
+    20% {
+      transform: rotate(-4deg);
+    }
+    25% {
+      transform: rotate(10deg);
+    }
+    30% {
+      transform: rotate(0deg);
+    }
+
+    /* pause for ~9 out of 10 seconds */
+    100% {
+      transform: rotate(0deg);
+    }
  }
 }

--- a/app/previously/page.mdx
+++ b/app/previously/page.mdx
@ -1,8 +1,7 @@
+import { Comic_Neue as ComicNeueLoader } from "next/font/google";
 import PageTitle from "../../components/PageTitle";
 import { addMetadata } from "../../lib/helpers/metadata";

-import { ComicNeue } from "../../lib/styles/fonts";
-
 export const metadata = addMetadata({
  title: "Previously on...",
  description: "An incredibly embarrassing and somewhat painful trip down this site's memory lane...",
@ -11,16 +10,26 @@ export const metadata = addMetadata({
  },
 });

+export const ComicNeue = ComicNeueLoader({
+  weight: ["400", "700"],
+  style: ["normal", "italic"],
+  subsets: ["latin"],
+  display: "swap",
+  fallback: ["'Comic Sans MS'", "'Comic Sans'"],
+  adjustFontFallback: false,
+  preload: false,
+});
+
 export const PageStyles = () => (
  <style
    // this is really, really dumb idea but f*ck it we'll do it live
    dangerouslySetInnerHTML={{
      __html: `
 body {
-  cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAZklEQVR4AWIAgn/uBT6A9uoAAwAQiIJo97/0Rgy0ANoJH8MPeEgtqwPQEACqCoQHAKECQKgAECoAhAoAoQJAqAAQxh1oPQfcW3kJpxHtL1AAHAwEwwdYiH8BIEgBTBRAAAEEEEAAG7mRt30hEhoLAAAAAElFTkSuQmCC") 2 1, auto !important;
+  cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAZklEQVR4AWIAgn/uBT6A9uoAAwAQiIJo97/0Rgy0ANoJH8MPeEgtqwPQEACqCoQHAKECQKgAECoAhAoAoQJAqAAQxh1oPQfcW3kJpxHtL1AAHAwEwwdYiH8BIEgBTBRAAAEEEEAAG7mRt30hEhoLAAAAAElFTkSuQmCC") 2 1, auto;
 }
 a, button {
-  cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAgMAAAAOFJJnAAAACVBMVEVHcEwAAAD///8W1S+BAAAAAXRSTlMAQObYZgAAAEdJREFUeAFjoAVghTGkHIhghMAYmQEwxlIYYxlYlSiQMQEsELUKyli1ahWYwQZjMGIwGLKQGA4QA1EYEP0rGVAZrKGhSF4BAHw/HsVwshytAAAAAElFTkSuQmCC") 16 12, auto !important;
+  cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAgMAAAAOFJJnAAAACVBMVEVHcEwAAAD///8W1S+BAAAAAXRSTlMAQObYZgAAAEdJREFUeAFjoAVghTGkHIhghMAYmQEwxlIYYxlYlSiQMQEsELUKyli1ahWYwQZjMGIwGLKQGA4QA1EYEP0rGVAZrKGhSF4BAHw/HsVwshytAAAAAElFTkSuQmCC") 16 12, auto;
 }
 main {
  font-family: ${ComicNeue.style.fontFamily}, var(--fonts-sans) !important;
@ -72,7 +81,7 @@ _Previously on the [Cringey Chronicles&trade;](https://web.archive.org/web/20010

 ---

-🚨 Trigger warning: excessive marquees, animated GIFs, Comic Sans, popups, <code style={{ fontWeight: "normal", fontSize: "0.9em" }}>color: <span style={{ color: "#32cd32" }}>limegreen</span></code> ahead...
+🚨 Trigger warning: excessive marquees, animated GIFs, Comic Sans, popups, <code style={{ fontFamily: "var(--fonts-mono)", fontWeight: "normal", fontSize: "0.9em" }}>color: <span style={{ color: "#32cd32" }}>limegreen</span></code> ahead...

 [<WindowsLogo /> Click here for the _full_ experience anyway.](https://y2k.pages.dev)

--- a/app/zip/page.tsx
+++ b/app/zip/page.tsx
@ -32,6 +32,7 @@ const Page = () => {
          overflowX: "auto",
          padding: "1em",
          fontSize: "0.9em",
+          fontFamily: "var(--fonts-mono)",
          tabSize: 2,
          border: "1px solid var(--colors-kinda-light)",
          borderRadius: "0.6em",