From dc7a87c7504aeb9cbaf1bcb021f16e3406fac4e4 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Sun, 14 Jul 2024 22:21:11 +0800
Subject: [PATCH] Use accessible stylised tooltips for adoptables

---
 ...es-alexandra.png => alexandra-diddles.png} | Bin
 src/assets/css/components.css                 |   3 ++
 src/pages/adoptables.njk                      |  33 +++++++++++-------
 3 files changed, 23 insertions(+), 13 deletions(-)
 rename src/assets/adoptables/{diddles-alexandra.png => alexandra-diddles.png} (100%)

diff --git a/src/assets/adoptables/diddles-alexandra.png b/src/assets/adoptables/alexandra-diddles.png
similarity index 100%
rename from src/assets/adoptables/diddles-alexandra.png
rename to src/assets/adoptables/alexandra-diddles.png
diff --git a/src/assets/css/components.css b/src/assets/css/components.css
index 713622fc..94cc1bf2 100644
--- a/src/assets/css/components.css
+++ b/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;
diff --git a/src/pages/adoptables.njk b/src/pages/adoptables.njk
index 0f0bf544..36b92c6e 100644
--- a/src/pages/adoptables.njk
+++ b/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">
-        <a href="https://xandra.cc/" title="Diddles the raccoon by Alexandra">
-            <img src="/assets/adoptables/diddles-alexandra.png" alt="Diddles the raccoon by Alexandra" loading="lazy">
-        </a>
-        <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>
+    <ul class="adoptables">
+        {{ adoptable("https://xandra.cc/", "alexandra-diddles.png", "Diddles the raccoon by Alexandra") }}
+        {{ adoptable("https://lostletters.neocities.org/", "lostletters-moomin.png", "Moomin pixel art by Lost Letters") }}
+    </ul>
 </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">
-        <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>
-        <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>
-    </div>
+    <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">
+        </li>
+        {{ adoptable("https://xandra.cc/codejam/vacation/", "32bitcafe-vacation/alexandra-stamp.png", "Alexandra's stamp") }}
+        {{ adoptable("https://ribo.zone/sunday/fish/", "32bitcafe-vacation/ribose-riverfish.png", "Ribose's fishing button") }}
+    </ul>
 </section>
 
 {% include "main/virtualpets.njk" %}
\ No newline at end of file