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

docs/_layouts/docs.html

@@ -17,12 +17,18 @@
         <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
           {% include nav-docs.html %}
         </div>
-        <main class="col-12 col-md-9 col-xl-auto py-md-3 pl-md-5 bd-content" role="main">
+        <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
           <h1 class="bd-title" id="content">{{ page.title }}</h1>
           <p class="bd-lead">{{ page.description }}</p>
           {% include ads.html %}
           {{ content }}
         </main>
+
+        {% if page.toc %}
+          <div class="d-none d-xl-block col-xl-2 bd-toc">
+            {{ content | toc_only }}
+          </div>
+        {% endif %}
       </div>
     </div>
 

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;
-  }
-}

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;
     }
   }
 }

docs/getting-started/introduction.md

@@ -4,18 +4,13 @@ title: Introduction
 description: Get started with Bootstrap, the world's most popular framework for building responsive, mobile-first sites, with the Bootstrap CDN and a template starter page.
 group: getting-started
 redirect_from: "/getting-started/"
+toc: true
 ---
 
 <!-- Bootstrap is the world's most popular framework for building responsive, mobile-first sites and applications. Inside you'll find high quality HTML, CSS, and JavaScript to make starting any project easier than ever. -->
 
 <!-- Here's how to quickly get started with the Bootstrap CDN and a template starter page. -->
 
-
-## Contents
-
-* Will be replaced with the ToC, excluding the "Contents" header
-{:toc}
-
 ## Quick start
 
 Looking to quickly add Bootstrap to your project? Use the Bootstrap CDN, provided for free by the folks at MaxCDN. Using a package manager or need to download the source files? [Head to the downloads page.]({{ site.baseurl }}/getting-started/download/)