Improve right sidebar styling to better handle position: fixed content

_assets/css/_archive.scss

@@ -5,14 +5,8 @@
 .archive {
   margin-bottom: 2em;
   @include breakpoint($medium) {
-    @include span(10 last);
+    @include span(10 of 12 last);
-  }
+    @include suffix(3 of 12);
-}
-
-.archive__item {
-  // keep content from going to wide when toc is disabled
-  @include breakpoint($large) {
-    max-width: span(7 of 10);
   }
 }
 

_assets/css/_page.scss

@@ -12,7 +12,8 @@
 
 .page {
   @include breakpoint($medium) {
-    @include span(10 last);
+    @include span(10 of 12 last);
+    padding-right: $right-sidebar-width;
   }
 }
 
@@ -22,17 +23,10 @@
 }
 
 .page__content {
+  position: relative;
   p, li {
     font-size: 16px;
   }
-  // keep content from going to wide when toc is disabled
-  @include breakpoint($large) {
-    > h1, > h2, > h3, > h4, > h5, > h6, > hr,
-    > p, > ul, > ol, > blockquote, > table, > figure,
-    > div, > section, > img, > video, > form {
-      max-width: span(7 of 10);
-    }
-  }
 }
 
 .page__hero {

_assets/css/_sidebar.scss

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

_assets/css/_toc.scss

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

_assets/css/_utilities.scss

@@ -131,7 +131,9 @@ body:hover .visually-hidden button {
 /* file page content container */
 
 .full {
-  max-width: 100% !important;
+  @include breakpoint($large){
+    margin-right: -1 * $right-sidebar-width;
+  }
 }
 
 /*

_assets/css/_variables.scss

@@ -81,18 +81,21 @@ $x-large                      : 1440px;
    Grid
    ========================================================================== */
 
+$right-sidebar-width          : 300px;
+
 $susy: (
   columns: 12,
+  // column-width: 90px,
   gutters: 1/4,
   math: fluid,
   output: float,
-  gutter-position: inside,
+  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,
-  // ),
+  ),
 );