make actual background gray, main content area white

assets/sass/pages/_home.scss

@@ -67,7 +67,7 @@ main#home {
       margin-bottom: 0;
 
       span {
-        margin-right: 4px;
+        margin-right: 0.2em;
       }
     }
 
@@ -83,7 +83,7 @@ main#home {
     float: right;
     margin: 0 0 0.5em 1em;
     padding: 4px;
-    border: 1px solid $color-super-light;
+    border: 1px solid $color-light;
     border-radius: 50%;
     width: 160px;
     height: 160px;
@@ -96,7 +96,7 @@ main#home {
   main#home {
     font-size: 1.1em;
     line-height: 1.6;
-    padding: 1em 1.2em 0.5em 1.2em;
+    padding: 1.2em 1.2em 0.2em 1.2em;
 
     img#me {
       width: 85px;

assets/sass/pages/_list.scss

@@ -2,8 +2,8 @@
 
 // Archive/List Styles
 main#list {
-  max-width: 1010px;
-  padding: 1.5em 3em;
+  max-width: 980px;
+  padding: 1.5em 2.5em;
   margin: 0 auto;
 
   section.year {
@@ -24,11 +24,11 @@ main#list {
       display: flex;
 
       div.date {
-        color: $color-light;
+        color: $color-medium;
         width: 5.25em;
         flex-shrink: 0;
       }
-    
+
       &::after {
         content: '';
         display: block;
@@ -50,7 +50,7 @@ main#list {
 // Responsive
 @mixin responsive--list() {
   main#list {
-    padding: 1em 1.2em;
+    padding: 1em 1.5em;
 
     section.year {
       font-size: 1em;

assets/sass/pages/_single.scss

@@ -3,7 +3,7 @@
 // Post Styles
 main#single {
   max-width: 910px;
-  padding: 1em 3em;
+  padding: 1em 2.5em;
   margin: 0 auto;
 
   article div {
@@ -38,7 +38,7 @@ main#single {
         display: block;
         font-size: 0.9em;
         font-style: normal;
-        color: $color-light;
+        color: $color-medium;
         text-align: center;
       }
 
@@ -107,20 +107,20 @@ main#single {
       div.highlight, code {
         // https://markdotto.com/2018/02/07/github-system-fonts/
         font-family: $system-fonts-monospace;
-        background: $color-super-duper-light;
+        background: $color-super-light;
         font-size: 0.9em;
         page-break-inside: avoid;
       }
 
       // inline code in paragraphs
       p code {
-        border: 1px solid $color-super-light;
+        border: 1px solid $color-light;
         padding: 0.2em;
       }
 
       // code fences
       div.highlight {
-        border: 1px solid $color-super-light;
+        border: 1px solid $color-light;
         border-left: 3px solid $color-links;
         line-height: 1.6;
         max-width: 100%;
@@ -149,10 +149,10 @@ main#single {
       }
 
       div#byline {
-        color: $color-light;
+        color: $color-medium;
         font-size: 0.85em;
         line-height: 1.5;
-        letter-spacing: 1px;
+        letter-spacing: 0.08em;
 
         a {
           color: inherit;
@@ -167,7 +167,7 @@ main#single {
             display: inline;
             margin: 0 0.7em;
             text-transform: uppercase;
-            letter-spacing: 2px;
+            letter-spacing: 0.15em;
           }
         }
       }
@@ -179,13 +179,10 @@ main#single {
 // Responsive
 @mixin responsive--single() {
   main#single {
-    padding: 0.8em 1.2em;
+    padding: 0.8em 1.5em;
 
     article {
-      width: 100%;
-      max-width: 100%;
-
-      div#info h1 {
+      div#meta h1 {
         font-size: 1.7em;
       }
     }

assets/sass/pages/_videos.scss

@@ -2,9 +2,14 @@
 
 // Video Styles
 main#video {
-  margin: 20px auto;
+  margin: 0 auto;
+  padding: 1.5em 0;
   text-align: center;
 
+  h1 {
+    margin-top: 0;
+  }
+
   p {
     font-size: 0.85em;
     line-height: 1.5em;
@@ -27,16 +32,16 @@ main#video {
 // Responsive
 @mixin responsive--videos() {
   main#video {
-    margin: 20px 0;
+    padding: 1em 0;
 
     h1 {
       font-size: 1.6em;
-      padding: 0 15px;
+      padding: 0 0.6em;
     }
 
     video {
       width: 100%;
       height: auto;
     }
-  }  
+  }
 }