Add link to darktheme.club directory

src/_includes/global/navbar.njk

@@ -17,7 +17,7 @@ https://kalechips.net/projects/snippets/burger #}
 <nav class="navbar" aria-labelledby="top-level-nav-title">
     <h2 class="visually-hidden" id="top-level-nav-title">Top Level Navigation Bar</h2>
     <details class="navbar__burger">
-        <summary class="navbar__toggle" id="toggle">
+        <summary class="navbar__toggle" id="navbar-toggle">
             <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>
@@ -27,7 +27,7 @@ https://kalechips.net/projects/snippets/burger #}
             <h3 class="visually-hidden" id="hamburger-nav-title">Hamburger Menu</h3>
             <ul class="navbar__menu--links">
                 {{ navLinksEl | safe }}
-                <li class="skip"><a href="#toggle">Close Menu</a></li>
+                <li class="skip"><a href="#navbar-toggle">Close Menu</a></li>
             </ul>
         </nav>
     </details>
@@ -66,18 +66,14 @@ https://kalechips.net/projects/snippets/burger #}
         background-color: inherit;
     }
 
-    .navbar__toggle::-webkit-details-marker {
+    .navbar__toggle::-webkit-details-marker { display: none; }
-        display: none;
-    }
 
     .navbar__toggle:focus,
     .navbar a:focus {
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .navbar a:focus {
+    .navbar a:focus { outline-offset: 0.1em; }
-        outline-offset: 0.1em;
-    }
 
     .navbar__menu--links,
     .navbar__links {
@@ -119,27 +115,14 @@ https://kalechips.net/projects/snippets/burger #}
         padding: 0.2em 0 0 0;
     }
 
-    .navbar__links a:hover {
+    .navbar__links a:hover { color: var(--clr-link-hover); }
-        color: var(--clr-link-hover);
+    .navbar__links a:focus { outline-offset: 0.2em; }
-    }
-
-    .navbar__links a:focus {
-        outline-offset: 0.2em;
-    }
 
     /* Tablet screen size */
     @media only screen and (min-width: 43.75rem) {
-        .navbar {
+        .navbar { padding: 0 0.6em; }
-            padding: 0 0.6em;
+        .navbar__burger { display: none; }
-        }
+        .navbar__toggle { display: none; }
-
-        .navbar__burger {
-            display: none;
-        }
-
-        .navbar__toggle {
-            display: none;
-        }
 
         .navbar__links {
             display: flex;

src/_includes/main/virtualpets.njk

@@ -2,7 +2,11 @@
     <h2>Virtual Pets</h2>
     <p>Feel free to check out my virtual pets and feed them!</p>
     <div class="adoptables">
-        <a href="https://tamanotchi.world/13150c"><img src="https://tamanotchi.world/i2/13150" alt="It's my tamaNOTchi! Click to feed!" loading="lazy"></a>
+        <li data-tooltip>
-        <a href="https://wobble.town/visit/2042"><img src="https://wobble.town/visit/2042/wobble.gif" alt="My Wobble Town pixel pet" loading="lazy"></a>
+            <a href="https://tamanotchi.world/13150c" data-tooltip-trigger title="My tamaNOTchi pet"><img src="https://tamanotchi.world/i2/13150" alt="It's my tamaNOTchi! Click to feed!" loading="lazy"></a>
+        </li>
+        <li data-tooltip>
+            <a href="https://wobble.town/visit/2042" data-tooltip-trigger title="My Wobble Town pixel pet"><img src="https://wobble.town/visit/2042/wobble.gif" alt="My Wobble Town pixel pet" loading="lazy"></a>
+        </li>
     </div>
 </section>

src/assets/css/components.css

@@ -123,6 +123,9 @@ a.link-btn[href^="http"]:not([href*="leilukin.com"]) { padding-right: calc(var(-
 
 /* Adoptables wrapper */
 .adoptables {
+    list-style-type: "";
+    margin: 0;
+    padding: 0;
     display: flex;
     flex-wrap: wrap;
     align-items: flex-end;

src/links/websites.njk

@@ -54,6 +54,9 @@ 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>
+    <li>👻 Proud member of <a href="https://darktheme.club/">darktheme.club</a> 👻</li>
+</ul>
 
 <h3>Communities</h3>
 <ul class="web-btn-wrapper">
@@ -83,8 +86,8 @@ date: 2023-01-28
         <iframe id="bucket-webring" style="width: 100%; height: 3rem; border: none;" src="https://webring.bucketfish.me/embed.html?name=Leilukin"></iframe>
     </li>
     <li>
-        <nav class="webring">
+        <nav class="webring" aria-labelledby="css-joy-name">
-            <p class="webring__name"><a href="https://cs.sjoy.lol/">CSS JOY Webring</a></p>
+            <p class="webring__name" id="css-joy-name"><a href="https://cs.sjoy.lol/">CSS JOY Webring</a></p>
             <ul class="webring__links">
                 <li class="webring__link">
                     <a class="external-link" href="https://webri.ng/webring/cssjoy/previous?via=https://leilukin.com/">Previous Site</a>
@@ -107,8 +110,8 @@ date: 2023-01-28
         <script>
             document.addEventListener("DOMContentLoaded", function() { eggring.createLinks(); });
         </script>
-        <nav class="webring">
+        <nav class="webring" aria-labelledby="eggring-name">
-            <p class="webring__name">🥚 <a id="eggringIndex" href="https://eggring.neocities.org/">The Eggring</a> 🥚</p>
+            <p class="webring__name" id="eggring-name">🥚 <a id="eggringIndex" href="https://eggring.neocities.org/">The Eggring</a> 🥚</p>
             <ul class="webring__links">
                 <li class="webring__link">
                     <a id="eggringPrev" href="https://confetticake.neocities.org/">Previous Site</a>
@@ -130,8 +133,8 @@ date: 2023-01-28
         </div>
     </li>
     <li>
-        <nav class="webring">
+        <nav class="webring" aria-labelledby="ghostring-name">
-            <p class="webring__name"><a href="https://ghostring.neocities.org/">Ghostring</a></p>
+            <p class="webring__name" id="ghostring-name"><a href="https://ghostring.neocities.org/">Ghostring</a></p>
             <ul class="webring__links">
                 <li class="webring__link">
                     <a href="https://ghostring.neocities.org/leilukin/previous">Previous Site</a>
@@ -143,8 +146,8 @@ date: 2023-01-28
         </nav>
     </li>
     <li>
-        <nav class="webring">
+        <nav class="webring" aria-labelledby="indieweb-webring-name">
-            <p class="webring__name">An <a href="https://xn--sr8hvo.ws">IndieWeb Webring</a> 🕸💍</p>
+            <p class="webring__name" id="indieweb-webring-name">An <a href="https://xn--sr8hvo.ws">IndieWeb Webring</a> 🕸💍</p>
             <ul class="webring__links">
                 <li class="webring__link">
                     <a href="https://xn--sr8hvo.ws/previous">Previous Site</a>
@@ -159,8 +162,8 @@ date: 2023-01-28
         <journal-ring icon="lavender"></journal-ring><script async src="https://cdn.jsdelivr.net/gh/js044/nenrikido@main/static/js/misc/journalring.js"></script>
     </li>
     <li>
-        <nav class="webring">
+        <nav class="webring" aria-labelledby="loopring-name">
-            <p class="webring__name"><a href="https://loop.graycot.dev/webring.html?action=home">Loop Ring</a></p>
+            <p class="webring__name" id="loopring-name"><a href="https://loop.graycot.dev/webring.html?action=home">Loop Ring</a></p>
             <ul class="webring__links">
                 <li class="webring__link">
                     <a href="https://loop.graycot.dev/webring.html?action=prev">Previous Site</a>
@@ -191,8 +194,8 @@ date: 2023-01-28
         </div>
     </li>
     <li>
-        <nav class="webring">
+        <nav class="webring" aria-labelledby="retronaut-name">
-            <p class="webring__name"><a href="https://ghostring.neocities.org/">The retronaut webring</a></p>
+            <p class="webring__name" id="retronaut-name"><a href="https://ghostring.neocities.org/">The retronaut webring</a></p>
             <ul class="webring__links">
                 <li class="webring__link">
                     <a class="external-link" href="https://webring.dinhe.net/prev/https://leilukin.com/">Previous Site</a>

src/pages/adoptables.njk

@@ -2,32 +2,39 @@
 title: Adoptables
 desc: A collection of creatures and stuff I have adopted from other websites.
 isContentDivided: true
+hasTooltips: true
 eleventyNavigation:
     order: 7
 ---
 
+{%- macro adoptable(url, file, alt, tooltip=alt) -%}
+    <li data-tooltip>
+        <a href="{{ url }}" data-tooltip-trigger title="{{ tooltip }}">
+            <img src="/assets/adoptables/{{ file }}" alt="{{ alt }}" loading="lazy">
+        </a>
+    </li>
+{%- endmacro -%}
+
 <section class="content__section">
     <h2>Personal Website Adoptables</h2>
     <p>These are adopted from other personal websites.</p>
 
-    <div class="adoptables">
+    <ul class="adoptables">
-        <a href="https://xandra.cc/" title="Diddles the raccoon by Alexandra">
+        {{ adoptable("https://xandra.cc/", "alexandra-diddles.png", "Diddles the raccoon by Alexandra") }}
-            <img src="/assets/adoptables/diddles-alexandra.png" alt="Diddles the raccoon by Alexandra" loading="lazy">
+        {{ adoptable("https://lostletters.neocities.org/", "lostletters-moomin.png", "Moomin pixel art by Lost Letters") }}
-        </a>
+    </ul>
-        <a href="https://lostletters.neocities.org/" title="Moomin pixel art by Lost Letters">
-            <img src="/assets/adoptables/lostletters-moomin.png" alt="Moomin pixel art by Lost Letters" loading="lazy">
-        </a>
-    </div>
 </section>
 
 <section class="content__section">
     <h2>32-Bit Cafe Code Jam: Destination Vacation</h2>
     <p>Stuff I collected from <a href="https://tilde.32bit.cafe/~ribose/events/destination/map.html">32-Bit Cafe's Community Code Jam #4: Destination Vacation</a> in June 2024, including a passport with stamps from the code jam entries, and extra goodies from some of the participants.</p>
-    <div class="adoptables">
+    <ul class="adoptables">
+        <li>
             <img src="/assets/adoptables/32bitcafe-vacation/passport.png" alt="32-Bit Cafe's Destination Vacation code jam passport with stamps" loading="lazy">
-        <a href="https://xandra.cc/codejam/vacation/" title="Alexandra's stamp"><img src="/assets/adoptables/32bitcafe-vacation/alexandra-stamp.png" alt="Alexandra's stamp" loading="lazy"></a>
+        </li>
-        <a href="https://ribo.zone/sunday/fish/" title="Ribose's fishing button"><img src="/assets/adoptables/32bitcafe-vacation/ribose-riverfish.png" alt="Ribose's fishing button" loading="lazy"></a>
+        {{ adoptable("https://xandra.cc/codejam/vacation/", "32bitcafe-vacation/alexandra-stamp.png", "Alexandra's stamp") }}
-    </div>
+        {{ adoptable("https://ribo.zone/sunday/fish/", "32bitcafe-vacation/ribose-riverfish.png", "Ribose's fishing button") }}
+    </ul>
 </section>
 
 {% include "main/virtualpets.njk" %}