Touch up styles and buttons layout

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>

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>

src/routes/+layout.svelte

@@ -2,6 +2,7 @@
     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,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>
@@ -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}
@@ -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,7 +149,7 @@
                     <p>
                         <small>
                             Published:
-                            <DateTime datetime={page.published} />
+                            <DateTime datetime={page.published}/>
                             {#if page.edited}
                                 &bull; Last edited:
                                 <DateTime
@@ -162,29 +164,130 @@
         {/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" />
+                    <img src="/assets/88x31.png" alt="pancakes"/>
                 </a>
             </li>
             <li>
-            <a href="https://meow.company" target="_blank" title="meow.company">
                 <img
-                        src="https://meow.company/88x31.png"
-                        alt="meow dot company"
+                        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>
+    </div>
 
-    <p>Other people and entities</p>
+    <div class="foreground card">
+        <h3>Other sites</h3>
 
         <ul class="buttons">
             <li>
@@ -219,26 +322,26 @@
                     />
                 </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://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/"
@@ -281,7 +384,7 @@
                         target="_blank"
                         title="microsite"
                 >
-                <img src="/assets/buttons/micro.png" alt="Micro" />
+                    <img src="/assets/buttons/micro.png" alt="Micro"/>
                 </a>
             </li>
             <li>
@@ -291,7 +394,7 @@
                         title="nelle.observer"
                 >
                     <img
-                    src="https://nelle.observer/assets/images/badges/mine/nelleobserver-gray.gif"
+                            src="https://nelle.observer/assets/images/88by31/mine/site-badges/nelleobserver-gray.gif"
                             alt="nelle observer"
                     />
                 </a>
@@ -308,18 +411,18 @@
                     />
                 </a>
             </li>
-        <li>
-            <a
-                    href="https://floof.gay/"
-                    target="_blank"
-                    title="home - olivia"
-            >
-                <img
-                        src="https://floof.gay/img/badges/oli.svg"
-                        alt="oli"
-                />
-            </a>
-        </li>
+<!--            <li>-->
+<!--                <a-->
+<!--                        href="https://floof.gay/"-->
+<!--                        target="_blank"-->
+<!--                        title="home - olivia"-->
+<!--                >-->
+<!--                    <img-->
+<!--                            src="https://floof.gay/img/badges/oli.svg"-->
+<!--                            alt="oli"-->
+<!--                    />-->
+<!--                </a>-->
+<!--            </li>-->
             <li>
                 <a
                         href="https://synth.download"
@@ -357,119 +460,9 @@
                 </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>
 
@@ -498,41 +491,25 @@
     <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;
 

src/routes/inter.css

@@ -0,0 +1,449 @@
+@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,116 +5,25 @@
     font-style: normal;
 }
 
-/* This is going to be quite long */
-@font-face {
-    font-family: "FiraGO";
-    src: url("/assets/fonts/FiraGO/FiraGO-ExtraLight.woff2") format("woff2");
-    font-weight: 200;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: "FiraGO";
-    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%);
+    --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;
+}
+
+@supports (font-variation-settings: normal) {
+    :root {
+        font-family: InterVariable, sans-serif;
+    }
 }
 
 body {
@@ -126,9 +35,7 @@ body {
 
     /* Colors */
     background-color: var(--background);
-    color: var(--foreground);
-
-    font-family: "FiraGO", sans-serif;
+    color: var(--text);
 }
 
 article:first-of-type,
@@ -179,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;
 }
@@ -239,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;
 }
 
@@ -291,122 +113,53 @@ 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: 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],
@@ -418,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 {
@@ -440,35 +194,20 @@ 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 {
+.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;
@@ -476,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();
-    }
-}