Set up link group tabs

This commit is contained in:
Helen Chong 2024-06-30 15:58:47 +08:00
parent 5b8b95472c
commit d5ce9ef9c1
5 changed files with 203 additions and 173 deletions

View File

@ -0,0 +1,28 @@
---
layout: main/content.njk
articleElement: true
isContentDivided: true
---
{% set linkGroups = collections["link groups"] %}
<section class="content__section">
{% include "main/site-btn.njk" %}
<p>Use the following tabs to view my link collection by category.</p>
<nav>
<ul>
{% for group in linkGroups %}
<li><a href="#{{ group.data.title | slugify }}">{{ group.data.title }}</a></li>
{%- endfor %}
</ul>
</nav>
</section>
<article class="tabwrap">
{% for group in linkGroups %}
<section id="{{ group.data.title | slugify }}" class="content__section">
<h2>{{ group.data.title }}</h2>
{{ group.templateContent | safe }}
</section>
{%- endfor %}
</article>

View File

@ -153,6 +153,15 @@ p + .adoptables { margin-top: 1em; }
margin: 0; margin: 0;
} }
/* Tabs */
.tabwrap section {
display: none;
}
.tabwrap section:target {
display: block;
}
/* Web ring */ /* Web ring */
.webring { .webring {
border: 0.08em outset; border: 0.08em outset;

View File

@ -0,0 +1,4 @@
{
"tags": ["link groups"],
"permalink": false
}

161
src/links/websites.njk Normal file
View File

@ -0,0 +1,161 @@
---
title: Websites
---
<h3>Personal Sites I Enjoy</h3>
<ul class="web-btn-wrapper">
<li>
<a href="https://karuma.me/" title="10kph">
<img src="/assets/buttons/sites/10kph.png" alt="10kph" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://www.autisticasfxxk.com/" title="Autistic As Fxxk">
<img src="/assets/buttons/sites/autisticasfxxk.gif" alt="Autistic As Fxxk" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://divergentrays.com/" title="Divergent Rays">
<img src="/assets/buttons/sites/divergentrays.png" alt="Divergent Rays" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://cyberneticdryad.neocities.org/" title="Dryad Glen">
<img src="/assets/buttons/sites/dryadglen.png" alt="Dryad Glen" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://frills.dev/" title="Frills">
<img src="/assets/buttons/sites/frills.png" alt="Frills" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://groundedwren.com/" title="Grounded Wren">
<img src="/assets/buttons/sites/groundedwren.png" alt="Grounded Wren" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://jasm1nii.xyz/" title="jasmine's journal">
<img src="/assets/buttons/sites/jasminesjournal.png" alt="jasmine's journal" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://jefbecker.com/" title="JEFBECKER">
<img src="/assets/buttons/sites/jefbecker.png" alt="JEFBECKER" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://kalechips.net/" title="Kalechips">
<img src="/assets/buttons/sites/kalechips.png" alt="Kalechips" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://lostletters.neocities.org/" title="Lost Letters">
<img src="/assets/buttons/sites/lostletters.gif" alt="Lost Letters" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://mycorrhiza.space/" title="Mycorrhiza's Space">
<img src="/assets/buttons/sites/mycorrhiza.png" alt="Mycorrhiza's Space" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://owlsroost.xyz/" title="Owl's Roost">
<img src="/assets/buttons/sites/owlsroost.gif" alt="Owl's Roost" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://pinkvampyr.leprd.space/" title="Pinkvampyr">
<img src="/assets/buttons/sites/pinkvampyr.gif" alt="Pinkvampyr" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://sanguineroyal.com/" title="Sanguine Royal">
<img src="/assets/buttons/sites/sanguineroyal.gif" alt="Sanguine Royal" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://solaria.neocities.org/" title="Solaria's Webspace">
<img src="/assets/buttons/sites/solaria.png" alt="Solaria's Webspace" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://starbreaker.org/" title="🤘 starbreaker.org 🤘">
<img src="/assets/buttons/sites/starbreaker.avif" alt="🤘 starbreaker.org 🤘" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://symliadoo.com/" title="sym's living room 🍨">
<img src="/assets/buttons/sites/symliadoo.png" alt="sym's living room 🍨" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://whiona.me/" title="Whiona">
<img src="/assets/buttons/sites/whiona.png" alt="Whiona" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://xandra.cc/" title="Museum of Alexandra">
<img src="/assets/buttons/sites/xandra.png" alt="Museum of Alexandra" width="88" height="31" loading="lazy">
</a>
</li>
</ul>
<h3>Link Exchanges</h3>
<ul>
<li><a href="https://theretrosaga.com/">The Retro Saga</a></li>
</ul>
<h3>Directories</h3>
<ul class="web-btn-wrapper">
<li>
<a href="https://pinkvampyr.leprd.space/accessiblenet/" title="Accessibility Net Directory">
<img src="/assets/buttons/directories/accessiblenet.png" alt="Accessible Net Directory" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://indieseek.xyz/" title="Indieseek.xyz Indie Web Directory">
<img src="/assets/buttons/directories/indieseek.png" alt="Indieseek.xyz Indie Web Directory" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://linklane.net/" title="Link Lane">
<img src="/assets/buttons/directories/linklane.png" alt="Link Lane" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://list-me.com/" title="List-Me.com">
<img src="/assets/buttons/directories/list-me.png" alt="List-Me.com" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://kalechips.net/responsive/" title="Responsive Web Directory">
<img src="/assets/buttons/directories/responsiveweb.png" alt="Responsive Web Directory" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://smoothsailing.asclaria.org/" title="Smooth Sailing Listings">
<img src="/assets/buttons/directories/smoothsailing.png" alt="Smooth Sailing Listings" width="88" height="31" loading="lazy">
</a>
</li>
</ul>
<h3>Communities</h3>
<ul class="web-btn-wrapper">
<li>
<a href="https://32bit.cafe/" title="32-Bit Cafe">
<img src="/assets/buttons/communities/32-bit-cafe.png" alt="32-Bit Cafe" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://zine.kalechips.net/index" title="Salad Magazine">
<img src="/assets/buttons/communities/saladmagazine.png" alt="Salad Magazine" width="88" height="31" loading="lazy">
</a>
</li>
</ul>
<h3>Fanlistings</h3>
<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>
{% include "main/webrings.njk" %}

View File

@ -1,179 +1,7 @@
--- ---
layout: main/links.njk
title: Links title: Links
desc: A collection of links. desc: A collection of links.
isContentDivided: true
eleventyNavigation: eleventyNavigation:
order: 8 order: 8
--- ---
<section class="content__section">
<h2>Link to My Website</h2>
{% include "main/site-btn.njk" %}
</section>
<section class="content__section">
<h2>Personal Sites I Enjoy</h2>
<ul class="web-btn-wrapper">
<li>
<a href="https://karuma.me/" title="10kph">
<img src="/assets/buttons/sites/10kph.png" alt="10kph" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://www.autisticasfxxk.com/" title="Autistic As Fxxk">
<img src="/assets/buttons/sites/autisticasfxxk.gif" alt="Autistic As Fxxk" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://divergentrays.com/" title="Divergent Rays">
<img src="/assets/buttons/sites/divergentrays.png" alt="Divergent Rays" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://cyberneticdryad.neocities.org/" title="Dryad Glen">
<img src="/assets/buttons/sites/dryadglen.png" alt="Dryad Glen" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://frills.dev/" title="Frills">
<img src="/assets/buttons/sites/frills.png" alt="Frills" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://groundedwren.com/" title="Grounded Wren">
<img src="/assets/buttons/sites/groundedwren.png" alt="Grounded Wren" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://jasm1nii.xyz/" title="jasmine's journal">
<img src="/assets/buttons/sites/jasminesjournal.png" alt="jasmine's journal" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://jefbecker.com/" title="JEFBECKER">
<img src="/assets/buttons/sites/jefbecker.png" alt="JEFBECKER" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://kalechips.net/" title="Kalechips">
<img src="/assets/buttons/sites/kalechips.png" alt="Kalechips" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://lostletters.neocities.org/" title="Lost Letters">
<img src="/assets/buttons/sites/lostletters.gif" alt="Lost Letters" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://mycorrhiza.space/" title="Mycorrhiza's Space">
<img src="/assets/buttons/sites/mycorrhiza.png" alt="Mycorrhiza's Space" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://owlsroost.xyz/" title="Owl's Roost">
<img src="/assets/buttons/sites/owlsroost.gif" alt="Owl's Roost" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://pinkvampyr.leprd.space/" title="Pinkvampyr">
<img src="/assets/buttons/sites/pinkvampyr.gif" alt="Pinkvampyr" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://sanguineroyal.com/" title="Sanguine Royal">
<img src="/assets/buttons/sites/sanguineroyal.gif" alt="Sanguine Royal" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://solaria.neocities.org/" title="Solaria's Webspace">
<img src="/assets/buttons/sites/solaria.png" alt="Solaria's Webspace" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://starbreaker.org/" title="🤘 starbreaker.org 🤘">
<img src="/assets/buttons/sites/starbreaker.avif" alt="🤘 starbreaker.org 🤘" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://symliadoo.com/" title="sym's living room 🍨">
<img src="/assets/buttons/sites/symliadoo.png" alt="sym's living room 🍨" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://whiona.me/" title="Whiona">
<img src="/assets/buttons/sites/whiona.png" alt="Whiona" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://xandra.cc/" title="Museum of Alexandra">
<img src="/assets/buttons/sites/xandra.png" alt="Museum of Alexandra" width="88" height="31" loading="lazy">
</a>
</li>
</ul>
</section>
<section class="content__section">
<h2>Link Exchanges</h2>
<ul>
<li><a href="https://theretrosaga.com/">The Retro Saga</a></li>
</ul>
</section>
<section class="content__section">
<h2>My Web Groups</h2>
<h3>Directories</h3>
<ul class="web-btn-wrapper">
<li>
<a href="https://pinkvampyr.leprd.space/accessiblenet/" title="Accessibility Net Directory">
<img src="/assets/buttons/directories/accessiblenet.png" alt="Accessible Net Directory" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://indieseek.xyz/" title="Indieseek.xyz Indie Web Directory">
<img src="/assets/buttons/directories/indieseek.png" alt="Indieseek.xyz Indie Web Directory" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://linklane.net/" title="Link Lane">
<img src="/assets/buttons/directories/linklane.png" alt="Link Lane" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://list-me.com/" title="List-Me.com">
<img src="/assets/buttons/directories/list-me.png" alt="List-Me.com" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://kalechips.net/responsive/" title="Responsive Web Directory">
<img src="/assets/buttons/directories/responsiveweb.png" alt="Responsive Web Directory" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://smoothsailing.asclaria.org/" title="Smooth Sailing Listings">
<img src="/assets/buttons/directories/smoothsailing.png" alt="Smooth Sailing Listings" width="88" height="31" loading="lazy">
</a>
</li>
</ul>
<h3>Communities</h3>
<ul class="web-btn-wrapper">
<li>
<a href="https://32bit.cafe/" title="32-Bit Cafe">
<img src="/assets/buttons/communities/32-bit-cafe.png" alt="32-Bit Cafe" width="88" height="31" loading="lazy">
</a>
</li>
<li>
<a href="https://zine.kalechips.net/index" title="Salad Magazine">
<img src="/assets/buttons/communities/saladmagazine.png" alt="Salad Magazine" width="88" height="31" loading="lazy">
</a>
</li>
</ul>
<h3>Fanlistings</h3>
<p>Check out <a href="https://fan.leilukin.com/">Beehive, my fanlisting collective</a> to see all fanlistings I own, have joined and have applied to join!</p>
<h3>Webrings</h3>
{% include "main/webrings.njk" %}
</section>