Apply rem-calc function to appropriate pixel units

Author: kylegordy

assets/_sass/base/_helpers.scss

@@ -54,7 +54,7 @@
 .logo {
     vertical-align: middle;
     width: 100%;
-    max-width: 130px;
+    max-width: rem-calc(130px);
 }
 
 // Dark version of logo

assets/_sass/base/_layout.scss

@@ -3,9 +3,9 @@
 ////////////////////
 
 // Container padding
-$cp-sm: 15px;
+$cp-sm: rem-calc(15px);
 $cp-md: 5%;
-$cp-lg: 75px;
+$cp-lg: rem-calc(75px);
 
 // Max site width
 $max-width: 1440px;

assets/_sass/component/_hamburger-button.scss

@@ -2,8 +2,8 @@
 // Variables
 ////////////////////
 
-$width: 20px;
-$height: 2px;
+$width: rem-calc(20px);
+$height: rem-calc(2px);
 
 ////////////////////
 // Hamburger Button
@@ -21,7 +21,7 @@ $height: 2px;
     position: absolute;
     display: block;
     right: 0;
-    width: $width - 3px;
+    width: $width - rem-calc(3px);
     height: $height;
     background-color: $teal;
     border-radius: $height;
@@ -35,21 +35,21 @@ $height: 2px;
 }
 
 .hamburger:before {
-    top: -7px;
+    top: rem-calc(-7px);
 }
 
 .hamburger:after {
-    top: 7px;
+    top: rem-calc(7px);
 }
 
 .active .hamburger:before {
-    transform: translateX(3px) rotate(45deg);
+    transform: translateX(rem-calc(3px)) rotate(45deg);
 }
 
 .active .hamburger__inner {
     opacity: 0;
 }
 
 .active .hamburger:after {
-    transform: translateX(3px) rotate(-45deg);
+    transform: translateX(rem-calc(3px)) rotate(-45deg);
 }

assets/_sass/component/_navigation.scss

@@ -2,8 +2,8 @@
 // Variables
 ////////////////////
 
-$nav-height-sm: 60px;
-$nav-height-lg: 80px;
+$nav-height-sm: rem-calc(60px);
+$nav-height-lg: rem-calc(80px);
 $nav-zindex: 10;
 
 ////////////////////
@@ -33,7 +33,7 @@ $nav-zindex: 10;
 
 .nav .logo {
     @media(max-width: $bp-md) {
-        max-width: 105px;
+        max-width: rem-calc(105px);
     }
 }
 
@@ -61,7 +61,7 @@ $nav-zindex: 10;
     bottom: 0;
     left: 0;
     height: calc(100vh - #{$nav-height-sm});
-    padding: 20px $cp-sm;
+    padding: rem-calc(20px) $cp-sm;
     background-color: $teal;
     display: flex;
     flex-direction: column;
@@ -90,23 +90,23 @@ $nav-zindex: 10;
     &:not(:last-of-type) {
 
         @media (min-width: $bp-md) {
-            margin-right: 20px;
+            margin-left: rem-calc(20px);
         }
 
         @media (min-width: $bp-lg) {
-            margin-right: 40px;
+            margin-left: rem-calc(40px);
         }
     }
 }
 
 .nav-list__link {
     display: block;
-    padding: 20px 10px;
+    padding: rem-calc(20px 10px);
     color: $white;
 
     @media (min-width: $bp-md) {
         display: inline;
-        padding: 10px 0;
+        padding: rem-calc(10px 0);
         color: $slate-600;
 
         &:hover,