themes/vanilla/assets/scss/margin.scss

@@ -2,21 +2,20 @@
 @import "mixins.scss";
 
 $margin-width: 30rem;
-$margin-inner-offset: 0.5rem;
-$margin-outer-offset: 1rem;
+$margin-offset: 1.5rem;
 
 @mixin below-two-margins {
     @media screen and
-        (max-width: $container-width-threshold +
-            2 * ($margin-width + $margin-inner-offset + $margin-outer-offset)) {
+        (max-width: $container-width +
+            2 * ($margin-width + 2 * $margin-offset)) {
         @content;
     }
 }
 
 @mixin below-one-margin {
     @media screen and
-        (max-width: $container-width-threshold +
-            ($margin-width + $margin-inner-offset + $margin-outer-offset)) {
+        (max-width: $container-width +
+            ($margin-width + 3 * $margin-offset)) {
         @content;
     }
 }
@@ -30,7 +29,7 @@ $margin-outer-offset: 1rem;
 
 @mixin margin-content-left {
     left: 0;
-    margin-left: -($margin-width + $container-min-padding + $margin-inner-offset);
+    margin-left: -($margin-width + $margin-offset);
 
     @include below-two-margins {
         display: none;
@@ -39,7 +38,7 @@ $margin-outer-offset: 1rem;
 
 @mixin margin-content-right {
     right: 0;
-    margin-right: -($margin-width + $container-min-padding + $margin-inner-offset);
+    margin-right: -($margin-width + $margin-offset);
 
     @include below-one-margin {
         display: none;

themes/vanilla/assets/scss/mixins.scss

@@ -6,7 +6,7 @@
 }
 
 @mixin below-container-width {
-    @media screen and (max-width: $container-width-threshold){
+    @media screen and (max-width: $container-width){
         @content;
     }
 }

themes/vanilla/assets/scss/sidenotes.scss

@@ -2,6 +2,8 @@
 @import "mixins.scss";
 @import "margin.scss";
 
+$sidenote-width: 30rem;
+$sidenote-offset: 1.5rem;
 $sidenote-padding: 1rem;
 $sidenote-highlight-border-width: .2rem;
 

themes/vanilla/assets/scss/style.scss

@@ -1,7 +1,6 @@
 @import "variables.scss";
 @import "mixins.scss";
 @import "margin.scss";
-@import "toc.scss";
 
 body {
   font-family: $font-body;
@@ -45,7 +44,6 @@ pre code {
 
 div.highlight table {
     border: $code-border !important;
-    border-radius: 0px;
 
     pre {
         margin: 0;
@@ -64,17 +62,15 @@ div.highlight table {
   box-sizing: border-box;
 
   @include below-container-width {
-      padding: 0 $container-min-padding 0 $container-min-padding;
-      margin: 0;
-      max-width: $container-width + 2 * $container-min-padding;
+      padding: 0rem 1rem 0rem 1rem;
   }
 
   @include below-two-margins {
-      left: -($margin-width + $margin-inner-offset + $margin-outer-offset)/2;
+      left: -($margin-width + $margin-offset)/2;
   }
 
   @include below-one-margin {
-      left: 0;
+      position: initial;
   }
 }
 
@@ -83,7 +79,8 @@ div.highlight table {
   background-color: $primary-color;
   border: none;
   color: white;
-  transition: color 0.25s, background-color 0.25s;
+  transition: color 0.25s;
+  transition: background-color 0.25s;
   text-align: left;
 
   &:focus {
@@ -242,3 +239,54 @@ figure {
         text-align: center;
     }
 }
+
+.table-of-contents {
+    @include margin-content;
+    @include margin-content-left;
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+
+    em {
+        font-style: normal;
+        font-weight: bold;
+        font-size: 1.2em;
+        display: block;
+        margin-bottom: 1rem;
+    }
+
+    #TableOfContents > ul {
+        padding-left: 0;
+    }
+
+    nav {
+        width: auto;
+        margin: 0px;
+    }
+
+    ul {
+        position: relative;
+        list-style: none;
+        padding-left: 2rem;
+        margin: 0px;
+    }
+
+    li {
+        position: relative;
+    }
+
+    a {
+        padding: 0;
+    }
+
+    div.wrapper {
+        @include bordered-block;
+        padding: 1rem;
+        background-color: $toc-color;
+        border-color: $toc-border-color;
+
+        @include below-two-margins {
+            width: auto;
+        }
+    }
+}

themes/vanilla/assets/scss/toc.scss

@@ -1,49 +0,0 @@
-@import "variables.scss";
-@import "mixins.scss";
-
-$toc-color: $code-color;
-$toc-border-color: $code-border-color;
-
-.table-of-contents {
-    @include margin-content;
-    @include margin-content-left;
-    display: flex;
-    flex-direction: column;
-    align-items: end;
-    margin-bottom: 1rem;
-
-    em {
-        font-style: normal;
-        font-weight: bold;
-        font-size: 1.2em;
-        display: block;
-        margin-bottom: 0.5rem;
-    }
-
-    #TableOfContents > ul {
-        padding-left: 0;
-    }
-
-    nav {
-        margin: 0px;
-    }
-
-    ul {
-        list-style: none;
-        padding-left: 2rem;
-        margin: 0px;
-    }
-
-    a {
-        padding: 0;
-    }
-
-    div.wrapper {
-        @include bordered-block;
-        padding: 1rem;
-        background-color: $toc-color;
-        border-color: $toc-border-color;
-        box-sizing: border-box;
-        max-width: 100%;
-    }
-}

themes/vanilla/assets/scss/variables.scss

@@ -1,16 +1,16 @@
 $container-width: 45rem;
-$container-min-padding: 1rem;
-$container-width-threshold: $container-width + 2 * $container-min-padding;
 $standard-border-width: .075rem;
 
 $primary-color: #36e281;
 $border-color: #bfbfbf;
 $code-color: #f0f0f0;
 $code-border-color: darken($code-color, 10%);
+$toc-color: $code-color;
+$toc-border-color: $code-border-color;
 
 $font-heading: "Lora", serif;
 $font-body: "Raleway", serif;
 $font-code: "Inconsolata", monospace;
 
 $standard-border: $standard-border-width solid $border-color;
-$code-border: $standard-border-width solid $code-border-color;
+$code-border: 0.0375rem solid $code-border-color;