clean up styles

next.config.js

@@ -2,6 +2,7 @@
  * @type {import('next').NextConfig}
  */
 
+const path = require("path");
 const withBundleAnalyzer = require("@next/bundle-analyzer")({
   enabled: process.env.ANALYZE === "true",
 });
@@ -22,6 +23,8 @@ module.exports = withBundleAnalyzer({
   webpack: (config) => {
     config.module.rules.push({
       test: /\.svg$/,
+      issuer: { and: [/\.(js|ts)x?$/] },
+      include: [path.resolve(__dirname, "components/icons")],
       use: [
         {
           loader: "@svgr/webpack",

pages/_app.tsx

@@ -6,10 +6,15 @@ import * as Fathom from "fathom-client";
 import * as config from "../lib/config";
 import type { AppProps } from "next/app";
 
-import meJpg from "../public/static/images/me.jpg";
 import faviconIco from "../public/static/images/favicon.ico";
 import appleTouchIconPng from "../public/static/images/apple-touch-icon.png";
+import meJpg from "../public/static/images/me.jpg";
 
+// global styles
+import "modern-normalize/modern-normalize.css";
+import "../styles/colors.scss";
+import "../styles/typography.scss";
+import "../styles/highlight.scss";
 import "../styles/index.scss";
 
 export default function App({ Component, pageProps }: AppProps) {

styles/_reset.scss

@@ -1 +0,0 @@
-@import "~modern-normalize/modern-normalize.css";

styles/index.scss

@@ -1,60 +1,9 @@
-@use "reset";
-@use "typography";
-@use "syntax";
-@use "colors";
-
-// Global Styles
 body {
   width: 100%;
   height: 100%;
   margin: 0 auto;
   scroll-behavior: smooth;
   background-color: var(--background-outer);
-  font-family: typography.$font-stack-sans;
-  font-kerning: normal;
-  font-variant-ligatures: normal;
-  font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
-}
-
-code,
-kbd,
-samp,
-pre,
-.monospace {
-  font-family: typography.$font-stack-mono;
-}
-
-// override above font-family if browser supports variable fonts
-// https://caniuse.com/#feat=variable-fonts
-@supports (font-variation-settings: normal) {
-  body {
-    font-family: typography.$font-stack-sans-variable;
-    font-optical-sizing: auto;
-  }
-
-  code,
-  kbd,
-  samp,
-  pre,
-  .monospace {
-    font-family: typography.$font-stack-mono-variable;
-  }
-
-  // Chrome doesn't automatically slant multi-axis Inter var, for some reason.
-  // Adding "slnt" -10 fixes Chrome but then over-italicizes in Firefox. AHHHHHHHHHH.
-  em {
-    font-style: normal !important;
-    font-variation-settings: "ital" 1, "slnt" -10;
-
-    // Roboto Mono doesn't have this problem, but the above fix breaks it, of course.
-    code,
-    kbd,
-    samp,
-    pre,
-    .monospace {
-      font-style: italic !important;
-    }
-  }
 }
 
 a {

styles/typography.scss

@@ -1,12 +1,12 @@
-@use "sass:list";
+// stylelint-disable value-keyword-case, scss/operator-no-unspaced
 
+@use "sass:list";
 @use "~@fontsource/inter/scss/mixins" as Inter;
 @use "~@fontsource/roboto-mono/scss/mixins" as RobotoMono;
 @use "~@fontsource/comic-neue/scss/mixins" as ComicNeue;
 
 // System fonts:
 // https://primer.style/design/foundations/typography#font-stack
-// stylelint-disable-next-line value-keyword-case
 $system-fonts-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
 $system-fonts-mono: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
 
@@ -16,12 +16,10 @@ $font-stack-sans-variable: list.join("Inter var", $system-fonts-sans);
 $font-stack-mono: list.join("Roboto Mono", $system-fonts-mono);
 $font-stack-mono-variable: list.join("Roboto Mono var", $system-fonts-mono);
 
-// stylelint-disable scss/operator-no-unspaced
 // prettier-ignore
 $unicode-latin-only: (
   latin: (U+0000-00FF, 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),
 );
-// stylelint-enable scss/operator-no-unspaced
 
 // Inter
 @include Inter.fontFaceVariable($fontName: "Inter var", $type: "full", $unicodeMap: $unicode-latin-only);
@@ -39,3 +37,51 @@ $unicode-latin-only: (
 // Comic Neue
 @include ComicNeue.fontFace($fontName: "Comic Neue", $weight: 400, $unicodeMap: $unicode-latin-only);
 @include ComicNeue.fontFace($fontName: "Comic Neue", $weight: 700, $unicodeMap: $unicode-latin-only);
+
+body {
+  font-family: $font-stack-sans;
+  font-kerning: normal;
+  font-variant-ligatures: normal;
+  font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
+}
+
+code,
+kbd,
+samp,
+pre,
+.monospace {
+  font-family: $font-stack-mono;
+}
+
+// override above font-family if browser supports variable fonts
+// https://caniuse.com/#feat=variable-fonts
+@supports (font-variation-settings: normal) {
+  body {
+    font-family: $font-stack-sans-variable;
+    font-optical-sizing: auto;
+  }
+
+  code,
+  kbd,
+  samp,
+  pre,
+  .monospace {
+    font-family: $font-stack-mono-variable;
+  }
+
+  // Chrome doesn't automatically slant multi-axis Inter var, for some reason.
+  // Adding "slnt" -10 fixes Chrome but then over-italicizes in Firefox. AHHHHHHHHHH.
+  em {
+    font-style: normal !important;
+    font-variation-settings: "ital" 1, "slnt" -10;
+
+    // Roboto Mono doesn't have this problem, but the above fix breaks it, of course.
+    code,
+    kbd,
+    samp,
+    pre,
+    .monospace {
+      font-style: italic !important;
+    }
+  }
+}