uniform width on all pages

assets/sass/abstracts/_settings.scss

@@ -17,7 +17,7 @@ $system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono",
 // stylelint-enable indentation
 
 // Width at which to switch to mobile styles
-$responsive-width: 820px;
+$responsive-width: 780px;
 
 // Fancy link underline settings
 $link-underline-opacity: 40%;

assets/sass/components/_footer.scss

@@ -22,7 +22,7 @@ footer {
 
   div#row {
     width: 100%;
-    max-width: 978px;
+    max-width: $max-width;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;

assets/sass/components/_global.scss

@@ -13,6 +13,11 @@ body {
 }
 
 main {
+  max-width: $max-width;
+  margin: 0 auto;
+  padding-left: 1.5em;
+  padding-right: 1.5em;
+
   @include themed() {
     color: t(color-text);
   }

assets/sass/components/_header.scss

@@ -3,6 +3,8 @@
 // Global Header Styles
 header {
   width: 100%;
+  padding: 0.25em 1.7em;
+  box-sizing: border-box;
 
   @include themed() {
     border-bottom: 1px solid t(color-kinda-light);
@@ -11,8 +13,7 @@ header {
 
   nav {
     width: 100%;
-    max-width: 1032px;
+    max-width: $max-width;
-    padding: 0.25em 1.75em;
     margin: 0 auto;
     box-sizing: border-box;
     display: flex;
@@ -123,49 +124,51 @@ header {
 
 // Responsive
 @mixin responsive--header() {
-  header nav {
+  header {
     padding: 0.1em 1.25em;
 
-    a#logo {
+    nav {
-      img,
+      a#logo {
-      svg {
+        img,
-        width: 40px;
+        svg {
-        height: 60px;
+          width: 40px;
-      }
+          height: 60px;
+        }
 
-      h1#name {
+        h1#name {
-        display: none;
+          display: none;
-      }
-    }
-
-    ul {
-      font-size: 1.7em;
-
-      li {
-        margin-left: 0.85em;
-
-        a {
-          span.icon {
-            font-size: 0.9em;
-          }
-
-          // hide text next to emojis on mobile
-          span.text {
-            display: none;
-          }
-
-          &:hover {
-            transform: scale(1.4);
-          }
         }
       }
 
-      // Dark mode toggle
+      ul {
-      button#dark-mode-toggle {
+        font-size: 1.7em;
-        // TODO: figure out need for weird magic numbers here
+
-        height: 1.025em;
+        li {
-        width: 0.75em;
+          margin-left: 0.85em;
-        margin-top: 0.125em;
+
+          a {
+            span.icon {
+              font-size: 0.9em;
+            }
+
+            // hide text next to emojis on mobile
+            span.text {
+              display: none;
+            }
+
+            &:hover {
+              transform: scale(1.4);
+            }
+          }
+        }
+
+        // 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.125em;
+        }
       }
     }
   }

assets/sass/pages/_etc.scss

@@ -2,9 +2,8 @@
 
 // Video Styles
 main#etc {
-  max-width: $max-width;
+  padding-top: 1.5em;
-  padding: 1.5em 2em;
+  padding-bottom: 1.5em;
-  margin: 0 auto;
 
   h1 {
     margin-top: 0;

assets/sass/pages/_home.scss

@@ -3,9 +3,8 @@
 // Home Styles
 main#home {
   font-size: 1.1em;
-  max-width: 980px;
+  padding-top: 1.5em;
-  padding: 1.5em 1.5em 0.5em 1.5em;
+  padding-bottom: 0.5em;
-  margin: 0 auto;
 
   h2 {
     margin: 0 0 0.6em 0;

assets/sass/pages/_list.scss

@@ -2,9 +2,8 @@
 
 // Archive/List Styles
 main#list {
-  max-width: 980px;
+  padding-top: 1.5em;
-  padding: 1.5em 1.5em 0.25em 1.5em;
+  padding-bottom: 0.25em;
-  margin: 0 auto;
 
   section.year {
     font-size: 1.05em;

assets/sass/pages/_single.scss

@@ -2,9 +2,8 @@
 
 // Post Styles
 main#single {
-  max-width: $max-width;
+  padding-top: 1em;
-  padding: 1em 1.5em;
+  padding-bottom: 1em;
-  margin: 0 auto;
 
   div#meta {
     font-size: 0.85em;
@@ -28,6 +27,7 @@ main#single {
   h1#title {
     margin-top: 0.3em;
     margin-bottom: 0.6em;
+    margin-left: -0.03em;  // TODO: why is this indented slightly?
     font-size: 2.2em;
     line-height: 1.3;
     font-weight: 700;

assets/sass/pages/_videos.scss

@@ -2,7 +2,6 @@
 
 // Video Styles
 main#video {
-  margin: 0 auto;
   padding: 1.5em 0;
   text-align: center;
 

config.toml

@@ -26,7 +26,7 @@ disableAliases = true
   description = "Hi there! I'm a frontend web developer based in Boston, Massachusetts specializing in the JAMstack, modern JavaScript frameworks, and progressive web apps."
   domain = "jarv.is"
   mainSection = "notes"
-  pageMaxWidth = 910
+  pageMaxWidth = 940
   defaultImage = "img/me_large.jpg"
   github = "jakejarvis/jarv.is"
   facebookAppID = "3357248167622283"