From 6b3bbcc1a991688976dfe69b3508d6399e821f42 Mon Sep 17 00:00:00 2001
From: Kevin MacMartin <prurigro@gmail.com>
Date: Fri, 3 May 2019 00:32:48 -0400
Subject: [PATCH] Use rem and a base size for fonts so we can globally change
 them if necessary

---
 resources/assets/sass/_var.scss                        | 1 +
 resources/assets/sass/app.scss                         | 6 +++++-
 resources/assets/sass/functions/_px2rem.scss           | 3 +++
 resources/assets/sass/functions/_strip-unit.scss       | 3 +++
 resources/assets/sass/pages/_blog.scss                 | 2 +-
 resources/assets/sass/pages/_contact.scss              | 4 ++--
 resources/assets/sass/pages/_error.scss                | 6 +++---
 resources/assets/sass/sections/_nav.scss               | 2 +-
 resources/assets/sass/sections/_subscription-form.scss | 2 +-
 9 files changed, 20 insertions(+), 9 deletions(-)
 create mode 100644 resources/assets/sass/functions/_px2rem.scss
 create mode 100644 resources/assets/sass/functions/_strip-unit.scss

diff --git a/resources/assets/sass/_var.scss b/resources/assets/sass/_var.scss
index 2dd51fa..72c9656 100644
--- a/resources/assets/sass/_var.scss
+++ b/resources/assets/sass/_var.scss
@@ -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;
diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
index b9eb653..96cd90c 100644
--- a/resources/assets/sass/app.scss
+++ b/resources/assets/sass/app.scss
@@ -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;
 }
 
diff --git a/resources/assets/sass/functions/_px2rem.scss b/resources/assets/sass/functions/_px2rem.scss
new file mode 100644
index 0000000..4b6c032
--- /dev/null
+++ b/resources/assets/sass/functions/_px2rem.scss
@@ -0,0 +1,3 @@
+@function px2rem($size) {
+    @return ((strip-unit($size) / strip-unit($base-font-size)) * 1rem);
+}
diff --git a/resources/assets/sass/functions/_strip-unit.scss b/resources/assets/sass/functions/_strip-unit.scss
new file mode 100644
index 0000000..4a3c40e
--- /dev/null
+++ b/resources/assets/sass/functions/_strip-unit.scss
@@ -0,0 +1,3 @@
+@function strip-unit($value) {
+    @return ($value / ($value * 0 + 1));
+}
diff --git a/resources/assets/sass/pages/_blog.scss b/resources/assets/sass/pages/_blog.scss
index dc17536..ab7169c 100644
--- a/resources/assets/sass/pages/_blog.scss
+++ b/resources/assets/sass/pages/_blog.scss
@@ -52,7 +52,7 @@
             &-title {
                 @include font-sans-semibold;
                 margin-bottom: $grid-gutter-width;
-                font-size: 25px;
+                font-size: px2rem(25px);
                 text-transform: uppercase;
             }
 
diff --git a/resources/assets/sass/pages/_contact.scss b/resources/assets/sass/pages/_contact.scss
index 4e04bfa..81b7af8 100644
--- a/resources/assets/sass/pages/_contact.scss
+++ b/resources/assets/sass/pages/_contact.scss
@@ -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;
diff --git a/resources/assets/sass/pages/_error.scss b/resources/assets/sass/pages/_error.scss
index c9cf0f6..d981622 100644
--- a/resources/assets/sass/pages/_error.scss
+++ b/resources/assets/sass/pages/_error.scss
@@ -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);
         }
     }
 }
diff --git a/resources/assets/sass/sections/_nav.scss b/resources/assets/sass/sections/_nav.scss
index ba72fec..5d1d172 100644
--- a/resources/assets/sass/sections/_nav.scss
+++ b/resources/assets/sass/sections/_nav.scss
@@ -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) {
diff --git a/resources/assets/sass/sections/_subscription-form.scss b/resources/assets/sass/sections/_subscription-form.scss
index a7ed5ff..15b57ad 100644
--- a/resources/assets/sass/sections/_subscription-form.scss
+++ b/resources/assets/sass/sections/_subscription-form.scss
@@ -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;