add font mixins

This commit is contained in:
Ray Elliott 2020-05-08 10:09:13 +00:00
parent 028fb126ce
commit 68d5abe11c
1 changed files with 40 additions and 25 deletions

View File

@ -1,8 +1,18 @@
@mixin font-1($weight) { @mixin font-1($weight) {
// see functions.php->google_fonts() // see functions.php->google_fonts()
// and functions.php->_s_scripts() // and functions.php->_s_scripts()
font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", font-family:
Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; Montserrat,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
"Helvetica Neue",
sans-serif;
@if $weight == regular { @if $weight == regular {
font-weight: 400; font-weight: 400;
} @else if $weight == bold { } @else if $weight == bold {
@ -10,29 +20,33 @@
} @else if $weight == extra-bold { } @else if $weight == extra-bold {
font-weight: 700; font-weight: 700;
} @else { } @else {
@error "font-weight #{$weight} not in valid font-weights for font-1: 'Montserrat'."; @error "font-weight #{$weight} not in valid font-weights for font-1: 'Montserrat'.";
} }
} }
@mixin font-body($weight: regular) { @mixin font-body($weight: regular) {
@include font-1($weight); @include font-1($weight);
} }
@mixin font-title($weight: regular) { @mixin font-title($weight: regular) {
@include font-1($weight); @include font-1($weight);
} }
@mixin font-link($weight: regular) { @mixin font-link($weight: regular) {
@include font-1($weight); @include font-1($weight);
} }
@mixin font-code($weight: regular) { @mixin font-code($weight: regular) {
font-family: $font-code; font-family: $font__code;
font-weight: $weight; font-weight: $weight;
} }
@mixin font-pre($weight: regular) { @mixin font-pre($weight: regular) {
font-family: $font-pre; font-family: $font__pre;
font-weight: $weight; font-weight: $weight;
} }
@ -45,6 +59,7 @@
// Column width with margin // Column width with margin
@mixin column-width($numberColumns: 3) { @mixin column-width($numberColumns: 3) {
width: map-get($columns, $numberColumns) - width:
map-get($columns, $numberColumns) -
(($columns__margin * ($numberColumns - 1)) / $numberColumns); (($columns__margin * ($numberColumns - 1)) / $numberColumns);
} }