From 3f9a1a0e0b68e631d32947f3421523492a08e193 Mon Sep 17 00:00:00 2001
From: pancakes <p@pancakes.gay>
Date: Wed, 20 Aug 2025 17:23:40 +1000
Subject: [PATCH] Update accounts section

---
 src/data/links.json     |  18 +++----
 src/routes/+page.svelte | 101 ++++++++++++++++++++++++++++------------
 src/routes/style.css    |   9 ++++
 3 files changed, 90 insertions(+), 38 deletions(-)

diff --git a/src/data/links.json b/src/data/links.json
index 7228408..6a9caf4 100644
--- a/src/data/links.json
+++ b/src/data/links.json
@@ -3,7 +3,7 @@
         "href": "https://bsky.app/profile/pancakes.gay",
         "icon": "bluesky.png",
         "mainOnly": true,
-        "name": "Bluesky (inactive)",
+        "name": "Bluesky",
         "username": "@pancakes.gay"
     },
     {
@@ -18,27 +18,27 @@
         "name": "Discord",
         "username": "pancakesmeow"
     },
+    {
+      "href": "https://git.meow.company/pancakes",
+      "icon": "forgejo.png",
+      "name": "Forgejo",
+      "username": "pancakes"
+    },
     {
         "href": "https://github.com/pancakesmeow",
         "icon": "github-mark.png",
         "iconInvert": true,
         "mainOnly": true,
-        "name": "GitHub (inactive)",
+        "name": "GitHub",
         "username": "pancakesmeow"
     },
     {
         "href": "https://shrimp.meow.company/@pancakes",
         "icon": "iceshrimp-logo-black.svg",
         "iconInvert": true,
-        "name": "meow.company",
+        "name": "Iceshrimp.NET (Fediverse)",
         "username": "@pancakes@meow.company"
     },
-    {
-        "href": "https://git.meow.company/pancakes",
-        "icon": "forgejo.png",
-        "name": "meow forge",
-        "username": "pancakes"
-    },
     {
         "href": "https://pronouns.cc/@pancakes",
         "icon": "pronouns_cc.png",
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 235ac62..6646b60 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -61,24 +61,25 @@
 
     <p>Other places you can find me</p>
 
-    {#each links as link}
-        <div class="icon-link">
-            <img
-                    class={link.iconInvert ? "invert" : ""}
-                    src={"/assets/icons/" + link.icon}
-                    alt={link.name}
-            />
-            {#if link.href}
-                <a href={link.href} rel="me" target="_blank">
-                    {link.name}: {link.username}
-                </a>
-            {:else}
-                <span>
-                    {link.name}: {link.username}
+    <ul class="account-links">
+        {#each links as link}
+            <li class="foreground card">
+                <img class={link.iconInvert ? "invert" : ""} src={"/assets/icons/" + link.icon} alt={link.name}/>
+                <span class="account-details">
+                    {#if link.href}
+                        <a href={link.href} rel="me" target="_blank">
+                            {link.name}
+                        </a>
+                    {:else}
+                    <span>
+                        {link.name}
+                    </span>
+                    {/if}
+                    <span class="account-username">{link.username}</span>
                 </span>
-            {/if}
-        </div>
-    {/each}
+            </li>
+        {/each}
+    </ul>
 
     <h2 id="projects">Projects</h2>
 
@@ -414,18 +415,18 @@
                     />
                 </a>
             </li>
-<!--            <li>-->
-<!--                <a-->
-<!--                        href="https://floof.gay/"-->
-<!--                        target="_blank"-->
-<!--                        title="home - olivia"-->
-<!--                >-->
-<!--                    <img-->
-<!--                            src="https://floof.gay/img/badges/oli.svg"-->
-<!--                            alt="oli"-->
-<!--                    />-->
-<!--                </a>-->
-<!--            </li>-->
+            <!--            <li>-->
+            <!--                <a-->
+            <!--                        href="https://floof.gay/"-->
+            <!--                        target="_blank"-->
+            <!--                        title="home - olivia"-->
+            <!--                >-->
+            <!--                    <img-->
+            <!--                            src="https://floof.gay/img/badges/oli.svg"-->
+            <!--                            alt="oli"-->
+            <!--                    />-->
+            <!--                </a>-->
+            <!--            </li>-->
             <li>
                 <a
                         href="https://synth.download"
@@ -499,6 +500,38 @@
 </main>
 
 <style>
+    .account-links {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 1rem;
+        padding-left: 0;
+        list-style: none;
+    }
+
+    .account-links li {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 1rem;
+        margin-top: 0;
+    }
+
+    .account-links img {
+        width: 2em;
+        height: 2em;
+        object-fit: contain;
+    }
+
+    .account-details {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .account-username {
+        font-size: 0.9em;
+    }
+
     .page-links {
         padding-left: 0;
         list-style: none;
@@ -524,4 +557,14 @@
         width: 88px;
         height: 31px;
     }
+
+    @media screen and (max-width: 768px) {
+        .account-links {
+            flex-direction: column;
+        }
+
+        .account-username {
+            font-size: inherit;
+        }
+    }
 </style>
diff --git a/src/routes/style.css b/src/routes/style.css
index 21a953b..ea7ead0 100644
--- a/src/routes/style.css
+++ b/src/routes/style.css
@@ -145,7 +145,10 @@ mark {
 }
 
 button,
+.button,
 input[type="submit"] {
+    display: inline-block;
+    margin: 0.5em;
     padding: 0.5em 1em;
 
     background-color: color-mix(in srgb, var(--foreground) 70%, var(--accent));
@@ -158,6 +161,7 @@ input[type="submit"] {
 }
 
 button:hover,
+.button:hover,
 input[type="submit"]:hover {
     background-color: color-mix(in srgb, var(--foreground) 40%, var(--accent));
 }
@@ -167,6 +171,11 @@ input[type="submit"][disabled] {
     opacity: 0.6;
 }
 
+a.button {
+    color: inherit;
+    text-decoration: none;
+}
+
 input[type="text"] {
     padding: 0.5em;