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

@@ -55,7 +55,6 @@ main
   gap: var(--space-xl) 0;
 }
 
-.nav-breadcrumb,
 .site-header__content,
 .site-footer
 {

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);
+  }
 }

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>