mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-09-16 16:15:33 -04:00
clean up and add type checks to the modern-normalize.css -> JS translation
This commit is contained in:
@@ -1,90 +1,109 @@
|
||||
// @sindresorhus's modern-normalize.css converted to a JS object, with a bit of cruft removed:
|
||||
// @sindresorhus's modern-normalize.css converted to a JS object, as of this commit:
|
||||
// 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.
|
||||
|
||||
const normalizeCss = {
|
||||
"*, ::before, ::after": {
|
||||
boxSizing: "border-box",
|
||||
/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
|
||||
|
||||
import type * as Stitches from "@stitches/react";
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const normalizeCss: Record<string, Stitches.CSSProperties>[] = [
|
||||
{
|
||||
"*, ::before, ::after": {
|
||||
boxSizing: "border-box",
|
||||
},
|
||||
html: {
|
||||
lineHeight: 1.15,
|
||||
tabSize: 4,
|
||||
// @ts-ignore
|
||||
WebkitTextSizeAdjust: "100%",
|
||||
},
|
||||
body: {
|
||||
margin: 0,
|
||||
// fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
|
||||
},
|
||||
hr: {
|
||||
height: 0,
|
||||
color: "inherit",
|
||||
},
|
||||
"abbr[title]": {
|
||||
textDecoration: "underline dotted",
|
||||
},
|
||||
"b, strong": {
|
||||
fontWeight: "bolder",
|
||||
},
|
||||
"code, kbd, samp, pre": {
|
||||
// fontFamily: "ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace",
|
||||
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,
|
||||
},
|
||||
"button, select": {
|
||||
textTransform: "none",
|
||||
},
|
||||
"button, [type='button'], [type='reset'], [type='submit']": {
|
||||
// @ts-ignore
|
||||
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",
|
||||
},
|
||||
summary: {
|
||||
display: "list-item",
|
||||
},
|
||||
"[type='search']": {
|
||||
outlineOffset: -2,
|
||||
// @ts-ignore
|
||||
WebkitAppearance: "textfield",
|
||||
},
|
||||
"::-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",
|
||||
},
|
||||
},
|
||||
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",
|
||||
},
|
||||
};
|
||||
];
|
||||
|
||||
export default normalizeCss;
|
||||
|
||||
@@ -113,65 +113,65 @@ export const darkTheme = createTheme({
|
||||
},
|
||||
});
|
||||
|
||||
export const globalStyles = globalCss({
|
||||
// https://github.com/sindresorhus/modern-normalize
|
||||
...normalizeCss,
|
||||
|
||||
export const globalStyles = globalCss(
|
||||
// @ts-ignore
|
||||
"@font-face": [...Inter.family, ...RobotoMono.family, ...ComicNeue.family],
|
||||
...normalizeCss,
|
||||
{
|
||||
"@font-face": [...Inter.family, ...RobotoMono.family, ...ComicNeue.family],
|
||||
|
||||
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",
|
||||
backgroundColor: "$backgroundInner",
|
||||
fontFamily: "$sans",
|
||||
|
||||
// light-dark theme switch fading
|
||||
transition: "background 0.25s ease",
|
||||
},
|
||||
|
||||
"code, kbd, samp, pre": {
|
||||
fontFamily: "$monoVar",
|
||||
fontFamily: "$mono",
|
||||
},
|
||||
|
||||
// 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`,
|
||||
// variable font support?
|
||||
// @ts-ignore
|
||||
"@supports (font-variation-settings: normal)": {
|
||||
body: {
|
||||
fontFamily: "$sansVar",
|
||||
fontOpticalSizing: "auto",
|
||||
},
|
||||
|
||||
// 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",
|
||||
"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",
|
||||
// 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 preloadUrls = {
|
||||
|
||||
Reference in New Issue
Block a user