From fe2bbd44ed0bbd1e053d9bb9262621d917487016 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Thu, 18 Jul 2024 11:13:23 +0800
Subject: [PATCH] Create inline navigation CSS class

---
 src/_includes/global/footer.njk   | 23 ++++-------------------
 src/_includes/main/changelogs.njk | 14 +-------------
 src/_includes/main/footer.njk     |  2 +-
 src/assets/css/components.css     | 18 +++++++++++++++++-
 4 files changed, 23 insertions(+), 34 deletions(-)

diff --git a/src/_includes/global/footer.njk b/src/_includes/global/footer.njk
index efc2e112..119ce606 100644
--- a/src/_includes/global/footer.njk
+++ b/src/_includes/global/footer.njk
@@ -6,7 +6,7 @@
 {%- if tags and tags.includes("shrine pages") %}
     <nav class="footer__shrines" aria-labelledby="backto-title">
         <p id="backto-title">Back to:</p>
-        <ul class="footer__links">
+        <ul class="inline-nav footer__links">
             <li><a href="/shrines/">Shrine Directory</a></li>
             <li><a href="/">{{ sitemeta.siteName }}</a></li>
         </ul>
@@ -18,9 +18,7 @@
 </footer>
 
 <style>
-    :root {
-        --footer-gap: 0.5em;
-    }
+    :root { --footer-gap: 0.5em; }
 
     .footer {
         margin-top: auto;
@@ -40,19 +38,6 @@
         column-gap: var(--footer-gap);
     }
 
-    .footer__links {
-        justify-self: center;
-        list-style-type: "";
-        margin: 0;
-        padding: 0;
-    }
-
-    .footer__links li:not(:last-child)::after {
-        content: '•';
-        padding-left: var(--footer-gap);
-    }
-
-    .footer__shrines {
-        align-self: center;
-    }
+    .footer__links { justify-self: center; }
+    .footer__shrines { align-self: center; }
 </style>
\ No newline at end of file
diff --git a/src/_includes/main/changelogs.njk b/src/_includes/main/changelogs.njk
index cf625570..f0f4acc0 100644
--- a/src/_includes/main/changelogs.njk
+++ b/src/_includes/main/changelogs.njk
@@ -7,7 +7,7 @@ articleElement: true
 
 <nav class="changelog__nav" aria-labelledby="changelog-nav-title">
     <p class="changelog__nav--title" id="changelog-nav-title">Changelog Archive:</p>
-    <ul class="changelog__nav--links">
+    <ul class="inline-nav changelog__nav--links">
         <li><a
             {% if currentUrl === "/changelogs/" %}aria-current="page"{% endif %}
             href="/changelogs"
@@ -43,23 +43,11 @@ articleElement: true
         gap: 0.5em;
     }
 
-    .changelog__nav--links {
-        list-style-type: "";
-        margin: 0;
-        padding: 0;
-        gap: 0.25em 0.5em;
-    }
-
     .changelog__nav--links li {
         text-align: center;
         align-self: center;
     }
 
-    .changelog__nav--links li:not(:last-child)::after {
-        content: '•';
-        padding-left: 0.5em;
-    }
-
     .changelog__nav--links [aria-current="page"] {
         text-decoration: none;
         color: var(--clr-bold-txt);
diff --git a/src/_includes/main/footer.njk b/src/_includes/main/footer.njk
index 8ef52ab9..34768677 100644
--- a/src/_includes/main/footer.njk
+++ b/src/_includes/main/footer.njk
@@ -4,7 +4,7 @@
     <p>Made with ♥ by {{ sitemeta.siteAuthor.name }} since 11 September 2022</p>
 
     {% set currentUrl %}{{ page.url }}{% endset %}
-    <ul class="footer__links">
+    <ul class="inline-nav footer__links">
         <li><a href="/feed.xml">RSS</a></li>
         <li><a
             {% if currentUrl === "/sitemap/" %}aria-current="page"{% endif %}
diff --git a/src/assets/css/components.css b/src/assets/css/components.css
index b707d6c7..9158029b 100644
--- a/src/assets/css/components.css
+++ b/src/assets/css/components.css
@@ -8,7 +8,23 @@
     gap: 1em;
 }
 
-/* Mod entry */
+/* Inline Navigation */
+.inline-nav {
+    --inline-nav-gap: 0.5em;
+    list-style-type: "";
+    margin: 0;
+    padding: 0;
+    display: flex;
+    gap: 0.25em var(--inline-nav-gap);
+    flex-wrap: wrap;
+}
+
+.inline-nav li:not(:last-child)::after {
+    content: '•';
+    padding-left: var(--inline-nav-gap);
+}
+
+/* Mod Entry */
 .mod-entry,
 .mod-entry__downloads {
     display: grid;