diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/css/_fonts.scss | 10 | ||||
| -rw-r--r-- | assets/css/_root.scss | 6 | ||||
| -rw-r--r-- | assets/css/_utilities.scss | 3 | ||||
| -rw-r--r-- | assets/css/base.scss | 10 | ||||
| -rw-r--r-- | assets/css/partials/_article.scss | 2 | ||||
| -rw-r--r-- | assets/css/partials/_header.scss | 10 |
6 files changed, 28 insertions, 13 deletions
diff --git a/assets/css/_fonts.scss b/assets/css/_fonts.scss new file mode 100644 index 0000000..4740a20 --- /dev/null +++ b/assets/css/_fonts.scss @@ -0,0 +1,10 @@ +@font-face { + font-family: 'Sen Variable'; + font-style: normal; + font-display: swap; + font-weight: 400 800; + src: url("/fonts/Sen.woff2") format("woff2-variations"); +} + +$mainFontStack: 'Sen Variable', 'Arial', system-ui, sans-serif; +$monoFontStack: 'Fira Code', 'Consolas', monospace;
\ No newline at end of file diff --git a/assets/css/_root.scss b/assets/css/_root.scss index 568691e..e04a427 100644 --- a/assets/css/_root.scss +++ b/assets/css/_root.scss @@ -1,12 +1,8 @@ :root { - --font-heading: "Roboto Slab", "Segoe UI"; - --font-body: Arial, Helvetica, sans-serif; - --font-mono: "Fira Code", "Consolas" , monospace; - font-size: 16px; font-weight: 400; line-height: 1.65; - font-family: var(--font-body); + font-family: $mainFontStack; --body-background: #efefef; --body-color: #212121; diff --git a/assets/css/_utilities.scss b/assets/css/_utilities.scss new file mode 100644 index 0000000..554572c --- /dev/null +++ b/assets/css/_utilities.scss @@ -0,0 +1,3 @@ +%tracking-tight { + letter-spacing: -0.05em; +}
\ No newline at end of file diff --git a/assets/css/base.scss b/assets/css/base.scss index 083a667..e68958b 100644 --- a/assets/css/base.scss +++ b/assets/css/base.scss @@ -1,3 +1,5 @@ +@import "_fonts"; +@import "_utilities"; @import "_root"; @import "markup/_index"; @import "partials/_index"; @@ -19,10 +21,14 @@ body { background-color: var(--body-background); color: var(--body-color); + + background-image: radial-gradient(circle at 1px 1px, #A9A9A988 1px, transparent 0); + background-size: 15px 15px; } h1, h2, h3, h4, h5, h6 { - font-family: var(--font-heading); + font-family: $mainFontStack; + @extend %tracking-tight; line-height: 1.25; margin-top: 0; margin-bottom: 0.6em; @@ -42,5 +48,5 @@ a { } li > time { - font-family: var(--font-mono); + font-family: $monoFontStack; }
\ No newline at end of file diff --git a/assets/css/partials/_article.scss b/assets/css/partials/_article.scss index 22c27ce..c615d65 100644 --- a/assets/css/partials/_article.scss +++ b/assets/css/partials/_article.scss @@ -28,7 +28,7 @@ main { >p>code { word-break: break-word; - font-family: var(--font-mono); + font-family: $monoFontStack; color: var(--accent-1); background-color: #f6f6f6; diff --git a/assets/css/partials/_header.scss b/assets/css/partials/_header.scss index 00d211a..75bc14c 100644 --- a/assets/css/partials/_header.scss +++ b/assets/css/partials/_header.scss @@ -9,10 +9,6 @@ header { gap: 0.5rem 0; padding: 1rem 1rem; - margin: 0.75rem; - margin-bottom: 1rem; - - border-radius: $floatingRadius; position: relative; overflow: hidden; @@ -47,7 +43,7 @@ header { line-height: 1; a { - font-family: var(--font-heading); + font-family: $mainFontStack; color: var(--header-color); text-decoration: none; } @@ -64,6 +60,10 @@ header { transition: max-height 0.2s linear; max-height: 100vh; + + a { + @extend %tracking-tight; + } } #nav-socials { |