Clean up some styles.

themes/vanilla/assets/scss/margin.scss

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

themes/vanilla/assets/scss/sidenotes.scss

@@ -2,8 +2,6 @@
 @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,6 +1,7 @@
 @import "variables.scss";
 @import "mixins.scss";
 @import "margin.scss";
+@import "toc.scss";
 
 body {
   font-family: $font-body;
@@ -44,6 +45,7 @@ pre code {
 
 div.highlight table {
     border: $code-border !important;
+    border-radius: 0px;
 
     pre {
         margin: 0;
@@ -62,15 +64,17 @@ div.highlight table {
   box-sizing: border-box;
 
   @include below-container-width {
-      padding: 0rem 1rem 0rem 1rem;
+      padding: 0 $container-min-padding 0 $container-min-padding;
+      margin: 0;
+      max-width: $container-width + 2 * $container-min-padding;
   }
 
   @include below-two-margins {
-      left: -($margin-width + $margin-offset)/2;
+      left: -($margin-width + $margin-inner-offset + $margin-outer-offset)/2;
   }
 
   @include below-one-margin {
-      position: initial;
+      left: 0;
   }
 }
 
@@ -79,8 +83,7 @@ div.highlight table {
   background-color: $primary-color;
   border: none;
   color: white;
-  transition: color 0.25s;
+  transition: color 0.25s, background-color 0.25s;
-  transition: background-color 0.25s;
   text-align: left;
 
   &:focus {
@@ -239,54 +242,3 @@ 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

@@ -0,0 +1,49 @@
+@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: 0.0375rem solid $code-border-color;
+$code-border: $standard-border-width solid $code-border-color;