Use accessible stylised tooltips for adoptables
This commit is contained in:
parent
5e5429a2f5
commit
dc7a87c750
Before Width: | Height: | Size: 956 B After Width: | Height: | Size: 956 B |
|
@ -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;
|
||||||
|
|
|
@ -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" %}
|
Loading…
Reference in New Issue