Provide all fonts from modernfontstacks.com

It doesn't add much to the stylesheet size, but adds a lot to the convenience
This commit is contained in:
David Lapshin
2024-05-17 02:42:16 +03:00
parent a108cc7501
commit 26b61baa4f
3 changed files with 22 additions and 7 deletions

View File

@ -150,4 +150,5 @@ primary_color_alpha = "COLOR_CODE"
- [Jakub Steiner](https://jimmac.eu) for the [OS Component Website](https://jimmac.github.io/os-component-website), which served as a starting point and inspiration. - [Jakub Steiner](https://jimmac.eu) for the [OS Component Website](https://jimmac.github.io/os-component-website), which served as a starting point and inspiration.
- [Carl Schwan](https://carlschwan.eu) for the [Mastodon-powered Comments](https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/). - [Carl Schwan](https://carlschwan.eu) for the [Mastodon-powered Comments](https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/).
- [Jonathan Neal](https://jonneal.dev) for the [normalize.css](https://csstools.github.io/normalize.css/). - [Jonathan Neal](https://jonneal.dev) for the [normalize.css](https://csstools.github.io/normalize.css/).
- [Modern Font Stacks](https://modernfontstacks.com) for the system font stack.
- Everyone who supported me and said good stuff <3 - Everyone who supported me and said good stuff <3

View File

@ -31,7 +31,7 @@ body {
min-height: 100vh; min-height: 100vh;
color: var(--fg-color); color: var(--fg-color);
line-height: 1.6; line-height: 1.6;
font-family: var(--font-system); font-family: var(--font-system-ui);
} }
// Style text selection to use primary color // Style text selection to use primary color
@ -75,8 +75,8 @@ h6 {
margin: 3rem 0 1rem; margin: 3rem 0 1rem;
font-weight: lighter; font-weight: lighter;
line-height: normal; line-height: normal;
font-family: var(--font-serif); font-family: var(--font-antique);
letter-spacing: -0.05em; letter-spacing: -0.02em;
} }
h1 { h1 {
@ -173,7 +173,7 @@ aside {
pre, pre,
code, code,
kbd { kbd {
font-family: var(--font-monospace); font-family: var(--font-monospace-code);
} }
code:not(pre code) { code:not(pre code) {

View File

@ -24,9 +24,6 @@
--blur: saturate(180%) blur(10px); --blur: saturate(180%) blur(10px);
--container-width: 720px; --container-width: 720px;
--edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.1); --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.1);
--font-monospace: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
--font-serif: Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif", "Sitka Small", serif;
--font-system: system-ui, sans-serif;
--rounded-corner-small: 8px; --rounded-corner-small: 8px;
--rounded-corner: 12px; --rounded-corner: 12px;
--shadow-raised: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 6px 2px rgba(0, 0, 0, 0.14), 0 4px 12px 4px rgba(0, 0, 0, 0.06); --shadow-raised: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 6px 2px rgba(0, 0, 0, 0.14), 0 4px 12px 4px rgba(0, 0, 0, 0.06);
@ -35,6 +32,23 @@
--transition-longer: 0.4s; --transition-longer: 0.4s;
--transition: 0.2s; --transition: 0.2s;
// FONTS
--font-system-ui: system-ui, sans-serif;
--font-transitional: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
--font-old-style: "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif;
--font-humanist: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
--font-geometric-humanist: Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif;
--font-classical-humanist: Optima, Candara, "Noto Sans", source-sans-pro, sans-serif;
--font-neo-grotesque: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
--font-monospace-slab-serif: "Nimbus Mono PS", "Courier New", monospace;
--font-monospace-code: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
--font-industrial: Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed, sans-serif;
--font-rounded-sans: ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari, "Arial Rounded MT", "Arial Rounded MT Bold", Calibri, source-sans-pro, sans-serif;
--font-slab-serif: Rockwell, "Rockwell Nova", "Roboto Slab", "DejaVu Serif", "Sitka Small", serif;
--font-antique: Superclarendon, "Bookman Old Style", "URW Bookman", "URW Bookman L", "Georgia Pro", Georgia, serif;
--font-didone: Didot, "Bodoni MT", "Noto Serif Display", "URW Palladio L", P052, Sylfaen, serif;
--font-handwritten: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic, casual, cursive;
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
// COLORS // COLORS
--bg-color: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), var(--primary-color); --bg-color: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), var(--primary-color);