From 5c1d1dbc589fd367a4ddeee2ffcd61fe83dda341 Mon Sep 17 00:00:00 2001 From: Jake Jarvis Date: Sun, 2 Jan 2022 07:56:45 -0500 Subject: [PATCH] clean up styles --- next.config.js | 3 ++ pages/_app.tsx | 7 ++- styles/_reset.scss | 1 - styles/{_colors.scss => colors.scss} | 0 styles/{_syntax.scss => highlight.scss} | 0 styles/index.scss | 51 ------------------ styles/{_typography.scss => typography.scss} | 54 ++++++++++++++++++-- 7 files changed, 59 insertions(+), 57 deletions(-) delete mode 100644 styles/_reset.scss rename styles/{_colors.scss => colors.scss} (100%) rename styles/{_syntax.scss => highlight.scss} (100%) rename styles/{_typography.scss => typography.scss} (66%) diff --git a/next.config.js b/next.config.js index ec6a7f5a..7188cb17 100644 --- a/next.config.js +++ b/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", diff --git a/pages/_app.tsx b/pages/_app.tsx index 29ea28b8..e773839a 100644 --- a/pages/_app.tsx +++ b/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) { diff --git a/styles/_reset.scss b/styles/_reset.scss deleted file mode 100644 index 8ca4c600..00000000 --- a/styles/_reset.scss +++ /dev/null @@ -1 +0,0 @@ -@import "~modern-normalize/modern-normalize.css"; diff --git a/styles/_colors.scss b/styles/colors.scss similarity index 100% rename from styles/_colors.scss rename to styles/colors.scss diff --git a/styles/_syntax.scss b/styles/highlight.scss similarity index 100% rename from styles/_syntax.scss rename to styles/highlight.scss diff --git a/styles/index.scss b/styles/index.scss index 8c57f78c..30343669 100644 --- a/styles/index.scss +++ b/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 { diff --git a/styles/_typography.scss b/styles/typography.scss similarity index 66% rename from styles/_typography.scss rename to styles/typography.scss index 57e51378..81a2da3d 100644 --- a/styles/_typography.scss +++ b/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; + } + } +}