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,27 +43,11 @@ articleElement: true
         gap: 0.5em;
     }
 
-    .changelog__nav--links {
-        margin: 0;
-        padding: 0;
-        line-height: 1.1;
-    }
-
-    .changelog__nav--links {
-        list-style-type: "";
-        gap: 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/articles/articles.11tydata.json

@@ -1,6 +1,7 @@
 {
     "tags": ["articles", "contents", "feed items"],
     "layout": "main/content",
+    "permalink": "/articles/{{ page.fileSlug }}/",
     "isArticle": true,
     "eleventyComputed": {
         "title": "{{ articleTitle }} | Articles",

src/articles/featured/featured.11tydata.json

@@ -1,4 +1,3 @@
 {
-    "tags": "featured articles",
+    "tags": "featured articles"
-    "permalink": "/articles/{{ page.fileSlug }}/"
 }

src/articles/myarticles/myarticles.11tydata.json

@@ -1,4 +1,3 @@
 {
-    "tags": "my articles",
+    "tags": "my articles"
-    "permalink": "/articles/{{ page.fileSlug }}/"
 }

src/articles/myarticles/palestine-masterlist.md

@@ -1,7 +1,7 @@
 ---
 articleTitle: Palestine Masterlist
 date: 2024-06-19
-updated: 2024-07-17
+updated: 2024-07-18
 desc: My masterlist of resources related to Palestine.
 categories: ["palestine"]
 ---
@@ -69,3 +69,4 @@ There have been Palestinians who reached out to me on Tumblr to ask for help wit
 * [Help Zaen and Yehya to get out of Gaza](https://www.gofundme.com/f/help-sara-and-her-family-to-evacuate-gaza) (verified by [90-ghost](https://www.tumblr.com/90-ghost/754093176508268544))
 * [A Father's Plea: Help Save My Family](https://www.gofundme.com/f/btuqqt-save-my-familys-life) (verified by [el-shab-hussein](https://www.tumblr.com/el-shab-hussein/754087744556449792/vetted-family-fundraiser-masterpost-3))
 * [Help Moamen Majed rebuild his life after the war](https://www.gofundme.com/f/help-moamen-majed-rebuild-his-life-after-the-war) (verified by [90-ghost](https://www.tumblr.com/90-ghost/755355718664830976/moamenmajed-gaza-are-they-a-vetted-fundraiser))
+* [Save Gaza: A Brighter Future for Aya and Her Family](https://www.gofundme.com/f/save-gaza-a-brighter-future-for-aya-and-her-family) (verified by [90-ghost](https://www.tumblr.com/90-ghost/754992024939347968))

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;

src/assets/css/content.css

@@ -31,11 +31,11 @@ content-wrapper,
 
 .content ul:not([class]), .content ol:not([class]) {
     display: grid;
-    gap: 0.7em;
+    gap: var(--sz-content-list-gap);
 }
 
 .content ul ul, .content ol ol,
-.content ul ol, .content ol ul { margin-top: 0.7em; }
+.content ul ol, .content ol ul { margin-top: var(--sz-content-list-gap); }
 
 .sidebar--sticky {
     position: sticky;

src/assets/css/global.css

@@ -30,7 +30,6 @@
     --clr-hero-bg: black;
     --clr-navbar-bg: #222;
     --clr-navbar-link: white;
-
     --clr-main-footer-bg: #13092D;
 
     --clr-mod-entry-bg: #241445;
@@ -48,6 +47,7 @@
     --sz-main-padding: clamp(1rem, 5%, 4rem);
     --sz-navbar-ht: 4rem;
     --sz-external-link: 1.25em;
+    --sz-content-list-gap: 0.7em;
 }
 
 /* ------------------- */
@@ -57,9 +57,7 @@
 /* Box sizing rules */
 *,
 *::before,
-*::after {
+*::after { box-sizing: border-box; }
-    box-sizing: border-box;
-}
 
 /* Prevent font size inflation */
 html {
@@ -70,15 +68,11 @@ html {
 
 /* Remove default margin in favour of better control in authored CSS */
 body, h1, h2, h3, h4, p,
-figure, blockquote, dl, dd {
+figure, blockquote, dl, dd { margin: 0; }
-    margin: 0;
-}
 
 /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
 ul[role='list'],
-ol[role='list'] {
+ol[role='list'] { list-style-type: ""; }
-    list-style-type: "";
-}
 
 /* Set core body defaults */
 body {
@@ -88,20 +82,13 @@ body {
 
 /* Set shorter line heights on headings and interactive elements */
 h1, h2, h3, h4,
-button, input, label {
+button, input, label { line-height: 1.1; }
-    line-height: 1.1;
-}
 
 /* Balance text wrapping on headings */
-h1, h2,
+h1, h2, h3, h4 { text-wrap: balance; }
-h3, h4 {
-    text-wrap: balance;
-}
 
 /* A elements that don't have a class get default styles */
-a:not([class]) {
+a:not([class]) { text-decoration-skip-ink: auto; }
-    text-decoration-skip-ink: auto;
-}
 
 /* Make images easier to work with */
 img,
@@ -111,17 +98,10 @@ picture {
 }
 
 /* Inherit fonts for inputs and buttons */
-input, button,
+input, button, textarea, select { font: inherit; }
-textarea, select {
-    font: inherit;
-}
 
 /* Make sure textareas without a rows attribute are not tiny */
-textarea:not([rows]) {
+textarea:not([rows]) { min-height: 10em; }
-    min-height: 10em;
-}
 
 /* Anything that has been anchored to should have extra scroll margin */
-:target {
+:target { scroll-margin-block: 5ex; }
-    scroll-margin-block: 5ex;
-}

src/assets/css/utility.css

@@ -25,6 +25,12 @@
     fill: currentColor;
 }
 
+.inline-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.7em 1.5em;
+}
+
 .hidden { display: none; }
 
 .visually-hidden {

src/links/resources.md

@@ -1,6 +1,6 @@
 ---
 title: Resources
-date: 2024-07-16
+date: 2024-07-18
 ---
 
 ### Archives
@@ -14,6 +14,7 @@ date: 2024-07-16
 
 ### Gaming
 * [3DS Hacks Guide](https://3ds.hacks.guide/)
+* [Fuck off EA App](https://github.com/p0358/Fuck_off_EA_App)
 
 ### Video Game Mods
 These are lists of video game mods I use for my own playthroughs.

src/links/websites.njk

@@ -35,12 +35,13 @@ date: 2023-01-28
     {{ siteButton("https://whiona.me/", "sites/whiona.png", "Whiona") }}
     {{ siteButton("https://xandra.cc/", "sites/xandra.png", "Museum of Alexandra") }}
 </ul>
-<ul>
+<ul class="inline-list">
+    <li><a href="https://www.eladnarra.com/">eladnarra's site</a></li>
     <li><a href="https://stitchmediamix.com/">Stitch’s Media Mix</a></li>
 </ul>
 
 <h3>Link Exchanges</h3>
-<ul>
+<ul class="inline-list">
     <li><a href="https://theretrosaga.com/">The Retro Saga</a></li>
 </ul>
 
@@ -54,7 +55,7 @@ date: 2023-01-28
     {{ siteButton("https://kalechips.net/responsive/", "directories/responsiveweb.png", "Responsive Web Directory") }}
     {{ siteButton("https://smoothsailing.asclaria.org/", "directories/smoothsailing.png", "Smooth Sailing Listings") }}
 </ul>
-<ul>
+<ul class="inline-list">
     <li>👻 Proud member of <a href="https://darktheme.club/">darktheme.club</a> 👻</li>
 </ul>