From 4bc196ad7b1ecbaa0d65a779f5528842e1d247d0 Mon Sep 17 00:00:00 2001
From: Dan Head <me@danielhead.com>
Date: Fri, 11 Jan 2019 15:46:00 +0000
Subject: [PATCH] Use viewport unit to scale base font size Use rems for font
 sizes and margin/padding

---
 css/archive.css            | 11 ++++++++-
 css/base.css               | 17 ++++++++++++--
 css/comment-respond.css    | 10 ++++-----
 css/comment.css            |  4 ++--
 css/content.css            | 46 ++++++++++++++++++++++----------------
 css/excerpt.css            |  8 +++----
 css/footer.css             |  5 +----
 css/index.css              | 27 ++++++++++++++--------
 css/metadata.css           |  2 +-
 css/nav.css                |  2 +-
 css/page.css               |  2 +-
 css/title.css              |  9 +-------
 theme/partials/archive.php |  2 +-
 13 files changed, 87 insertions(+), 58 deletions(-)

diff --git a/css/archive.css b/css/archive.css
index 6933877..215a71b 100644
--- a/css/archive.css
+++ b/css/archive.css
@@ -12,12 +12,21 @@
   margin-left: var(--space-sm);
 }
 
-.archive__heading {
+.archive__heading,
+.archive__subheading {
   font-family: var(--heading-font-family);
   color: var(--color-dark-blue);
   margin-bottom: var(--space-xs);
 }
 
+.archive__heading {
+  font-size: var(--size-heading-2);
+}
+
+.archive__subheading {
+  font-size: var(--size-heading-3);
+}
+
 .archive__date {
   display: inline-block;
   font-style: italic;
diff --git a/css/base.css b/css/base.css
index 7d7a84f..24793a3 100644
--- a/css/base.css
+++ b/css/base.css
@@ -1,5 +1,18 @@
 html {
   box-sizing: border-box;
+  line-height: 1.5;
+}
+
+@media screen and (min-width: 50rem) {
+  html {
+    font-size: 2vw;
+  }
+}
+
+@media screen and (min-width: 62.5rem) {
+  html {
+    font-size: 1.25rem;
+  }
 }
 
 body {
@@ -7,8 +20,6 @@ body {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23e0e0e0' fill-opacity='0.55' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
   color: var(--color-near-black);
   font-family: var(--body-font-family);
-  font-size: 16px;
-  line-height: 1.5;
   margin: 0;
 }
 
@@ -25,6 +36,8 @@ h1,
 h2,
 h3,
 h4,
+h5,
+h6,
 figure,
 table,
 p,
diff --git a/css/comment-respond.css b/css/comment-respond.css
index 18e0f2d..7b8c112 100644
--- a/css/comment-respond.css
+++ b/css/comment-respond.css
@@ -9,7 +9,7 @@
 }
 
 .comment-respond__text {
-  font-size: 14px;
+  font-size: var(--size-body-small);
 }
 
 .comment-respond__item {
@@ -17,6 +17,10 @@
   max-width: 360px;
 }
 
+.comment-respond__cancel {
+  font-size: var(--size-body-extra-small);
+}
+
 .comment-respond__label {
   display: block;
   margin-bottom: var(--space-xs);
@@ -45,10 +49,6 @@
   padding: var(--space-xs);
 }
 
-.comment-respond__cancel {
-  font-size: 12px;
-}
-
 .comment-respond__cancel a,
 .comment-respond__cancel a:visited {
   color: var(--color-light-blue);
diff --git a/css/comment.css b/css/comment.css
index 46dd81e..d67a736 100644
--- a/css/comment.css
+++ b/css/comment.css
@@ -31,7 +31,7 @@
 }
 
 .comment__date {
-  font-size: 12px;
+  font-size: var(--size-body-extra-small);
 }
 
 .comment__body {
@@ -60,7 +60,7 @@
 .comment__reply-text {
   display: inline-block;
   position: relative;
-  font-size: 12px;
+  font-size: var(--size-body-extra-small);
   vertical-align: middle;
   transition: box-shadow var(--transition-md) ease-out;
 }
diff --git a/css/content.css b/css/content.css
index 0062588..b736561 100644
--- a/css/content.css
+++ b/css/content.css
@@ -1,29 +1,37 @@
-.content h1 {
-  font-family: var(--heading-font-family);
-  font-size: 1.8rem;
-  margin-bottom: var(--space-sm);
-}
-
-.content h2 {
-  font-family: var(--heading-font-family);
-  font-size: 1.6rem;
-  margin-bottom: var(--space-sm);
-}
-
-.content h3 {
-  font-family: var(--heading-font-family);
-  font-size: 1.4rem;
-  margin-bottom: var(--space-sm);
-}
-
+.content h1,
+.content h2,
+.content h3,
 .content h4,
 .content h5,
 .content h6 {
   font-family: var(--heading-font-family);
-  font-size: 1.2rem;
   margin-bottom: var(--space-sm);
 }
 
+.content h1 {
+  font-size: var(--size-heading-1);
+}
+
+.content h2 {
+  font-size: var(--size-heading-2);
+}
+
+.content h3 {
+  font-size: var(--size-heading-3);
+}
+
+.content h4 {
+  font-size: var(--size-heading-4);
+}
+
+.content h5 {
+  font-size: var(--size-heading-5);
+}
+
+.content h6 {
+  font-size: var(--size-heading-6);
+}
+
 .content p {
   margin-bottom: var(--space-sm);
 }
diff --git a/css/excerpt.css b/css/excerpt.css
index 22c576b..d32e8be 100644
--- a/css/excerpt.css
+++ b/css/excerpt.css
@@ -28,18 +28,18 @@
   }
 }
 
-.excerpt__title {
-  font-size: 1.5rem;
+.excerpt__title,
+.excerpt__subtitle {
+  font-size: var(--size-heading-6);
 }
 
 .excerpt__subtitle {
-  font-size: 1.2rem;
   margin-top: var(--space-sm);
 }
 
 .excerpt__metadata {
   color: var(--color-grey);
-  font-size: 12px;
+  font-size: var(--size-body-extra-small);
   margin-bottom: var(--space-sm);
 }
 
diff --git a/css/footer.css b/css/footer.css
index 89ab093..31ef0f7 100644
--- a/css/footer.css
+++ b/css/footer.css
@@ -1,12 +1,9 @@
 .footer {
   text-align: center;
+  font-size: var(--size-body-extra-small);
 }
 
 .footer__head,
 .footer__body {
   margin-bottom: var(--space-sm);
 }
-
-.footer__text {
-  font-size: 14px;
-}
diff --git a/css/index.css b/css/index.css
index 91b6349..9983d1c 100644
--- a/css/index.css
+++ b/css/index.css
@@ -32,11 +32,20 @@
   --color-facebook: #3e5a98;
   --color-twitter: #1da1f2;
   --color-rss: #ee802f;
-  --space-xxs: 5px;
-  --space-xs: 10px;
-  --space-sm: 20px;
-  --space-md: 30px;
-  --space-lg: 60px;
+  --space-xxs: 0.25rem;
+  --space-xs: 0.5rem;
+  --space-sm: 1rem;
+  --space-md: 2rem;
+  --space-lg: 4rem;
+  --size-heading-1: 2rem;
+  --size-heading-2: 1.8rem;
+  --size-heading-3: 1.6rem;
+  --size-heading-4: 1.424rem;
+  --size-heading-5: 1.267rem;
+  --size-heading-6: 1.125rem;
+  --size-body: 1rem;
+  --size-body-small: 0.889rem;
+  --size-body-extra-small: 0.79rem;
   --transition-fs: 0.15s;
   --transition-md: 0.3s;
   --transition-sl: 0.6s;
@@ -46,8 +55,8 @@
   --link-focus: 0 3px 0 0 var(--color-light-blue);
 }
 
-@custom-media --viewport-sm (min-width: 480px);
-@custom-media --viewport-md (min-width: 640px);
-@custom-media --viewport-lg (min-width: 900px);
-@custom-media --viewport-xl (min-width: 1200px);
+@custom-media --viewport-sm (min-width: 30rem);
+@custom-media --viewport-md (min-width: 40rem);
+@custom-media --viewport-lg (min-width: 60rem);
+@custom-media --viewport-xl (min-width: 75rem);
 @custom-media --viewport-wordpress-admin-bar (min-width: 783px);
diff --git a/css/metadata.css b/css/metadata.css
index faccca4..75860d8 100644
--- a/css/metadata.css
+++ b/css/metadata.css
@@ -1,7 +1,7 @@
 .metadata {
   display: flex;
   flex-flow: row wrap;
-  font-size: 12px;
+  font-size: var(--size-body-extra-small);
   margin-bottom: var(--space-sm);
   border-bottom: 1px solid var(--color-light-grey);
 }
diff --git a/css/nav.css b/css/nav.css
index 5930cb7..9babe1e 100644
--- a/css/nav.css
+++ b/css/nav.css
@@ -128,7 +128,7 @@
 
 .nav__list {
   font-family: var(--heading-font-family);
-  font-size: 1.2rem;
+  font-size: var(--size-heading-6);
 }
 
 .nav__list .nav__list {
diff --git a/css/page.css b/css/page.css
index 26fb24c..8173ea8 100644
--- a/css/page.css
+++ b/css/page.css
@@ -3,7 +3,7 @@
   grid-auto-flow: dense;
   grid-gap: var(--space-xs);
   grid-template-columns: 1fr;
-  max-width: 1200px;
+  max-width: 75rem;
   margin: var(--space-xs) var(--space-xs) 0;
 }
 
diff --git a/css/title.css b/css/title.css
index d3d7205..e8c85b3 100644
--- a/css/title.css
+++ b/css/title.css
@@ -1,17 +1,10 @@
 .title {
   font-family: var(--heading-font-family);
-  font-size: 1.8rem;
   color: var(--color-dark-blue);
+  font-size: var(--size-heading-1);
   margin-bottom: var(--space-sm);
 }
 
-@media (--viewport-md) {
-  .title {
-    font-size: 2.4rem;
-    margin-bottom: var(--space-md);
-  }
-}
-
 .title a {
   color: inherit;
 }
diff --git a/theme/partials/archive.php b/theme/partials/archive.php
index c2ccdf4..5a38776 100644
--- a/theme/partials/archive.php
+++ b/theme/partials/archive.php
@@ -35,7 +35,7 @@ foreach ($posts as $post) {
         <ol class="archive__list archive__list--sub-list">
           <?php foreach ($yearData as $month => $monthData) : ?>
             <li class="archive__item">
-              <h3 class="archive__heading">
+              <h3 class="archive__subheading">
                 <?php echo $month ?>
               </h3>
               <ol class="archive__list archive__list--sub-list">