From 51509479db0196414b59af8bf818ffd5791abf4c Mon Sep 17 00:00:00 2001
From: James Hunt <10615884+thetwopct@users.noreply.github.com>
Date: Tue, 21 May 2024 16:22:48 +0700
Subject: [PATCH] #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>
---
 assets/scss/_blog.scss           |  2 +-
 assets/scss/_breadcrumb.scss     | 33 +++++++++++++++++++++++++-------
 assets/scss/_header.scss         |  2 +-
 layouts/partials/breadcrumb.html | 11 ++++++++++-
 4 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/assets/scss/_blog.scss b/assets/scss/_blog.scss
index 98f5bb1..90eccd9 100644
--- 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
index 4df55a3..2ee30da 100644
--- 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
index 9473719..237e4dc 100644
--- 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
index f2f32e1..be7e827 100644
--- a/layouts/partials/breadcrumb.html
+++ b/layouts/partials/breadcrumb.html
@@ -1 +1,10 @@
-<p class="breadcrumb"><a href="/{{ .Section }}/">{{ .Section | humanize }}</a></p>
\ No newline at end of file
+<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>
\ No newline at end of file