feat: Sticky Breadcrumbs

Resolves #237

Author: oodamien

src/css/breadcrumbs.css

@@ -1,5 +1,8 @@
+.breadcrumbs-container {
+  padding-top: 2rem;
+}
+
 .breadcrumbs {
-  margin: 2.5rem 0 0;
   max-width: var(--doc-max-width);
   flex: 1 1;
   padding: 0;
@@ -14,6 +17,20 @@
     max-width: var(--doc-max-width--desktop);
     min-width: 0;
   }
+  .breadcrumbs-container {
+    position: fixed;
+    top: 80px;
+    padding: 1rem 0;
+    right: var(--toc-width--widescreen);
+    left: var(--nav-width);
+    margin-left: 3rem;
+    margin-right: 3rem;
+    background-color: var(--body-background-color);
+    border-bottom: 1px solid var(--nav-panel-divider-color);
+  }
+  .doc {
+    padding-top: 60px;
+  }
 }
 
 a + .breadcrumbs {

src/partials/breadcrumbs.hbs

@@ -1,20 +1,22 @@
-<nav class="breadcrumbs" aria-label="breadcrumbs">
-  {{#if page.breadcrumbs}}
-  <ul>
-    {{#with page.componentVersion}}
-    {{#if (and ./title (ne ./title @root.page.breadcrumbs.0.content))}}
-    <li><a href="{{{relativize ./url}}}">{{{./title}}}</a></li>
+<div class="breadcrumbs-container">
+  <nav class="breadcrumbs" aria-label="breadcrumbs">
+    {{#if page.breadcrumbs}}
+    <ul>
+      {{#with page.componentVersion}}
+      {{#if (and ./title (ne ./title @root.page.breadcrumbs.0.content))}}
+      <li><a href="{{{relativize ./url}}}">{{{./title}}}</a></li>
+      {{/if}}
+      {{/with}}
+      {{#each page.breadcrumbs}}
+      <li>
+      {{~#if (and ./url (eq ./urlType 'internal'))~}}
+      <a href="{{{relativize ./url}}}">{{{./content}}}</a>
+      {{~else~}}
+      {{{./content}}}
+      {{~/if~}}
+      </li>
+      {{/each}}
+    </ul>
     {{/if}}
-    {{/with}}
-    {{#each page.breadcrumbs}}
-    <li>
-    {{~#if (and ./url (eq ./urlType 'internal'))~}}
-    <a href="{{{relativize ./url}}}">{{{./content}}}</a>
-    {{~else~}}
-    {{{./content}}}
-    {{~/if~}}
-    </li>
-    {{/each}}
-  </ul>
-  {{/if}}
-</nav>
+  </nav>
+</div>