Make table of contents dark.

themes/vanilla/assets/scss/style.scss

@@ -261,12 +261,14 @@ figure {
 
     nav {
         width: auto;
+        margin: 0px;
     }
 
     ul {
         position: relative;
         list-style: none;
         padding-left: 2rem;
+        margin: 0px;
     }
 
     li {
@@ -276,4 +278,15 @@ figure {
     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/variables.scss

@@ -2,14 +2,15 @@ $container-width: 45rem;
 $standard-border-width: .075rem;
 
 $primary-color: #36e281;
-$primary-color-dark: darken($primary-color, 10%);
-$code-color: #f0f0f0;
-$code-color-dark: darken($code-color, 10%);
 $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 darken($code-color, 10%);
+$code-border: 0.0375rem solid $code-border-color;

themes/vanilla/layouts/blog/single.html

@@ -10,12 +10,14 @@
 </div>
 
 <div class="post-content">
+    {{ if not (eq .TableOfContents "<nav id=\"TableOfContents\"></nav>") }}
     <div class="table-of-contents">
-        <div>
+        <div class="wrapper">
             <em>Table of Contents</em>
             {{ .TableOfContents }}
         </div>
     </div>
+    {{ end }}
     {{ .Content }}
 </div>
 {{ end }}