feat: satoshi font, frontend styling

This commit is contained in:
Per Stark
2025-02-06 08:20:36 +01:00
parent 711e54aea1
commit 6dcae4471b
63 changed files with 4251 additions and 239 deletions

View File

@@ -12,7 +12,16 @@
If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@view-transition {
navigation: auto;
}
@layer base {
body {
@apply font-satoshi;
}
*,
::after,
@@ -21,4 +30,125 @@
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
}
/* satoshi.css */
@font-face {
font-family: 'Satoshi';
src: url('fonts/Satoshi-Light.woff2') format('woff2'),
url('fonts/Satoshi-Light.woff') format('woff'),
url('fonts/Satoshi-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Satoshi';
src: url('fonts/Satoshi-LightItalic.woff2') format('woff2'),
url('fonts/Satoshi-LightItalic.woff') format('woff'),
url('fonts/Satoshi-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Satoshi';
src: url('fonts/Satoshi-Regular.woff2') format('woff2'),
url('fonts/Satoshi-Regular.woff') format('woff'),
url('fonts/Satoshi-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Satoshi';
src: url('fonts/Satoshi-Italic.woff2') format('woff2'),
url('fonts/Satoshi-Italic.woff') format('woff'),
url('fonts/Satoshi-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Satoshi';
src: url('fonts/Satoshi-Medium.woff2') format('woff2'),
url('fonts/Satoshi-Medium.woff') format('woff'),
url('fonts/Satoshi-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Satoshi';
src: url('fonts/Satoshi-MediumItalic.woff2') format('woff2'),
url('fonts/Satoshi-MediumItalic.woff') format('woff'),
url('fonts/Satoshi-MediumItalic.ttf') format('truetype');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Satoshi';
src: url('fonts/Satoshi-Bold.woff2') format('woff2'),
url('fonts/Satoshi-Bold.woff') format('woff'),
url('fonts/Satoshi-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Satoshi';
src: url('fonts/Satoshi-BoldItalic.woff2') format('woff2'),
url('fonts/Satoshi-BoldItalic.woff') format('woff'),
url('fonts/Satoshi-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Satoshi';
src: url('fonts/Satoshi-Black.woff2') format('woff2'),
url('fonts/Satoshi-Black.woff') format('woff'),
url('fonts/Satoshi-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Satoshi';
src: url('fonts/Satoshi-BlackItalic.woff2') format('woff2'),
url('fonts/Satoshi-BlackItalic.woff') format('woff'),
url('fonts/Satoshi-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Satoshi';
src: url('fonts/Satoshi-Variable.woff2') format('woff2'),
url('fonts/Satoshi-Variable.woff') format('woff'),
url('fonts/Satoshi-Variable.ttf') format('truetype');
font-weight: 300 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Satoshi';
src: url('fonts/Satoshi-VariableItalic.woff2') format('woff2'),
url('fonts/Satoshi-VariableItalic.woff') format('woff'),
url('fonts/Satoshi-VariableItalic.ttf') format('truetype');
font-weight: 300 900;
font-style: italic;
font-display: swap;
}