Use accessible stylised tooltips for adoptables

This commit is contained in:
Helen Chong 2024-07-14 22:21:11 +08:00
parent 5e5429a2f5
commit dc7a87c750
3 changed files with 23 additions and 13 deletions

View File

Before

Width:  |  Height:  |  Size: 956 B

After

Width:  |  Height:  |  Size: 956 B

View File

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

View File

@ -2,32 +2,39 @@
title: Adoptables title: Adoptables
desc: A collection of creatures and stuff I have adopted from other websites. desc: A collection of creatures and stuff I have adopted from other websites.
isContentDivided: true isContentDivided: true
hasTooltips: true
eleventyNavigation: eleventyNavigation:
order: 7 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"> <section class="content__section">
<h2>Personal Website Adoptables</h2> <h2>Personal Website Adoptables</h2>
<p>These are adopted from other personal websites.</p> <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>
<section class="content__section"> <section class="content__section">
<h2>32-Bit Cafe Code Jam: Destination Vacation</h2> <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> <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"> <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> </section>
{% include "main/virtualpets.njk" %} {% include "main/virtualpets.njk" %}