page_breadcrumb: Implement a breadcrumb and display it above the <main> content

The breadcrumb shows navigation from the home page as a path:

/ > Posts > This Post

en.yaml

assets/css/099_breadcrumb.css

@@ -0,0 +1,30 @@
+
+
+
+
+
+/*************
+ # BREADCRUMB
+ *************/
+
+.nav-breadcrumb {
+  font-size: var(--text-s);
+
+  ul, ol {
+    display: flex;
+    padding-inline: 0;
+  }
+
+  li {
+    list-style-type: none;
+  }
+
+  li:not(:first-child) {
+    margin-inline-start: var(--space-xs);
+
+    &::before {
+      content: "›";
+      margin-inline-end: var(--space-xs);
+    }
+  }
+}

i18n/en.yaml

@@ -0,0 +1 @@
+home: Home

layouts/_default/baseof.html

@@ -9,6 +9,9 @@
       {{ partial "site/header.html" . }}
     </header>
     <main>
+      {{ if not .IsNode }}
+        {{ partial "page_breadcrumb.html" . }}
+      {{ end }}
       {{ block "main" . }}{{ end }}
     </main>
     <footer class="site-footer">

layouts/partials/page_breadcrumb.html

@@ -0,0 +1,13 @@
+<nav class="nav-breadcrumb">
+  <ol>
+    {{ range .Ancestors.Reverse }}
+      {{- $title := .LinkTitle -}}
+      {{- if .IsHome -}}
+        {{ $title = "/" }}
+      {{- end -}}
+      <li><a href="{{ .Permalink }}">{{ $title }}</a></li>
+    {{ end }}
+
+    <li class="nav-breadcrumb__active"><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
+  </ol>
+</nav>