From 26b61baa4f77b6bb2d229852f63bd19f4c73e639 Mon Sep 17 00:00:00 2001 From: David Lapshin Date: Fri, 17 May 2024 02:42:16 +0300 Subject: [PATCH] Provide all fonts from modernfontstacks.com It doesn't add much to the stylesheet size, but adds a lot to the convenience --- content/_index.md | 1 + sass/_main.scss | 8 ++++---- sass/_variables.scss | 20 +++++++++++++++++--- 3 files changed, 22 insertions(+), 7 deletions(-) diff --git a/content/_index.md b/content/_index.md index 963cd37..a053d17 100644 --- a/content/_index.md +++ b/content/_index.md @@ -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. - [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/). +- [Modern Font Stacks](https://modernfontstacks.com) for the system font stack. - Everyone who supported me and said good stuff <3 diff --git a/sass/_main.scss b/sass/_main.scss index d1a1cc9..1a01d86 100644 --- a/sass/_main.scss +++ b/sass/_main.scss @@ -31,7 +31,7 @@ body { min-height: 100vh; color: var(--fg-color); line-height: 1.6; - font-family: var(--font-system); + font-family: var(--font-system-ui); } // Style text selection to use primary color @@ -75,8 +75,8 @@ h6 { margin: 3rem 0 1rem; font-weight: lighter; line-height: normal; - font-family: var(--font-serif); - letter-spacing: -0.05em; + font-family: var(--font-antique); + letter-spacing: -0.02em; } h1 { @@ -173,7 +173,7 @@ aside { pre, code, kbd { - font-family: var(--font-monospace); + font-family: var(--font-monospace-code); } code:not(pre code) { diff --git a/sass/_variables.scss b/sass/_variables.scss index 5e1c6f3..775380f 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -24,9 +24,6 @@ --blur: saturate(180%) blur(10px); --container-width: 720px; --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: 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); @@ -35,6 +32,23 @@ --transition-longer: 0.4s; --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) { // COLORS --bg-color: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), var(--primary-color);