From 17acf5b6ecc5a2b60f28d7effd9a678b282277f4 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Fri, 10 Jan 2025 17:27:46 +0800
Subject: [PATCH] Remove list element from breadcrumbs

---
 src/_includes/global/content.njk | 24 +++++++-----------------
 1 file changed, 7 insertions(+), 17 deletions(-)

diff --git a/src/_includes/global/content.njk b/src/_includes/global/content.njk
index 002c51f1..c7e84a30 100644
--- a/src/_includes/global/content.njk
+++ b/src/_includes/global/content.njk
@@ -1,15 +1,12 @@
 <header class="main__header">
     {% if isArticle or hasBreadcrumbs %}
-    <nav aria-labelledby="breadcrumbs-title">
+    <nav class="breadcrumbs" aria-labelledby="breadcrumbs-title">
         <h2 class="visually-hidden" id="breadcrumbs-title">Breadcrumbs</h2>
-        <ol class="breadcrumbs">
-            {% set breadcrumbNavPages = collections.all | eleventyNavigationBreadcrumb(eleventyNavigation.key or articleTitle or pageTitle or title) %}
-            {%- for entry in breadcrumbNavPages %}
-            <li>
-                <a href="{{ entry.url }}">{{ entry.title }}</a>
-            </li>
-            {%- endfor %}
-        </ol>
+        {% set breadcrumbNavPages = collections.all | eleventyNavigationBreadcrumb(eleventyNavigation.key or articleTitle or pageTitle or title) %}
+        {%- for entry in breadcrumbNavPages %}
+        <a href="{{ entry.url }}">{{ entry.title }}</a>
+        <span aria-hidden="true">➔</span>
+        {%- endfor %}
     </nav>
     {% endif %}
 
@@ -90,20 +87,13 @@
 
 {%- css %}
     .breadcrumbs {
-        list-style-type: "";
-        padding: 0;
-        margin: 0 0 0.7em 0;
+        margin-bottom: 0.7em;
         display: flex;
         gap: 0.5em;
         flex-wrap: wrap;
         justify-content: center;
     }
 
-    .breadcrumbs li::after {
-        content: '➔';
-        padding-left: 0.3em;
-    }
-
     .blog__post--pagination {
         padding-top: 1em;
         margin-block-start: 2.5em;