From aeb6ceadab1a1f11b3d32dfe4cd8eddca4f1a6f9 Mon Sep 17 00:00:00 2001
From: isabel <isabel@isabelroses.com>
Date: Sun, 6 Jul 2025 15:56:28 +0100
Subject: [PATCH] feat: webrings page

---
 src/components/Footer.astro | 36 ++++++++++++------------------------
 src/pages/friends.astro     | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 7b7e250..8076b90 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -3,6 +3,18 @@ import { Icon } from 'astro-icon/components'
 ---
 
 <footer class="sm:grid grid-cols-3 flex flex-col gap-2 items-center justify-center py-20 bg-bg border-card border-t-1 w-full">
+  <div class="text-center">
+    <span>
+      © Licensed under
+      <a
+        target="_blank"
+        href="https://github.com/isabelroses/website/blob/main/LICENSE"
+      >
+        MIT
+      </a>
+    </span>
+  </div>
+
   <ul class="align-footer">
     <li>
       <a rel="me noreferrer" href="/feed.xml" title="feed">
@@ -64,20 +76,6 @@ import { Icon } from 'astro-icon/components'
     </li>
   </ul>
 
-  <div>
-    <span class="align-footer">
-      <a href="https://ctp-webr.ing/isabelroses/previous" aria-label="previous catppuccin webring"><Icon name="fa6-solid:arrow-left" class="icon" /></a>
-        <a href="https://ctp-webr.ing/" aria-label="catppuccin webring"><Icon name="fa6-solid:circle-nodes" class="icon" /></a>
-      <a href="https://ctp-webr.ing/isabelroses/next" aria-label="license-text catppuccin webring"><Icon name="fa6-solid:arrow-right" class="icon" /></a>
-    </span>
-
-    <span class="align-footer">
-      <a href="https://aberwebr.ing/isabelroses/left" aria-label="previous aberystwyth webring"><Icon name="fa6-solid:arrow-left" class="icon" /></a>
-        <a href="https://aberwebr.ing/" aria-label="aberystwyth webring"><Icon name="fa6-solid:a" class="icon" /></a>
-      <a href="https://aberwebr.ing/isabelroses/right" aria-label="license-text aberystwyth webring"><Icon name="fa6-solid:arrow-right" class="icon" /></a>
-    </span>
-  </div>
-
   <div class="text-center">
     <form name="themes" id="form-themes">
       <select
@@ -95,15 +93,5 @@ import { Icon } from 'astro-icon/components'
         <option value="cuddlefish">Cuddlefish</option>
       </select>
     </form>
-
-    <span>
-      © Licensed under
-      <a
-        target="_blank"
-        href="https://github.com/isabelroses/website/blob/main/LICENSE"
-      >
-        MIT
-      </a>
-    </span>
   </div>
 </footer>
diff --git a/src/pages/friends.astro b/src/pages/friends.astro
index effb1e7..93c5229 100644
--- a/src/pages/friends.astro
+++ b/src/pages/friends.astro
@@ -1,6 +1,7 @@
 ---
 import Default from "../layouts/Default.astro";
 import Title from '../components/Title.astro';
+import { Icon } from 'astro-icon/components'
 import { Code } from 'astro-expressive-code/components'
 import { FRIENDS } from '../consts';
 
@@ -30,4 +31,35 @@ const description = "Awesome people I know from the interwebs";
       <Code code=`<img src="https://isabelroses.com/badges/me.gif" alt="isabel roses" width="88" height="31" />` lang="html" />
     </div>
   </section>
+
+
+  <section class="flex flex-col gap-4 mb-16 h-full w-full">
+    <Title title="Webrings" description="I am part of these web rings" size="lg" />
+
+    <div class="flex flex-col gap-4">
+      <div class="grid lg:grid-cols-6 grid-cols-3 h-20 border border-card rounded shadow-md bg-bg-lighter items-center text-center justify-center">
+        <a class="h-full flex items-center justify-center border-r border-r-card group" href="https://ctp-webr.ing/isabelroses/previous" aria-label="previous catppuccin webring">
+          <Icon name="fa6-solid:arrow-left" class="icon inline-block translate-x-0 group-hover:-translate-x-1 transition-transform ease-in-out duration-200" />
+        </a>
+
+        <a class="h-full flex items-center justify-center lg:col-span-4" href="https://ctp-webr.ing/" aria-label="catppuccin webring">Catppuccin webring</a>
+
+        <a class="h-full flex items-center justify-center border-l border-l-card group" href="https://ctp-webr.ing/isabelroses/next" aria-label="license-text catppuccin webring">
+          <Icon name="fa6-solid:arrow-right" class="icon inline-block translate-x-0 group-hover:translate-x-1 transition-transform ease-in-out duration-200" />
+        </a>
+      </div>
+
+      <div class="grid lg:grid-cols-6 grid-cols-3 h-20 border border-card rounded shadow-md bg-bg-lighter items-center text-center justify-center">
+        <a class="h-full flex items-center justify-center border-r border-r-card group" href="https://aberwebr.ing/isabelroses/left" aria-label="previous aberystwyth webring">
+          <Icon name="fa6-solid:arrow-left" class="icon inline-block translate-x-0 group-hover:-translate-x-1 transition-transform ease-in-out duration-200"/>
+        </a>
+
+        <a class="h-full flex items-center justify-center lg:col-span-4" href="https://aberwebr.ing/" aria-label="aberystwyth webring">Aberystwyth webring</a>
+
+        <a class="h-full flex items-center justify-center border-l border-l-card group" href="https://aberwebr.ing/isabelroses/right" aria-label="next aberystwyth webring">
+          <Icon name="fa6-solid:arrow-right" class="icon inline-block translate-x-0 group-hover:translate-x-1 transition-transform ease-in-out duration-200" />
+        </a>
+      </div>
+    </div>
+  </section>
 </Default>
-- 
2.51.2