cohabit/website
5
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat(ui): 💄 add custom fonts

Browse source
This commit is contained in:
Julien Oculi 2024-02-13 14:48:47 +01:00
parent 315fc1564d
commit ce8752af5f
4 changed files with 38 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/Heros.css
View file

@ -8,7 +8,7 @@
} }
.components__heros__title { .components__heros__title {
font-size: 500%; font-size: 400%;
max-width: 800px; max-width: 800px;
text-wrap: balance; text-wrap: balance;
text-align: center; text-align: center;

11
routes/_app.tsx
View file

@ -28,6 +28,17 @@ export default function App({ Component }: PageProps) {
type='image/x-icon' type='image/x-icon'
/> />
<link rel='stylesheet' href={asset('/main.css')} /> <link rel='stylesheet' href={asset('/main.css')} />
{/* TODO remove google fonts link */}
<link rel='preconnect' href='https://fonts.googleapis.com' />
<link
rel='preconnect'
href='https://fonts.gstatic.com'
crossorigin={''}
/>
<link
href='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'
rel='stylesheet'
/>
</Head> </Head>
<body> <body>
<Header /> <Header />

28
src/stylesheets/base.css
View file

@ -1,9 +1,9 @@
:root { :root {
/* font */ /* font */
--_font-size: var(--font-size-1); --_font-size: var(--font-size-1);
--_font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', --_font-family: 'MuseoModerno', sans-serif;
Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', --_font-family-accent: 'Hepta Slab', serif;
sans-serif; --_font-family-code: 'Fira Code', monospace;
--_font-color: var(--choco-12); --_font-color: var(--choco-12);
/* border */ /* border */
@ -23,6 +23,9 @@
--_background-image: url('assets/css_bg_stardust_alpha_30.png'); --_background-image: url('assets/css_bg_stardust_alpha_30.png');
--_blur: var(--size-3); --_blur: var(--size-3);
--_transition-delay: 0.2s; --_transition-delay: 0.2s;
/* global styles */
scroll-behavior: smooth;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -48,4 +51,23 @@ body {
padding: 0; padding: 0;
background: var(--_background-image) repeat top left / 800px; background: var(--_background-image) repeat top left / 800px;
background-color: var(--_background-color); 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);
} }

1
src/stylesheets/main.css
View file

@ -3,6 +3,7 @@ layer(reset);
@import url('https://unpkg.com/open-props') layer(framework); @import url('https://unpkg.com/open-props') layer(framework);
@import url('https://cdn.jsdelivr.net/npm/remixicon@4.1.0/fonts/remixicon.css') @import url('https://cdn.jsdelivr.net/npm/remixicon@4.1.0/fonts/remixicon.css')
layer(framework); 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('./base.css') layer(base);
@import url('./layout.css') layer(layout); @import url('./layout.css') layer(layout);
@import url('./components.css') layer(components); @import url('./components.css') layer(components);