mirror of
https://github.com/LukeHagar/unicorn-utterances.git
synced 2025-12-06 04:21:55 +00:00
d701825d0b
# Conflicts: # astro.config.ts # package-lock.json # package.json # src/types/plausible.d.ts # src/utils/debounce.ts
153 lines
3.3 KiB
SCSS
153 lines
3.3 KiB
SCSS
@import "src/tokens/index";
|
|
|
|
@font-face {
|
|
font-family: "Figtree";
|
|
src: url("/fonts/Figtree/Figtree-VariableFont_wght.ttf")
|
|
format("truetype-variations");
|
|
font-weight: 1 999;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Figtree";
|
|
font-style: italic;
|
|
src: url("/fonts/Figtree/Figtree-Italic-VariableFont_wght.ttf")
|
|
format("truetype-variations");
|
|
font-weight: 1 999;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Roboto Mono";
|
|
src: url("/fonts/Roboto_Mono/RobotoMono-VariableFont_wght.ttf")
|
|
format("truetype-variations");
|
|
font-weight: 1 999;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Roboto Mono";
|
|
font-style: italic;
|
|
src: url("/fonts/Roboto_Mono/RobotoMono-Italic-VariableFont_wght.ttf")
|
|
format("truetype-variations");
|
|
font-weight: 1 999;
|
|
}
|
|
|
|
// Fallback fonts for minimal CLS
|
|
// see: https://simonhearne.com/2021/layout-shifts-webfonts/#reduce-layout-shift-with-f-mods
|
|
|
|
// TODO: Add back fallback font for Figtree
|
|
|
|
:root {
|
|
font-family: var(--uu-font-family);
|
|
}
|
|
|
|
h1,
|
|
.text-style-headline-1 {
|
|
font-family: var(--uu-font-family);
|
|
font-size: var(--h1_font-size);
|
|
font-weight: var(--weight_black);
|
|
line-height: var(--h1_line-height);
|
|
}
|
|
|
|
h2,
|
|
.text-style-headline-2 {
|
|
font-family: var(--uu-font-family);
|
|
font-size: var(--h2_font-size);
|
|
font-weight: var(--weight_extrabold);
|
|
line-height: var(--h2_line-height);
|
|
}
|
|
|
|
h3,
|
|
.text-style-headline-3 {
|
|
font-family: var(--uu-font-family);
|
|
font-size: var(--h3_font-size);
|
|
font-weight: var(--weight_bold);
|
|
line-height: var(--h3_line-height);
|
|
}
|
|
|
|
h4,
|
|
.text-style-headline-4 {
|
|
font-family: var(--uu-font-family);
|
|
font-size: var(--h4_font-size);
|
|
font-weight: var(--weight_bold);
|
|
line-height: var(--h4_line-height);
|
|
}
|
|
|
|
h5,
|
|
.text-style-headline-5 {
|
|
font-family: var(--uu-font-family);
|
|
font-size: var(--h5_font-size);
|
|
font-weight: var(--weight_bold);
|
|
line-height: var(--h5_line-height);
|
|
}
|
|
|
|
h6,
|
|
.text-style-headline-6 {
|
|
font-family: var(--uu-font-family);
|
|
font-size: var(--h6_font-size);
|
|
font-weight: var(--weight_bold);
|
|
line-height: var(--h6_line-height);
|
|
}
|
|
|
|
p,
|
|
.text-style-body-large {
|
|
font-family: var(--uu-font-family);
|
|
font-size: var(--p_large_font-size);
|
|
font-weight: var(--weight_regular);
|
|
line-height: var(--p_large_line-height);
|
|
margin: 0;
|
|
}
|
|
|
|
.text-style-body-large-bold {
|
|
@extend .text-style-body-large;
|
|
font-weight: var(--weight_semibold);
|
|
}
|
|
|
|
.text-style-body-medium {
|
|
font-family: var(--uu-font-family);
|
|
font-size: var(--p_medium_font-size);
|
|
font-weight: var(--weight_regular);
|
|
line-height: var(--p_medium_line-height);
|
|
margin: 0;
|
|
}
|
|
|
|
.text-style-body-medium-bold {
|
|
@extend .text-style-body-medium;
|
|
font-weight: var(--weight_semibold);
|
|
}
|
|
|
|
.text-style-body-small {
|
|
font-family: var(--uu-font-family);
|
|
font-size: var(--p_small_font-size);
|
|
font-weight: var(--weight_regular);
|
|
line-height: var(--p_small_line-height);
|
|
margin: 0;
|
|
}
|
|
|
|
.text-style-body-small-bold {
|
|
@extend .text-style-body-small;
|
|
font-weight: var(--weight_semibold);
|
|
}
|
|
|
|
.text-style-button-large {
|
|
font-family: var(--uu-font-family);
|
|
font-size: var(--button_large_font-size);
|
|
font-weight: var(--weight_semibold);
|
|
line-height: var(--button_large_line-height);
|
|
margin: 0;
|
|
}
|
|
|
|
button,
|
|
.text-style-button-regular {
|
|
font-family: var(--uu-font-family);
|
|
font-size: var(--button_regular_font-size);
|
|
font-weight: var(--weight_semibold);
|
|
line-height: var(--button_regular_line-height);
|
|
margin: 0;
|
|
}
|
|
|
|
pre,
|
|
code,
|
|
.text-style-code {
|
|
@extend .text-style-body-large;
|
|
font-family: var(--uu-font-family-code);
|
|
}
|