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"> <ul class="web-btn-wrapper">
<div style="border: none; display: inline-flex"> <li>
<a href="https://isaacfish.neocities.org/webring/25.html"> <div style="border: none; display: inline-flex">
<img src="/assets/buttons/webrings/queercoded-left.png" alt="left arrow"> <a href="https://isaacfish.neocities.org/webring/25.html">
</a>&nbsp; <img src="/assets/buttons/webrings/queercoded-left.png" alt="left arrow">
<a href="https://isaacfish.neocities.org/webring/"> </a>&nbsp;
<img src="/assets/buttons/webrings/queercoded.png" alt="queer coded webring" title="The Queer Coded Webring"> <a href="https://isaacfish.neocities.org/webring/">
</a>&nbsp; <img src="/assets/buttons/webrings/queercoded.png" alt="queer coded webring" title="The Queer Coded Webring">
<a href="https://isaacfish.neocities.org/webring/27.html"> </a>&nbsp;
<img src="/assets/buttons/webrings/queercoded-right.png" alt="right arrow"> <a href="https://isaacfish.neocities.org/webring/27.html">
</a> <img src="/assets/buttons/webrings/queercoded-right.png" alt="right arrow">
</div> </a>
<div id='focusfirst-webring'> </div>
<script type="text/javascript" src="https://owlsroost.xyz/webring/onionring-variables.js"></script> </li>
<script type="text/javascript" src="https://owlsroost.xyz/webring/onionring-widget.js"></script> <li>
<noscript><a href='https://owlsroost.xyz/index.html'><img src="https://owlsroost.xyz/webring/focusfirst.png" alt="Focus First Index"></a></noscript> <div id='focusfirst-webring'>
</div> <script type="text/javascript" src="https://owlsroost.xyz/webring/onionring-variables.js"></script>
</div> <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; flex-wrap: wrap;
gap: 0.5rem; gap: 0.5rem;
align-items: center; align-items: center;
list-style: none;
padding: 0;
margin: 0;
} }

View File

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