From d1154de4597937d0021de61b13886cf3952dc1b8 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Tue, 23 Jul 2024 08:53:34 -0700
Subject: [PATCH] Add a page navigation breadcrumb

This thing looks like a path. It lists the hierarchy of pages from the home page.
---
 assets/css/010_structure.css          |  1 -
 assets/css/099_breadcrumb.css         | 14 +++++++-------
 layouts/partials/page_breadcrumb.html |  7 +++----
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/assets/css/010_structure.css b/assets/css/010_structure.css
index 3d1287c..2db9a9f 100644
--- a/assets/css/010_structure.css
+++ b/assets/css/010_structure.css
@@ -55,7 +55,6 @@ main
   gap: var(--space-xl) 0;
 }
 
-.nav-breadcrumb,
 .site-header__content,
 .site-footer
 {
diff --git a/assets/css/099_breadcrumb.css b/assets/css/099_breadcrumb.css
index 53f74c2..c858ebc 100644
--- a/assets/css/099_breadcrumb.css
+++ b/assets/css/099_breadcrumb.css
@@ -16,6 +16,7 @@
   --item-spacing: var(--space-xxs);
 
   font-size: var(--text-s);
+  grid-column: main-start / main-end;
 
   ul, ol {
     display: flex;
@@ -24,16 +25,15 @@
   }
 
   li {
+    color: var(--gray6);
     list-style-type: none;
-  }
 
-  li:not(:first-child) {
-    margin-inline-start: var(--item-spacing);
-
-    &::before {
-      color: var(--gray5);
+    &::after {
       content: "/";
-      margin-inline-end: var(--item-spacing);
     }
   }
+
+  li::after, li:not(:first-child) {
+    margin-inline-start: var(--item-spacing);
+  }
 }
diff --git a/layouts/partials/page_breadcrumb.html b/layouts/partials/page_breadcrumb.html
index 2f0edc3..be084fd 100644
--- a/layouts/partials/page_breadcrumb.html
+++ b/layouts/partials/page_breadcrumb.html
@@ -3,11 +3,10 @@
     {{ range .Ancestors.Reverse }}
       {{- $title := .LinkTitle -}}
       {{- if .IsHome -}}
-        {{ $title = "/" }}
+        <li class="nav-breadcrumb__home"><a href="{{ .Permalink }}">{{ i18n "home" }}</a></li>
+      {{ else }}
+        <li><a href="{{ .Permalink }}">{{ $title }}</a></li>
       {{- end -}}
-      <li><a href="{{ .Permalink }}">{{ $title }}</a></li>
     {{ end }}
-
-    <li class="nav-breadcrumb__active"><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
   </ol>
 </nav>