src/data/pages/misskey-comparison.md

@@ -20,7 +20,6 @@ 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
 
@@ -622,19 +621,4 @@ 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>

src/lib/components/Navbar.svelte

@@ -65,7 +65,12 @@
     }
 
     a {
-        color: var(--text);
+        color: var(--foreground);
+    }
+
+    a:hover {
+        background-color: var(--foreground);
+        color: var(--background);
     }
 
     .brand {
@@ -76,8 +81,15 @@
         border-radius: 20%;
     }
 
-    .brand > a {
+    .brand > a,
+    .brand > a:visited {
         font-weight: bold;
-        text-decoration: none;
+        text-decoration-color: var(--accent);
+        text-decoration-style: wavy;
+    }
+
+    .brand > a:hover {
+        background-color: var(--accent);
+        color: var(--background);
     }
 </style>

src/routes/+layout.svelte

@@ -2,7 +2,6 @@
     import { page } from "$app/state";
     import Footer from "$lib/components/Footer.svelte";
     import Navbar from "$lib/components/Navbar.svelte";
-    import "./inter.css";
     import "./style.css";
     /**
      * @typedef {Object} Props

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,7 +8,6 @@
     const pages = getPages();
 
     let ntfyLock = $state(false);
-
     async function sendNtfyMessage() {
         if (ntfyLock) return;
         ntfyLock = true;
@@ -47,8 +46,7 @@
         <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"/>
+            <DateTime display="time" timeZone="Australia/Brisbane" />). I like
-            ). I like
             cats, Linux, and programming in C# and Python (for now). You can
             find my links, projects, and other pages here.
         </p>
@@ -61,9 +59,9 @@
     {#each links as link}
         <div class="icon-link">
             <img
-                    class={link.iconInvert ? "invert" : ""}
+                class={link.iconInvert ? "invert" : ""}
-                    src={"/assets/icons/" + link.icon}
+                src={"/assets/icons/" + link.icon}
-                    alt={link.name}
+                alt={link.name}
             />
             {#if link.href}
                 <a href={link.href} rel="me" target="_blank">
@@ -83,7 +81,7 @@
 
     <ul class="page-links">
         {#each projects as project}
-            <li class="foreground card">
+            <li>
                 <h3>
                     <a href={project.href} target="_blank">
                         {project.name}
@@ -100,7 +98,7 @@
 
     <ul class="page-links">
         {#each contributions as contribution}
-            <li class="foreground card">
+            <li>
                 <h3>
                     <a href={contribution.href} target="_blank">
                         {contribution.name}
@@ -126,8 +124,8 @@
         <p>
             Content under the pages section uses the
             <a
-                    href="https://creativecommons.org/licenses/by-sa/4.0/"
+                href="https://creativecommons.org/licenses/by-sa/4.0/"
-                    target="_blank"
+                target="_blank"
             >
                 Creative Commons Attribution-ShareAlike 4.0 International (CC
                 BY-SA 4.0)
@@ -138,7 +136,7 @@
 
     <ol class="page-links">
         {#each pages as page}
-            <li class="foreground card">
+            <li>
                 <h3>
                     <a href={"/" + page.slug + "/"}>
                         {page.title}
@@ -149,12 +147,12 @@
                     <p>
                         <small>
                             Published:
-                            <DateTime datetime={page.published}/>
+                            <DateTime datetime={page.published} />
                             {#if page.edited}
                                 &bull; Last edited:
                                 <DateTime
-                                        datetime={page.edited}
+                                    datetime={page.edited}
-                                        display="dateTime"
+                                    display="dateTime"
                                 />
                             {/if}
                         </small>
@@ -164,305 +162,314 @@
         {/each}
     </ol>
 
-    <h2 id="buttons">Buttons</h2>
+    <h2 id="more">More</h2>
 
-    <p>Click my buttons</p>
+    <h3 id="buttons">Buttons</h3>
 
-    <div class="foreground card">
+    <p>pancakes (me)</p>
-        <h3>pancakes</h3>
 
-        <ul class="buttons">
+    <ul class="buttons">
-            <li>
+        <li>
-                <a href="/" title="pancakes">
+            <a href="/" title="pancakes">
-                    <img src="/assets/88x31.png" alt="pancakes"/>
+                <img src="/assets/88x31.png" alt="pancakes" />
-                </a>
+            </a>
-            </li>
+        </li>
-            <li>
+        <li>
+            <a href="https://meow.company" target="_blank" title="meow.company">
                 <img
-                        src="/assets/buttons/anythingbutchrome.gif"
+                        src="https://meow.company/88x31.png"
-                        alt="Anything But Chrome"
+                        alt="meow dot company"
-                        title="Anything But Chrome"
                 />
-            </li>
+            </a>
-            <li>
+        </li>
-                <a href="https://archlinux.org" target="_blank" title="arch linux">
+    </ul>
-                    <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>
 
-    <div class="foreground card">
+    <p>Other people and entities</p>
-        <h3>Other sites</h3>
 
-        <ul class="buttons">
+    <ul class="buttons">
-            <li>
+        <li>
-                <a href="https://aagaming.me/" target="_blank" title="aagaming">
+            <a href="https://aagaming.me/" target="_blank" title="aagaming">
-                    <img
+                <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=="
+                    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"
+                    alt="AA gaming"
-                    />
+                />
-                </a>
+            </a>
-            </li>
+        </li>
-            <li>
+        <li>
-                <a
+            <a
-                        href="https://astrid.tech/"
+                href="https://astrid.tech/"
-                        target="_blank"
+                target="_blank"
-                        title="astrid dot tech"
+                title="astrid dot tech"
-                >
+            >
-                    <img
+                <img
-                            src="https://s3.us-west-000.backblazeb2.com/nyaabucket/a313cf12a8c46d0262c69cdf8a3accc3b6a2d159b8e1211b7abe30886a212884/astriddottech.png"
+                    src="https://s3.us-west-000.backblazeb2.com/nyaabucket/a313cf12a8c46d0262c69cdf8a3accc3b6a2d159b8e1211b7abe30886a212884/astriddottech.png"
-                            alt="astrid dot tech"
+                    alt="astrid dot tech"
-                    />
+                />
-                </a>
+            </a>
-            </li>
+        </li>
-            <li>
+        <li>
-                <a
+            <a
-                        href="https://atapi.space/"
+                    href="https://atapi.space/"
-                        target="_blank"
+                    target="_blank"
-                        title="Atapi's Homepage"
+                    title="Atapi's Homepage"
-                >
+            >
-                    <img
+                <img
-                            src="https://atapi.space/assets/img/buttons/atapi.gif"
+                        src="https://atapi.space/assets/img/buttons/atapi.gif"
-                            alt="Atapi"
+                        alt="Atapi"
-                    />
+                />
-                </a>
+            </a>
-            </li>
+        </li>
-            <!--        <li>-->
+<!--        <li>-->
-            <!--            <a-->
+<!--            <a-->
-            <!--                href="https://blueb.pages.gay"-->
+<!--                href="https://blueb.pages.gay"-->
-            <!--                target="_blank"-->
+<!--                target="_blank"-->
-            <!--                title="blueb's website"-->
+<!--                title="blueb's website"-->
-            <!--            >-->
+<!--            >-->
-            <!--                <img-->
+<!--                <img-->
-            <!--                    src="https://blueb.pages.gay/_nuxt/kattgutte.D3vLs2tl.png"-->
+<!--                    src="https://blueb.pages.gay/_nuxt/kattgutte.D3vLs2tl.png"-->
-            <!--                    alt="kattgutte er ikke ekte"-->
+<!--                    alt="kattgutte er ikke ekte"-->
-            <!--                />-->
+<!--                />-->
-            <!--            </a>-->
+<!--            </a>-->
-            <!--        </li>-->
+<!--        </li>-->
-            <!--        <li>-->
+<!--        <li>-->
-            <!--            <a href="https://elke.cafe/" target="_blank" title="elke.cafe">-->
+<!--            <a href="https://elke.cafe/" target="_blank" title="elke.cafe">-->
-            <!--                <img-->
+<!--                <img-->
-            <!--                    src="https://elke.cafe/assets/images/buttons/elke.cafe.gif"-->
+<!--                    src="https://elke.cafe/assets/images/buttons/elke.cafe.gif"-->
-            <!--                    alt="elke dot cafe"-->
+<!--                    alt="elke dot cafe"-->
-            <!--                />-->
+<!--                />-->
-            <!--            </a>-->
+<!--            </a>-->
-            <!--        </li>-->
+<!--        </li>-->
-            <li>
+        <li>
-                <a
+            <a
-                        href="https://eris.meows.gay/"
+                href="https://eris.meows.gay/"
-                        target="_blank"
+                target="_blank"
-                        title="eris meow :3"
+                title="eris meow :3"
-                >
+            >
-                    <img
+                <img
-                            src="https://eris.meows.gay/images/badges/eris.png"
+                    src="https://eris.meows.gay/images/badges/eris.png"
-                            alt="eris"
+                    alt="eris"
-                    />
+                />
-                </a>
+            </a>
-            </li>
+        </li>
-            <li>
+        <li>
-                <a
+            <a
-                        href="https://houl.floof.company/"
+                    href="https://houl.floof.company/"
-                        target="_blank"
+                    target="_blank"
-                        title="Houl Floof :3c"
+                    title="Houl Floof :3c"
-                >
+            >
-                    <img
+                <img
-                            src="https://houl.floof.company/assets/images/buttons/houl.png"
+                        src="https://houl.floof.company/assets/images/buttons/houl.png"
-                            alt="Houl"
+                        alt="Houl"
-                    />
+                />
-                </a>
+            </a>
-            </li>
+        </li>
-            <li>
+        <li>
-                <a
+            <a
-                        href="https://lilysthings.org/"
+                href="https://lilysthings.org/"
-                        target="_blank"
+                target="_blank"
-                        title="Lily's Things at The Cool Site"
+                title="Lily's Things at The Cool Site"
-                >
+            >
-                    <img
+                <img
-                            src="https://lilysthings.org/buttons/lilysthings.png"
+                    src="https://lilysthings.org/buttons/lilysthings.png"
-                            alt="lily!!"
+                    alt="lily!!"
-                    />
+                />
-                </a>
+            </a>
-            </li>
+        </li>
-            <li>
+        <li>
-                <a
+            <a
-                        href="https://microspinny.zip/"
+                href="https://microspinny.zip/"
-                        target="_blank"
+                target="_blank"
-                        title="microsite"
+                title="microsite"
-                >
+            >
-                    <img src="/assets/buttons/micro.png" alt="Micro"/>
+                <img src="/assets/buttons/micro.png" alt="Micro" />
-                </a>
+            </a>
-            </li>
+        </li>
-            <li>
+        <li>
-                <a
+            <a
-                        href="https://nelle.observer/"
+                href="https://nelle.observer/"
-                        target="_blank"
+                target="_blank"
-                        title="nelle.observer"
+                title="nelle.observer"
-                >
+            >
-                    <img
+                <img
-                            src="https://nelle.observer/assets/images/88by31/mine/site-badges/nelleobserver-gray.gif"
+                    src="https://nelle.observer/assets/images/badges/mine/nelleobserver-gray.gif"
-                            alt="nelle observer"
+                    alt="nelle observer"
-                    />
+                />
-                </a>
+            </a>
-            </li>
+        </li>
-            <li>
+        <li>
-                <a
+            <a
-                        href="https://notfire.cc"
+                    href="https://notfire.cc"
-                        target="_blank"
+                    target="_blank"
-                        title="home // notfire.cc"
+                    title="home // notfire.cc"
-                >
+            >
-                    <img
+                <img
-                            src="https://notfire.cc/design/images/buttons/notfire-cc-88x31-af-darkv.gif"
+                        src="https://notfire.cc/design/images/buttons/notfire-cc-88x31-af-darkv.gif"
-                            alt="not fire dot CC"
+                        alt="not fire dot CC"
-                    />
+                />
-                </a>
+            </a>
-            </li>
+        </li>
-<!--            <li>-->
+        <li>
-<!--                <a-->
+            <a
-<!--                        href="https://floof.gay/"-->
+                    href="https://floof.gay/"
-<!--                        target="_blank"-->
+                    target="_blank"
-<!--                        title="home - olivia"-->
+                    title="home - olivia"
-<!--                >-->
+            >
-<!--                    <img-->
+                <img
-<!--                            src="https://floof.gay/img/badges/oli.svg"-->
+                        src="https://floof.gay/img/badges/oli.svg"
-<!--                            alt="oli"-->
+                        alt="oli"
-<!--                    />-->
+                />
-<!--                </a>-->
+            </a>
-<!--            </li>-->
+        </li>
-            <li>
+        <li>
-                <a
+            <a
-                        href="https://synth.download"
+                href="https://synth.download"
-                        target="_blank"
+                target="_blank"
-                        title="synth download!"
+                title="synth download!"
-                >
+            >
-                    <img
+                <img
-                            src="https://synth.download/assets/buttons/synth.download.svg"
+                    src="https://synth.download/assets/buttons/synth.download.svg"
-                            alt="Synth.Download!"
+                    alt="Synth.Download!"
-                    />
+                />
-                </a>
+            </a>
-            </li>
+        </li>
-            <li>
+        <li>
-                <a href="https://void.rehab" target="_blank" title="void.rehab">
+            <a href="https://void.rehab" target="_blank" title="void.rehab">
-                    <img
+                <img
-                            src="https://void.rehab/88x31/void.rehab.png"
+                    src="https://void.rehab/88x31/void.rehab.png"
-                            alt="void dot rehab"
+                    alt="void dot rehab"
-                    />
+                />
-                </a>
+            </a>
-            </li>
+        </li>
-            <li>
+        <li>
-                <a href="https://w.on-t.work/" target="_blank" title="Won't Work!">
+            <a href="https://w.on-t.work/" target="_blank" title="Won't Work!">
-                    <img
+                <img
-                            src="https://w.on-t.work/assets/88x31.png"
+                    src="https://w.on-t.work/assets/88x31.png"
-                            alt="wont work"
+                    alt="wont work"
-                    />
+                />
-                </a>
+            </a>
-            </li>
+        </li>
-            <li>
+        <li>
-                <a href="https://zvava.org/" target="_blank" title="zvava.org">
+            <a href="https://zvava.org/" target="_blank" title="zvava.org">
-                    <img
+                <img
-                            src="https://zvava.org/images/buttons/zvava.org.png"
+                    src="https://zvava.org/images/buttons/zvava.org.png"
-                            alt="zvava dot org"
+                    alt="zvava dot org"
-                    />
+                />
-                </a>
+            </a>
-            </li>
+        </li>
-        </ul>
+    </ul>
-    </div>
 
-    <h2 id="webrings">Webrings</h2>
+    <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>
 
     <p>Adjacent websites</p>
 
@@ -480,36 +487,52 @@
     </p>
 
     <input
-            oninput={updateNtfyCharCount}
+        oninput={updateNtfyCharCount}
-            type="text"
+        type="text"
-            id="ntfy-message"
+        id="ntfy-message"
-            name="ntfy-message"
+        name="ntfy-message"
-            placeholder="Message"
+        placeholder="Message"
-            minlength="15"
+        minlength="15"
-            maxlength="128"
+        maxlength="128"
     />
     <label for="ntfy-message" id="ntfy-char-count" style="color: var(--error);">
         128
     </label>
-    <br/>
+    <br />
-    <button onclick={sendNtfyMessage} style="margin-top: 1rem;" disabled={ntfyLock}> Send</button>
+    <button onclick={sendNtfyMessage} style="margin-top: 1rem;" disabled={ntfyLock}> Send </button>
 </main>
 
 <style>
     .page-links {
-        padding-left: 0;
+        padding-left: 0.5rem;
         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;
 

src/routes/inter.css

@@ -1,449 +0,0 @@
-@font-face {
-    font-family: InterVariable;
-    font-style: normal;
-    font-weight: 100 900;
-    font-display: swap;
-    src: url('/assets/fonts/Inter/InterVariable.woff2') format('woff2');
-}
-
-@font-face {
-    font-family: InterVariable;
-    font-style: italic;
-    font-weight: 100 900;
-    font-display: swap;
-    src: url('/assets/fonts/Inter/InterVariable-Italic.woff2') format('woff2');
-}
-
-/* static fonts */
-@font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 100;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/Inter-Thin.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 100;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/Inter-ThinItalic.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 200;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/Inter-ExtraLight.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 200;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/Inter-ExtraLightItalic.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 300;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/Inter-Light.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 300;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/Inter-LightItalic.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/Inter-Regular.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 400;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/Inter-Italic.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/Inter-Medium.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 500;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/Inter-MediumItalic.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 600;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/Inter-SemiBold.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 600;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/Inter-SemiBoldItalic.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/Inter-Bold.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 700;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/Inter-BoldItalic.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 800;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/Inter-ExtraBold.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 800;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/Inter-ExtraBoldItalic.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: normal;
-    font-weight: 900;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/Inter-Black.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: Inter;
-    font-style: italic;
-    font-weight: 900;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/Inter-BlackItalic.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: InterDisplay;
-    font-style: normal;
-    font-weight: 100;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/InterDisplay-Thin.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: InterDisplay;
-    font-style: italic;
-    font-weight: 100;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/InterDisplay-ThinItalic.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: InterDisplay;
-    font-style: normal;
-    font-weight: 200;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/InterDisplay-ExtraLight.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: InterDisplay;
-    font-style: italic;
-    font-weight: 200;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/InterDisplay-ExtraLightItalic.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: InterDisplay;
-    font-style: normal;
-    font-weight: 300;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/InterDisplay-Light.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: InterDisplay;
-    font-style: italic;
-    font-weight: 300;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/InterDisplay-LightItalic.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: InterDisplay;
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/InterDisplay-Regular.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: InterDisplay;
-    font-style: italic;
-    font-weight: 400;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/InterDisplay-Italic.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: InterDisplay;
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/InterDisplay-Medium.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: InterDisplay;
-    font-style: italic;
-    font-weight: 500;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/InterDisplay-MediumItalic.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: InterDisplay;
-    font-style: normal;
-    font-weight: 600;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/InterDisplay-SemiBold.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: InterDisplay;
-    font-style: italic;
-    font-weight: 600;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/InterDisplay-SemiBoldItalic.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: InterDisplay;
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/InterDisplay-Bold.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: InterDisplay;
-    font-style: italic;
-    font-weight: 700;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/InterDisplay-BoldItalic.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: InterDisplay;
-    font-style: normal;
-    font-weight: 800;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/InterDisplay-ExtraBold.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: InterDisplay;
-    font-style: italic;
-    font-weight: 800;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/InterDisplay-ExtraBoldItalic.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: InterDisplay;
-    font-style: normal;
-    font-weight: 900;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/InterDisplay-Black.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: InterDisplay;
-    font-style: italic;
-    font-weight: 900;
-    font-display: swap;
-    src: url("/assets/fonts/Inter/InterDisplay-BlackItalic.woff2") format("woff2");
-}
-
-@font-feature-values InterVariable {
-    @character-variant {
-        cv01: 1;
-        cv02: 2;
-        cv03: 3;
-        cv04: 4;
-        cv05: 5;
-        cv06: 6;
-        cv07: 7;
-        cv08: 8;
-        cv09: 9;
-        cv10: 10;
-        cv11: 11;
-        cv12: 12;
-        cv13: 13;
-        alt-1: 1; /* Alternate one */
-        alt-3: 9; /* Flat-top three */
-        open-4: 2; /* Open four */
-        open-6: 3; /* Open six */
-        open-9: 4; /* Open nine */
-        lc-l-with-tail: 5; /* Lower-case L with tail */
-        simplified-u: 6; /* Simplified u */
-        alt-double-s: 7; /* Alternate German double s */
-        uc-i-with-serif: 8; /* Upper-case i with serif */
-        uc-g-with-spur: 10; /* Capital G with spur */
-        single-story-a: 11; /* Single-story a */
-        compact-lc-f: 12; /* Compact f */
-        compact-lc-t: 13; /* Compact t */
-    }
-    @styleset {
-        ss01: 1;
-        ss02: 2;
-        ss03: 3;
-        ss04: 4;
-        ss05: 5;
-        ss06: 6;
-        ss07: 7;
-        ss08: 8;
-        open-digits: 1;                /* Open digits */
-        disambiguation: 2;             /* Disambiguation (with zero) */
-        disambiguation-except-zero: 4; /* Disambiguation (no zero) */
-        round-quotes-and-commas: 3;    /* Round quotes & commas */
-        square-punctuation: 7;         /* Square punctuation */
-        square-quotes: 8;              /* Square quotes */
-        circled-characters: 5;         /* Circled characters */
-        squared-characters: 6;         /* Squared characters */
-    }
-}
-@font-feature-values Inter {
-    @character-variant {
-        cv01: 1;
-        cv02: 2;
-        cv03: 3;
-        cv04: 4;
-        cv05: 5;
-        cv06: 6;
-        cv07: 7;
-        cv08: 8;
-        cv09: 9;
-        cv10: 10;
-        cv11: 11;
-        cv12: 12;
-        cv13: 13;
-        alt-1: 1; /* Alternate one */
-        alt-3: 9; /* Flat-top three */
-        open-4: 2; /* Open four */
-        open-6: 3; /* Open six */
-        open-9: 4; /* Open nine */
-        lc-l-with-tail: 5; /* Lower-case L with tail */
-        simplified-u: 6; /* Simplified u */
-        alt-double-s: 7; /* Alternate German double s */
-        uc-i-with-serif: 8; /* Upper-case i with serif */
-        uc-g-with-spur: 10; /* Capital G with spur */
-        single-story-a: 11; /* Single-story a */
-        compact-lc-f: 12; /* Compact f */
-        compact-lc-t: 13; /* Compact t */
-    }
-    @styleset {
-        ss01: 1;
-        ss02: 2;
-        ss03: 3;
-        ss04: 4;
-        ss05: 5;
-        ss06: 6;
-        ss07: 7;
-        ss08: 8;
-        open-digits: 1;                /* Open digits */
-        disambiguation: 2;             /* Disambiguation (with zero) */
-        disambiguation-except-zero: 4; /* Disambiguation (no zero) */
-        round-quotes-and-commas: 3;    /* Round quotes & commas */
-        square-punctuation: 7;         /* Square punctuation */
-        square-quotes: 8;              /* Square quotes */
-        circled-characters: 5;         /* Circled characters */
-        squared-characters: 6;         /* Squared characters */
-    }
-}
-@font-feature-values InterDisplay {
-    @character-variant {
-        cv01: 1;
-        cv02: 2;
-        cv03: 3;
-        cv04: 4;
-        cv05: 5;
-        cv06: 6;
-        cv07: 7;
-        cv08: 8;
-        cv09: 9;
-        cv10: 10;
-        cv11: 11;
-        cv12: 12;
-        cv13: 13;
-        alt-1: 1; /* Alternate one */
-        alt-3: 9; /* Flat-top three */
-        open-4: 2; /* Open four */
-        open-6: 3; /* Open six */
-        open-9: 4; /* Open nine */
-        lc-l-with-tail: 5; /* Lower-case L with tail */
-        simplified-u: 6; /* Simplified u */
-        alt-double-s: 7; /* Alternate German double s */
-        uc-i-with-serif: 8; /* Upper-case i with serif */
-        uc-g-with-spur: 10; /* Capital G with spur */
-        single-story-a: 11; /* Single-story a */
-        compact-lc-f: 12; /* Compact f */
-        compact-lc-t: 13; /* Compact t */
-    }
-    @styleset {
-        ss01: 1;
-        ss02: 2;
-        ss03: 3;
-        ss04: 4;
-        ss05: 5;
-        ss06: 6;
-        ss07: 7;
-        ss08: 8;
-        open-digits: 1;                /* Open digits */
-        disambiguation: 2;             /* Disambiguation (with zero) */
-        disambiguation-except-zero: 4; /* Disambiguation (no zero) */
-        round-quotes-and-commas: 3;    /* Round quotes & commas */
-        square-punctuation: 7;         /* Square punctuation */
-        square-quotes: 8;              /* Square quotes */
-        circled-characters: 5;         /* Circled characters */
-        squared-characters: 6;         /* Squared characters */
-    }
-}

