From 1187c38f092d017a0b17a3305390cc5a54ed8911 Mon Sep 17 00:00:00 2001
From: Damien Vitrac <dvitrac@vmware.com>
Date: Tue, 28 May 2024 11:20:17 +0200
Subject: [PATCH] fix: Update breadcrumbs

Resolves #248
---
 src/css/breadcrumbs.css  | 26 ++++++++++----------------
 src/partials/article.hbs |  4 ++--
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/css/breadcrumbs.css b/src/css/breadcrumbs.css
index 289004b..6d84b7b 100644
--- a/src/css/breadcrumbs.css
+++ b/src/css/breadcrumbs.css
@@ -1,9 +1,4 @@
-.breadcrumbs-container {
-  padding-top: 2rem;
-}
-
 .breadcrumbs {
-  max-width: var(--doc-max-width);
   flex: 1 1;
   padding: 0;
   line-height: var(--nav-line-height);
@@ -12,26 +7,24 @@
   font-size: calc(16 / var(--rem-base) * 1rem);
 }
 
+.breadcrumbs-container {
+  padding: 20px 0;
+  background-color: var(--body-background-color);
+  border-bottom: 1px solid var(--nav-panel-divider-color);
+}
+
 @media screen and (min-width: 1024px) {
   .breadcrumbs {
     max-width: var(--doc-max-width--desktop);
     min-width: 0;
   }
   .breadcrumbs-container {
-    position: fixed;
+    position: sticky;
     top: 83px;
-    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);
+    padding: 20px 20px;
+    margin: 0 -1rem;
     z-index: 99;
   }
-  .doc {
-    padding-top: 60px;
-  }
 }
 
 a + .breadcrumbs {
@@ -43,6 +36,7 @@ a + .breadcrumbs {
   flex-wrap: wrap;
   list-style: none;
   padding: 0;
+  margin: 0;
 }
 
 .breadcrumbs li {
diff --git a/src/partials/article.hbs b/src/partials/article.hbs
index 7a99727..f66a510 100644
--- a/src/partials/article.hbs
+++ b/src/partials/article.hbs
@@ -1,6 +1,6 @@
 <article class="doc">
-{{> article-latest}}
 {{> breadcrumbs}}
+{{> article-latest}}
 {{#with page.title}}
 <h1 id="page-title" class="page">{{{this}}}</h1>
 {{/with}}
@@ -10,4 +10,4 @@
 {{{page.contents}}}
 {{> nav-section-summary}}
 {{> pagination}}
-</article>
+</article>
\ No newline at end of file