sidebar: flow TOC into the main content

Give the sidebar the same background as the main content and make the
border wrap around the table of contents.

Author: To1ne

assets/sass/sidebar.scss

@@ -12,39 +12,41 @@ hr.sidebar {
 aside {
   width: 218px;
   margin-bottom: 35px;
-  position: sticky;
   top: 0;
   max-height: 100vh;
-  overflow-y: auto;
   /* align with the top of the content */
   padding-top: 46px;
 }
 
 #toc {
   border: 1px solid var(--main-border);
   padding: .5em;
-  margin-top: 1rem;
-  border-top: 1px solid var(--main-border);
-  background: var(--sidebar-toc-bg-color);
-  margin-right: 0.5rem;
-}
+  margin: 0 -1px 0 0; /* eat the #main border */
+  border-right: none;
+  z-index: 100;
+  position: relative;
+  background: var(--main-bg);
 
-#toc ul {
-  list-style-type: square;
-}
+  summary {
+
+  }
+
+  ul {
+    list-style-type: square;
 
-#toc li {
-  /* use margin instead of line height for spacing because sometimes the
-     headings wrap onto multiple lines */
-  line-height: 1.2em;
-  margin: 6px 0;
+    li {
+      /* use margin instead of line height for spacing because sometimes the
+         headings wrap onto multiple lines */
+      line-height: 1.2em;
+      margin: 6px 0;
+      font-size: 0.8em;
+    }
+  }
 }
 
 aside.sidebar {
-  font-size: 13px !important;
   line-height: $base-line-height * 0.75;
   p {
-    font-size: 13px !important;
     line-height: $base-line-height * 0.75;
   }
 
@@ -110,6 +112,11 @@ aside.sidebar.active {
   display: none;
 }
 
+aside details,
+aside nav {
+  padding: 0 1.5em;
+}
+
 // Breakpoint ----------------
 @media (max-width: $default) {
   .sidebar-btn {