src/routes/style.css

@@ -5,25 +5,116 @@
     font-style: normal;
 }
 
-:root {
+/* This is going to be quite long */
-    --accent: #b462cbff;
+@font-face {
-    --background: light-dark(#f3dffc, #16051d);
+    font-family: "FiraGO";
-    --foreground: light-dark(#faf0ff, #08020b);
+    src: url("/assets/fonts/FiraGO/FiraGO-ExtraLight.woff2") format("woff2");
-    --text: light-dark(#0f0f0f, #efefef);
+    font-weight: 200;
-
+    font-style: normal;
-    --success: #9ece6a;
-    --warn: #e0af68;
-    --error: #f7768e;
-
-    --radius: 8px;
-
-    font-family: Inter, sans-serif;
 }
 
-@supports (font-variation-settings: normal) {
+@font-face {
-    :root {
+    font-family: "FiraGO";
-        font-family: InterVariable, sans-serif;
+    src: url("/assets/fonts/FiraGO/FiraGO-ExtraLightItalic.woff2") format("woff2");
-    }
+    font-weight: 200;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "FiraGO";
+    src: url("/assets/fonts/FiraGO/FiraGO-Light.woff2") format("woff2");
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "FiraGO";
+    src: url("/assets/fonts/FiraGO/FiraGO-LightItalic.woff2") format("woff2");
+    font-weight: 300;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "FiraGO";
+    src: url("/assets/fonts/FiraGO/FiraGO-Regular.woff2") format("woff2");
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "FiraGO";
+    src: url("/assets/fonts/FiraGO/FiraGO-Italic.woff2") format("woff2");
+    font-weight: 400;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "FiraGO";
+    src: url("/assets/fonts/FiraGO/FiraGO-Medium.woff2") format("woff2");
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "FiraGO";
+    src: url("/assets/fonts/FiraGO/FiraGO-MediumItalic.woff2") format("woff2");
+    font-weight: 500;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "FiraGO";
+    src: url("/assets/fonts/FiraGO/FiraGO-SemiBold.woff2") format("woff2");
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "FiraGO";
+    src: url("/assets/fonts/FiraGO/FiraGO-SemiBoldItalic.woff2") format("woff2");
+    font-weight: 600;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "FiraGO";
+    src: url("/assets/fonts/FiraGO/FiraGO-Bold.woff2") format("woff2");
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "FiraGO";
+    src: url("/assets/fonts/FiraGO/FiraGO-BoldItalic.woff2") format("woff2");
+    font-weight: 700;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: "FiraGO";
+    src: url("/assets/fonts/FiraGO/FiraGO-ExtraBold.woff2") format("woff2");
+    font-weight: 800;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "FiraGO";
+    src: url("/assets/fonts/FiraGO/FiraGO-ExtraBoldItalic.woff2") format("woff2");
+    font-weight: 800;
+    font-style: italic;
+}
+
+: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%);
+
+    --radius: 12px;
 }
 
 body {
@@ -35,7 +126,9 @@ body {
 
     /* Colors */
     background-color: var(--background);
-    color: var(--text);
+    color: var(--foreground);
+
+    font-family: "FiraGO", sans-serif;
 }
 
 article:first-of-type,
@@ -86,7 +179,57 @@ 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;
 }
@@ -96,15 +239,50 @@ 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;
 }
 
@@ -113,53 +291,122 @@ 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] {
     padding-bottom: 1px;
 }
 
-details + details {
+details+details {
     margin-top: 0.5em;
 }
 
-details > * {
+details>* {
     margin-left: 2em;
 }
 
-details > summary {
+details>summary {
     margin-left: 0;
     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: color-mix(in srgb, var(--foreground) 70%, var(--accent));
+    background-color: var(--accent-2);
+    color: var(--background);
     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],
@@ -171,11 +418,10 @@ input[type="text"] {
     padding: 0.5em;
 
     outline: none;
-    background-color: var(--foreground);
+    background-color: var(--background-2);
-    color: var(--text);
+    color: var(--foreground);
-    border: 1px solid color-mix(in srgb, var(--foreground) 70%, var(--accent));
+    border: 1px solid var(--foreground);
     border-radius: var(--radius);
-    transition: border 0.2s;
 }
 
 input[type="text"]:focus {
@@ -194,20 +440,35 @@ table {
 }
 
 table.rows tbody tr {
-    background-color: var(--foreground);
+    background-color: var(--background-2);
 }
 
 table.rows tbody tr:nth-child(2n) {
     background-color: transparent;
 }
 
-.icon-link > a,
+.table-y {
-.icon-link > span {
+    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;
     line-height: 2em;
 }
 
-.icon-link > img {
+.icon-link>img {
     display: inline-block;
     width: 2em;
     max-height: 2em;
@@ -215,36 +476,39 @@ table.rows tbody tr:nth-child(2n) {
     margin-right: 0.25rem;
 }
 
-.upper {
+.notice {
-    text-transform: uppercase;
+    display: block;
+    padding: 0.5rem;
+
+    border: 2px dashed var(--warn);
 }
 
-.foreground {
+.notice::before {
-    background: var(--foreground);
+    content: "🛈 Notice";
+    color: var(--warn);
+    font-size: larger;
+    font-weight: bolder;
 }
 
-.card {
+.notice>p:first-child {
-    padding: 1rem;
-    border-radius: var(--radius);
-}
-
-.card > :first-child {
     margin-top: 0;
 }
 
-.card > :last-child {
+.notice>p:last-child {
     margin-bottom: 0;
 }
 
-.card + .card {
+.upper {
-    margin-top: 1rem;
+    text-transform: uppercase;
-}
-
-.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();
+    }
 }