Add breadcrumbs to articles

src/_includes/main/article.njk

@@ -5,6 +5,16 @@ metadata:
 ---
 
 <header class="main__header">
+    <ul class="breadcrumbs">
+        {% set breadcrumbNavPages = collections.all | eleventyNavigationBreadcrumb(articleTitle) %}
+        {%- for entry in breadcrumbNavPages %}
+        <li>
+            <a href="{{ entry.url }}" {% if entry.url == page.url %} class="breadcrumbs--active"{% endif %}>{{ entry.title }}</a>
+        </li>
+        ➔
+        {%- endfor %}
+    </ul>
+
     <h1>{{ articleTitle }}</h1>
     <div class="article__info">
         <p>Posted on {{ date | niceDate }} by {{ sitemeta.siteAuthor.name }}
@@ -35,3 +45,19 @@ metadata:
         {% include "main/content-nav.njk" %}
     {% endif %}
 </div>
+
+<style>
+    .breadcrumbs {
+        justify-self: center;
+        list-style: none;
+        padding: 0;
+        margin: 0 0 0.7em 0;
+        display: flex;
+        gap: 0.5em;
+    }
+
+    .breadcrumbs--active {
+        text-decoration: none;
+        color: var(--clr-bold-txt);
+    }
+</style>

src/assets/css/main.css

@@ -267,6 +267,7 @@ main {
     /* background-color: var(--clr-quote-bg); */
     padding: 2.5rem clamp(1rem, 5%, 3rem);
     text-align: center;
+    display: grid;
 }
 
 .article,