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 {
font-size: 500%;
font-size: 400%;
max-width: 800px;
text-wrap: balance;
text-align: center;

11
routes/_app.tsx
View file

@ -28,6 +28,17 @@ export default function App({ Component }: PageProps) {
type='image/x-icon'
/>
<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>
<body>
<Header />

28
src/stylesheets/base.css
View file

@ -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);
}

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://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);