swap kramdown toc for jekyll-toc plugin, update page layout to only show on xl and above

2 files changed, 35 insertions, 44 deletions

diff --git a/docs/assets/scss/_content.scss b/docs/assets/scss/_content.scss
index c8749c1d4..33d89d40d 100644
--- a/docs/assets/scss/_content.scss
+++ b/docs/assets/scss/_content.scss
@@ -5,32 +5,6 @@
 //
 
 .bd-content {
-  @include media-breakpoint-up(xl) {
-    flex: 1;
-    padding-right: 20%;
-
-    #contents {
-      display: none;
-    }
-    #markdown-toc {
-      position: fixed;
-      top: 5rem;
-      right: 0;
-      width: 20%;
-      max-height: calc(100vh - 8rem);
-      padding-right: 1.5rem;
-      padding-left: 3rem;
-      overflow-y: auto;
-      font-size: .85rem;
-    }
-  }
-
-  @media (min-width: 2000px) {
-    #markdown-toc {
-      padding-left: 6rem;
-    }
-  }
-
   // Hack the sticky header
   h2[id],
   h3[id] {
@@ -126,21 +100,3 @@
     font-weight: 300;
   }
 }
-
-
-//
-// Markdown generated ToC
-//
-
-#markdown-toc {
-  // Hide the first child li because it's always going to be "Contents".
-  > li:first-child {
-    display: none;
-  }
-
-  ul {
-    padding-left: 2rem;
-    margin-top: .25rem;
-    margin-bottom: .25rem;
-  }
-}
diff --git a/docs/assets/scss/_sidebar.scss b/docs/assets/scss/_sidebar.scss
index d8e5f9304..55bed3036 100644
--- a/docs/assets/scss/_sidebar.scss
+++ b/docs/assets/scss/_sidebar.scss
@@ -4,6 +4,40 @@
 // Side navigation
 //
 
+.bd-toc {
+  position: sticky;
+  top: 4rem;
+  max-height: calc(100vh - 4rem);
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+  overflow-y: auto;
+  font-size: .85rem;
+}
+
+.section-nav {
+  padding-left: 0;
+  border-left: 1px solid #eee;
+
+  ul {
+    padding-left: 1rem;
+  }
+}
+
+.toc-entry {
+  display: block;
+
+  a {
+    display: block;
+    padding: .25rem 1.5rem;
+    color: #99979c;
+
+    &:hover {
+      color: $brand-primary;
+      text-decoration: none;
+    }
+  }
+}
+
 .bd-sidebar {
   background-color: #f5f5f5;
   border-right: 1px solid rgba(0,0,0,.1);
@@ -93,6 +127,7 @@
 
     > .bd-sidenav {
       display: block;
+      padding-bottom: .75rem;
     }
   }
 }