run initial SCSS refactoring through percy

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";