feat: add webrings page

src/pages/webrings.html

@@ -0,0 +1,37 @@
+---
+title: Webrings
+description: What's a webring?
+---
+
+<h1>Webrings</h1>
+<p>
+    You're probably wondering what the <em>heck</em> is a webring? It's a collection of sites banding under a common theme or idea, and it's circular (like a ring). You can read more on <a href="https://en.wikipedia.org/wiki/Webring" target="_blank">Wikipedia</a>!
+</p>
+<p>Here are some I'm a part of! Have fun, explorer!</p>
+<h2>
+    <a href="https://cs.sjoy.lol/" target="_blank">CSS JOY Webring</a>
+</h2>
+<p>For those of us who take join in missing around with CSS :)</p>
+<ul class="[ cluster ][ list-none p-0 ]">
+    <li>
+        <a class="[ button ]"
+           href="https://webri.ng/webring/cssjoy/previous?via=https://wonderfulfrog.com/">
+            {% include "svgs/arrow-left.svg" %}
+            <span class="visually-hidden">Previous website</span>
+        </a>
+    </li>
+    <li>
+        <a class="[ button ]"
+           href="https://webri.ng/webring/cssjoy/random?via=https://wonderfulfrog.com/">
+            {% include "svgs/dice.svg" %}
+            <span class="visually-hidden">Random website</span>
+        </a>
+    </li>
+    <li>
+        <a class="[ button ]"
+           href="https://webri.ng/webring/cssjoy/next?via=https://wonderfulfrog.com/">
+            {% include "svgs/arrow-right.svg" %}
+            <span class="visually-hidden">Next website</span>
+        </a>
+    </li>
+</ul>