Refactor CSS classes for web graphics and adoptables

This commit is contained in:
Helen Chong 2024-08-05 00:44:59 +08:00
parent 5f00c4f266
commit edd40fc06b
6 changed files with 17 additions and 28 deletions

View File

@ -1,7 +1,7 @@
<section class="content__section"> <section class="content__section">
<h2>Virtual Pets</h2> <h2>Virtual Pets</h2>
<p>Feel free to check out my virtual pets and feed them!</p> <p>Feel free to check out my virtual pets and feed them!</p>
<ul class="adoptables"> <ul class="web-graphics adoptables">
<li data-tooltip> <li data-tooltip>
<a href="https://tamanotchi.world/13150c" data-tooltip-trigger title="Tam, my tamaNOTchi"><img src="https://tamanotchi.world/i2/13150" alt="Tam, my tamaNOTchi" loading="lazy"></a> <a href="https://tamanotchi.world/13150c" data-tooltip-trigger title="Tam, my tamaNOTchi"><img src="https://tamanotchi.world/i2/13150" alt="Tam, my tamaNOTchi" loading="lazy"></a>
</li> </li>

View File

@ -143,23 +143,8 @@ a.link-btn[href^="http"]:not([href*="leilukin.com"]) { padding-right: calc(var(-
.contnet-warning__content { padding: 1em; } .contnet-warning__content { padding: 1em; }
/* Adoptables wrapper */ /* Web graphic lists */
.adoptables { .web-graphics {
list-style-type: "";
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.5em;
overflow-x: clip;
overflow-clip-margin: 0.5em;
}
p + .adoptables { margin-top: 1em; }
/* Web button lists */
.web-btn-wrapper {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.5em; gap: 0.5em;
@ -171,6 +156,10 @@ p + .adoptables { margin-top: 1em; }
overflow-clip-margin: 0.5em; overflow-clip-margin: 0.5em;
} }
/* Adoptables wrapper */
.adoptables { align-items: flex-end; }
p + .adoptables { margin-top: 1em; }
/* Tabs */ /* Tabs */
.tabwrap section { display: none; } .tabwrap section { display: none; }

View File

@ -72,7 +72,7 @@ eleventyComputed:
<img src="/assets/buttons/pride/{{ file }}.png" alt="{{ alt }}" data-tooltip-trigger title="{{ tooltip }}" width="{{ width }}" height="{{ height }}" loading="lazy" tabindex="0"> <img src="/assets/buttons/pride/{{ file }}.png" alt="{{ alt }}" data-tooltip-trigger title="{{ tooltip }}" width="{{ width }}" height="{{ height }}" loading="lazy" tabindex="0">
</li> </li>
{%- endmacro -%} {%- endmacro -%}
<ul class="web-btn-wrapper"> <ul class="web-graphics">
{{ prideButton("progress", "2018 Progress Flag", "2018 Progress Flag by Daniel Quasar (2018)") }} {{ prideButton("progress", "2018 Progress Flag", "2018 Progress Flag by Daniel Quasar (2018)") }}
{{ prideButton("9_stripe", "9 stripe rainbow flag", "Nine-Stripe Rainbow Flag by Gilbert Baker (2017)") }} {{ prideButton("9_stripe", "9 stripe rainbow flag", "Nine-Stripe Rainbow Flag by Gilbert Baker (2017)") }}
{{ prideButton("lesbian", "Lesbian pride flag", "I am a lesbian") }} {{ prideButton("lesbian", "Lesbian pride flag", "I am a lesbian") }}

View File

@ -10,7 +10,7 @@ date: 2023-01-29
<p>Check out <a href="https://fan.leilukin.com/">Beehive, my fanlisting collective</a> to see all the fanlistings I own, have joined or have applied to join.</p> <p>Check out <a href="https://fan.leilukin.com/">Beehive, my fanlisting collective</a> to see all the fanlistings I own, have joined or have applied to join.</p>
<h3>Webrings</h3> <h3>Webrings</h3>
<ul class="web-btn-wrapper"> <ul class="web-graphics">
<li> <li>
<div id="autiring"> <div id="autiring">
<script type="text/javascript" src="https://macaque.moe/autiring/onionring-variables.js"></script> <script type="text/javascript" src="https://macaque.moe/autiring/onionring-variables.js"></script>

View File

@ -13,7 +13,7 @@ date: 2023-01-28
<h3>Personal Sites I Enjoy</h3> <h3>Personal Sites I Enjoy</h3>
<ul class="web-btn-wrapper"> <ul class="web-graphics">
{{ siteButton("https://karuma.me/", "sites/10kph.png", "10kph") }} {{ siteButton("https://karuma.me/", "sites/10kph.png", "10kph") }}
{{ siteButton("https://www.autisticasfxxk.com/", "sites/autisticasfxxk.gif", "Autistic As Fxxk") }} {{ siteButton("https://www.autisticasfxxk.com/", "sites/autisticasfxxk.gif", "Autistic As Fxxk") }}
{{ siteButton("https://chrisburnell.com/", "sites/chrisburnell.gif", "Chris Burnell") }} {{ siteButton("https://chrisburnell.com/", "sites/chrisburnell.gif", "Chris Burnell") }}
@ -50,7 +50,7 @@ date: 2023-01-28
</ul> </ul>
<h3>Directories</h3> <h3>Directories</h3>
<ul class="web-btn-wrapper"> <ul class="web-graphics">
{{ siteButton("https://pinkvampyr.leprd.space/accessiblenet/", "directories/accessiblenet.png", "Accessibility Net Directory") }} {{ siteButton("https://pinkvampyr.leprd.space/accessiblenet/", "directories/accessiblenet.png", "Accessibility Net Directory") }}
{{ siteButton("https://bukmark.club/", "directories/bukmarkclub.png", "BUKMARK.CLUB") }} {{ siteButton("https://bukmark.club/", "directories/bukmarkclub.png", "BUKMARK.CLUB") }}
{{ siteButton("https://indieseek.xyz/", "directories/indieseek.png", "Indieseek.xyz Indie Web Directory") }} {{ siteButton("https://indieseek.xyz/", "directories/indieseek.png", "Indieseek.xyz Indie Web Directory") }}
@ -64,7 +64,7 @@ date: 2023-01-28
</ul> </ul>
<h3>Communities</h3> <h3>Communities</h3>
<ul class="web-btn-wrapper"> <ul class="web-graphics">
{{ siteButton("https://32bit.cafe/", "communities/32-bit-cafe.png", "32-Bit Cafe") }} {{ siteButton("https://32bit.cafe/", "communities/32-bit-cafe.png", "32-Bit Cafe") }}
{{ siteButton("https://zine.kalechips.net/index", "communities/saladmagazine.png", "Salad Magazine") }} {{ siteButton("https://zine.kalechips.net/index", "communities/saladmagazine.png", "Salad Magazine") }}
</ul> </ul>

View File

@ -32,7 +32,7 @@ eleventyNavigation:
<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>
<ul class="adoptables"> <ul class="web-graphics adoptables">
{{ adoptable("https://xandra.cc/", "alexandra-diddles.png", "Diddles the raccoon by Alexandra") }} {{ 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") }} {{ adoptable("https://lostletters.neocities.org/", "lostletters-moomin.png", "Moomin pixel art by Lost Letters") }}
{{ adoptable("https://pixels.elfwink.net/", "lou-frog.gif", "Green frog by Lou") }} {{ adoptable("https://pixels.elfwink.net/", "lou-frog.gif", "Green frog by Lou") }}
@ -59,14 +59,14 @@ eleventyNavigation:
<p>An old pixel club about cats, revived by <a href="https://divergentrays.com/kitty">Divergent Rays</a>.</p> <p>An old pixel club about cats, revived by <a href="https://divergentrays.com/kitty">Divergent Rays</a>.</p>
<h3>My Kitty Friends</h3> <h3>My Kitty Friends</h3>
<ul class="adoptables"> <ul class="web-graphics adoptables">
{{ myPixelArt("kittyfriends/leilukin-blackkitty.png", "Leilukin's black kitty friend") }} {{ myPixelArt("kittyfriends/leilukin-blackkitty.png", "Leilukin's black kitty friend") }}
{{ myPixelArt("kittyfriends/leilukin-purplekitty.png", "Leilukin's purple kitty friend") }} {{ myPixelArt("kittyfriends/leilukin-purplekitty.png", "Leilukin's purple kitty friend") }}
</ul> </ul>
<p>Created on 21 July 2024. If you want to adopt any of my kitty friends, please link back to my website and do not hotlink the images.</p> <p>Created on 21 July 2024. If you want to adopt any of my kitty friends, please link back to my website and do not hotlink the images.</p>
<h3>Adopted Kitty Friends</h3> <h3>Adopted Kitty Friends</h3>
<ul class="adoptables"> <ul class="web-graphics adoptables">
{{ adoptable("https://artwork.neocities.org/cliques", "kittyfriends/artwork-bat.gif", "artwork's bat kitty") }} {{ adoptable("https://artwork.neocities.org/cliques", "kittyfriends/artwork-bat.gif", "artwork's bat kitty") }}
{{ adoptable("https://artwork.neocities.org/cliques", "kittyfriends/artwork-pumpkin.gif", "artwork's pumpkin kitty") }} {{ adoptable("https://artwork.neocities.org/cliques", "kittyfriends/artwork-pumpkin.gif", "artwork's pumpkin kitty") }}
{{ adoptable("https://artwork.neocities.org/cliques", "kittyfriends/artwork-vampire.gif", "artwork's vampire kitty") }} {{ adoptable("https://artwork.neocities.org/cliques", "kittyfriends/artwork-vampire.gif", "artwork's vampire kitty") }}
@ -84,7 +84,7 @@ eleventyNavigation:
<p><a href="https://zine.kalechips.net/index">Salad Magazine</a> is a web-based zine for creative works run by <a href="https://kalechips.net/">Kalechips</a>.</p> <p><a href="https://zine.kalechips.net/index">Salad Magazine</a> is a web-based zine for creative works run by <a href="https://kalechips.net/">Kalechips</a>.</p>
<h3>Ink Snail and Sparkle Snail</h3> <h3>Ink Snail and Sparkle Snail</h3>
<div class="adoptables"> <div class="web-graphics adoptables">
<img src="/assets/adoptables/salad-magazine/semper-inksnail-black.png" alt="Black ink snail pixel art by Semper" loading="lazy"> <img src="/assets/adoptables/salad-magazine/semper-inksnail-black.png" alt="Black ink snail pixel art by Semper" loading="lazy">
<img src="/assets/adoptables/salad-magazine/semper-inksnail-sparkle.png" alt="Sparkle snail pixel art by Semper" loading="lazy"> <img src="/assets/adoptables/salad-magazine/semper-inksnail-sparkle.png" alt="Sparkle snail pixel art by Semper" loading="lazy">
</div> </div>
@ -94,7 +94,7 @@ eleventyNavigation:
<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>
<ul class="adoptables"> <ul class="web-graphics adoptables">
<li> <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">
</li> </li>