From c0ff5af4bb993f0c85414453752696074c40309c Mon Sep 17 00:00:00 2001
From: pancakes <p@pancakes.gay>
Date: Wed, 20 Aug 2025 01:51:36 +1000
Subject: [PATCH] Touch up styles and buttons layout

---
 src/data/pages/misskey-comparison.md |  16 +
 src/lib/components/Navbar.svelte     |  18 +-
 src/routes/+page.svelte              | 655 +++++++++++++--------------
 src/routes/style.css                 | 249 ++--------
 4 files changed, 374 insertions(+), 564 deletions(-)

diff --git a/src/data/pages/misskey-comparison.md b/src/data/pages/misskey-comparison.md
index feee07e..9680728 100644
--- a/src/data/pages/misskey-comparison.md
+++ b/src/data/pages/misskey-comparison.md
@@ -20,6 +20,7 @@ This page aims to provide a rough timeline of each notable fork and a comparison
 | ![Firefish icon](/assets/page/misskey-comparison/firefish.svg) <!--rehype:class=icon-->   | Firefish       | v20241205        | [@firefish@info.firefish.dev](https://info.firefish.dev/@firefish) | None                          | <https://firefish.dev/firefish/firefish>            |
 | ![Iceshrimp icon](/assets/page/misskey-comparison/iceshrimp.png) <!--rehype:class=icon--> | Iceshrimp (JS) | v2023.12.11      | None                                                               | None                          | <https://iceshrimp.dev/iceshrimp/iceshrimp>         |
 | ![Sharkey icon](/assets/page/misskey-comparison/sharkey.png) <!--rehype:class=icon-->     | Sharkey        | 2024.11.2        | [@Sharkey@sharkey.team](https://sharkey.team/@Sharkey)             | <https://joinsharkey.org/>    | <https://activitypub.software/TransFem-org/Sharkey> |
+<!--rehype:class=rows-->
 
 ### Iceshrimp
 
@@ -621,4 +622,19 @@ Brief descriptions of each feature listed above. I'm keeping them vague as they
     img.icon {
         width: 2em;
     }
+
+    .table-y {
+        background-color: var(--success);
+        color: black;
+    }
+    
+    .table-p {
+        background-color: var(--warn);
+        color: black;
+    }
+    
+    .table-n {
+        background-color: var(--error);
+        color: black;
+    }
 </style>
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index b3c35b0..fa1aaf1 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -65,12 +65,7 @@
     }
 
     a {
-        color: var(--foreground);
-    }
-
-    a:hover {
-        background-color: var(--foreground);
-        color: var(--background);
+        color: var(--text);
     }
 
     .brand {
@@ -81,15 +76,8 @@
         border-radius: 20%;
     }
 
-    .brand > a,
-    .brand > a:visited {
+    .brand > a {
         font-weight: bold;
-        text-decoration-color: var(--accent);
-        text-decoration-style: wavy;
-    }
-
-    .brand > a:hover {
-        background-color: var(--accent);
-        color: var(--background);
+        text-decoration: none;
     }
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index de78df6..1a46f3d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,6 @@
 <script>
     import DateTime from "$lib/components/DateTime.svelte";
-    import { getPages } from "$lib/pages";
+    import {getPages} from "$lib/pages";
     import contributions from "../data/contributions.json"
     import links from "../data/links.json";
     import projects from "../data/projects.json";
@@ -8,6 +8,7 @@
     const pages = getPages();
 
     let ntfyLock = $state(false);
+
     async function sendNtfyMessage() {
         if (ntfyLock) return;
         ntfyLock = true;
@@ -46,7 +47,8 @@
         <h1 id="about-me">About Me</h1>
         <p>
             I'm a 22 year old enby (<em>they/it</em>) from Australia (it's
-            <DateTime display="time" timeZone="Australia/Brisbane" />). I like
+            <DateTime display="time" timeZone="Australia/Brisbane"/>
+            ). I like
             cats, Linux, and programming in C# and Python (for now). You can
             find my links, projects, and other pages here.
         </p>
@@ -59,9 +61,9 @@
     {#each links as link}
         <div class="icon-link">
             <img
-                class={link.iconInvert ? "invert" : ""}
-                src={"/assets/icons/" + link.icon}
-                alt={link.name}
+                    class={link.iconInvert ? "invert" : ""}
+                    src={"/assets/icons/" + link.icon}
+                    alt={link.name}
             />
             {#if link.href}
                 <a href={link.href} rel="me" target="_blank">
@@ -81,7 +83,7 @@
 
     <ul class="page-links">
         {#each projects as project}
-            <li>
+            <li class="foreground card">
                 <h3>
                     <a href={project.href} target="_blank">
                         {project.name}
@@ -98,7 +100,7 @@
 
     <ul class="page-links">
         {#each contributions as contribution}
-            <li>
+            <li class="foreground card">
                 <h3>
                     <a href={contribution.href} target="_blank">
                         {contribution.name}
@@ -124,8 +126,8 @@
         <p>
             Content under the pages section uses the
             <a
-                href="https://creativecommons.org/licenses/by-sa/4.0/"
-                target="_blank"
+                    href="https://creativecommons.org/licenses/by-sa/4.0/"
+                    target="_blank"
             >
                 Creative Commons Attribution-ShareAlike 4.0 International (CC
                 BY-SA 4.0)
@@ -136,7 +138,7 @@
 
     <ol class="page-links">
         {#each pages as page}
-            <li>
+            <li class="foreground card">
                 <h3>
                     <a href={"/" + page.slug + "/"}>
                         {page.title}
@@ -147,12 +149,12 @@
                     <p>
                         <small>
                             Published:
-                            <DateTime datetime={page.published} />
+                            <DateTime datetime={page.published}/>
                             {#if page.edited}
                                 &bull; Last edited:
                                 <DateTime
-                                    datetime={page.edited}
-                                    display="dateTime"
+                                        datetime={page.edited}
+                                        display="dateTime"
                                 />
                             {/if}
                         </small>
@@ -162,314 +164,305 @@
         {/each}
     </ol>
 
-    <h2 id="more">More</h2>
+    <h2 id="buttons">Buttons</h2>
 
-    <h3 id="buttons">Buttons</h3>
+    <p>Click my buttons</p>
 
-    <p>pancakes (me)</p>
+    <div class="foreground card">
+        <h3>pancakes</h3>
 
-    <ul class="buttons">
-        <li>
-            <a href="/" title="pancakes">
-                <img src="/assets/88x31.png" alt="pancakes" />
-            </a>
-        </li>
-        <li>
-            <a href="https://meow.company" target="_blank" title="meow.company">
+        <ul class="buttons">
+            <li>
+                <a href="/" title="pancakes">
+                    <img src="/assets/88x31.png" alt="pancakes"/>
+                </a>
+            </li>
+            <li>
                 <img
-                        src="https://meow.company/88x31.png"
-                        alt="meow dot company"
+                        src="/assets/buttons/anythingbutchrome.gif"
+                        alt="Anything But Chrome"
+                        title="Anything But Chrome"
                 />
-            </a>
-        </li>
-    </ul>
+            </li>
+            <li>
+                <a href="https://archlinux.org" target="_blank" title="arch linux">
+                    <img src="/assets/buttons/archlinux.gif" alt="arch linux"/>
+                </a>
+            </li>
+            <li>
+                <img
+                        src="/assets/buttons/emulate.gif"
+                        alt="Emulate Now!"
+                        title="Emulate Now!"
+                />
+            </li>
+            <li>
+                <a
+                        href="https://www.mozilla.org/en-US/firefox/"
+                        target="_blank"
+                        title="Get Firefox"
+                >
+                    <img src="/assets/buttons/getfirefox.gif" alt="Get Firefox"/>
+                </a>
+            </li>
+            <li>
+                <a
+                        href="https://iceshrimp.dev/iceshrimp/Iceshrimp.NET"
+                        target="_blank"
+                        title="Iceshrimp.NET"
+                >
+                    <img src="/assets/buttons/iceshrimp_now_dark.png" alt="Iceshrimp Now!"/>
+                </a>
+            </li>
+            <li>
+                <img
+                        src="/assets/buttons/fediverse.gif"
+                        alt="Join the Fediverse"
+                        title="Join the Fediverse"
+                />
+            </li>
+            <li>
+                <img
+                        src="/assets/buttons/xenia.gif"
+                        alt="Linux Now!"
+                        title="Linux Now!"
+                />
+            </li>
+            <li>
+                <img
+                        src="/assets/buttons/paws.png"
+                        alt="made with My Own Two Paws"
+                        title="made with MY OWN TWO PAWS"
+                />
+            </li>
+            <li>
+                <img
+                        src="/assets/buttons/nonbinary.png"
+                        alt="Non-binary flag"
+                        title="Non-binary"
+                />
+            </li>
+            <li>
+                <a
+                        href="https://www.debian.org/"
+                        target="_blank"
+                        title="Powered by debian"
+                >
+                    <img src="/assets/buttons/debian.png" alt="Powered by debian"/>
+                </a>
+            </li>
+            <li>
+                <a href="https://scp-wiki.wikidot.com/" target="_blank" title="SCP">
+                    <img src="/assets/buttons/scp.png" alt="SCP"/>
+                </a>
+            </li>
+            <li>
+                <a
+                        href="https://store.steampowered.com/app/440/Team_Fortress_2/"
+                        target="_blank"
+                        title="Team Fortress GET IT!"
+                >
+                    <img
+                            src="/assets/buttons/team_fortress_get_it.gif"
+                            alt="Team Fortress Get It!"
+                    />
+                </a>
+            </li>
+            <li>
+                <a
+                        href="https://ublockorigin.com/"
+                        target="_blank"
+                        title="uBlock Origin Now!"
+                >
+                    <img
+                            src="/assets/buttons/ublock.png"
+                            alt="uBlock Origin Now!"
+                    />
+                </a>
+            </li>
+            <li>
+                <img src="/assets/buttons/wii.png" alt="Wii" title="Wii"/>
+            </li>
+        </ul>
+    </div>
 
-    <p>Other people and entities</p>
+    <div class="foreground card">
+        <h3>Other sites</h3>
 
-    <ul class="buttons">
-        <li>
-            <a href="https://aagaming.me/" target="_blank" title="aagaming">
-                <img
-                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAAfCAYAAABjyArgAAAACXBIWXMAAAsTAAALEwEAmpwYAAADVUlEQVR4nO3XiU/TYBjH8f59xmjUaIxGjfeBCAIqarxiVETFA5HLKxqPP8ErSiQaTYz3EY+ojG3d0R2EwU73NW1f2nWHTNicW0fSvO3TbW/74dlvbyVJkqhvUjkN6sBSHViqyLdM/at3sFQHxuYxVAVf1chDiAxBZBgmnpj16AuIvoLoG4i+M+uxLxD/BvHvkBgx60kZkl5IKZAK6rVf45Ce0PfTCUs8ZEbE1H52PbOW79x/D8z4feuxAGbyubUefStwP1rriR9idFrrqYAAHhO4k2JM5qBOB56NXV3AkXtZwMMC+Jm1HntdAPi7GB3WelIR0GEBnb+LC8HVDvD4nQzsRxB5LICfmvXoSy0qdOD31vfHv+UAazGR9AnYkBgjAjhmL2BJg70LkQdif8isTzwzokJFNuqxDxD7BPHPEP9q1hMOSLgMZG1M6cDGa9JRAZUC0kVBVnUGS7P952QA/5P57Af8uQ4slRpVXbbF3uX84JWzawvEQ/EdjHsbyNsr3pFS9W1FAsuNYmwBua3SF03tAbu3Wo89Oyp94dQYcAO4G0FuykDeWfILInwTxm7bEXgLyA0ii5szkHeVBjZ0FULXBPItGwK7Noku3mrpYh25feawwQEIXrTWwjftCLxR72IVWW4Ed3MW8m7w7gXvfvAeAN9h8B0B37E/4Pbm1sLXIHzDjsDrRReryCpwRhbLf85i/B3g77TWAucLR0X4ul2BN4Jrs4gJPYuRW4ueDOUkKKdAOZP/fPAShK4YWWwz4LU6slvv4tlMitKVB3cwA/iqDYGda4wuLsXEKKezgPshNAihS5UGqQywjrwOXBuMLtaiwt2kPULjaf3rdTGBs2LsgWBf3hVFDWzToS4H50pwrioOzbMLvFMrin3gPTgN8jntB49Ar0AerE1gRubCyHxwLADHInAshtGlMLoMRlcI5NVmVKhd7Coui/EeMpdt/o48yN16F2vIA7UKPGdGH2A+QjeDpwU8baKL28G7R1sX57xHOQ7+E9qKQj82u/g/ACkPsHajP9UunlfySfCpDx4HtS7Oxe7SshilG4I9tQ1s3LQWFQvLMiFqVPiPgv94/vOBCxDoq21g42a1LF5Stsnxd+oPHv586+J+bUVB8HKlgWa1/QYdo4m5c/5ljgAAAABJRU5ErkJggg=="
-                    alt="AA gaming"
-                />
-            </a>
-        </li>
-        <li>
-            <a
-                href="https://astrid.tech/"
-                target="_blank"
-                title="astrid dot tech"
-            >
-                <img
-                    src="https://s3.us-west-000.backblazeb2.com/nyaabucket/a313cf12a8c46d0262c69cdf8a3accc3b6a2d159b8e1211b7abe30886a212884/astriddottech.png"
-                    alt="astrid dot tech"
-                />
-            </a>
-        </li>
-        <li>
-            <a
-                    href="https://atapi.space/"
-                    target="_blank"
-                    title="Atapi's Homepage"
-            >
-                <img
-                        src="https://atapi.space/assets/img/buttons/atapi.gif"
-                        alt="Atapi"
-                />
-            </a>
-        </li>
-<!--        <li>-->
-<!--            <a-->
-<!--                href="https://blueb.pages.gay"-->
-<!--                target="_blank"-->
-<!--                title="blueb's website"-->
-<!--            >-->
-<!--                <img-->
-<!--                    src="https://blueb.pages.gay/_nuxt/kattgutte.D3vLs2tl.png"-->
-<!--                    alt="kattgutte er ikke ekte"-->
-<!--                />-->
-<!--            </a>-->
-<!--        </li>-->
-<!--        <li>-->
-<!--            <a href="https://elke.cafe/" target="_blank" title="elke.cafe">-->
-<!--                <img-->
-<!--                    src="https://elke.cafe/assets/images/buttons/elke.cafe.gif"-->
-<!--                    alt="elke dot cafe"-->
-<!--                />-->
-<!--            </a>-->
-<!--        </li>-->
-        <li>
-            <a
-                href="https://eris.meows.gay/"
-                target="_blank"
-                title="eris meow :3"
-            >
-                <img
-                    src="https://eris.meows.gay/images/badges/eris.png"
-                    alt="eris"
-                />
-            </a>
-        </li>
-        <li>
-            <a
-                    href="https://houl.floof.company/"
-                    target="_blank"
-                    title="Houl Floof :3c"
-            >
-                <img
-                        src="https://houl.floof.company/assets/images/buttons/houl.png"
-                        alt="Houl"
-                />
-            </a>
-        </li>
-        <li>
-            <a
-                href="https://lilysthings.org/"
-                target="_blank"
-                title="Lily's Things at The Cool Site"
-            >
-                <img
-                    src="https://lilysthings.org/buttons/lilysthings.png"
-                    alt="lily!!"
-                />
-            </a>
-        </li>
-        <li>
-            <a
-                href="https://microspinny.zip/"
-                target="_blank"
-                title="microsite"
-            >
-                <img src="/assets/buttons/micro.png" alt="Micro" />
-            </a>
-        </li>
-        <li>
-            <a
-                href="https://nelle.observer/"
-                target="_blank"
-                title="nelle.observer"
-            >
-                <img
-                    src="https://nelle.observer/assets/images/badges/mine/nelleobserver-gray.gif"
-                    alt="nelle observer"
-                />
-            </a>
-        </li>
-        <li>
-            <a
-                    href="https://notfire.cc"
-                    target="_blank"
-                    title="home // notfire.cc"
-            >
-                <img
-                        src="https://notfire.cc/design/images/buttons/notfire-cc-88x31-af-darkv.gif"
-                        alt="not fire dot CC"
-                />
-            </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"
-                target="_blank"
-                title="synth download!"
-            >
-                <img
-                    src="https://synth.download/assets/buttons/synth.download.svg"
-                    alt="Synth.Download!"
-                />
-            </a>
-        </li>
-        <li>
-            <a href="https://void.rehab" target="_blank" title="void.rehab">
-                <img
-                    src="https://void.rehab/88x31/void.rehab.png"
-                    alt="void dot rehab"
-                />
-            </a>
-        </li>
-        <li>
-            <a href="https://w.on-t.work/" target="_blank" title="Won't Work!">
-                <img
-                    src="https://w.on-t.work/assets/88x31.png"
-                    alt="wont work"
-                />
-            </a>
-        </li>
-        <li>
-            <a href="https://zvava.org/" target="_blank" title="zvava.org">
-                <img
-                    src="https://zvava.org/images/buttons/zvava.org.png"
-                    alt="zvava dot org"
-                />
-            </a>
-        </li>
-    </ul>
+        <ul class="buttons">
+            <li>
+                <a href="https://aagaming.me/" target="_blank" title="aagaming">
+                    <img
+                            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAAfCAYAAABjyArgAAAACXBIWXMAAAsTAAALEwEAmpwYAAADVUlEQVR4nO3XiU/TYBjH8f59xmjUaIxGjfeBCAIqarxiVETFA5HLKxqPP8ErSiQaTYz3EY+ojG3d0R2EwU73NW1f2nWHTNicW0fSvO3TbW/74dlvbyVJkqhvUjkN6sBSHViqyLdM/at3sFQHxuYxVAVf1chDiAxBZBgmnpj16AuIvoLoG4i+M+uxLxD/BvHvkBgx60kZkl5IKZAK6rVf45Ce0PfTCUs8ZEbE1H52PbOW79x/D8z4feuxAGbyubUefStwP1rriR9idFrrqYAAHhO4k2JM5qBOB56NXV3AkXtZwMMC+Jm1HntdAPi7GB3WelIR0GEBnb+LC8HVDvD4nQzsRxB5LICfmvXoSy0qdOD31vfHv+UAazGR9AnYkBgjAjhmL2BJg70LkQdif8isTzwzokJFNuqxDxD7BPHPEP9q1hMOSLgMZG1M6cDGa9JRAZUC0kVBVnUGS7P952QA/5P57Af8uQ4slRpVXbbF3uX84JWzawvEQ/EdjHsbyNsr3pFS9W1FAsuNYmwBua3SF03tAbu3Wo89Oyp94dQYcAO4G0FuykDeWfILInwTxm7bEXgLyA0ii5szkHeVBjZ0FULXBPItGwK7Noku3mrpYh25feawwQEIXrTWwjftCLxR72IVWW4Ed3MW8m7w7gXvfvAeAN9h8B0B37E/4Pbm1sLXIHzDjsDrRReryCpwRhbLf85i/B3g77TWAucLR0X4ul2BN4Jrs4gJPYuRW4ueDOUkKKdAOZP/fPAShK4YWWwz4LU6slvv4tlMitKVB3cwA/iqDYGda4wuLsXEKKezgPshNAihS5UGqQywjrwOXBuMLtaiwt2kPULjaf3rdTGBs2LsgWBf3hVFDWzToS4H50pwrioOzbMLvFMrin3gPTgN8jntB49Ar0AerE1gRubCyHxwLADHInAshtGlMLoMRlcI5NVmVKhd7Coui/EeMpdt/o48yN16F2vIA7UKPGdGH2A+QjeDpwU8baKL28G7R1sX57xHOQ7+E9qKQj82u/g/ACkPsHajP9UunlfySfCpDx4HtS7Oxe7SshilG4I9tQ1s3LQWFQvLMiFqVPiPgv94/vOBCxDoq21g42a1LF5Stsnxd+oPHv586+J+bUVB8HKlgWa1/QYdo4m5c/5ljgAAAABJRU5ErkJggg=="
+                            alt="AA gaming"
+                    />
+                </a>
+            </li>
+            <li>
+                <a
+                        href="https://astrid.tech/"
+                        target="_blank"
+                        title="astrid dot tech"
+                >
+                    <img
+                            src="https://s3.us-west-000.backblazeb2.com/nyaabucket/a313cf12a8c46d0262c69cdf8a3accc3b6a2d159b8e1211b7abe30886a212884/astriddottech.png"
+                            alt="astrid dot tech"
+                    />
+                </a>
+            </li>
+            <li>
+                <a
+                        href="https://atapi.space/"
+                        target="_blank"
+                        title="Atapi's Homepage"
+                >
+                    <img
+                            src="https://atapi.space/assets/img/buttons/atapi.gif"
+                            alt="Atapi"
+                    />
+                </a>
+            </li>
+            <!--        <li>-->
+            <!--            <a-->
+            <!--                href="https://blueb.pages.gay"-->
+            <!--                target="_blank"-->
+            <!--                title="blueb's website"-->
+            <!--            >-->
+            <!--                <img-->
+            <!--                    src="https://blueb.pages.gay/_nuxt/kattgutte.D3vLs2tl.png"-->
+            <!--                    alt="kattgutte er ikke ekte"-->
+            <!--                />-->
+            <!--            </a>-->
+            <!--        </li>-->
+            <!--        <li>-->
+            <!--            <a href="https://elke.cafe/" target="_blank" title="elke.cafe">-->
+            <!--                <img-->
+            <!--                    src="https://elke.cafe/assets/images/buttons/elke.cafe.gif"-->
+            <!--                    alt="elke dot cafe"-->
+            <!--                />-->
+            <!--            </a>-->
+            <!--        </li>-->
+            <li>
+                <a
+                        href="https://eris.meows.gay/"
+                        target="_blank"
+                        title="eris meow :3"
+                >
+                    <img
+                            src="https://eris.meows.gay/images/badges/eris.png"
+                            alt="eris"
+                    />
+                </a>
+            </li>
+            <li>
+                <a
+                        href="https://houl.floof.company/"
+                        target="_blank"
+                        title="Houl Floof :3c"
+                >
+                    <img
+                            src="https://houl.floof.company/assets/images/buttons/houl.png"
+                            alt="Houl"
+                    />
+                </a>
+            </li>
+            <li>
+                <a
+                        href="https://lilysthings.org/"
+                        target="_blank"
+                        title="Lily's Things at The Cool Site"
+                >
+                    <img
+                            src="https://lilysthings.org/buttons/lilysthings.png"
+                            alt="lily!!"
+                    />
+                </a>
+            </li>
+            <li>
+                <a
+                        href="https://microspinny.zip/"
+                        target="_blank"
+                        title="microsite"
+                >
+                    <img src="/assets/buttons/micro.png" alt="Micro"/>
+                </a>
+            </li>
+            <li>
+                <a
+                        href="https://nelle.observer/"
+                        target="_blank"
+                        title="nelle.observer"
+                >
+                    <img
+                            src="https://nelle.observer/assets/images/88by31/mine/site-badges/nelleobserver-gray.gif"
+                            alt="nelle observer"
+                    />
+                </a>
+            </li>
+            <li>
+                <a
+                        href="https://notfire.cc"
+                        target="_blank"
+                        title="home // notfire.cc"
+                >
+                    <img
+                            src="https://notfire.cc/design/images/buttons/notfire-cc-88x31-af-darkv.gif"
+                            alt="not fire dot CC"
+                    />
+                </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"
+                        target="_blank"
+                        title="synth download!"
+                >
+                    <img
+                            src="https://synth.download/assets/buttons/synth.download.svg"
+                            alt="Synth.Download!"
+                    />
+                </a>
+            </li>
+            <li>
+                <a href="https://void.rehab" target="_blank" title="void.rehab">
+                    <img
+                            src="https://void.rehab/88x31/void.rehab.png"
+                            alt="void dot rehab"
+                    />
+                </a>
+            </li>
+            <li>
+                <a href="https://w.on-t.work/" target="_blank" title="Won't Work!">
+                    <img
+                            src="https://w.on-t.work/assets/88x31.png"
+                            alt="wont work"
+                    />
+                </a>
+            </li>
+            <li>
+                <a href="https://zvava.org/" target="_blank" title="zvava.org">
+                    <img
+                            src="https://zvava.org/images/buttons/zvava.org.png"
+                            alt="zvava dot org"
+                    />
+                </a>
+            </li>
+        </ul>
+    </div>
 
-    <p>Cool things</p>
-
-    <ul class="buttons">
-        <li>
-            <img
-                src="/assets/buttons/anythingbutchrome.gif"
-                alt="Anything But Chrome"
-                title="Anything But Chrome"
-            />
-        </li>
-        <li>
-            <a href="https://archlinux.org" target="_blank" title="arch linux">
-                <img src="/assets/buttons/archlinux.gif" alt="arch linux" />
-            </a>
-        </li>
-        <li>
-            <img
-                src="/assets/buttons/emulate.gif"
-                alt="Emulate Now!"
-                title="Emulate Now!"
-            />
-        </li>
-        <li>
-            <a
-                href="https://www.mozilla.org/en-US/firefox/"
-                target="_blank"
-                title="Get Firefox"
-            >
-                <img src="/assets/buttons/getfirefox.gif" alt="Get Firefox" />
-            </a>
-        </li>
-        <li>
-            <a
-                    href="https://iceshrimp.dev/iceshrimp/Iceshrimp.NET"
-                    target="_blank"
-                    title="Iceshrimp.NET"
-            >
-                <img src="/assets/buttons/iceshrimp_now_dark.png" alt="Iceshrimp Now!" />
-            </a>
-        </li>
-        <li>
-            <img
-                src="/assets/buttons/fediverse.gif"
-                alt="Join the Fediverse"
-                title="Join the Fediverse"
-            />
-        </li>
-        <li>
-            <img
-                src="/assets/buttons/xenia.gif"
-                alt="Linux Now!"
-                title="Linux Now!"
-            />
-        </li>
-        <li>
-            <img
-                src="/assets/buttons/paws.png"
-                alt="made with My Own Two Paws"
-                title="made with MY OWN TWO PAWS"
-            />
-        </li>
-        <li>
-            <img
-                src="/assets/buttons/nonbinary.png"
-                alt="Non-binary flag"
-                title="Non-binary"
-            />
-        </li>
-        <li>
-            <a
-                href="https://www.debian.org/"
-                target="_blank"
-                title="Powered by debian"
-            >
-                <img src="/assets/buttons/debian.png" alt="Powered by debian" />
-            </a>
-        </li>
-        <li>
-            <a href="https://scp-wiki.wikidot.com/" target="_blank" title="SCP">
-                <img src="/assets/buttons/scp.png" alt="SCP" />
-            </a>
-        </li>
-        <li>
-            <a
-                href="https://store.steampowered.com/app/440/Team_Fortress_2/"
-                target="_blank"
-                title="Team Fortress GET IT!"
-            >
-                <img
-                    src="/assets/buttons/team_fortress_get_it.gif"
-                    alt="Team Fortress Get It!"
-                />
-            </a>
-        </li>
-        <li>
-            <a
-                href="https://ublockorigin.com/"
-                target="_blank"
-                title="uBlock Origin Now!"
-            >
-                <img
-                    src="/assets/buttons/ublock.png"
-                    alt="uBlock Origin Now!"
-                />
-            </a>
-        </li>
-        <li>
-            <img src="/assets/buttons/wii.png" alt="Wii" title="Wii" />
-        </li>
-    </ul>
-
-    <h3 id="webrings">Webrings</h3>
+    <h2 id="webrings">Webrings</h2>
 
     <p>Adjacent websites</p>
 
@@ -487,52 +480,36 @@
     </p>
 
     <input
-        oninput={updateNtfyCharCount}
-        type="text"
-        id="ntfy-message"
-        name="ntfy-message"
-        placeholder="Message"
-        minlength="15"
-        maxlength="128"
+            oninput={updateNtfyCharCount}
+            type="text"
+            id="ntfy-message"
+            name="ntfy-message"
+            placeholder="Message"
+            minlength="15"
+            maxlength="128"
     />
     <label for="ntfy-message" id="ntfy-char-count" style="color: var(--error);">
         128
     </label>
-    <br />
-    <button onclick={sendNtfyMessage} style="margin-top: 1rem;" disabled={ntfyLock}> Send </button>
+    <br/>
+    <button onclick={sendNtfyMessage} style="margin-top: 1rem;" disabled={ntfyLock}> Send</button>
 </main>
 
 <style>
     .page-links {
-        padding-left: 0.5rem;
+        padding-left: 0;
         list-style: none;
     }
 
-    .page-links li {
-        padding: 0.5rem;
-
-        background-color: var(--background-2);
-        border-left: 2px solid var(--accent);
-    }
-
     .page-links li {
         margin-top: 1rem;
     }
 
-    .page-links li > *:first-child {
-        margin-top: 0;
-    }
-
-    .page-links li > *:last-child {
-        margin-bottom: 0;
-    }
-
     ul.buttons {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
         gap: 0.25rem;
-        justify-content: center;
         padding: 0;
         margin: 0;
 
diff --git a/src/routes/style.css b/src/routes/style.css
index d497e49..21a953b 100644
--- a/src/routes/style.css
+++ b/src/routes/style.css
@@ -6,16 +6,16 @@
 }
 
 :root {
-    --accent: hsl(287, 50%, 59%);
-    --accent-2: light-dark(hsl(287, 50%, 39%), hsl(287, 50%, 79%));
-    --background: light-dark(hsl(302, 69%, 95%), hsl(302, 69%, 10%));
-    --background-2: light-dark(hsl(302, 69%, 90%), hsl(302, 69%, 5%));
-    --foreground: light-dark(hsl(302, 69%, 10%), hsl(302, 69%, 95%));
-    --success: hsl(110, 50%, 59%);
-    --warn: hsl(30, 50%, 59%);
-    --error: hsl(0, 50%, 59%);
+    --accent: #b462cbff;
+    --background: light-dark(#f3dffc, #16051d);
+    --foreground: light-dark(#faf0ff, #08020b);
+    --text: light-dark(#0f0f0f, #efefef);
 
-    --radius: 12px;
+    --success: #9ece6a;
+    --warn: #e0af68;
+    --error: #f7768e;
+
+    --radius: 8px;
 
     font-family: Inter, sans-serif;
 }
@@ -35,7 +35,7 @@ body {
 
     /* Colors */
     background-color: var(--background);
-    color: var(--foreground);
+    color: var(--text);
 }
 
 article:first-of-type,
@@ -86,57 +86,7 @@ h6 {
     font-weight: bold;
 }
 
-article {
-    counter-reset: h2 0;
-}
-
-/*article h2 {*/
-/*    counter-increment: h2 1;*/
-/*    counter-reset: h3 0;*/
-/*}*/
-
-/*article h2::before {*/
-/*    content: counter(h2) ". ";*/
-/*}*/
-
-/*article h3 {*/
-/*    counter-increment: h3 1;*/
-/*    counter-reset: h4 0;*/
-/*}*/
-
-/*article h3::before {*/
-/*    content: counter(h2) "." counter(h3) ". ";*/
-/*}*/
-
-/*article h4 {*/
-/*    counter-increment: h4 1;*/
-/*    counter-reset: h5 0;*/
-/*}*/
-
-/*article h4::before {*/
-/*    content: counter(h2) "." counter(h3) "." counter(h4) ". ";*/
-/*}*/
-
-/*article h5 {*/
-/*    counter-increment: h5 1;*/
-/*    counter-reset: h6 0;*/
-/*}*/
-
-/*article h5::before {*/
-/*    content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". ";*/
-/*}*/
-
-/*article h6 {*/
-/*    counter-increment: h6 1;*/
-/*}*/
-
-/*article h6::before {*/
-/*    content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". ";*/
-/*}*/
-
 a {
-    padding-left: 0.15em;
-    padding-right: 0.15em;
     color: var(--accent);
     text-underline-offset: 0.15rem;
 }
@@ -146,50 +96,15 @@ a[target="_blank"]:not(:has(>img))::after {
     display: inline-block;
 }
 
-a:visited {
-    color: var(--accent-2);
-}
-
-a:not(:has(>img)):hover {
-    background-color: var(--accent);
-    color: var(--background);
-    text-decoration: none;
-}
-
-a:not(:has(>img)):visited:hover {
-    background-color: var(--accent-2);
-}
-
-dt::after {
-    content: ": ";
-}
-
 img,
 video {
     max-width: 100%;
     height: auto;
 }
 
-blockquote > :not(footer):first-of-type::before {
-    content: open-quote;
-    color: var(--accent);
-    font-weight: 800;
-}
-
-blockquote > :not(footer):last-of-type::after {
-    content: close-quote;
-    color: var(--accent);
-    font-weight: 800;
-}
-
-blockquote footer::before {
-    content: "— ";
-}
-
 code {
     padding-left: 0.15em;
     padding-right: 0.15em;
-    background-color: var(--background-2);
     font-family: "Fira Code VF", monospace;
 }
 
@@ -198,71 +113,6 @@ pre code {
     width: 100%;
     padding: 0.5rem;
     overflow-x: scroll;
-
-    background-color: #1a1b26;
-    color: #c0caf5;
-    border: 1px solid #c0caf5;
-}
-
-/* Code highlighting */
-.language-html,
-.language-md {
-    color: #9aa5ce;
-}
-
-.token.keyword,
-.token.tag {
-    color: #f7768e;
-}
-
-.token.boolean,
-.token.number {
-    color: #ff9e64;
-}
-
-.token.parameter,
-.regex-source {
-    color: #e0af68;
-}
-
-.token.string,
-.token.selector {
-    color: #9ece6a;
-}
-
-.token.property,
-.token.regex-flags,
-.token.title {
-    color: #7dcfff;
-}
-
-.token.literal-property,
-.token.url {
-    color: #73daca;
-}
-
-.token.function {
-    color: #7aa2f7;
-}
-
-.token.operator,
-.token.attr-name {
-    color: #bb9af7;
-}
-
-.token.constant,
-.token.environment,
-.token.class-name {
-    color: #c0caf5;
-}
-
-.token.comment {
-    color: #565f89;
-    font-style: italic;
-}
-
-details {
-    border-left: 2px solid var(--accent-2);
 }
 
 details[open] {
@@ -282,38 +132,34 @@ details > summary {
     padding: 0.5em;
     width: fit-content;
     cursor: pointer;
-
-    background-color: var(--accent-2);
-    color: var(--background);
 }
 
 kbd {
     padding-left: 0.5em;
     padding-right: 0.5em;
-
-    background-color: var(--background-2);
-    border-radius: var(--radius);
 }
 
 mark {
     padding-left: 0.25em;
     padding-right: 0.25em;
-
-    background-color: var(--accent);
-    color: var(--background);
 }
 
 button,
 input[type="submit"] {
     padding: 0.5em 1em;
 
-    background-color: var(--accent-2);
-    color: var(--background);
+    background-color: color-mix(in srgb, var(--foreground) 70%, var(--accent));
     border: none;
     border-radius: var(--radius);
     font-weight: bold;
     text-transform: uppercase;
     cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+button:hover,
+input[type="submit"]:hover {
+    background-color: color-mix(in srgb, var(--foreground) 40%, var(--accent));
 }
 
 button[disabled],
@@ -325,10 +171,11 @@ input[type="text"] {
     padding: 0.5em;
 
     outline: none;
-    background-color: var(--background-2);
-    color: var(--foreground);
-    border: 1px solid var(--foreground);
+    background-color: var(--foreground);
+    color: var(--text);
+    border: 1px solid color-mix(in srgb, var(--foreground) 70%, var(--accent));
     border-radius: var(--radius);
+    transition: border 0.2s;
 }
 
 input[type="text"]:focus {
@@ -347,28 +194,13 @@ table {
 }
 
 table.rows tbody tr {
-    background-color: var(--background-2);
+    background-color: var(--foreground);
 }
 
 table.rows tbody tr:nth-child(2n) {
     background-color: transparent;
 }
 
-.table-y {
-    background-color: var(--success);
-    color: black;
-}
-
-.table-p {
-    background-color: var(--warn);
-    color: black;
-}
-
-.table-n {
-    background-color: var(--error);
-    color: black;
-}
-
 .icon-link > a,
 .icon-link > span {
     padding-left: 0.15rem;
@@ -383,39 +215,36 @@ table.rows tbody tr:nth-child(2n) {
     margin-right: 0.25rem;
 }
 
-.notice {
-    display: block;
-    padding: 0.5rem;
-
-    border: 2px dashed var(--warn);
+.upper {
+    text-transform: uppercase;
 }
 
-.notice::before {
-    content: "🛈 Notice";
-    color: var(--warn);
-    font-size: larger;
-    font-weight: bolder;
+.foreground {
+    background: var(--foreground);
 }
 
-.notice > p:first-child {
+.card {
+    padding: 1rem;
+    border-radius: var(--radius);
+}
+
+.card > :first-child {
     margin-top: 0;
 }
 
-.notice > p:last-child {
+.card > :last-child {
     margin-bottom: 0;
 }
 
-.upper {
-    text-transform: uppercase;
+.card + .card {
+    margin-top: 1rem;
+}
+
+.invert {
+    filter: invert() hue-rotate(180deg);
 }
 
 ::selection {
     background-color: var(--accent);
     color: var(--background);
-}
-
-@media (prefers-color-scheme: dark) {
-    .icon-link > img.invert {
-        filter: hue-rotate(180deg) invert();
-    }
 }
\ No newline at end of file