mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-26 22:48:29 -04:00
Jake Jarvis
58c82a1715
- inject theme toggle placeholder instead of loading dynamically - explicitly set sticky header height - set `font-display: fallback`
54 lines
1.4 KiB
CSS
54 lines
1.4 KiB
CSS
body {
|
|
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
font-kerning: normal;
|
|
font-variant-ligatures: normal;
|
|
font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
|
|
}
|
|
|
|
code,
|
|
kbd,
|
|
samp,
|
|
pre,
|
|
.monospace {
|
|
font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
|
}
|
|
|
|
/*
|
|
* override above font-family if browser supports variable fonts:
|
|
* https://caniuse.com/#feat=variable-fonts
|
|
*/
|
|
@supports (font-variation-settings: normal) {
|
|
body {
|
|
font-family: InterVariable, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
|
|
sans-serif;
|
|
font-optical-sizing: auto;
|
|
}
|
|
|
|
code,
|
|
kbd,
|
|
samp,
|
|
pre,
|
|
.monospace {
|
|
font-family: "Roboto MonoVariable", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier,
|
|
monospace;
|
|
}
|
|
|
|
/*
|
|
* 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. */
|
|
em code,
|
|
em kbd,
|
|
em samp,
|
|
em pre,
|
|
em .monospace {
|
|
font-style: italic !important;
|
|
}
|
|
}
|