From ce8752af5fb30c16c8c849beaf6d21f47e707229 Mon Sep 17 00:00:00 2001 From: Julien Oculi Date: Tue, 13 Feb 2024 14:48:47 +0100 Subject: [PATCH] feat(ui): :lipstick: add custom fonts --- components/Heros.css | 2 +- routes/_app.tsx | 11 +++++++++++ src/stylesheets/base.css | 28 +++++++++++++++++++++++++--- src/stylesheets/main.css | 1 + 4 files changed, 38 insertions(+), 4 deletions(-) diff --git a/components/Heros.css b/components/Heros.css index 1cf8f76..8ff0728 100644 --- a/components/Heros.css +++ b/components/Heros.css @@ -8,7 +8,7 @@ } .components__heros__title { - font-size: 500%; + font-size: 400%; max-width: 800px; text-wrap: balance; text-align: center; diff --git a/routes/_app.tsx b/routes/_app.tsx index d332e75..03b8744 100644 --- a/routes/_app.tsx +++ b/routes/_app.tsx @@ -28,6 +28,17 @@ export default function App({ Component }: PageProps) { type='image/x-icon' /> + {/* TODO remove google fonts link */} + + +
diff --git a/src/stylesheets/base.css b/src/stylesheets/base.css index fba4c56..6cc817d 100644 --- a/src/stylesheets/base.css +++ b/src/stylesheets/base.css @@ -1,9 +1,9 @@ :root { /* font */ --_font-size: var(--font-size-1); - --_font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', - Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', - sans-serif; + --_font-family: 'MuseoModerno', sans-serif; + --_font-family-accent: 'Hepta Slab', serif; + --_font-family-code: 'Fira Code', monospace; --_font-color: var(--choco-12); /* border */ @@ -23,6 +23,9 @@ --_background-image: url('assets/css_bg_stardust_alpha_30.png'); --_blur: var(--size-3); --_transition-delay: 0.2s; + + /* global styles */ + scroll-behavior: smooth; } @media (prefers-color-scheme: dark) { @@ -48,4 +51,23 @@ body { padding: 0; background: var(--_background-image) repeat top left / 800px; background-color: var(--_background-color); + + transition-property: background-color var(--_transition-delay) ease; + transition-duration: var(--_transition-delay); + transition-timing-function: ease; +} + +h1, +h2, +h3, +h4, +h5, +h6, +button { + font-family: var(--_font-family-accent); +} + +pre, +code { + font-family: var(--_font-family-code); } diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css index adf5a8a..321ac94 100644 --- a/src/stylesheets/main.css +++ b/src/stylesheets/main.css @@ -3,6 +3,7 @@ layer(reset); @import url('https://unpkg.com/open-props') layer(framework); @import url('https://cdn.jsdelivr.net/npm/remixicon@4.1.0/fonts/remixicon.css') layer(framework); +/* TODO @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Hepta+Slab:wght@1..900&family=MuseoModerno:ital,wght@0,100..900;1,100..900&display=swap') layer(framework); */ @import url('./base.css') layer(base); @import url('./layout.css') layer(layout); @import url('./components.css') layer(components);