enable vercel analytics

lib/styles/fonts/index.ts

@@ -0,0 +1,6 @@
+// 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
+
+export { default as Inter } from "./loaders/Inter";
+export { default as SourceCodePro } from "./loaders/SourceCodePro";
+export { default as ComicNeue } from "./loaders/ComicNeue";

lib/styles/fonts/loaders/ComicNeue.ts

@@ -0,0 +1,13 @@
+import { Comic_Neue as ComicNeueLoader } from "next/font/google";
+
+const ComicNeue = ComicNeueLoader({
+  weight: ["400", "700"],
+  style: ["normal", "italic"],
+  subsets: ["latin"],
+  display: "swap",
+  fallback: ["'Comic Sans MS'", "'Comic Sans'"],
+  adjustFontFallback: false,
+  preload: false,
+});
+
+export default ComicNeue;

lib/styles/fonts/loaders/Inter.ts

@@ -0,0 +1,10 @@
+import { Inter as InterLoader } from "next/font/google";
+
+const Inter = InterLoader({
+  weight: "variable",
+  subsets: ["latin"],
+  display: "fallback",
+  preload: true,
+});
+
+export default Inter;

lib/styles/fonts/loaders/SourceCodePro.ts

@@ -0,0 +1,10 @@
+import { Source_Code_Pro as SourceCodeProLoader } from "next/font/google";
+
+const SourceCodePro = SourceCodeProLoader({
+  weight: "variable",
+  subsets: ["latin"],
+  display: "fallback",
+  preload: true,
+});
+
+export default SourceCodePro;

lib/styles/stitches.config.ts

@@ -2,11 +2,11 @@ import { createStitches } from "@stitches/react";
 import type * as Stitches from "@stitches/react";
 
 // misc. helpers
-import hexToRgba from "./utils/hex-to-rgba";
-import normalizeStyles from "./utils/normalize";
+import { rgba } from "polished";
+import normalizeCss from "stitches-normalize";
 
 // web fonts
-import { Inter, SourceCodePro } from "./utils/fonts";
+import { Inter, SourceCodePro } from "./fonts";
 
 // https://stitches.dev/docs/typescript#type-a-css-object
 export type CSS = Stitches.CSS<typeof stitchesConfig>;
@@ -30,7 +30,7 @@ export const {
     colors: {
       backgroundInner: "#ffffff",
       backgroundOuter: "#fcfcfc",
-      backgroundHeader: hexToRgba("#fcfcfc", 0.7),
+      backgroundHeader: rgba("#fcfcfc", 0.7),
       text: "#202020",
       mediumDark: "#515151",
       medium: "#5e5e5e",
@@ -40,7 +40,7 @@ export const {
       superLight: "#f4f4f4",
       superDuperLight: "#fbfbfb",
       link: "#0e6dc2",
-      linkUnderline: hexToRgba("#0e6dc2", 0.4),
+      linkUnderline: rgba("#0e6dc2", 0.4),
       success: "#44a248",
       error: "#ff1b1b",
       warning: "#f78200",
@@ -93,7 +93,7 @@ export const {
       alpha?: number;
     }) => ({
       // allow both pre-set rgba stitches variables and hex values
-      $$underlineColor: color.startsWith("#") ? hexToRgba(color, alpha) : color,
+      $$underlineColor: color.startsWith("#") ? rgba(color, alpha) : color,
     }),
   },
 });
