run initial SCSS refactoring through percy

assets/sass/abstracts/_themes.scss

@@ -3,8 +3,8 @@
 // Dark & Light Themes
 $themes: (
   light: (
-    background: #ffffff,
-    background-top: #fcfcfc,
+    background-inner: #ffffff,
+    background-outer: #fcfcfc,
     text: #202020,
     medium-dark: #515151,
     medium: #5e5e5e,
@@ -16,8 +16,8 @@ $themes: (
     links: #0e6dc2,
   ),
   dark: (
-    background: #272727,
-    background-top: #1e1e1e,
+    background-inner: #272727,
+    background-outer: #1e1e1e,
     text: #f7f7f7,
     medium-dark: #d7d7d7,
     medium: #b1b1b1,

assets/sass/components/_global.scss

@@ -14,7 +14,7 @@ body {
   // manually setting light/dark mode backgrounds and bulb icon
   // really just the color of header & footer
   &.light {
-    background-color: map-get(map-get($themes, "light"), "background-top");
+    background-color: map-get(map-get($themes, "light"), "background-outer");
 
     button.dark-mode-toggle {
       background-image: url($icon-bulb-on);
@@ -22,7 +22,7 @@ body {
   }
 
   &.dark {
-    background-color: map-get(map-get($themes, "dark"), "background-top");
+    background-color: map-get(map-get($themes, "dark"), "background-outer");
 
     button.dark-mode-toggle {
       background-image: url($icon-bulb-off);
@@ -30,7 +30,16 @@ body {
   }
 }
 
+// stretch background for entire width of content area
 main {
+  width: 100%;
+
+  @include colors() {
+    background-color: c(background-inner);
+  }
+}
+
+section.page {
   max-width: $max-width;
   margin: 0 auto;
   padding-left: 1.5em;
@@ -118,6 +127,7 @@ img.emoji {
   padding: 0 0.09em;
   vertical-align: -0.18em;
   border: 0;
+  display: inline-block;
 
   // have cursor act like it's hovering a regular unicode emoji, especially since twemojis can still be copied/pasted
   cursor: text;
@@ -127,15 +137,6 @@ a img.emoji {
   cursor: inherit;
 }
 
-// white background for entire width content area
-div#wrap {
-  width: 100%;
-
-  @include colors() {
-    background-color: c(background);
-  }
-}
-
 // Responsive
 @mixin responsive--global() {
   body {

assets/sass/components/_reset.scss

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

assets/sass/main.scss

@@ -16,7 +16,8 @@ $max-width: unquote($max-width);
 @import "abstracts/themes";
 
 // Global Styles
-@import "components/fonts";
+@import "components/reset";
+@import "components/typography";
 @import "components/global";
 @import "components/header";
 @import "components/footer";

assets/sass/pages/_etc.scss

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 
 // Video Styles
-main#etc {
+section#etc {
   padding-top: 1.5em;
   padding-bottom: 1.5em;
 
@@ -18,7 +18,7 @@ main#etc {
 
 // Responsive
 @mixin responsive--etc() {
-  main#etc {
+  section#etc {
     padding: 1.25em 1.1em;
 
     h1 {

assets/sass/pages/_home.scss

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 
 // Home Styles
-main#home {
+section#home {
   font-size: 1.025em;
   padding-top: 1.5em;
   padding-bottom: 0.75em;
@@ -93,7 +93,7 @@ main#home {
 // Loop through $colors-home (see abstracts/_variables)
 @each $id, $colors in $colors-home {
   @each $theme, $color in $colors {
-    body.#{$theme} main#home a##{$id} {
+    body.#{$theme} section#home a##{$id} {
       color: $color;
       background-image: underline-hack($color);
     }
@@ -102,7 +102,7 @@ main#home {
 
 // Responsive
 @mixin responsive--home() {
-  main#home {
+  section#home {
     font-size: 0.975em;
     padding: 1.2em 1.2em 0.4em 1.2em;
 

assets/sass/pages/_list.scss

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 
 // Archive/List Styles
-main#list {
+section#list {
   padding-top: 1.5em;
   padding-bottom: 0.25em;
 
@@ -46,7 +46,7 @@ main#list {
 
 // Responsive
 @mixin responsive--list() {
-  main#list {
+  section#list {
     padding: 1em 1em 0.25em 1em;
 
     section.year {

assets/sass/pages/_single.scss

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 
 // Post Styles
-main#single {
+section#single {
   padding-top: 1em;
   padding-bottom: 1em;
 
@@ -41,7 +41,7 @@ main#single {
 
 // Responsive
 @mixin responsive--single() {
-  main#single {
+  section#single {
     padding: 0.8em 1.1em;
 
     h1#title {

assets/sass/pages/_videos.scss

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 
 // Video Styles
-main#video {
+section#video {
   padding: 1.5em 0;
   text-align: center;
 
@@ -39,7 +39,7 @@ main#video {
 
 // Responsive
 @mixin responsive--videos() {
-  main#video {
+  section#video {
     padding: 1em 0;
 
     h1 {