Update

_sass/2017/components/h3-section-list.scss

@@ -18,16 +18,10 @@
 
   // Each section
   & > .h3-section {
+    @include gutter(padding);
     float: left;
-    padding: $gutter / 4;
     width: 100%;
   }
-
-  @media (min-width: 481px) {
-    & > .h3-section {
-      padding: $gutter / 2;
-    }
-  }
 }
 
 /*

_sass/2017/components/main-heading.scss

@@ -7,10 +7,11 @@
 
   & > h1 {
     @include font-size(6);
+    line-height: 1.2;
     font-weight: 300;
     font-family: $body-font;
     margin: 0;
-    padding: 0;
+    padding: 16px 0;
   }
 
   & > h1 > em {

_sass/2017/style.scss

@@ -1,75 +1,7 @@
-/*
+@import './variables';
- * Metrics
+@import '../vendor/modularscale';
- */
-
-$gutter: 32px;
-$column: 400px;
-
-/*
- * Fonts
- */
-
-$system-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-$body-font: 'Roboto', $system-font;
-$heading-font: 'Roboto', $system-font;
-$monospace-font: 'Fira Mono', Consolas, menlo, 'Andale Mono', 'Ubuntu Mono', monospace;
-
-/*
- * Base colors
- */
-
-$baseA: #8370bd; // indigo
-$baseB: #2b72a2; // blue
-$baseC: #17c694; // teal
-$baseM: #667788; // gray
-
-$baseB3: adjust-color($baseB, $lightness: 20%, $hue: -20deg);
-$baseB7: adjust-color($baseB, $lightness: -20%, $hue: 20deg);
-$baseM3: adjust-color($baseM, $lightness: -20%);
-$baseM4: adjust-color($baseM, $lightness: -10%);
-$baseM6: adjust-color($baseM, $lightness: 10%);
-$baseM7: adjust-color($baseM, $lightness: 20%);
-
-$body-bg: #f1f3f5;
-$gray-bg: #fcfcfc;
-$gray-text: $baseM;
-$text-color: #345;
-
-$line-color: rgba(50, 80, 150, 0.05);
-$dark-line-color: rgba(50, 80, 150, 0.14);
-
-//
-// Shadows
-//
-
-$shadow2:
-  0 1px 1px rgba($baseM, 0.30);
-
-$shadow3:
-  0 6px 8px rgba($baseM, 0.02),
-  0 1px 2px rgba($baseM, 0.20);
-
-$shadow6:
-  0 8px 12px rgba($baseB3, 0.1),
-  0 2px 3px rgba($baseB, 0.18);
-
-/*
- * Mod scale
- */
-
-$modularscale: (
-  base: 14px, ratio: 1.2,
-  480px: (base: 13px, ratio: 1.15),
-  768px: (base: 14px, ratio: 1.17),
-  1280px: (base: 14px, ratio: 1.2)
-);
-
-/*
- * Imports
- */
-
-@import './utils/modularscale';
 @import './utils/font-size';
+@import './utils/gutter';
 @import './utils/heading-style';
 @import './base/base';
 @import './markdown/code';

_sass/2017/utils/gutter.scss

@@ -0,0 +1,7 @@
+@mixin gutter ($property, $multiplier: 1) {
+  #{$property}: $gut * $multiplier;
+
+  @media (max-width: 480px) {
+    #{$property}: $gut-small * $multiplier;
+  }
+}

_sass/2017/utils/heading-style.scss

@@ -1,5 +1,5 @@
 @mixin heading-style {
-  margin: $gutter / 2;
+  margin: $gut;
   padding: 0;
   margin-bottom: 16px;
   padding-bottom: 16px;
@@ -7,14 +7,14 @@
   border-bottom: solid 1px $dark-line-color;
 
   @media (max-width: 768px) {
-    margin: $gutter / 2;
+    margin: $gut;
     margin-bottom: 8px;
     margin-top: 32px;
     padding-bottom: 8px;
   }
 
   @media (max-width: 480px) {
-    margin: $gutter / 4;
+    margin: $gut-small;
     margin-bottom: 8px;
     margin-top: 32px;
     padding-bottom: 8px;

_sass/2017/variables.scss

@@ -0,0 +1,66 @@
+/*
+ * Metrics
+ */
+
+$gut-small: 8px; // max 480px width
+$gut: 16px;
+$column: 400px;
+
+/*
+ * Fonts
+ */
+
+$system-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+$body-font: 'Roboto', $system-font;
+$heading-font: 'Roboto', $system-font;
+$monospace-font: 'Fira Mono', Consolas, menlo, 'Andale Mono', 'Ubuntu Mono', monospace;
+
+/*
+ * Base colors
+ */
+
+$baseA: #8370bd; // indigo
+$baseB: #2b72a2; // blue
+$baseC: #17c694; // teal
+$baseM: #667788; // gray
+
+$baseB3: adjust-color($baseB, $lightness: 20%, $hue: -20deg);
+$baseB7: adjust-color($baseB, $lightness: -20%, $hue: 20deg);
+$baseM3: adjust-color($baseM, $lightness: -20%);
+$baseM4: adjust-color($baseM, $lightness: -10%);
+$baseM6: adjust-color($baseM, $lightness: 10%);
+$baseM7: adjust-color($baseM, $lightness: 20%);
+
+$body-bg: #f1f3f5;
+$gray-bg: #fcfcfc;
+$gray-text: $baseM;
+$text-color: #345;
+
+$line-color: rgba(50, 80, 150, 0.05);
+$dark-line-color: rgba(50, 80, 150, 0.14);
+
+//
+// Shadows
+//
+
+$shadow2:
+  0 1px 1px rgba($baseM, 0.30);
+
+$shadow3:
+  0 6px 8px rgba($baseM, 0.02),
+  0 1px 2px rgba($baseM, 0.20);
+
+$shadow6:
+  0 8px 12px rgba($baseB3, 0.1),
+  0 2px 3px rgba($baseB, 0.18);
+
+/*
+ * Mod scale
+ */
+
+$modularscale: (
+  base: 14px, ratio: 1.2,
+  480px: (base: 13px, ratio: 1.15),
+  768px: (base: 14px, ratio: 1.17),
+  1280px: (base: 14px, ratio: 1.2)
+);