Update accounts section

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",

src/routes/+page.svelte

@@ -61,24 +61,25 @@
 
     <p>Other places you can find me</p>
 
+    <ul class="account-links">
         {#each links as link}
-        <div class="icon-link">
-            <img
-                    class={link.iconInvert ? "invert" : ""}
-                    src={"/assets/icons/" + link.icon}
-                    alt={link.name}
-            />
+            <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}: {link.username}
+                            {link.name}
                         </a>
                     {:else}
                     <span>
-                    {link.name}: {link.username}
+                        {link.name}
                     </span>
                     {/if}
-        </div>
+                    <span class="account-username">{link.username}</span>
+                </span>
+            </li>
         {/each}
+    </ul>
 
     <h2 id="projects">Projects</h2>
 
@@ -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>

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;