added bucket webring links

src/lib/components/ring.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     let {
+        ringName,
         ringLink,
         prevLink,
         nextLink,
@@ -9,6 +10,7 @@
         nextSymbol,
         highlightEmoji,
     }: {
+        ringName: string;
         ringLink: string;
         prevLink: string;
         nextLink: string;
@@ -23,19 +25,19 @@
 <div class="webring-container">
     <div class="webring-row">
         <span>〔</span>
-        <a href="{ringLink}">{highlightEmoji} GAMEDEV WEBRING {highlightEmoji}</a>
+        <a href="{ringLink}">{highlightEmoji} {ringName} {highlightEmoji}</a>
         <span>〕</span>
     </div>
     <div class="webring-row">
         <span>〔</span>
-        <a href="{prevLink}">{prevSymbol} PREV</a>
+        <a href="{prevLink}">{prevSymbol} prev</a>
         {#if randLink}
-            <a href="{randLink}">RAND</a>
+            <a href="{randLink}">rand</a>
         {/if}
         {#if listLink}
-            <a href="{listLink}">LIST</a>
+            <a href="{listLink}">list</a>
         {/if}
-        <a href="{nextLink}">NEXT {nextSymbol}</a>
+        <a href="{nextLink}">next {nextSymbol}</a>
         <span>〕</span>
     </div>
 </div>
@@ -46,21 +48,25 @@
         width: fit-content;
         flex-direction: column;
         align-items: center;
-        margin: 16px 4px;
+        margin: 0 4px;
     }
     a {
         margin: 0 4px;
         text-decoration: none;
         font-size: 1.0rem;
         line-height: 1.4rem;
-        transition: color var(--duration-animation) ease-out, font-weight var(--duration-animation) ease-out;
+        font-weight: 500;
+        /* border: var(--border-width); */
+        transition: color var(--duration-animation) ease-out,
+                    font-weight var(--duration-animation) ease-out;
+                    /* border-color var(--duration-animation) ease-out; */
     }
     a:link, a:visited, span {
         color: var(--color-highlight);
     }
     a:hover {
-        font-weight: 600;
         color: var(--color-highlight-alt);
+        text-decoration: inherit;
     }
     .webring-row {
         font-family: var(--font-mono);

src/routes/+page.svelte

@@ -80,14 +80,27 @@
     </div>
 
     <div class="webring-container">
+        <!-- bucket webring -->
         <Webring
+            ringName="bucket webring"
+            ringLink="https://webring.bucketfish.me"
+            prevLink="https://webring.bucketfish.me/redirect.html?to=prev&name=denizk0461"
+            nextLink="https://webring.bucketfish.me/redirect.html?to=next&name=denizk0461"
+            randLink="https://webring.bucketfish.me/redirect.html?to=random&name=denizk0461"
+            prevSymbol="⥼"
+            nextSymbol="⥽"
+            highlightEmoji="🏳️‍🌈" />
+        
+        <!-- gamedev webring -->
+        <Webring
+            ringName="gamedev webring"
             ringLink="https://www.rainbowcemetery.com/devring"
             prevLink="https://www.rainbowcemetery.com/devring/prev.php?id=18"
             nextLink="https://www.rainbowcemetery.com/devring/next.php?id=18"
             randLink="https://www.rainbowcemetery.com/devring/rand.php?id=18"
             listLink="https://www.rainbowcemetery.com/devring/list.php?id=18"
-            prevSymbol="&lt;&lt;"
-            nextSymbol="&gt;&gt;"
+            prevSymbol="&lt;"
+            nextSymbol="&gt;"
             highlightEmoji="👾" />
     </div>
 
@@ -125,6 +138,7 @@
         flex-direction: row;
         align-items: center;
         justify-content: center;
+        margin: 16px 0;
     }
 
     .gradient-title {
@@ -138,4 +152,11 @@
         -webkit-text-fill-color: transparent;
         padding-bottom: 12px;
     }
+
+    @media screen and (max-width: 700px) {
+        .webring-container {
+            flex-direction: column;
+            gap: 16px;
+        }
+    }
 </style>