add base typography mixins

This commit is contained in:
Ray Elliott 2020-05-20 18:13:45 +01:00
parent 2f13a24fb6
commit 6b6049beb4
4 changed files with 30 additions and 0 deletions

View File

@ -11,6 +11,7 @@
<meta name="description" content="THE DESCRIPTION IS THIS!">
<meta name="author" content="I AM THE AUTHOR!">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>

View File

@ -40,6 +40,7 @@
body {
font-size: 100%;
@include font-body;
color: $color-body;
background-color: $background-color;
}

27
src/scss/_typography.scss Normal file
View File

@ -0,0 +1,27 @@
@mixin font-1($weight) {
font-family: "Montserrat", sans-serif;
@if $weight == regular {
font-weight: 400;
} @else if $weight == medium {
font-weight: 500;
} @else if $weight == semi-bold {
font-weight: 600;
} @else if $weight == bold {
font-weight: 700;
} @else {
@error "font-weight #{$weight} not in valid font-weights for font-1: 'Montserrat'.";
}
}
@mixin font-body($weight: regular) {
@include font-1($weight);
}
@mixin font-title($weight: medium) {
@include font-1($weight);
}
@mixin font-link($weight: medium) {
@include font-1($weight);
}

View File

@ -1,4 +1,5 @@
@import "variables";
@import "node_modules/modern-css-reset/src/reset";
@import "typography";
@import "base";
@import "layout";