Wrap website buttons and webrings into list elements

This commit is contained in:
Helen Chong 2024-05-29 09:22:44 +08:00
parent 20201fc653
commit a1520dbeb1
3 changed files with 59 additions and 40 deletions

View File

@ -1,18 +1,22 @@
<div class="web-btn-wrapper">
<div style="border: none; display: inline-flex">
<a href="https://isaacfish.neocities.org/webring/25.html">
<img src="/assets/buttons/webrings/queercoded-left.png" alt="left arrow">
</a>&nbsp;
<a href="https://isaacfish.neocities.org/webring/">
<img src="/assets/buttons/webrings/queercoded.png" alt="queer coded webring" title="The Queer Coded Webring">
</a>&nbsp;
<a href="https://isaacfish.neocities.org/webring/27.html">
<img src="/assets/buttons/webrings/queercoded-right.png" alt="right arrow">
</a>
</div>
<div id='focusfirst-webring'>
<script type="text/javascript" src="https://owlsroost.xyz/webring/onionring-variables.js"></script>
<script type="text/javascript" src="https://owlsroost.xyz/webring/onionring-widget.js"></script>
<noscript><a href='https://owlsroost.xyz/index.html'><img src="https://owlsroost.xyz/webring/focusfirst.png" alt="Focus First Index"></a></noscript>
</div>
</div>
<ul class="web-btn-wrapper">
<li>
<div style="border: none; display: inline-flex">
<a href="https://isaacfish.neocities.org/webring/25.html">
<img src="/assets/buttons/webrings/queercoded-left.png" alt="left arrow">
</a>&nbsp;
<a href="https://isaacfish.neocities.org/webring/">
<img src="/assets/buttons/webrings/queercoded.png" alt="queer coded webring" title="The Queer Coded Webring">
</a>&nbsp;
<a href="https://isaacfish.neocities.org/webring/27.html">
<img src="/assets/buttons/webrings/queercoded-right.png" alt="right arrow">
</a>
</div>
</li>
<li>
<div id='focusfirst-webring'>
<script type="text/javascript" src="https://owlsroost.xyz/webring/onionring-variables.js"></script>
<script type="text/javascript" src="https://owlsroost.xyz/webring/onionring-widget.js"></script>
<noscript><a href='https://owlsroost.xyz/index.html'><img src="https://owlsroost.xyz/webring/focusfirst.png" alt="Focus First Index"></a></noscript>
</div>
</li>
</ul>

View File

@ -141,4 +141,7 @@
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
}

View File

@ -15,17 +15,23 @@ eleventyNavigation:
<section class="content__section">
<h2>Personal Sites I Enjoy</h2>
<div class="web-btn-wrapper">
<a href="https://groundedwren.com/">
<img src="/assets/buttons/sites/groundedwren.png" alt="Grounded Wren" title="Grounded Wren">
</a>
<a href="https://owlsroost.xyz/">
<img src="/assets/buttons/sites/owlsroost.gif" alt="Owl's Roost" title="Owl's Roost">
</a>
<a href="https://kalechips.net/">
<img src="/assets/buttons/sites/kalechips.png" alt="Kalechips" title="Kalechips">
</a>
</div>
<ul class="web-btn-wrapper">
<li>
<a href="https://groundedwren.com/" title="Grounded Wren">
<img src="/assets/buttons/sites/groundedwren.png" alt="Grounded Wren">
</a>
</li>
<li>
<a href="https://owlsroost.xyz/" title="Owl's Roost">
<img src="/assets/buttons/sites/owlsroost.gif" alt="Owl's Roost">
</a>
</li>
<li>
<a href="https://kalechips.net/" title="Kalechips">
<img src="/assets/buttons/sites/kalechips.png" alt="Kalechips">
</a>
</li>
</ul>
</section>
<section class="content__section">
@ -38,17 +44,23 @@ eleventyNavigation:
{% include "main/webrings.njk" %}
<h3>Fanlistings</h3>
<div class="web-btn-wrapper">
<a href="https://glitterskies.org/kotor/">
<img src="/assets/buttons/fanlistings/kotor-100x50.png" alt="Website button of a Star Wars: Knights of the Old Republic fanlisting" title="Erased Identity - Star Wars: Knights of the Old Republic fanlisting">
</a>
<a href="https://glitterskies.org/kotor2/">
<img src="/assets/buttons/fanlistings/kotor2-100x50.jpg" alt="Website button of a Star Wars: Knights of the Old Republic 2 fanlisting" title="Mysteries of Malachor - Star Wars: Knights of the Old Republic 2: The Sith Lords fanlisting">
</a>
<a href="https://inspirationally.net/jedi/">
<img src="/assets/buttons/fanlistings/jedi-100x50.png" alt="Website button of a Jedi fanlisting" title="Keepers of the Peace // the Star Wars: [+] Jedi fanlisting">
</a>
</div>
<ul class="web-btn-wrapper">
<li>
<a href="https://glitterskies.org/kotor/" title="Erased Identity - Star Wars: Knights of the Old Republic fanlisting">
<img src="/assets/buttons/fanlistings/kotor-100x50.png" alt="Website button of a Star Wars: Knights of the Old Republic fanlisting">
</a>
</li>
<li>
<a href="https://glitterskies.org/kotor2/" title="Mysteries of Malachor - Star Wars: Knights of the Old Republic 2: The Sith Lords fanlisting">
<img src="/assets/buttons/fanlistings/kotor2-100x50.jpg" alt="Website button of a Star Wars: Knights of the Old Republic 2 fanlisting">
</a>
</li>
<li>
<a href="https://inspirationally.net/jedi/" title="Keepers of the Peace // the Star Wars: [+] Jedi fanlisting">
<img src="/assets/buttons/fanlistings/jedi-100x50.png" alt="Website button of a Jedi fanlisting">
</a>
</li>
</ul>
</section>
<section class="content__section">