@@ -102,7 +102,7 @@ export const darkTheme = createTheme({
   colors: {
     backgroundInner: "#1e1e1e",
     backgroundOuter: "#252525",
-    backgroundHeader: hexToRgba("#252525", 0.85),
+    backgroundHeader: rgba("#252525", 0.85),
     text: "#f1f1f1",
     mediumDark: "#d7d7d7",
     medium: "#b1b1b1",
@@ -112,7 +112,7 @@ export const darkTheme = createTheme({
     superLight: "#272727",
     superDuperLight: "#1f1f1f",
     link: "#88c7ff",
-    linkUnderline: hexToRgba("#88c7ff", 0.4),
+    linkUnderline: rgba("#88c7ff", 0.4),
     success: "#78df55",
     error: "#ff5151",
     warning: "#f2b702",
@@ -132,9 +132,12 @@ export const darkTheme = createTheme({
   },
 });
 
+// @ts-ignore
 export const globalStyles = globalCss(
   // @ts-ignore
-  normalizeStyles,
+  ...normalizeCss({
+    systemFonts: false,
+  }),
   {
     body: {
       fontFamily: theme.fonts.sans,

lib/styles/utils/fonts.ts

@@ -1,32 +0,0 @@
-import {
-  Inter as InterLoader,
-  Source_Code_Pro as SourceCodeProLoader,
-  Comic_Neue as ComicNeueLoader,
-} from "next/font/google";
-
-const Inter = InterLoader({
-  weight: "variable",
-  subsets: ["latin"],
-  display: "fallback",
-  preload: true,
-});
-
-const SourceCodePro = SourceCodeProLoader({
-  weight: "variable",
-  subsets: ["latin"],
-  display: "fallback",
-  preload: true,
-});
-
-// only for use in pages/previously.tsx (and tree-shaken out everywhere else in production)
-const ComicNeue = ComicNeueLoader({
-  weight: ["400", "700"],
-  style: ["normal", "italic"],
-  subsets: ["latin"],
-  display: "swap",
-  fallback: ["'Comic Sans MS'", "'Comic Sans'"],
-  adjustFontFallback: false,
-  preload: false,
-});
-
-export { Inter, SourceCodePro, ComicNeue };

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

@@ -1,6 +0,0 @@
-import hexToRgbaOrig from "hex-to-rgba";
-
-// removes spaces from default hex-to-rgba output
-const hexToRgba = (color: string, alpha?: number) => hexToRgbaOrig(color, alpha).replace(/\s/g, "");
-
-export default hexToRgba;

lib/styles/utils/normalize.ts

@@ -1,104 +0,0 @@
-/*! stitches-normalize | MIT License | https://github.com/jakejarvis/stitches-normalize */
-/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
-
-import type * as Stitches from "@stitches/react";
-
-const normalizeStyles: Record<string, Stitches.CSSProperties> = {
-  "*, ::before, ::after": {
-    boxSizing: "border-box",
-  },
-  html: {
-    lineHeight: 1.15,
-    tabSize: 4,
-    // @ts-ignore
-    WebkitTextSizeAdjust: "100%",
-  },
-  body: {
-    margin: 0,
-  },
-  hr: {
-    height: 0,
-    color: "inherit",
-  },
-  "abbr[title]": {
-    textDecoration: "underline dotted",
-  },
-  "b, strong": {
-    fontWeight: "bolder",
-  },
-  "code, kbd, samp, pre": {
-    fontSize: "1em",
-  },
-  small: {
-    fontSize: "80%",
-  },
-  "sub, sup": {
-    fontSize: "75%",
-    lineHeight: 0,
-    position: "relative",
-    verticalAlign: "baseline",
-  },
-  sub: {
-    bottom: "-0.25em",
-  },
-  sup: {
-    top: "-0.5em",
-  },
-  table: {
-    textIndent: 0,
-    borderColor: "inherit",
-  },
-  "button, input, optgroup, select, textarea": {
-    fontFamily: "inherit",
-    fontSize: "100%",
-    lineHeight: 1.15,
-    margin: 0,
-    // @ts-ignore
-    WebkitAppearance: "button",
-  },
-  "button, select": {
-    textTransform: "none",
-  },
-  legend: {
-    padding: 0,
-  },
-  progress: {
-    verticalAlign: "baseline",
-  },
-  summary: {
-    display: "list-item",
-  },
-  "[type='search']": {
-    outlineOffset: -2,
-    // @ts-ignore
-    WebkitAppearance: "textfield",
-  },
-
-  // `-webkit` compatibility properties and rules
-  "::-webkit-search-decoration": {
-    // @ts-ignore
-    WebkitAppearance: "none",
-  },
-  "::-webkit-inner-spin-button, ::-webkit-outer-spin-button": {
-    height: "auto",
-  },
-  "::-webkit-file-upload-button": {
-    font: "inherit",
-    // @ts-ignore
-    WebkitAppearance: "button",
-  },
-
-  // `-moz` compatibility properties and rules
-  "::-moz-focus-inner": {
-    borderStyle: "none",
-    padding: 0,
-  },
-  ":-moz-focusring": {
-    outline: "1px dotted ButtonText",
-  },
-  ":-moz-ui-invalid": {
-    boxShadow: "none",
-  },
-};
-
-export default normalizeStyles;