Initial prototype of docsite styles and layout

_includes/base/footer.html

@@ -1,5 +1,5 @@
 <!-- Footer -->
-<footer class="footer bg-light">
+<footer id="scripted-footer" class="footer bg-light">
   <div class="container">
     <div class="row">
       <div class="col-lg-6 h-100 text-center text-lg-left my-auto">

_includes/base/side_nav.html

@@ -0,0 +1,22 @@
+
+<div class="docsite-side-nav">
+  <div><a href="#">Section 1</a></div>
+  <div>
+    <a href="#">Section 2</a>
+    <ul>
+      <li><a href="#">Getting Started</a></li>
+      <li class="docsite-side-nav-selection">Getting Started</li>
+      <li><a href="#">Getting Started</a></li>
+      <li><a href="#">Getting Started</a></li>
+      <li><a href="#">Getting Started</a></li>
+      <li><a href="#">Getting Started</a></li>
+      <li><a href="#">Getting Started</a></li>
+      <li><a href="#">Getting Started</a></li>
+      <li><a href="#">Getting Started</a></li>
+      <li><a href="#">Getting Started</a></li>
+    </ul>
+  </div>
+
+  <div><a href="#">Section 3</a></div>
+  <div><a href="#">Section 4</a></div>
+</div>

_includes/base/top_nav.html

@@ -1,5 +1,5 @@
 <!-- Navigation -->
-<nav class="navbar navbar-light bg-light static-top">
+<nav class="navbar sticky-top navbar-light bg-light flex-md-nowrap p-0 docsite-header">
   <div class="container-fluid">
     <a class="navbar-brand" href="{{ site.baseurl }}/">
       <img src={{ "/images/rush-horiz.svg" | absolute_url }}

_layouts/custom_page.html

@@ -0,0 +1,13 @@
+---
+layout: default
+---
+
+<article class="page">
+  <div class="container" style="padding: 2rem;">
+    <h1>{{ page.title }}</h1>
+
+    <div class="entry">
+      {{ content }}
+    </div>
+  </div>
+</article>

_layouts/page.html

@@ -2,12 +2,36 @@
 layout: default
 ---
 
-<article class="page">
-  <div class="container" style="padding: 2rem;">
-    <h1>{{ page.title }}</h1>
+<div class="container-fluid">
+  <div class="row">
+    <nav id="scripted-sidebar" class="col-md-2 d-none d-md-block docsite-sidebar">
+      {% include base/side_nav.html %}
+    </nav>
 
-    <div class="entry">
-      {{ content }}
-    </div>
+    <article role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
+      <div class="pt-3 pb-2 mb-3 border-bottom">
+        <h1>{{ page.title }}</h1>
+        <div class="entry">
+          {{ content }}
+        </div>
+      </div>
+    </article>
   </div>
-</article>
+</div>
+
+<script>
+function updateScriptedSidebar() {
+  let sidebar = document.getElementById('scripted-sidebar');
+  let mainFooter = document.getElementById('scripted-footer');
+  if (sidebar && mainFooter) {
+    // When the footer scrolls into view, reduce the sidebar height so that it
+    // doesn't overlap the footer.  Bootstrap 4 removed the "Affix" plugin, so
+    // we need custom script for this.
+    let nudge = Math.max(window.innerHeight - mainFooter.getBoundingClientRect().top, 0);
+    sidebar.style.setProperty('--scripted-sidebar-nudge', nudge + 'px');
+  }
+}
+
+window.addEventListener("scroll", updateScriptedSidebar);
+window.addEventListener("resize", updateScriptedSidebar);
+</script>

_sass/_docsite.scss

@@ -0,0 +1,52 @@
+// The "docsite" layout with a sticky header and scripted sidebar
+
+.docsite-header {
+  height: 100px;
+}
+
+.docsite-side-nav {
+  margin: 2rem;
+
+  div {
+    font-weight: 600;
+    padding-bottom: 1rem;
+  }
+  a {
+    color: $dark;
+  }
+
+  ul {
+    @extend .list-unstyled;
+    font-weight: 400;
+  }
+
+  li {
+    font-size: 90%;
+  }
+}
+
+.docsite-side-nav-selection {
+  font-weight: 600;
+  color: $primary;
+}
+
+.docsite-sidebar {
+  position: fixed;
+  top: 48px;
+  --scripted-sidebar-nudge: 300px;
+  height: calc(100vh - 48px - var(--scripted-sidebar-nudge));
+  overflow-x: hidden;
+  overflow-y: auto; /* show a scrollbar when needed */
+}
+
+html {
+  height: 100%;
+}
+
+body {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  margin: 0;
+}

styles.scss

@@ -15,4 +15,6 @@
 @import "testimonials.scss";
 @import "call_to_action.scss";
 @import "footer.scss";
-@import "algolia.scss"
+@import "algolia.scss";
+
+@import "docsite.scss";