mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-09-16 16:15:33 -04:00
CSS modules ➡️ Stitches 🧵 (#799)
This commit is contained in:
GitHub
24
lib/styles/fonts/comic-neue.ts
Normal file
24
lib/styles/fonts/comic-neue.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
// @ts-nocheck
|
||||
|
||||
// Legacy
|
||||
import comicNeueLatin400NormalWoff from "@fontsource/comic-neue/files/comic-neue-latin-400-normal.woff";
|
||||
import comicNeueLatin400NormalWoff2 from "@fontsource/comic-neue/files/comic-neue-latin-400-normal.woff2";
|
||||
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 = [
|
||||
{
|
||||
fontFamily: "Comic Neue",
|
||||
fontStyle: "normal",
|
||||
fontDisplay: "swap",
|
||||
fontWeight: 400,
|
||||
src: `url(${comicNeueLatin400NormalWoff2}) format("woff2"), url(${comicNeueLatin400NormalWoff}) format("woff")`,
|
||||
},
|
||||
{
|
||||
fontFamily: "Comic Neue",
|
||||
fontStyle: "normal",
|
||||
fontDisplay: "swap",
|
||||
fontWeight: 700,
|
||||
src: `url(${comicNeueLatin700NormalWoff2}) format("woff2"), url(${comicNeueLatin700NormalWoff}) format("woff")`,
|
||||
},
|
||||
];
|
||||
57
lib/styles/fonts/inter.ts
Normal file
57
lib/styles/fonts/inter.ts
Normal file
@@ -0,0 +1,57 @@
|
||||
// @ts-nocheck
|
||||
|
||||
// Legacy
|
||||
import interLatin400NormalWoff from "@fontsource/inter/files/inter-latin-400-normal.woff";
|
||||
import interLatin400NormalWoff2 from "@fontsource/inter/files/inter-latin-400-normal.woff2";
|
||||
import interLatin500NormalWoff from "@fontsource/inter/files/inter-latin-500-normal.woff";
|
||||
import interLatin500NormalWoff2 from "@fontsource/inter/files/inter-latin-500-normal.woff2";
|
||||
import interLatin700NormalWoff from "@fontsource/inter/files/inter-latin-700-normal.woff";
|
||||
import interLatin700NormalWoff2 from "@fontsource/inter/files/inter-latin-700-normal.woff2";
|
||||
|
||||
// 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
|
||||
export { interLatinVarFullNormalWoff2 as preloadUrl };
|
||||
|
||||
export const 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",
|
||||
},
|
||||
];
|
||||
76
lib/styles/fonts/roboto-mono.ts
Normal file
76
lib/styles/fonts/roboto-mono.ts
Normal file
@@ -0,0 +1,76 @@
|
||||
// @ts-nocheck
|
||||
|
||||
// Legacy
|
||||
import robotoMonoLatin400NormalWoff from "@fontsource/roboto-mono/files/roboto-mono-latin-400-normal.woff";
|
||||
import robotoMonoLatin400NormalWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-400-normal.woff2";
|
||||
import robotoMonoLatin500NormalWoff from "@fontsource/roboto-mono/files/roboto-mono-latin-500-normal.woff";
|
||||
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";
|
||||
|
||||
// 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
|
||||
export { robotoMonoLatinVarWghtOnlyNormalWoff2 as preloadUrl };
|
||||
|
||||
export const 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",
|
||||
},
|
||||
];
|
||||
11
lib/styles/helpers/hex-to-rgba.ts
Normal file
11
lib/styles/helpers/hex-to-rgba.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
// hex -> rgba, pulled from https://github.com/sindresorhus/hex-rgb/blob/main/index.js#L29
|
||||
const hex2rgba = (hex: string, alpha: number) => {
|
||||
const number = Number.parseInt(hex.replace(/^#/, ""), 16);
|
||||
const red = number >> 16;
|
||||
const green = (number >> 8) & 255;
|
||||
const blue = number & 255;
|
||||
|
||||
return `rgba(${red},${green},${blue},${alpha})`;
|
||||
};
|
||||
|
||||
export default hex2rgba;
|
||||
87
lib/styles/helpers/normalize.ts
Normal file
87
lib/styles/helpers/normalize.ts
Normal file
@@ -0,0 +1,87 @@
|
||||
// @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
|
||||
|
||||
export const normalizeCss = {
|
||||
"*, ::before, ::after": {
|
||||
boxSizing: "border-box",
|
||||
},
|
||||
html: {
|
||||
lineHeight: 1.15,
|
||||
tabSize: 4,
|
||||
WebkitTextSizeAdjust: "100%",
|
||||
},
|
||||
hr: {
|
||||
height: 0,
|
||||
color: "inherit",
|
||||
},
|
||||
"abbr[title]": {
|
||||
textDecoration: "underline dotted",
|
||||
},
|
||||
"b, strong": {
|
||||
fontWeight: "bolder",
|
||||
},
|
||||
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,
|
||||
},
|
||||
"button, select": {
|
||||
textTransform: "none",
|
||||
},
|
||||
"button, [type='button'], [type='reset'], [type='submit']": {
|
||||
WebkitAppearance: "button",
|
||||
},
|
||||
"::-moz-focus-inner": {
|
||||
borderStyle: "none",
|
||||
padding: 0,
|
||||
},
|
||||
":-moz-focusring": {
|
||||
outline: "1px dotted ButtonText",
|
||||
},
|
||||
":-moz-ui-invalid": {
|
||||
boxShadow: "none",
|
||||
},
|
||||
legend: {
|
||||
padding: 0,
|
||||
},
|
||||
progress: {
|
||||
verticalAlign: "baseline",
|
||||
},
|
||||
"::-webkit-inner-spin-button, ::-webkit-outer-spin-button": {
|
||||
height: "auto",
|
||||
},
|
||||
"[type='search']": {
|
||||
WebkitAppearance: "textfield",
|
||||
outlineOffset: "-2px",
|
||||
},
|
||||
"::-webkit-search-decoration": {
|
||||
WebkitAppearance: "none",
|
||||
},
|
||||
"::-webkit-file-upload-button": {
|
||||
WebkitAppearance: "button",
|
||||
font: "inherit",
|
||||
},
|
||||
summary: {
|
||||
display: "list-item",
|
||||
},
|
||||
};
|
||||
184
lib/styles/stitches.config.ts
Normal file
184
lib/styles/stitches.config.ts
Normal file
@@ -0,0 +1,184 @@
|
||||
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";
|
||||
|
||||
// web fonts
|
||||
import { Inter, preloadUrl as interPreloadUrl } from "./fonts/inter";
|
||||
import { RobotoMono, preloadUrl as robotoMonoPreloadUrl } from "./fonts/roboto-mono";
|
||||
import { ComicNeue } from "./fonts/comic-neue";
|
||||
|
||||
export const { styled, css, getCssText, globalCss, keyframes, theme, createTheme } = createStitches({
|
||||
theme: {
|
||||
fonts: {
|
||||
sans: `Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`,
|
||||
sansVar: `"Inter var", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`,
|
||||
mono: `"Roboto Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier`,
|
||||
monoVar: `"Roboto Mono var", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier`,
|
||||
},
|
||||
|
||||
colors: {
|
||||
backgroundInner: "#ffffff",
|
||||
backgroundOuter: "#fcfcfc",
|
||||
backgroundHeader: "rgba(252, 252, 252, 0.7)",
|
||||
text: "#202020",
|
||||
mediumDark: "#515151",
|
||||
medium: "#5e5e5e",
|
||||
mediumLight: "#757575",
|
||||
light: "#d2d2d2",
|
||||
kindaLight: "#e3e3e3",
|
||||
superLight: "#f4f4f4",
|
||||
superDuperLight: "#fbfbfb",
|
||||
link: "#0e6dc2",
|
||||
linkUnderline: "rgba(14, 109, 194, 0.4)",
|
||||
success: "#44a248",
|
||||
error: "#ff1b1b",
|
||||
warning: "#f78200",
|
||||
|
||||
// Syntax Highlighting (light) - modified from Monokai Light: https://github.com/mlgill/pygments-style-monokailight
|
||||
codeText: "#313131",
|
||||
codeBackground: "#fdfdfd",
|
||||
codeComment: "#656e77",
|
||||
codeKeyword: "#029cb9",
|
||||
codeAttribute: "#70a800",
|
||||
codeNamespace: "#f92672",
|
||||
codeLiteral: "#ae81ff",
|
||||
codePunctuation: "#111111",
|
||||
codeVariable: "#d88200",
|
||||
codeAddition: "#44a248",
|
||||
codeDeletion: "#ff1b1b",
|
||||
},
|
||||
|
||||
borderWidths: {
|
||||
underline: "calc(0.1em + 0.05rem)",
|
||||
},
|
||||
|
||||
radii: {
|
||||
rounded: "0.65em",
|
||||
},
|
||||
},
|
||||
|
||||
media: {
|
||||
mobile: "(max-width: 768px)",
|
||||
superNarrow: "(max-width: 380px)",
|
||||
},
|
||||
|
||||
utils: {
|
||||
backgroundGradientHack: ({ color = "$linkUnderline" }) => {
|
||||
// allow both pre-set rgba stitches variables and hex values
|
||||
const rgba = color.startsWith("#") ? hex2rgba(color, 0.4) : color;
|
||||
|
||||
return {
|
||||
backgroundImage: `linear-gradient(${rgba}, ${rgba})`,
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
themeMap: {
|
||||
...defaultThemeMap,
|
||||
backgroundSize: "borderWidths",
|
||||
},
|
||||
});
|
||||
|
||||
export const darkTheme = createTheme({
|
||||
colors: {
|
||||
backgroundInner: "#1e1e1e",
|
||||
backgroundOuter: "#252525",
|
||||
backgroundHeader: "rgba(37, 37, 37, 0.85)",
|
||||
text: "#f1f1f1",
|
||||
mediumDark: "#d7d7d7",
|
||||
medium: "#b1b1b1",
|
||||
mediumLight: "#959595",
|
||||
light: "#646464",
|
||||
kindaLight: "#535353",
|
||||
superLight: "#272727",
|
||||
superDuperLight: "#1f1f1f",
|
||||
link: "#88c7ff",
|
||||
linkUnderline: "rgba(136, 199, 255, 0.4)",
|
||||
success: "#78df55",
|
||||
error: "#ff5151",
|
||||
warning: "#f2b702",
|
||||
|
||||
// Syntax Highlighting (dark) - modified from Dracula: https://github.com/dracula/pygments
|
||||
codeText: "#e4e4e4",
|
||||
codeBackground: "#212121",
|
||||
codeComment: "#929292",
|
||||
codeKeyword: "#3b9dd2",
|
||||
codeAttribute: "#78df55",
|
||||
codeNamespace: "#f95757",
|
||||
codeLiteral: "#d588fb",
|
||||
codePunctuation: "#cccccc",
|
||||
codeVariable: "#fd992a",
|
||||
codeAddition: "#78df55",
|
||||
codeDeletion: "#ff5151",
|
||||
},
|
||||
});
|
||||
|
||||
export const globalStyles = globalCss({
|
||||
// https://github.com/sindresorhus/modern-normalize
|
||||
...normalizeCss,
|
||||
|
||||
// @ts-ignore
|
||||
"@font-face": [...Inter, ...RobotoMono, ...ComicNeue],
|
||||
|
||||
body: {
|
||||
margin: 0,
|
||||
backgroundColor: "$backgroundInner",
|
||||
fontFamily: "$sans",
|
||||
|
||||
// light-dark theme switch fading
|
||||
transition: "background 0.25s ease",
|
||||
},
|
||||
|
||||
"code, kbd, samp, pre": {
|
||||
fontFamily: "$mono",
|
||||
},
|
||||
|
||||
// variable font support
|
||||
"@supports (font-variation-settings: normal)": {
|
||||
body: {
|
||||
fontFamily: "$sansVar",
|
||||
fontOpticalSizing: "auto",
|
||||
},
|
||||
|
||||
"code, kbd, samp, pre": {
|
||||
fontFamily: "$monoVar",
|
||||
},
|
||||
|
||||
// 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: {
|
||||
fontStyle: "normal",
|
||||
fontVariationSettings: `"ital" 1, "slnt" -10`,
|
||||
|
||||
// Roboto Mono doesn't have this problem, but the above fix breaks it, of course.
|
||||
"& code, & kbd, & samp, & pre": {
|
||||
fontStyle: "italic !important",
|
||||
fontVariationSettings: "initial !important",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// reduced motion preference:
|
||||
// https://web.dev/prefers-reduced-motion/#(bonus)-forcing-reduced-motion-on-all-websites
|
||||
"@media (prefers-reduced-motion: reduce)": {
|
||||
"*, ::before, ::after": {
|
||||
animationDelay: "-1ms !important",
|
||||
animationDuration: "1ms !important",
|
||||
animationIterationCount: "1 !important",
|
||||
backgroundAttachment: "initial !important",
|
||||
scrollBehavior: "auto !important",
|
||||
transitionDuration: "0s !important",
|
||||
transitionDelay: "0s !important",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// re-export hashed URLs of the most important variable fonts so we can preload them in ../../pages/_document.tsx
|
||||
export const preloads = {
|
||||
fonts: {
|
||||
InterVar: interPreloadUrl,
|
||||
RobotoMonoVar: robotoMonoPreloadUrl,
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user