hugo-theme/assets/sass/typography.scss

54 lines
1.0 KiB
SCSS

// Main Font "Muli"
@import url('https://fonts.googleapis.com/css2?family=Muli:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
// Monospace Font "Source Code Pro"
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
$font-sizes: (
h1: 96px,
h2: 60px,
h3: 48px,
h4: 34px,
h5: 24px,
h6: 20px,
p: 18px,
a: 18px,
span: 18px,
);
$font-weights: (
h1: lighter,
h2: lighter,
h3: normal,
h4: normal,
h5: normal,
h6: 500,
p: normal,
a: normal,
span: normal,
);
@each $tag, $size in $font-sizes {
#{$tag} {
font-family: Muli;
color: $clr-text;
font-size: $size;
margin: $size / 2 auto $size / 3 auto;
}
}
@each $tag, $weight in $font-weights {
#{$tag} {
font-weight: $weight;
}
}
p {
line-height: 1.5;
}
code {
font-family: "Source Code Pro";
font-weight: 400;
}