Create inline navigation CSS class

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 {
+    :root { --footer-gap: 0.5em; }
-        --footer-gap: 0.5em;
-    }
 
     .footer {
         margin-top: auto;
@@ -40,19 +38,6 @@
         column-gap: var(--footer-gap);
     }
 
-    .footer__links {
+    .footer__links { justify-self: center; }
-        justify-self: center;
+    .footer__shrines { align-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;
-    }
 </style>

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);

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 %}

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;