From 1c1e82bdc6b5a43b2e48e06d1d6fc85070457ca5 Mon Sep 17 00:00:00 2001
From: Ned Zimmerman <ned@bight.dev>
Date: Sun, 16 Feb 2020 12:14:24 -0700
Subject: [PATCH] Rename function, replace pixel usage with rem conversions

---
 assets/css/base.scss | 52 ++++++++++++++++++++++----------------------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/assets/css/base.scss b/assets/css/base.scss
index eee6f3f0..2b44e124 100644
--- a/assets/css/base.scss
+++ b/assets/css/base.scss
@@ -3,13 +3,29 @@
 
 @import '~prism-themes/themes/prism-a11y-dark';
 
+// FUNCTIONS
+
+$browser-context: 16;
+
+@function pxToRem($pixels, $context: $browser-context) {
+  @if (unitless($pixels)) {
+    $pixels: $pixels * 1px;
+  }
+
+  @if (unitless($context)) {
+    $context: $context * 1px;
+  }
+
+  @return $pixels / $context * 1rem;
+}
+
 pre[class*='language-'] {
   font-size: 1rem;
 }
 
 code {
   background-color: #333333;
-  border: 1px solid black;
+  border: pxToRem(1) solid black;
   color: white;
   padding: 0.15em;
   border-radius: 0.25em;
@@ -77,22 +93,6 @@ $bold: 700;
   margin-right: 0.35rem;
 }
 
-// FUNCTIONS
-
-$browser-context: 16;
-
-@function rem($pixels, $context: $browser-context) {
-  @if (unitless($pixels)) {
-    $pixels: $pixels * 1px;
-  }
-
-  @if (unitless($context)) {
-    $context: $context * 1px;
-  }
-
-  @return $pixels / $context * 1rem;
-}
-
 body {
   border-top: 1rem solid red;
   font-family: $sans-serif;
@@ -131,8 +131,8 @@ a {
     border-bottom: red solid 0.1rem;
   }
   &:focus {
-    outline: 3px solid $primary-color;
-    outline-offset: 5px;
+    outline: pxToRem(3) solid $primary-color;
+    outline-offset: pxToRem(5);
   }
 }
 
@@ -167,14 +167,14 @@ ul[class] {
   // margin: 13rem -7rem;
 }
 
-@media (min-width: 51rem) and (min-height: 400px) {
+@media (min-width: 51rem) and (min-height: #{pxToRem(400)}) {
   // a dramatic font size
   .title__thicc {
     font-size: 12vh;
   }
 }
 
-@media (min-width: 51rem) and (min-height: 850px) {
+@media (min-width: 51rem) and (min-height: #{pxToRem(850)}) {
   // cap the max-height of the title
   // at the same size that 12vh computes to
   // when the viewport is 850px high
@@ -183,7 +183,7 @@ ul[class] {
   }
 }
 
-@media (min-width: 800px) {
+@media (min-width: #{pxToRem(800)}) {
   .title__thicc {
     grid-column: 1 / 3;
   }
@@ -229,7 +229,7 @@ th {
   display: grid;
   grid-gap: 1rem;
 
-  @media (min-width: 800px) {
+  @media (min-width: #{pxToRem(800)}) {
     grid-template-columns: 10rem 60ch;
   }
 }
@@ -272,7 +272,7 @@ th {
     padding-bottom: 0.5em;
 
     &.subterm {
-      padding-left: 10px;
+      padding-left: pxToRem(10);
     }
 
     &:last-child {
@@ -281,7 +281,7 @@ th {
 
     &.subterm:before {
       content: '\21B3';
-      padding-right: 5px;
+      padding-right: pxToRem(5);
     }
   }
 }
@@ -356,7 +356,7 @@ th {
   }
 
   &__signal {
-    border-top: 1px solid var(--word-signal-color);
+    border-top: pxToRem(1) solid var(--word-signal-color);
     color: var(--word-signal-color);
     display: inline-block;
     font-family: $ext-sans;