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

Compare commits

base: Leilukin:da1f99f857376c3ec69a91023958cb9059274556
Branches Tags
Leilukin:main
Leilukin:build
...
compare: Leilukin:f19171e38296d6412bb7e44bdd96905610bb8c01
Branches Tags
Leilukin:build
Leilukin:main

6 Commits
da1f99f857 ... f19171e382

Author SHA1 Message Date
Helen Chong f19171e382 Add link to darktheme.club directory 2024-07-14 22:28:19 +08:00
Helen Chong 69d4bc4951 Add tooltips to my virtual pets 2024-07-14 22:24:39 +08:00
Helen Chong dc7a87c750 Use accessible stylised tooltips for adoptables 2024-07-14 22:21:11 +08:00
Helen Chong 5e5429a2f5 Reduce navbar CSS whitespace 2024-07-14 21:06:03 +08:00
Helen Chong 1f689af4ed Rename navbar toggle ID 2024-07-14 21:04:55 +08:00
Helen Chong ef5a33fdd4 Use aria-labelledby to label custom webring widgets 2024-07-14 19:03:56 +08:00
6 changed files with 53 additions and 53 deletions
Show Stats Expand all files Collapse all files

35
src/_includes/global/navbar.njk
View File

@ -17,7 +17,7 @@ https://kalechips.net/projects/snippets/burger #}
<nav class="navbar" aria-labelledby="top-level-nav-title">
<h2 class="visually-hidden" id="top-level-nav-title">Top Level Navigation Bar</h2>
<details class="navbar__burger">
<summary class="navbar__toggle" id="toggle">
<summary class="navbar__toggle" id="navbar-toggle">
<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 6H20M4 12H20M4 18H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
@ -27,7 +27,7 @@ https://kalechips.net/projects/snippets/burger #}
<h3 class="visually-hidden" id="hamburger-nav-title">Hamburger Menu</h3>
<ul class="navbar__menu--links">
{{ navLinksEl | safe }}
<li class="skip"><a href="#toggle">Close Menu</a></li>
<li class="skip"><a href="#navbar-toggle">Close Menu</a></li>
</ul>
</nav>
</details>
@ -66,18 +66,14 @@ https://kalechips.net/projects/snippets/burger #}
background-color: inherit;
}
.navbar__toggle::-webkit-details-marker {
display: none;
}
.navbar__toggle::-webkit-details-marker { display: none; }
.navbar__toggle:focus,
.navbar a:focus {
outline: 0.15em solid var(--clr-navbar-link);
}
.navbar a:focus {
outline-offset: 0.1em;
}
.navbar a:focus { outline-offset: 0.1em; }
.navbar__menu--links,
.navbar__links {
@ -119,27 +115,14 @@ https://kalechips.net/projects/snippets/burger #}
padding: 0.2em 0 0 0;
}
.navbar__links a:hover {
color: var(--clr-link-hover);
}
.navbar__links a:focus {
outline-offset: 0.2em;
}
.navbar__links a:hover { color: var(--clr-link-hover); }
.navbar__links a:focus { outline-offset: 0.2em; }
/* Tablet screen size */
@media only screen and (min-width: 43.75rem) {
.navbar {
padding: 0 0.6em;
}
.navbar__burger {
display: none;
}
.navbar__toggle {
display: none;
}
.navbar { padding: 0 0.6em; }
.navbar__burger { display: none; }
.navbar__toggle { display: none; }
.navbar__links {
display: flex;

8
src/_includes/main/virtualpets.njk
View File

@ -2,7 +2,11 @@
<h2>Virtual Pets</h2>
<p>Feel free to check out my virtual pets and feed them!</p>
<div class="adoptables">
<a href="https://tamanotchi.world/13150c"><img src="https://tamanotchi.world/i2/13150" alt="It's my tamaNOTchi! Click to feed!" loading="lazy"></a>
<a href="https://wobble.town/visit/2042"><img src="https://wobble.town/visit/2042/wobble.gif" alt="My Wobble Town pixel pet" loading="lazy"></a>
<li data-tooltip>
<a href="https://tamanotchi.world/13150c" data-tooltip-trigger title="My tamaNOTchi pet"><img src="https://tamanotchi.world/i2/13150" alt="It's my tamaNOTchi! Click to feed!" loading="lazy"></a>
</li>
<li data-tooltip>
<a href="https://wobble.town/visit/2042" data-tooltip-trigger title="My Wobble Town pixel pet"><img src="https://wobble.town/visit/2042/wobble.gif" alt="My Wobble Town pixel pet" loading="lazy"></a>
</li>
</div>
</section>

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;

27
src/links/websites.njk
View File

@ -54,6 +54,9 @@ date: 2023-01-28
{{ siteButton("https://kalechips.net/responsive/", "directories/responsiveweb.png", "Responsive Web Directory") }}
{{ siteButton("https://smoothsailing.asclaria.org/", "directories/smoothsailing.png", "Smooth Sailing Listings") }}
</ul>
<ul>
<li>👻 Proud member of <a href="https://darktheme.club/">darktheme.club</a> 👻</li>
</ul>
<h3>Communities</h3>
<ul class="web-btn-wrapper">
@ -83,8 +86,8 @@ date: 2023-01-28
<iframe id="bucket-webring" style="width: 100%; height: 3rem; border: none;" src="https://webring.bucketfish.me/embed.html?name=Leilukin"></iframe>
</li>
<li>
<nav class="webring">
<p class="webring__name"><a href="https://cs.sjoy.lol/">CSS JOY Webring</a></p>
<nav class="webring" aria-labelledby="css-joy-name">
<p class="webring__name" id="css-joy-name"><a href="https://cs.sjoy.lol/">CSS JOY Webring</a></p>
<ul class="webring__links">
<li class="webring__link">
<a class="external-link" href="https://webri.ng/webring/cssjoy/previous?via=https://leilukin.com/">Previous Site</a>
@ -107,8 +110,8 @@ date: 2023-01-28
<script>
document.addEventListener("DOMContentLoaded", function() { eggring.createLinks(); });
</script>
<nav class="webring">
<p class="webring__name">🥚 <a id="eggringIndex" href="https://eggring.neocities.org/">The Eggring</a> 🥚</p>
<nav class="webring" aria-labelledby="eggring-name">
<p class="webring__name" id="eggring-name">🥚 <a id="eggringIndex" href="https://eggring.neocities.org/">The Eggring</a> 🥚</p>
<ul class="webring__links">
<li class="webring__link">
<a id="eggringPrev" href="https://confetticake.neocities.org/">Previous Site</a>
@ -130,8 +133,8 @@ date: 2023-01-28
</div>
</li>
<li>
<nav class="webring">
<p class="webring__name"><a href="https://ghostring.neocities.org/">Ghostring</a></p>
<nav class="webring" aria-labelledby="ghostring-name">
<p class="webring__name" id="ghostring-name"><a href="https://ghostring.neocities.org/">Ghostring</a></p>
<ul class="webring__links">
<li class="webring__link">
<a href="https://ghostring.neocities.org/leilukin/previous">Previous Site</a>
@ -143,8 +146,8 @@ date: 2023-01-28
</nav>
</li>
<li>
<nav class="webring">
<p class="webring__name">An <a href="https://xn--sr8hvo.ws">IndieWeb Webring</a> 🕸💍</p>
<nav class="webring" aria-labelledby="indieweb-webring-name">
<p class="webring__name" id="indieweb-webring-name">An <a href="https://xn--sr8hvo.ws">IndieWeb Webring</a> 🕸💍</p>
<ul class="webring__links">
<li class="webring__link">
<a href="https://xn--sr8hvo.ws/previous">Previous Site</a>
@ -159,8 +162,8 @@ date: 2023-01-28
<journal-ring icon="lavender"></journal-ring><script async src="https://cdn.jsdelivr.net/gh/js044/nenrikido@main/static/js/misc/journalring.js"></script>
</li>
<li>
<nav class="webring">
<p class="webring__name"><a href="https://loop.graycot.dev/webring.html?action=home">Loop Ring</a></p>
<nav class="webring" aria-labelledby="loopring-name">
<p class="webring__name" id="loopring-name"><a href="https://loop.graycot.dev/webring.html?action=home">Loop Ring</a></p>
<ul class="webring__links">
<li class="webring__link">
<a href="https://loop.graycot.dev/webring.html?action=prev">Previous Site</a>
@ -191,8 +194,8 @@ date: 2023-01-28
</div>
</li>
<li>
<nav class="webring">
<p class="webring__name"><a href="https://ghostring.neocities.org/">The retronaut webring</a></p>
<nav class="webring" aria-labelledby="retronaut-name">
<p class="webring__name" id="retronaut-name"><a href="https://ghostring.neocities.org/">The retronaut webring</a></p>
<ul class="webring__links">
<li class="webring__link">
<a class="external-link" href="https://webring.dinhe.net/prev/https://leilukin.com/">Previous Site</a>

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