Adjust widths

_assets/css/_footer.scss

@@ -7,6 +7,10 @@
   @include clearfix;
   margin-top: 3em;
   padding: 0 2em 3em;
+  @include breakpoint($medium) {
+    padding-left: 1em;
+    padding-right: 1em;
+  }
   a {
     text-decoration: none;
     &:hover {

_assets/css/_masthead.scss

@@ -9,6 +9,10 @@
   font-family: $sans-serif-narrow;
   font-weight: 700;
   text-transform: uppercase;
+  @include breakpoint($medium) {
+    padding-left: 1em;
+    padding-right: 1em;
+  }
   a {
     text-decoration: none;
   }

_assets/css/_page.scss

@@ -9,6 +9,10 @@
   margin-top: 2em;
   padding-left: 2em;
   padding-right: 2em;
+  @include breakpoint($medium) {
+    padding-left: 1em;
+    padding-right: 1em;
+  }
 }
 
 .page {

_assets/css/_sidebar.scss

@@ -7,7 +7,7 @@
     display: block;
     margin-bottom: 1em;
     @include span(2 of 12);
-    @include suffix(0.5 of 12);
+    @include suffix(0.25 of 12);
   }
   h2, h3, h4, h5, h6 {
     font-family: $sans-serif-narrow;

_assets/css/_toc.scss

@@ -9,15 +9,13 @@
   text-transform: uppercase;
   letter-spacing: 1px;
   background-color: #fff;
-  // &.sticky {
+  @include breakpoint($large) {
-    @include breakpoint($large) {
+    position: absolute;
-      position: absolute;
+    top: 0;
-      top: 0;
+    right: calc(50% - 512px + 1em); // 50% - 1/2 of wrapper's max-width + wrapper padding
-      right: calc(50% - 512px + 2em); // 50% - 1/2 of wrapper's max-width + wrapper padding
+    width: $right-sidebar-width;
-      width: $right-sidebar-width;
+    padding-left: 2em;
-      padding-left: 2em;
+  }
-    }
-  // }
 }
 
 .toc__title {

_assets/css/_variables.scss

@@ -92,10 +92,10 @@ $susy: (
   gutter-position: after,
   container: $large,
   global-box-sizing: border-box,
-  debug: (
+  // debug: (
-    image: show,
+  //   image: show,
-    color: blue,
+  //   color: blue,
-    output: overlay,
+  //   output: overlay,
-    toggle: top right,
+  //   toggle: top right,
-  ),
+  // ),
 );