Leilukin
/
leilukin-site
mirror of https://github.com/helenclx/leilukin-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/assets/adoptables/diddles-alexandra.png → src/assets/adoptables/alexandra-diddles.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 956 B

After

Width:  |  Height:  |  Size: 956 B

3
src/assets/css/components.css
View File

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

33
src/pages/adoptables.njk
View File

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