From 61ba227df580dcc3ad130864d68471c61d247097 Mon Sep 17 00:00:00 2001
From: kitajchuk <bk@kitajchuk.com>
Date: Wed, 28 Apr 2021 15:44:40 -0700
Subject: [PATCH] Refactor all typography to utilize reusable mixins

---
 styles/_mixins.scss     | 125 ++++++++++++++++++++++++++++++++++++++++
 styles/_typography.scss | 111 +++--------------------------------
 2 files changed, 132 insertions(+), 104 deletions(-)

diff --git a/styles/_mixins.scss b/styles/_mixins.scss
index 5b46913..a71eb62 100644
--- a/styles/_mixins.scss
+++ b/styles/_mixins.scss
@@ -18,6 +18,126 @@
   }
 }
 
+@mixin h1() {
+  font-size: $h1-size;
+  line-height: 1.33;
+  letter-spacing: -0.06px;
+  @include font-bold();
+
+  @media (max-width: $width-tablet-1) {
+    font-size: $h2-size;
+  }
+
+  @media (max-width: $width-tablet-2) {
+    font-size: $h3-size;
+  }
+
+  @media (max-width: $width-mobile) {
+    font-size: $h4-size;
+  }
+}
+
+@mixin h2() {
+  font-size: $h2-size;
+  line-height: 1.35;
+  letter-spacing: -0.05px;
+  @include font-bold();
+
+  @media (max-width: $width-tablet-1) {
+    font-size: $h3-size;
+  }
+
+  @media (max-width: $width-tablet-2) {
+    font-size: $h4-size;
+  }
+
+  @media (max-width: $width-mobile) {
+    font-size: $h5-size;
+  }
+}
+
+@mixin h3() {
+  font-size: $h3-size;
+  line-height: 1.33;
+  letter-spacing: -0.05px;
+  @include font-bold();
+
+  @media (max-width: $width-tablet-1) {
+    font-size: $h4-size;
+  }
+
+  @media (max-width: $width-tablet-2) {
+    font-size: $h5-size;
+  }
+
+  @media (max-width: $width-mobile) {
+    font-size: $h6-size;
+  }
+}
+
+@mixin h4 () {
+  font-size: $h4-size;
+  line-height: 1.5;
+  letter-spacing: -0.04px;
+  @include font-medium();
+
+  @media (max-width: $width-tablet-1) {
+    font-size: $h5-size;
+  }
+
+  @media (max-width: $width-tablet-2) {
+    font-size: $h6-size;
+  }
+
+  @media (max-width: $width-mobile) {
+    font-size: $p-size;
+  }
+}
+
+@mixin h5() {
+  font-size: $h5-size;
+  line-height: 1.67;
+  letter-spacing: -0.03px;
+  @include font-medium();
+
+  span {
+    color: $jambonz;
+  }
+
+  @media (max-width: $width-tablet-1) {
+    font-size: $h6-size;
+  }
+
+  @media (max-width: $width-tablet-2) {
+    font-size: $p-size;
+  }
+
+  // @note: Consideration on stopping type reduction here
+  // @media (max-width: $width-mobile) {
+  //   font-size: $m-size;
+  // }
+}
+
+@mixin h6() {
+  font-size: $h6-size;
+  line-height: 1.8;
+  letter-spacing: -0.03px;
+  @include font-medium();
+
+  @media (max-width: $width-tablet-1) {
+    font-size: $p-size;
+  }
+
+  @media (max-width: $width-tablet-2) {
+    font-size: $m-size;
+  }
+
+  // @note: Consideration on stopping type reduction here
+  // @media (max-width: $width-mobile) {
+  //   font-size: $ms-size;
+  // }
+}
+
 @mixin p() {
   font-size: $p-size;
   line-height: 1.9;
@@ -52,6 +172,11 @@
   // }
 }
 
+@mixin mxs() {
+  font-size: $mxs-size;
+  line-height: 2;
+}
+
 @mixin cta() {
   margin-top: 96px;
 
diff --git a/styles/_typography.scss b/styles/_typography.scss
index b1aaf01..b32a6c5 100644
--- a/styles/_typography.scss
+++ b/styles/_typography.scss
@@ -68,123 +68,27 @@ em {
 }
 
 .h1, h1 {
-  font-size: $h1-size;
-  line-height: 1.33;
-  letter-spacing: -0.06px;
-  @include font-bold();
-
-  @media (max-width: $width-tablet-1) {
-    font-size: $h2-size;
-  }
-
-  @media (max-width: $width-tablet-2) {
-    font-size: $h3-size;
-  }
-
-  @media (max-width: $width-mobile) {
-    font-size: $h4-size;
-  }
+  @include h1();
 }
 
 .h2, h2 {
-  font-size: $h2-size;
-  line-height: 1.35;
-  letter-spacing: -0.05px;
-  @include font-bold();
-
-  @media (max-width: $width-tablet-1) {
-    font-size: $h3-size;
-  }
-
-  @media (max-width: $width-tablet-2) {
-    font-size: $h4-size;
-  }
-
-  @media (max-width: $width-mobile) {
-    font-size: $h5-size;
-  }
+  @include h2();
 }
 
 .h3, h3 {
-  font-size: $h3-size;
-  line-height: 1.33;
-  letter-spacing: -0.05px;
-  @include font-bold();
-
-  @media (max-width: $width-tablet-1) {
-    font-size: $h4-size;
-  }
-
-  @media (max-width: $width-tablet-2) {
-    font-size: $h5-size;
-  }
-
-  @media (max-width: $width-mobile) {
-    font-size: $h6-size;
-  }
+  @include h3();
 }
 
 .h4, h4 {
-  font-size: $h4-size;
-  line-height: 1.5;
-  letter-spacing: -0.04px;
-  @include font-medium();
-
-  @media (max-width: $width-tablet-1) {
-    font-size: $h5-size;
-  }
-
-  @media (max-width: $width-tablet-2) {
-    font-size: $h6-size;
-  }
-
-  @media (max-width: $width-mobile) {
-    font-size: $p-size;
-  }
+  @include h4();
 }
 
 .h5, h5 {
-  font-size: $h5-size;
-  line-height: 1.67;
-  letter-spacing: -0.03px;
-  @include font-medium();
-
-  span {
-    color: $jambonz;
-  }
-
-  @media (max-width: $width-tablet-1) {
-    font-size: $h6-size;
-  }
-
-  @media (max-width: $width-tablet-2) {
-    font-size: $p-size;
-  }
-
-  // @note: Consideration on stopping type reduction here
-  // @media (max-width: $width-mobile) {
-  //   font-size: $m-size;
-  // }
+  @include h5();
 }
 
 .h6, h6 {
-  font-size: $h6-size;
-  line-height: 1.8;
-  letter-spacing: -0.03px;
-  @include font-medium();
-
-  @media (max-width: $width-tablet-1) {
-    font-size: $p-size;
-  }
-
-  @media (max-width: $width-tablet-2) {
-    font-size: $m-size;
-  }
-
-  // @note: Consideration on stopping type reduction here
-  // @media (max-width: $width-mobile) {
-  //   font-size: $ms-size;
-  // }
+  @include h6();
 }
 
 .p, p {
@@ -200,8 +104,7 @@ em {
 }
 
 .mxs {
-  font-size: $mxs-size;
-  line-height: 2;
+  @include mxs();
 }
 
 .color--teal {