Use rem and a base size for fonts so we can globally change them if necessary

This commit is contained in:
Kevin MacMartin 2019-05-03 00:32:48 -04:00
parent b19db9b709
commit 6b3bbcc1a9
9 changed files with 20 additions and 9 deletions

View file

@ -31,6 +31,7 @@ $c-error: #fa2036; // error
$nav-link-count: 3;
// Sizes
$base-font-size: 16px;
$nav-height-desktop: 60px;
$nav-height-mobile: 50px;
$nav-link-height-mobile: 50px;

View file

@ -5,8 +5,11 @@
// Libraries
@import "bootstrap/scss/bootstrap.scss";
// Supplementary
// Functionality
@import "functions/**/*.scss";
@import "mixins/**/*.scss";
// Supplementary
@import "classes/**/*.scss";
@import "partials/**/*.scss";
@import "sections/**/*.scss";
@ -40,6 +43,7 @@ body {
@include font-sans;
width: 100%;
color: $c-text;
font-size: $base-font-size;
-webkit-overflow-scrolling: touch;
}

View file

@ -0,0 +1,3 @@
@function px2rem($size) {
@return ((strip-unit($size) / strip-unit($base-font-size)) * 1rem);
}

View file

@ -0,0 +1,3 @@
@function strip-unit($value) {
@return ($value / ($value * 0 + 1));
}

View file

@ -52,7 +52,7 @@
&-title {
@include font-sans-semibold;
margin-bottom: $grid-gutter-width;
font-size: 25px;
font-size: px2rem(25px);
text-transform: uppercase;
}

View file

@ -9,7 +9,7 @@
padding: 5px 10px;
border: 2px solid fade-out($c-base, 0.75);
background-color: rgba(255, 255, 255, 0.8);
font-size: 14px;
font-size: px2rem(14px);
transition: border $trans-speed;
&:focus {
@ -48,7 +48,7 @@
padding: 5px 10px;
background-color: lighten($c-error, 15%);
color: $c-text-light;
font-size: 14px;
font-size: px2rem(14px);
text-align: center;
opacity: 0;
transition: opacity $trans-speed;

View file

@ -7,16 +7,16 @@
h1 {
@include font-sans-bold;
width: 100%;
font-size: 22px;
font-size: px2rem(22px);
text-align: center;
text-transform: uppercase;
@include media-breakpoint-up(sm) {
font-size: 32px;
font-size: px2rem(32px);
}
@include media-breakpoint-up(lg) {
font-size: 48px;
font-size: px2rem(48px);
}
}
}

View file

@ -120,7 +120,7 @@
position: relative;
display: inline-block;
color: $c-text-light;
font-size: 14px;
font-size: px2rem(14px);
text-transform: uppercase;
@media (max-width: $nav-mobile-max) {

View file

@ -10,7 +10,7 @@
width: calc(100% - 10px);
padding: 3px;
border: 2px solid fade-out($c-base, 0.75);
font-size: 14px;
font-size: px2rem(14px);
text-align: center;
transition: border-color $trans-speed;