From dd9d4a00e49c2282f3b83861ad0588358a7f846b Mon Sep 17 00:00:00 2001
From: Ned Zimmerman <ned@bight.dev>
Date: Wed, 12 Feb 2020 05:51:52 -0700
Subject: [PATCH 1/3] Add a Sass function to convert pixels to rems (resolve
 #67)

---
 assets/css/base.scss | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/assets/css/base.scss b/assets/css/base.scss
index b94e9e66..eee6f3f0 100644
--- a/assets/css/base.scss
+++ b/assets/css/base.scss
@@ -77,10 +77,26 @@ $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;
-  font-size: 20px;
+  font-size: rem(20);
   padding: 2rem;
   margin: 0;
 }

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 2/3] 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;

From 7620d29d9d551f08b98251ca5fe19c78b020df27 Mon Sep 17 00:00:00 2001
From: Ned Zimmerman <ned@bight.dev>
Date: Sun, 16 Feb 2020 14:32:54 -0700
Subject: [PATCH 3/3] Move pxToRem to functions partial

---
 assets/css/_sass/_functions.scss | 11 +++++++++++
 assets/css/base.scss             | 17 ++---------------
 2 files changed, 13 insertions(+), 15 deletions(-)
 create mode 100644 assets/css/_sass/_functions.scss

diff --git a/assets/css/_sass/_functions.scss b/assets/css/_sass/_functions.scss
new file mode 100644
index 00000000..8e7b4737
--- /dev/null
+++ b/assets/css/_sass/_functions.scss
@@ -0,0 +1,11 @@
+@function pxToRem($pixels, $context: $browser-context) {
+  @if (unitless($pixels)) {
+    $pixels: $pixels * 1px;
+  }
+
+  @if (unitless($context)) {
+    $context: $context * 1px;
+  }
+
+  @return $pixels / $context * 1rem;
+}
diff --git a/assets/css/base.scss b/assets/css/base.scss
index 2b44e124..bc5a1465 100644
--- a/assets/css/base.scss
+++ b/assets/css/base.scss
@@ -2,23 +2,10 @@
 @import url('https://use.typekit.net/qlo3dpu.css');
 
 @import '~prism-themes/themes/prism-a11y-dark';
-
-// FUNCTIONS
+@import '_sass/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;
 }
@@ -96,7 +83,7 @@ $bold: 700;
 body {
   border-top: 1rem solid red;
   font-family: $sans-serif;
-  font-size: rem(20);
+  font-size: pxToRem(20);
   padding: 2rem;
   margin: 0;
 }