switch to modern-normalize.css and actually choose a consistent box-sizing preference (#406)

assets/sass/abstracts/_reset.scss

@@ -1,3 +1,3 @@
 @charset "UTF-8";
 
-@import "normalize.css";
+@import "modern-normalize/modern-normalize.css";

assets/sass/components/_footer.scss

@@ -5,7 +5,6 @@ footer {
   width: 100%;
   letter-spacing: -0.005em;
   padding: 1.25em 1.5em;
-  box-sizing: border-box;
   border-top: 1px solid;
 
   @include colors() {

assets/sass/components/_global.scss

@@ -34,6 +34,7 @@ body {
 // stretch background for entire width of content area
 main {
   width: 100%;
+  padding: 0 1.5em;
 
   @include colors() {
     background-color: c(background-inner);
@@ -45,8 +46,6 @@ main {
 div.layout {
   max-width: $max-width;
   margin: 0 auto;
-  padding-left: 1.5em;
-  padding-right: 1.5em;
   display: block; // https://stackoverflow.com/questions/28794718/max-width-not-working-for-ie-11
 }
 
@@ -110,11 +109,10 @@ hr {
 // make SVG twemojis relative to surrounding text
 // https://github.com/twitter/twemoji#inline-styles
 img.emoji {
-  height: 1.1em;
-  width: 1.1em;
-  margin: 0;
-  padding: 0 0.09em;
-  vertical-align: -0.18em;
+  height: 1.2em;
+  width: 1.2em;
+  margin: 0 0.05em;
+  vertical-align: -0.22em;
   border: 0;
   display: inline-block;
 
@@ -137,4 +135,9 @@ a img.emoji {
     // Allows you to scroll below the viewport; default value is visible
     overflow-y: scroll;
   }
+
+  main {
+    padding-left: 1.25em;
+    padding-right: 1.25em;
+  }
 }

assets/sass/components/_header.scss

@@ -4,7 +4,6 @@
 header {
   width: 100%;
   padding: 0 1.5em;
-  box-sizing: border-box;
   border-bottom: 1px solid;
 
   @include colors() {
@@ -15,7 +14,6 @@ header {
     width: 100%;
     max-width: $max-width;
     margin: 0 auto;
-    box-sizing: border-box;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -71,7 +69,7 @@ header {
 
       li {
         text-align: right;
-        margin-left: 2em;
+        margin-left: 1.75em;
 
         a {
           display: inline-block;
@@ -91,15 +89,15 @@ header {
           }
 
           span.icon {
-            font-size: 1.35em;
-            vertical-align: -0.075em;
+            font-size: 1.3em;
+            vertical-align: -0.085em;
           }
 
           span.text {
             font-size: 0.95em;
             font-weight: 500;
             letter-spacing: -0.002em;
-            margin-left: 0.6em;
+            margin-left: 0.65em;
           }
         }
 
@@ -122,9 +120,10 @@ header {
         background-repeat: no-repeat;
         background-size: 100% 100%;
 
-        height: 1.5em;
-        width: 1em;
-        margin-left: 2em;
+        height: 1.56em; // 24.33px, don't ask
+        width: 1.56em;
+        margin-left: 1.4em;
+        margin-right: -0.3em; // weirdness w/ svg ratio
         cursor: pointer;
 
         // hidden by default in case user's JS is disabled, switches to `block` onload in dark-mode.js
@@ -178,10 +177,11 @@ header {
         // Dark mode toggle
         button.dark-mode-toggle {
           // TODO: figure out need for weird magic numbers here
-          height: 1.025em;
-          width: 0.75em;
-          margin-top: 0.15em;
-          margin-left: 1.15em;
+          height: 1.08em; // ~27px, don't ask
+          width: 1.08em;
+          margin-top: 0.175em;
+          margin-left: 1em;
+          margin-right: -0.2em; // weirdness w/ svg ratio
         }
       }
     }

assets/sass/pages/_etc.scss

@@ -19,8 +19,6 @@ div.layout-etc {
 // Responsive
 @mixin responsive--etc() {
   div.layout-etc {
-    padding: 1.25em 1.1em;
-
     h1 {
       font-size: 1.6em;
       padding: 0 0.6em;

assets/sass/pages/_home.scss

@@ -3,20 +3,23 @@
 // Home Styles
 div.layout-home {
   font-size: 1em;
-  padding-top: 1.5em;
+  padding-top: 1.25em;
   padding-bottom: 0.75em;
 
   h1 {
-    margin: 0 0 0.6em 0;
+    margin: 0 0 0.3em 0;
     font-size: 1.8em;
     font-weight: 500;
     letter-spacing: -0.014em;
-    line-height: 1.1;
     margin-left: -0.03em; // TODO: why is this indented slightly?
+
+    img.emoji {
+      margin-left: 0.1em; // a little extra social distancing for the hand
+    }
   }
 
   h2 {
-    margin: 0.6em 0;
+    margin: 0.5em 0;
     font-size: 1.35em;
     font-weight: 400;
     letter-spacing: -0.022em;
@@ -39,7 +42,7 @@ div.layout-home {
       margin-right: 0.1em;
 
       img.emoji {
-        vertical-align: -0.15em; // magic number to align with text :\
+        vertical-align: -0.2em; // magic number to align with text :\
         padding: 0;
       }
     }
@@ -47,11 +50,10 @@ div.layout-home {
 
   img#me {
     float: right;
-    margin-bottom: 0.6em;
-    margin-left: 1.2em;
+    margin: 0.2em 0 0.6em 1.2em;
     padding: 4px;
-    width: 160px;
-    height: 160px;
+    width: 170px;
+    height: 170px;
     border: 1px solid;
     border-radius: 50%;
 
@@ -99,18 +101,19 @@ div.layout-home {
 @mixin responsive--home() {
   div.layout-home {
     font-size: 0.975em;
-    padding: 1.2em 1.2em 0.4em 1.2em;
+    padding-top: 1.2em;
+    padding-bottom: 0.2em;
 
     h1 {
       font-size: 1.5em;
       letter-spacing: -0.014em;
-      line-height: 1.4;
+      line-height: 1.7;
     }
 
     h2 {
       font-size: 1.185em;
       letter-spacing: -0.017em;
-      line-height: 1.55;
+      line-height: 1.6;
     }
 
     p {
@@ -118,8 +121,8 @@ div.layout-home {
     }
 
     img#me {
-      width: 90px;
-      height: 90px;
+      width: 100px;
+      height: 100px;
       margin: 0 0 0.3em 0.6em;
       padding: 2px;
     }

assets/sass/pages/_list.scss

@@ -47,7 +47,8 @@ div.layout-list {
 // Responsive
 @mixin responsive--list() {
   div.layout-list {
-    padding: 1em 1em 0.25em 1em;
+    padding-top: 1em;
+    padding-bottom: 0;
 
     section.year {
       font-size: 1em;

assets/sass/pages/_single.scss

@@ -42,7 +42,8 @@ div.layout-single {
 // Responsive
 @mixin responsive--single() {
   div.layout-single {
-    padding: 0.8em 1.1em;
+    padding-top: 0.8em;
+    padding-bottom: 0.4em;
 
     h1.title {
       margin-top: 0.4em;