#43 Improve breadcrumbs

Signed-off-by: James Hunt <10615884+thetwopct@users.noreply.github.com> Signed-off-by: James Hunt <10615884+thetwopct@users.noreply.github.com>
cncf · May 21, 2024 · 5150947 · 5150947
1 parent 1a3b099
commit 5150947
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 10 deletions.
diff --git a/assets/scss/_blog.scss b/assets/scss/_blog.scss
@@ -21,7 +21,7 @@
             margin-block-start: 0;
             margin-block-end: 0;
             color: #000;
-            font-family: Nunito;
+            font-family: var(--rounded-font-family);
             font-size: 14px;
             @media (min-width: 600px) {
                 font-size: 16px;

diff --git a/assets/scss/_breadcrumb.scss b/assets/scss/_breadcrumb.scss
@@ -1,11 +1,24 @@
-.breadcrumb {
+.breadcrumbs {
     margin-block-start: 70px;
     margin-block-end: 0;
     @media (min-width: $desktop-width) {
         margin-block-start: 100px;
         margin-block-end: 0;
     }
-    font-family: Nunito;
+    font-family: var(--rounded-font-family);
+}
+
+.breadcrumbs-list {
+    list-style-image: none;
+    display: flex;
+    align-items: baseline;
+    gap: 10px;
+    flex-wrap: wrap;
+    list-style: none;
+    padding-inline-start: 0;
+}
+
+.breadcrumb {
     font-size: 14px;
     @media (min-width: 600px) {
         font-size: 16px;
@@ -21,13 +34,19 @@
     }
 }
 
-.breadcrumb + .title,
-.breadcrumb + h1,
-.breadcrumb + .h1 {
-    margin-block-start: 30px;
+.breadcrumb + .breadcrumb::before {
+    content: "»";
+    margin-right: 5px;
+    color: var(--gray-600);
+}
+
+.breadcrumbs + .title,
+.breadcrumbs + h1,
+.breadcrumbs + .h1 {
+    margin-block-start: 20px;
     margin-block-end: 50px;
     @media (min-width: $desktop-width) {
-        margin-block-start: 60px;
+        margin-block-start: 50px;
         margin-block-end: 80px;
     }
 }
diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss
@@ -126,7 +126,7 @@
             display: block;
             color: var(--menu-link-color);
             text-decoration: none;
-            font-family: Nunito;
+            font-family: var(--rounded-font-family);
             font-size: 16px;
             font-style: normal;
             font-weight: 700;

diff --git a/layouts/partials/breadcrumb.html b/layouts/partials/breadcrumb.html
@@ -1 +1,10 @@
-<p class="breadcrumb"><a href="/{{ .Section }}/">{{ .Section | humanize }}</a></p>
+<nav class="breadcrumbs" aria-label="breadcrumbs">
+    <ol class="breadcrumbs-list">
+        {{- range .Ancestors.Reverse }}
+        <li class="breadcrumb">
+            <a href="{{ .RelPermalink }}">{{ if .IsHome }}{{ i18n "breadcrumb_home" | default "Home" }}{{ else }}{{ .Title }}{{ end
+                }}</a>
+        </li>
+        {{- end }}
+    </ol>
+</nav>