website/sass/variables/fonts.scss
2023-11-19 20:44:16 +02:00

75 lines
1.5 KiB
SCSS

//font-family: 'Inter', sans-serif;
//font-family: 'Lato', sans-serif;
@import "../variables/media";
:root {
--main-font: 'Inter', sans-serif;
--sub-fonst: 'Lato', sans-serif;
--h1: 300 48rem/60rem var(--sub-fonst);
--h1-sub: 400 24rem/32rem var(--main-font);
--h3-boold: 700 24rem/32rem var(--main-font);
--h4: 500 18rem/28rem var(--main-font);
--p: 300 18rem/28rem var(--main-font);
--p-md: 400 16rem/28rem var(--main-font);
--p-sm: 500 14rem/28rem var(--main-font);
--p-sub: 300 12rem/28rem var(--main-font);
--nav-link: 500 16rem/28rem var(--main-font);
}
@media (max-width: $media-md) {
:root {
--h1: 300 36rem/normal var(--sub-fonst);
--h1-sub: 400 18rem/32rem var(--main-font);
--p: 300 18rem/28rem var(--main-font);
--p-md: 400 16rem/28rem var(--main-font);
--p-sm: 500 14rem/28rem var(--main-font);
--p-sm-light: 300 14rem/28rem var(--main-font);
--p-sub: 300 12rem/28rem var(--main-font);
--nav-link: 500 13rem/24rem var(--main-font);
}
}
// Title
.h1{
font: var(--h1);
color: var(--common-white);
}
.h1-sub {
font: var(--h1-sub);
color: var(--common-white);
}
.h2{
font: var(--h1);
color: var(--black-white);
}
.h2-sub{
font: var(--h1-sub);
color: var(--black-white);
}
.h3-bold {
font: var( --h3-boold);
color: var(--common-black);
}
.h4 {
font: var(--h4);
}
// Text
.p{
font: var(--p);
}
.p-md {
font: var(--p-md);
}
.p-sm {
font: var(--p-sm);
}
.p-sm-light {
font: var(--p-sm-light);
}
.nav-link{
font: var(--nav-link);
}