From 499317ac09a361c49ec59cad4fb652250d15ec4a Mon Sep 17 00:00:00 2001
From: Satria <admin@satr14.my.id>
Date: Thu, 19 Mar 2026 11:00:57 +0700
Subject: [PATCH] new styles for buttom items

---
 src/lib/index.ts        |  4 +---
 src/routes/+page.svelte | 35 +++++++++++++++++------------------
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/src/lib/index.ts b/src/lib/index.ts
index f24f6e5..2859a5f 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -189,9 +189,7 @@ export default {
     links: {
         "git": "https://git.satr14.my.id",
         "fetch.sh": "https://fetch.satr14.my.id",
-        "flake.nix": "https://git.satr14.my.id/satr14/nix-flake",
-        "is-a.dev": "https://is-a.dev/",
-        "part-of.my.id": "https://part-of.my.id/",
+        "flake.nix": "https://flake.satr14.my.id",
     },
     communities: {
         "part-of.my.id": {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8ba845d..a8e4eec 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -99,27 +99,26 @@
                         <span class="bg-ctp-surface0 text-ctp-text px-2 py-1 rounded-full no-underline text-xs sm:text-sm">{skill}</span>
                     {/each}
                 </p>
-                <p class="flex flex-wrap gap-1">
-                    {#each Object.entries(data.links) as [title, url], i}
-                        {#if i > 0}<span class="text-ctp-subtext1">~</span>{/if}
-                        <a href={url} target="_blank">{title}</a>
+                <div class="flex flex-row gap-1">
+                    {#each Object.entries(data.links) as [title, url]}
+                        <a href={url} target="_blank" class="flex items-center justify-between rounded-lg px-2 py-1 hover:bg-ctp-surface0 text-sm">
+                            {title}
+                            <span class="text-ctp-overlay1 text-xs">↗</span>
+                        </a>
                     {/each}
-                </p>
-            </article>
-            <!-- hate optimizing images ;-; -->
-            <section class="flex flex-wrap gap-4 px-4 pb-4">
-                {#each Object.entries(data.communities) as [name,details], i}
-                    <div class="inline-block">
-                        <div class="flex gap-2">
-                            <img src={details.icon} alt={name} class="size-12 rounded-lg">
+                </div>
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 py-4">
+                    {#each Object.entries(data.communities) as [name, details]}
+                        <a href={details.url} target="_blank" class="flex items-center gap-3 rounded-lg p-2 hover:bg-ctp-surface0">
+                            <img src={details.icon} alt={name} class="size-9 rounded-lg" />
                             <div>
-                                <h2 class="text-base m-0"><a href={details.url}>{name}</a></h2>
-                                <span>{details.role}</span>
+                                <span class="text-sm block leading-tight text-ctp-text font-bold">{name}</span>
+                                <span class="text-xs text-ctp-subtext0">{details.role}</span>
                             </div>
-                        </div>
-                    </div>
-                {/each}
-            </section>
+                        </a>
+                    {/each}
+                </div>
+            </article>
         </main>
     </div>
 </div>
\ No newline at end of file