diff --git a/resources/assets/sass/_var.scss b/resources/assets/sass/_var.scss
index 97cba3f..9769d75 100644
--- a/resources/assets/sass/_var.scss
+++ b/resources/assets/sass/_var.scss
@@ -31,10 +31,10 @@ $c-error: #fa2036; // error
 $nav-link-count: 3;
 
 // Sizes
-$nav-height-desktop: px2rem(60px);
-$nav-height-mobile: px2rem(50px);
-$nav-link-height-mobile: px2rem(50px);
-$grid-gutter-width: px2rem(30px);
+$nav-height-desktop: pxrem(60);
+$nav-height-mobile: pxrem(50);
+$nav-link-height-mobile: pxrem(50);
+$grid-gutter-width: pxrem(30);
 
 // Breakpoints
 $nav-desktop-min: 768px;
diff --git a/resources/assets/sass/functions/_px2rem.scss b/resources/assets/sass/functions/_px2rem.scss
deleted file mode 100644
index 4b6c032..0000000
--- a/resources/assets/sass/functions/_px2rem.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@function px2rem($size) {
-    @return ((strip-unit($size) / strip-unit($base-font-size)) * 1rem);
-}
diff --git a/resources/assets/sass/functions/_pxrem.scss b/resources/assets/sass/functions/_pxrem.scss
new file mode 100644
index 0000000..1d4a6a4
--- /dev/null
+++ b/resources/assets/sass/functions/_pxrem.scss
@@ -0,0 +1,8 @@
+//
+// Convert px to the equivalent rem based on $base-font-size
+//
+// Usage example: pxrem(32) or pxrem(32px) => 2rem
+//
+@function pxrem($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
index 4a3c40e..bdd9aca 100644
--- a/resources/assets/sass/functions/_strip-unit.scss
+++ b/resources/assets/sass/functions/_strip-unit.scss
@@ -1,3 +1,8 @@
+//
+// Stripe the units from a value
+//
+// Usage example: strip-unit(25px) => 25
+//
 @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 e7cb653..102ed2e 100644
--- a/resources/assets/sass/pages/_blog.scss
+++ b/resources/assets/sass/pages/_blog.scss
@@ -7,7 +7,7 @@
 
     .blog-entry {
         border: 1px solid lighten($c-base, 75%);
-        border-radius: px2rem(5px);
+        border-radius: pxrem(5);
 
         @include media-breakpoint-up(md) {
             display: flex;
@@ -36,7 +36,7 @@
         }
 
         &-content {
-            padding: px2rem(25px);
+            padding: pxrem(25);
 
             @include media-breakpoint-up(md) {
                 display: flex;
@@ -52,7 +52,7 @@
             &-title {
                 @include font-sans-semibold;
                 margin-bottom: $grid-gutter-width;
-                font-size: px2rem(25px);
+                font-size: pxrem(25);
                 text-transform: uppercase;
             }
 
@@ -68,10 +68,10 @@
                 width: 100%;
 
                 &-item {
-                    margin-right: px2rem(5px);
+                    margin-right: pxrem(5);
                     display: inline-block;
-                    padding: px2rem(3px) px2rem(8px);
-                    border-radius: px2rem(3px);
+                    padding: pxrem(3) pxrem(8);
+                    border-radius: pxrem(3);
                     background-color: $c-accent;
                     color: $c-text-light;
                 }
diff --git a/resources/assets/sass/pages/_contact.scss b/resources/assets/sass/pages/_contact.scss
index d52c76e..37fe4de 100644
--- a/resources/assets/sass/pages/_contact.scss
+++ b/resources/assets/sass/pages/_contact.scss
@@ -1,15 +1,15 @@
 .contact-page-component {
     $trans-speed: 100ms;
-    padding-top: px2rem(35px);
+    padding-top: pxrem(35);
     padding-bottom: 0px;
 
     input, textarea {
-        margin-bottom: px2rem(20px);
+        margin-bottom: pxrem(20);
         width: 100%;
-        padding: px2rem(5px) px2rem(10px);
+        padding: pxrem(5) pxrem(10);
         border: 2px solid fade-out($c-base, 0.75);
         background-color: rgba(255, 255, 255, 0.8);
-        font-size: px2rem(14px);
+        font-size: pxrem(14);
         transition: border $trans-speed;
 
         &:focus {
@@ -23,7 +23,7 @@
 
     textarea {
         resize: none;
-        height: px2rem(150px);
+        height: pxrem(150);
     }
 
     .submit {
@@ -44,11 +44,11 @@
     }
 
     .notification {
-        margin: 0px auto px2rem(15px) auto;
-        padding: px2rem(5px) px2rem(10px);
+        margin: 0px auto pxrem(15) auto;
+        padding: pxrem(5) pxrem(10);
         background-color: lighten($c-error, 15%);
         color: $c-text-light;
-        font-size: px2rem(14px);
+        font-size: pxrem(14);
         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 d981622..09fefc4 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: px2rem(22px);
+        font-size: pxrem(22);
         text-align: center;
         text-transform: uppercase;
 
         @include media-breakpoint-up(sm) {
-            font-size: px2rem(32px);
+            font-size: pxrem(32);
         }
 
         @include media-breakpoint-up(lg) {
-            font-size: px2rem(48px);
+            font-size: pxrem(48);
         }
     }
 }
diff --git a/resources/assets/sass/sections/_footer.scss b/resources/assets/sass/sections/_footer.scss
index ff0f810..b2565df 100644
--- a/resources/assets/sass/sections/_footer.scss
+++ b/resources/assets/sass/sections/_footer.scss
@@ -1,8 +1,8 @@
 .footer-section-component {
     width: 100%;
-    height: px2rem(32px);
-    padding: 0px px2rem(10px);
+    height: pxrem(32);
+    padding: 0px pxrem(10);
     background-color: $c-base;
     color: $c-text-light;
-    line-height: px2rem(32px);
+    line-height: pxrem(32);
 }
diff --git a/resources/assets/sass/sections/_nav.scss b/resources/assets/sass/sections/_nav.scss
index 6780b1d..a95a5d5 100644
--- a/resources/assets/sass/sections/_nav.scss
+++ b/resources/assets/sass/sections/_nav.scss
@@ -1,7 +1,7 @@
 .nav-section-component {
-    $logo-offset: px2rem(10px);
-    $desktop-logo-width: px2rem(35px);
-    $mobile-logo-width: px2rem(30px);
+    $logo-offset: pxrem(10);
+    $desktop-logo-width: pxrem(35);
+    $mobile-logo-width: pxrem(30);
     @include font-sans-semibold;
     position: absolute;
     top: 0px;
@@ -25,8 +25,8 @@
             right: ($grid-gutter-width / 2);
             transform: translateY(-50%);
             margin: 0px;
-            width: px2rem(22px);
-            height: px2rem(14px);
+            width: pxrem(22);
+            height: pxrem(14);
             padding: 0px;
             border: 0;
             border-radius: 0;
@@ -120,13 +120,13 @@
                 position: relative;
                 display: inline-block;
                 color: $c-text-light;
-                font-size: px2rem(14px);
+                font-size: pxrem(14);
                 text-transform: uppercase;
 
                 @media (max-width: $nav-mobile-max) {
                     display: block;
                     height: $nav-link-height-mobile;
-                    padding: 0px px2rem(10px);
+                    padding: 0px pxrem(10);
                     background-color: $c-base;
                     line-height: $nav-link-height-mobile;
                     transition: background-color 150ms;
@@ -137,7 +137,7 @@
                 }
 
                 @media (min-width: $nav-desktop-min) {
-                    padding: px2rem(5px) px2rem(20px);
+                    padding: pxrem(5) pxrem(20);
                     transition: color 150ms;
 
                     &:first-child {
@@ -159,7 +159,7 @@
 
                 span {
                     position: relative;
-                    padding: px2rem(3px) 0px;
+                    padding: pxrem(3) 0px;
 
                     &:after {
                         content: "";
diff --git a/resources/assets/sass/sections/_subscription-form.scss b/resources/assets/sass/sections/_subscription-form.scss
index c19357e..2d403f8 100644
--- a/resources/assets/sass/sections/_subscription-form.scss
+++ b/resources/assets/sass/sections/_subscription-form.scss
@@ -1,16 +1,16 @@
 .subscription-form-section-component {
     $trans-speed: 100ms;
-    width: px2rem(200px);
+    width: pxrem(200);
     border: 2px solid fade-out($c-base, 0.75);
-    border-radius: px2rem(3px);
+    border-radius: pxrem(3);
     background-color: lighten($c-base, 75%);
 
     input {
-        margin: px2rem(5px);
-        width: calc(100% - #{px2rem(10px)});
-        padding: px2rem(3px);
+        margin: pxrem(5);
+        width: calc(100% - #{pxrem(10)});
+        padding: pxrem(3);
         border: 2px solid fade-out($c-base, 0.75);
-        font-size: px2rem(14px);
+        font-size: pxrem(14);
         text-align: center;
         transition: border-color $trans-speed;