frog-website/src/lib/css/typo.scss

78 lines
1.5 KiB
SCSS

@font-face {
font-family: 'Knewave';
font-style: normal;
font-weight: 400;
src: url(/fonts/Knewave-Light.woff) format('woff');
}
@mixin montserrat($style, $weight, $file) {
@font-face {
font-family: 'Montserrat';
font-style: $style;
font-weight: $weight;
src: url(/fonts/#{$file}.woff2) format('woff2');
}
}
@include montserrat(normal, 700, "Montserrat-Bold");
@include montserrat(italic, 700, "Montserrat-BoldItalic");
@include montserrat(normal, 400, "Montserrat-Regular");
@include montserrat(italic, 400, "Montserrat-Italic");
@include montserrat(normal, 300, "Montserrat-Light");
@include montserrat(italic, 300, "Montserrat-LightItalic");
body {
font-family: "Montserrat", sans-serif;
font-size: var(--fz-4);
font-size: var(--fz-4);
color: var(--color-text);
line-height: 1.4;
}
h1 {
margin: 0 0 var(--space-medium) 0;
font-family: 'Knewave';
font-size: var(--fz-1);
font-weight: bold;
text-transform: uppercase;
}
h2 {
margin: 0 0 var(--space-medium) 0;
font-family: 'Knewave';
font-size: var(--fz-2);
font-weight: bold;
text-transform: uppercase;
}
h3 {
margin: 0 0 var(--space-medium) 0;
font-size: var(--fz-3);
font-weight: bold;
}
h4 {
margin: 0 0 var(--space-medium) 0;
font-size: var(--fz-4);
font-weight: bold;
}
p {
margin: 0 0 var(--space-medium) 0;
}
a {
color: var(--color-link);
}
@media ($mobile-breakpoint) {
h1, h2, h3 {
margin: 0 0 var(--space-medium) 0;
}
}