fix some leftover stitches to-do items

components/CodeBlock/CodeBlock.tsx

@@ -89,18 +89,13 @@ const CornerCopyButton = styled(CopyButton, {
   top: 0,
   right: 0,
   padding: "0.65em",
-  color: "$mediumDark",
   backgroundColor: "$backgroundInner",
   border: "1px solid $kindaLight",
-  borderTopRightRadius: "$radii$rounded",
+  borderTopRightRadius: "$rounded",
-  borderEndStartRadius: "$radii$rounded",
+  borderBottomLeftRadius: "$rounded",
 
   // light-dark theme switch fading
   transition: "background 0.25s ease, border 0.25s ease",
-
-  "&:hover": {
-    color: "$link",
-  },
 });
 
 export type CodeBlockProps = ComponentProps<typeof Code> & {

components/ContactForm/ContactForm.tsx

@@ -64,7 +64,7 @@ const SubmitButton = styled("button", {
   height: "3.25em",
   padding: "1em 1.25em",
   marginRight: "1.5em",
-  border: "0",
+  border: 0,
   borderRadius: "$rounded",
   cursor: "pointer",
   userSelect: "none",

components/CopyButton/CopyButton.tsx

@@ -10,9 +10,16 @@ const Button = styled("button", {
   cursor: "pointer",
 
   variants: {
-    success: {
+    copied: {
       true: {
-        color: "$success !important",
+        color: "$success",
+      },
+      false: {
+        color: "$mediumDark",
+
+        "&:hover": {
+          color: "$link",
+        },
       },
     },
   },
@@ -69,7 +76,7 @@ const CopyButton = forwardRef(function CopyButton(
       aria-label="Copy to clipboard"
       onClick={handleCopy}
       disabled={!!copied}
-      success={copied}
+      copied={copied}
       ref={ref}
     >
       <Icon as={copied ? CheckOcticon : ClipboardOcticon} />

components/MenuItem/MenuItem.tsx

@@ -9,18 +9,20 @@ const Link = styled("a", {
   textDecoration: "none",
   padding: "0.6em",
 
-  "&:hover": {
-    borderBottom: "0.2em solid",
-    marginBottom: "-0.2em",
-    borderColor: "$kindaLight",
-  },
-
   variants: {
+    // indicate active page/section
     current: {
       true: {
-        borderBottom: "0.2em solid",
         marginBottom: "-0.2em",
-        borderColor: "$linkUnderline !important",
+        borderBottom: "0.2em solid",
+        borderColor: "$linkUnderline",
+      },
+      false: {
+        "&:hover": {
+          marginBottom: "-0.2em",
+          borderBottom: "0.2em solid",
+          borderColor: "$kindaLight",
+        },
       },
     },
   },

lib/styles/fonts/comic-neue.ts

@@ -6,19 +6,24 @@ import comicNeueLatin400NormalWoff2 from "@fontsource/comic-neue/files/comic-neu
 import comicNeueLatin700NormalWoff from "@fontsource/comic-neue/files/comic-neue-latin-700-normal.woff";
 import comicNeueLatin700NormalWoff2 from "@fontsource/comic-neue/files/comic-neue-latin-700-normal.woff2";
 
-export const ComicNeue = [
+const ComicNeue = {
-  {
+  preloadUrl: null, // don't preload, only used on one page
-    fontFamily: "Comic Neue",
+  family: [
-    fontStyle: "normal",
+    {
-    fontDisplay: "swap",
+      fontFamily: "Comic Neue",
-    fontWeight: 400,
+      fontStyle: "normal",
-    src: `url(${comicNeueLatin400NormalWoff2}) format("woff2"), url(${comicNeueLatin400NormalWoff}) format("woff")`,
+      fontDisplay: "swap",
-  },
+      fontWeight: 400,
-  {
+      src: `url(${comicNeueLatin400NormalWoff2}) format("woff2"), url(${comicNeueLatin400NormalWoff}) format("woff")`,
-    fontFamily: "Comic Neue",
+    },
-    fontStyle: "normal",
+    {
-    fontDisplay: "swap",
+      fontFamily: "Comic Neue",
-    fontWeight: 700,
+      fontStyle: "normal",
-    src: `url(${comicNeueLatin700NormalWoff2}) format("woff2"), url(${comicNeueLatin700NormalWoff}) format("woff")`,
+      fontDisplay: "swap",
-  },
+      fontWeight: 700,
-];
+      src: `url(${comicNeueLatin700NormalWoff2}) format("woff2"), url(${comicNeueLatin700NormalWoff}) format("woff")`,
+    },
+  ],
+};
+
+export default ComicNeue;

lib/styles/fonts/inter.ts

@@ -10,48 +10,40 @@ import interLatin700NormalWoff2 from "@fontsource/inter/files/inter-latin-700-no
 
 // Variable
 import interLatinVarFullNormalWoff2 from "@fontsource/inter/files/inter-latin-variable-full-normal.woff2";
-import interLatinExtVarFullNormalWoff2 from "@fontsource/inter/files/inter-latin-ext-variable-full-normal.woff2";
 
-// re-export hashed URL of the most prominent font so we can preload it
+const Inter = {
-export { interLatinVarFullNormalWoff2 as preloadUrl };
+  // re-export hashed URL of the most prominent file so we can preload it in head:
+  preloadUrl: interLatinVarFullNormalWoff2,
+  family: [
+    {
+      fontFamily: "Inter",
+      fontStyle: "normal",
+      fontDisplay: "swap",
+      fontWeight: 400,
+      src: `url(${interLatin400NormalWoff2}) format("woff2"), url(${interLatin400NormalWoff}) format("woff")`,
+    },
+    {
+      fontFamily: "Inter",
+      fontStyle: "normal",
+      fontDisplay: "swap",
+      fontWeight: 500,
+      src: `url(${interLatin500NormalWoff2}) format("woff2"), url(${interLatin500NormalWoff}) format("woff")`,
+    },
+    {
+      fontFamily: "Inter",
+      fontStyle: "normal",
+      fontDisplay: "swap",
+      fontWeight: 700,
+      src: `url(${interLatin700NormalWoff2}) format("woff2"), url(${interLatin700NormalWoff}) format("woff")`,
+    },
+    {
+      fontFamily: "Inter var",
+      fontStyle: "oblique 0deg 10deg",
+      fontDisplay: "swap",
+      fontWeight: "100 900",
+      src: `url(${interLatinVarFullNormalWoff2}) format("woff2")`,
+    },
+  ],
+};
 
-export const Inter = [
+export default Inter;
-  {
-    fontFamily: "Inter",
-    fontStyle: "normal",
-    fontDisplay: "swap",
-    fontWeight: 400,
-    src: `url(${interLatin400NormalWoff2}) format("woff2"), url(${interLatin400NormalWoff}) format("woff")`,
-  },
-  {
-    fontFamily: "Inter",
-    fontStyle: "normal",
-    fontDisplay: "swap",
-    fontWeight: 500,
-    src: `url(${interLatin500NormalWoff2}) format("woff2"), url(${interLatin500NormalWoff}) format("woff")`,
-  },
-  {
-    fontFamily: "Inter",
-    fontStyle: "normal",
-    fontDisplay: "swap",
-    fontWeight: 700,
-    src: `url(${interLatin700NormalWoff2}) format("woff2"), url(${interLatin700NormalWoff}) format("woff")`,
-  },
-  {
-    fontFamily: "Inter var",
-    fontStyle: "oblique 0deg 10deg",
-    fontDisplay: "swap",
-    fontWeight: "100 900",
-    src: `url(${interLatinVarFullNormalWoff2}) format("woff2")`,
-    unicodeRange:
-      "U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd",
-  },
-  {
-    fontFamily: "Inter var",
-    fontStyle: "oblique 0deg 10deg",
-    fontDisplay: "swap",
-    fontWeight: "100 900",
-    src: `url(${interLatinExtVarFullNormalWoff2}) format("woff2")`,
-    unicodeRange: "U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff",
-  },
-];

lib/styles/fonts/roboto-mono.ts

@@ -7,70 +7,78 @@ import robotoMonoLatin500NormalWoff from "@fontsource/roboto-mono/files/roboto-m
 import robotoMonoLatin500NormalWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-500-normal.woff2";
 import robotoMonoLatin700NormalWoff from "@fontsource/roboto-mono/files/roboto-mono-latin-700-normal.woff";
 import robotoMonoLatin700NormalWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-700-normal.woff2";
+import robotoMonoLatin400ItalicWoff from "@fontsource/roboto-mono/files/roboto-mono-latin-400-italic.woff";
+import robotoMonoLatin400ItalicWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-400-italic.woff2";
+import robotoMonoLatin500ItalicWoff from "@fontsource/roboto-mono/files/roboto-mono-latin-500-italic.woff";
+import robotoMonoLatin500ItalicWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-500-italic.woff2";
+import robotoMonoLatin700ItalicWoff from "@fontsource/roboto-mono/files/roboto-mono-latin-700-italic.woff";
+import robotoMonoLatin700ItalicWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-700-italic.woff2";
 
 // Variable
 import robotoMonoLatinVarWghtOnlyNormalWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-variable-wghtOnly-normal.woff2";
-import robotoMonoLatinExtVarWghtOnlyNormalWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-ext-variable-wghtOnly-normal.woff2";
 import robotoMonoLatinVarWghtOnlyItalicWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-variable-wghtOnly-italic.woff2";
-import robotoMonoLatinExtVarWghtOnlyItalicWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-ext-variable-wghtOnly-italic.woff2";
 
-// re-export hashed URL of the most prominent font so we can preload it
+const RobotoMono = {
-export { robotoMonoLatinVarWghtOnlyNormalWoff2 as preloadUrl };
+  // re-export hashed URL of the most prominent file so we can preload it in head:
+  preloadUrl: robotoMonoLatinVarWghtOnlyNormalWoff2,
+  family: [
+    {
+      fontFamily: "Roboto Mono",
+      fontStyle: "normal",
+      fontDisplay: "swap",
+      fontWeight: 400,
+      src: `url(${robotoMonoLatin400NormalWoff2}) format("woff2"), url(${robotoMonoLatin400NormalWoff}) format("woff")`,
+    },
+    {
+      fontFamily: "Roboto Mono",
+      fontStyle: "normal",
+      fontDisplay: "swap",
+      fontWeight: 500,
+      src: `url(${robotoMonoLatin500NormalWoff2}) format("woff2"), url(${robotoMonoLatin500NormalWoff}) format("woff")`,
+    },
+    {
+      fontFamily: "Roboto Mono",
+      fontStyle: "normal",
+      fontDisplay: "swap",
+      fontWeight: 700,
+      src: `url(${robotoMonoLatin700NormalWoff2}) format("woff2"), url(${robotoMonoLatin700NormalWoff}) format("woff")`,
+    },
+    {
+      fontFamily: "Roboto Mono",
+      fontStyle: "italic",
+      fontDisplay: "swap",
+      fontWeight: 400,
+      src: `url(${robotoMonoLatin400ItalicWoff2}) format("woff2"), url(${robotoMonoLatin400ItalicWoff}) format("woff")`,
+    },
+    {
+      fontFamily: "Roboto Mono",
+      fontStyle: "italic",
+      fontDisplay: "swap",
+      fontWeight: 500,
+      src: `url(${robotoMonoLatin500ItalicWoff2}) format("woff2"), url(${robotoMonoLatin500ItalicWoff}) format("woff")`,
+    },
+    {
+      fontFamily: "Roboto Mono",
+      fontStyle: "italic",
+      fontDisplay: "swap",
+      fontWeight: 700,
+      src: `url(${robotoMonoLatin700ItalicWoff2}) format("woff2"), url(${robotoMonoLatin700ItalicWoff}) format("woff")`,
+    },
+    {
+      fontFamily: "Roboto Mono var",
+      fontStyle: "normal",
+      fontDisplay: "swap",
+      fontWeight: "100 700",
+      src: `url(${robotoMonoLatinVarWghtOnlyNormalWoff2}) format("woff2")`,
+    },
+    {
+      fontFamily: "Roboto Mono var",
+      fontStyle: "italic",
+      fontDisplay: "swap",
+      fontWeight: "100 700",
+      src: `url(${robotoMonoLatinVarWghtOnlyItalicWoff2}) format("woff2")`,
+    },
+  ],
+};
 
-export const RobotoMono = [
+export default RobotoMono;
-  {
-    fontFamily: "Roboto Mono",
-    fontStyle: "normal",
-    fontDisplay: "swap",
-    fontWeight: 400,
-    src: `url(${robotoMonoLatin400NormalWoff2}) format("woff2"), url(${robotoMonoLatin400NormalWoff}) format("woff")`,
-  },
-  {
-    fontFamily: "Roboto Mono",
-    fontStyle: "normal",
-    fontDisplay: "swap",
-    fontWeight: 500,
-    src: `url(${robotoMonoLatin500NormalWoff2}) format("woff2"), url(${robotoMonoLatin500NormalWoff}) format("woff")`,
-  },
-  {
-    fontFamily: "Roboto Mono",
-    fontStyle: "normal",
-    fontDisplay: "swap",
-    fontWeight: 700,
-    src: `url(${robotoMonoLatin700NormalWoff2}) format("woff2"), url(${robotoMonoLatin700NormalWoff}) format("woff")`,
-  },
-  {
-    fontFamily: "Roboto Mono var",
-    fontStyle: "normal",
-    fontDisplay: "swap",
-    fontWeight: "100 700",
-    src: `url(${robotoMonoLatinVarWghtOnlyNormalWoff2}) format("woff2")`,
-    unicodeRange:
-      "U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd",
-  },
-  {
-    fontFamily: "Roboto Mono var",
-    fontStyle: "normal",
-    fontDisplay: "swap",
-    fontWeight: "100 700",
-    src: `url(${robotoMonoLatinExtVarWghtOnlyNormalWoff2}) format("woff2")`,
-    unicodeRange: "U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff",
-  },
-  {
-    fontFamily: "Roboto Mono var",
-    fontStyle: "italic",
-    fontDisplay: "swap",
-    fontWeight: "100 700",
-    src: `url(${robotoMonoLatinVarWghtOnlyItalicWoff2}) format("woff2")`,
-    unicodeRange:
-      "U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd",
-  },
-  {
-    fontFamily: "Roboto Mono var",
-    fontStyle: "italic",
-    fontDisplay: "swap",
-    fontWeight: "100 700",
-    src: `url(${robotoMonoLatinExtVarWghtOnlyItalicWoff2}) format("woff2")`,
-    unicodeRange: "U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff",
-  },
-];

lib/styles/helpers/hex-to-rgba.ts

@@ -5,7 +5,7 @@ const hex2rgba = (hex: string, alpha: number) => {
   const green = (number >> 8) & 255;
   const blue = number & 255;
 
-  return `rgba(${red},${green},${blue},${alpha})`;
+  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
 };
 
 export default hex2rgba;

lib/styles/helpers/normalize.ts

@@ -1,7 +1,8 @@
 // @sindresorhus's modern-normalize.css converted to a JS object, with a bit of cruft removed:
 // https://github.com/sindresorhus/modern-normalize/blob/b59ec0d3d8654cbb6843bc9ea45aef5f1d680108/modern-normalize.css
+// note: re-defining any of these selector(s) anywhere else will override *every* property for them defined here.
 
-export const normalizeCss = {
+const normalizeCss = {
   "*, ::before, ::after": {
     boxSizing: "border-box",
   },
@@ -85,3 +86,5 @@ export const normalizeCss = {
     display: "list-item",
   },
 };
+
+export default normalizeCss;

lib/styles/stitches.config.ts

@@ -2,12 +2,12 @@ import { createStitches, defaultThemeMap } from "@stitches/react";
 import hex2rgba from "./helpers/hex-to-rgba";
 
 // modified modern-normalize.css in object form
-import { normalizeCss } from "./helpers/normalize";
+import normalizeCss from "./helpers/normalize";
 
 // web fonts
-import { Inter, preloadUrl as interPreloadUrl } from "./fonts/inter";
+import Inter from "./fonts/inter";
-import { RobotoMono, preloadUrl as robotoMonoPreloadUrl } from "./fonts/roboto-mono";
+import RobotoMono from "./fonts/roboto-mono";
-import { ComicNeue } from "./fonts/comic-neue";
+import ComicNeue from "./fonts/comic-neue";
 
 export const { styled, css, getCssText, globalCss, keyframes, theme, createTheme } = createStitches({
   theme: {
@@ -120,7 +120,7 @@ export const globalStyles = globalCss({
   ...normalizeCss,
 
   // @ts-ignore
-  "@font-face": [...Inter, ...RobotoMono, ...ComicNeue],
+  "@font-face": [...Inter.family, ...RobotoMono.family, ...ComicNeue.family],
 
   body: {
     margin: 0,
@@ -176,9 +176,9 @@ export const globalStyles = globalCss({
 });
 
 // re-export hashed URLs of the most important variable fonts so we can preload them in ../../pages/_document.tsx
-export const preloads = {
+export const preloadUrls = {
   fonts: {
-    InterVar: interPreloadUrl,
+    InterVar: Inter.preloadUrl,
-    RobotoMonoVar: robotoMonoPreloadUrl,
+    RobotoMonoVar: RobotoMono.preloadUrl,
   },
 };

pages/_app.tsx

@@ -48,12 +48,12 @@ const App = ({ Component, pageProps }: AppProps) => {
     };
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  // allow layout overrides per-page, but default to plain `<Layout />`
-  const getLayout = Component.getLayout || ((page) => <Layout>{page}</Layout>);
-
   // inject body styles defined in ../lib/styles/stitches.config.ts
   globalStyles();
 
+  // allow layout overrides per-page, but default to plain `<Layout />`
+  const getLayout = Component.getLayout || ((page) => <Layout>{page}</Layout>);
+
   return (
     <>
       {/* all SEO config is in ../lib/config/seo.ts except for canonical URLs, which require access to next router */}

pages/_document.tsx

@@ -1,5 +1,5 @@
 import { Html, Head, Main, NextScript } from "next/document";
-import { getCssText, preloads } from "../lib/styles/stitches.config";
+import { getCssText, preloadUrls } from "../lib/styles/stitches.config";
 import * as config from "../lib/config";
 
 // https://nextjs.org/docs/advanced-features/custom-document
@@ -8,8 +8,14 @@ const Document = () => {
     <Html lang={config.siteLocale?.replace("_", "-")}>
       <Head>
         {/* static asset preloads */}
-        <link rel="preload" as="font" type="font/woff2" href={preloads.fonts.InterVar} crossOrigin="anonymous" />
+        <link rel="preload" as="font" type="font/woff2" href={preloadUrls.fonts.InterVar} crossOrigin="anonymous" />
-        <link rel="preload" as="font" type="font/woff2" href={preloads.fonts.RobotoMonoVar} crossOrigin="anonymous" />
+        <link
+          rel="preload"
+          as="font"
+          type="font/woff2"
+          href={preloadUrls.fonts.RobotoMonoVar}
+          crossOrigin="anonymous"
+        />
 
         {/* stitches SSR: https://stitches.dev/blog/using-nextjs-with-stitches#step-3-ssr */}
         <style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />