chore: futz with styling

src/_includes/webrings/css-joy.liquid

@@ -1,8 +1,22 @@
-<div class="mb-4" style="border: 2px outset; text-align:center">
+<div class="mb-4">
-  <p style="margin: 0; padding: 0.1em; border: 2px inset">CSS JOY Webring</p>
+  <a class="no-underline" href="https://cs.sjoy.lol">
-  <div style="display: flex">
+    <h3 class="m-0 text-xl font-bold leading-tight tracking-normal dark:text-gray-200 md:text-2xl mb-6 text-center">
-    <a style="flex: 1; margin: 0; padding: 0.1em; border: 2px inset" href="https://webri.ng/webring/cssjoy/previous?via=https://example.com/path">Previous Site</a>
+      CSS JOY Webring
-    <a style="flex: 1; margin: 0; padding: 0.1em; border: 2px inset" href="https://webri.ng/webring/cssjoy/random?via=https://example.com/path">Random Site</a>
+    </h3>
-    <a style="flex: 1; margin: 0; padding: 0.1em; border: 2px inset" href="https://webri.ng/webring/cssjoy/next?via=https://example.com/path">Next Site</a>
+  </a>
+  <div class="flex flex-row justify-center items-center">
+    <a class="link--icon" href="https://webri.ng/webring/cssjoy/previous?via=https://coryd.dev/webrings">
+      {% tablericon "arrow-left" "Previous site" "width=20 height=20" %}
+    </a>
+    <div class="flex justify-center">
+      <a href="https://webri.ng/webring/cssjoy/random?via=https://coryd.dev/webrings" class="mx-4 flex flex-row items-start md:items-center font-semibold p-2 rounded-full !no-underline !text-white dark:text-gray-900 bg-purple-600 dark:bg-purple-400 hover:bg-purple-500">
+        <span class="pt-1 md:pt-0 mr-1">
+            {% tablericon "dice-3" "Random site" "height=24" %}
+        </span>
+      </a>
+    </div>
+    <a class="link--icon" href="https://webri.ng/webring/cssjoy/next?via=https://coryd.dev/webrings">
+      {% tablericon "arrow-right" "Next site" "width=20 height=20" %}
+    </a>
   </div>
 </div>

src/_includes/webrings/the-claw.liquid

@@ -1,26 +1,17 @@
-<script
-  src="https://the-claw-webring-widget.netlify.app/the-claw-webring-widget.mjs"
-  type="module"
-></script>
 <div class="mb-4">
-  <the-claw-webring-widget fullWidth="true">
+  <div class="w-full flex justify-center">
-    <div style="color: inherit; font-family: system-ui; padding: 1rem; font-size: 1rem;">
+    {% image './src/assets/img/webrings/theclaw.png', 'The Claw Webring', '', '200px' %}
-      <div
+  </div>
-        style="display: grid; gap: 0.5rem 1rem; align-items: center; margin-bottom: 1rem; justify-content: flex-start; grid-template-areas: 'image title' 'image view';"
+  <h3 class="m-0 text-xl font-bold leading-tight tracking-normal dark:text-gray-200 md:text-2xl mb-6 text-center">
-      >
+    The Claw Webring
-        <img
+  </h3>
-          src="https://the-claw-webring.netlify.app/img/theclaw.png"
+  <div class="flex justify-center">
-          alt="The Claw Webring"
+    <a href="https://github.com/whitep4nth3r/the-claw-webring" class="flex flex-row items-start md:items-center font-semibold py-2 px-4 rounded-full !no-underline !text-white dark:text-gray-900 bg-purple-600 dark:bg-purple-400 hover:bg-purple-500">
-          style="grid-area: image; height: 4rem; transform: rotate(-8deg);"
+        <span class="pt-1 md:pt-0 mr-1">
-        />
+          {% tablericon "user-plus" "Join!" "width=20 height=20" %}
-        <h2 style="grid-area: title; font-size: 1.4rem; margin: 0;">The Claw Webring</h2>
+        </span>
-        <a
+      <span>Join!</span>
-          href="https://github.com/whitep4nth3r/the-claw-webring"
+    </a>
-          style="grid-area: view; margin: 0; color: inherit;"
+  </div>
-        >
-          View on GitHub
-        </a>
-      </div>
-    </div>
-  </the-claw-webring-widget>
 </div>
+

src/webrings.md

@@ -27,4 +27,5 @@ class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 m
 [Webrings](https://en.wikipedia.org/wiki/Webring) are _awesome_. I'm a member of a few that follow. Check them out!
 
 {% render "webrings/the-claw.liquid" %}
+<hr />
 {% render "webrings/css-joy.liquid" %}