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

@@ -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}
@@ -162,11 +164,12 @@
         {/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>
@@ -174,193 +177,6 @@
                     <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"
-                />
-            </a>
-        </li>
-    </ul>
-
-    <p>Other people and entities</p>
-
-    <ul class="buttons">
-        <li>
-            <a href="https://aagaming.me/" target="_blank" title="aagaming">
-                <img
-                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAAfCAYAAABjyArgAAAACXBIWXMAAAsTAAALEwEAmpwYAAADVUlEQVR4nO3XiU/TYBjH8f59xmjUaIxGjfeBCAIqarxiVETFA5HLKxqPP8ErSiQaTYz3EY+ojG3d0R2EwU73NW1f2nWHTNicW0fSvO3TbW/74dlvbyVJkqhvUjkN6sBSHViqyLdM/at3sFQHxuYxVAVf1chDiAxBZBgmnpj16AuIvoLoG4i+M+uxLxD/BvHvkBgx60kZkl5IKZAK6rVf45Ce0PfTCUs8ZEbE1H52PbOW79x/D8z4feuxAGbyubUefStwP1rriR9idFrrqYAAHhO4k2JM5qBOB56NXV3AkXtZwMMC+Jm1HntdAPi7GB3WelIR0GEBnb+LC8HVDvD4nQzsRxB5LICfmvXoSy0qdOD31vfHv+UAazGR9AnYkBgjAjhmL2BJg70LkQdif8isTzwzokJFNuqxDxD7BPHPEP9q1hMOSLgMZG1M6cDGa9JRAZUC0kVBVnUGS7P952QA/5P57Af8uQ4slRpVXbbF3uX84JWzawvEQ/EdjHsbyNsr3pFS9W1FAsuNYmwBua3SF03tAbu3Wo89Oyp94dQYcAO4G0FuykDeWfILInwTxm7bEXgLyA0ii5szkHeVBjZ0FULXBPItGwK7Noku3mrpYh25feawwQEIXrTWwjftCLxR72IVWW4Ed3MW8m7w7gXvfvAeAN9h8B0B37E/4Pbm1sLXIHzDjsDrRReryCpwRhbLf85i/B3g77TWAucLR0X4ul2BN4Jrs4gJPYuRW4ueDOUkKKdAOZP/fPAShK4YWWwz4LU6slvv4tlMitKVB3cwA/iqDYGda4wuLsXEKKezgPshNAihS5UGqQywjrwOXBuMLtaiwt2kPULjaf3rdTGBs2LsgWBf3hVFDWzToS4H50pwrioOzbMLvFMrin3gPTgN8jntB49Ar0AerE1gRubCyHxwLADHInAshtGlMLoMRlcI5NVmVKhd7Coui/EeMpdt/o48yN16F2vIA7UKPGdGH2A+QjeDpwU8baKL28G7R1sX57xHOQ7+E9qKQj82u/g/ACkPsHajP9UunlfySfCpDx4HtS7Oxe7SshilG4I9tQ1s3LQWFQvLMiFqVPiPgv94/vOBCxDoq21g42a1LF5Stsnxd+oPHv586+J+bUVB8HKlgWa1/QYdo4m5c/5ljgAAAABJRU5ErkJggg=="
-                    alt="AA gaming"
-                />
-            </a>
-        </li>
-        <li>
-            <a
-                href="https://astrid.tech/"
-                target="_blank"
-                title="astrid dot tech"
-            >
-                <img
-                    src="https://s3.us-west-000.backblazeb2.com/nyaabucket/a313cf12a8c46d0262c69cdf8a3accc3b6a2d159b8e1211b7abe30886a212884/astriddottech.png"
-                    alt="astrid dot tech"
-                />
-            </a>
-        </li>
-        <li>
-            <a
-                    href="https://atapi.space/"
-                    target="_blank"
-                    title="Atapi's Homepage"
-            >
-                <img
-                        src="https://atapi.space/assets/img/buttons/atapi.gif"
-                        alt="Atapi"
-                />
-            </a>
-        </li>
-<!--        <li>-->
-<!--            <a-->
-<!--                href="https://blueb.pages.gay"-->
-<!--                target="_blank"-->
-<!--                title="blueb's website"-->
-<!--            >-->
-<!--                <img-->
-<!--                    src="https://blueb.pages.gay/_nuxt/kattgutte.D3vLs2tl.png"-->
-<!--                    alt="kattgutte er ikke ekte"-->
-<!--                />-->
-<!--            </a>-->
-<!--        </li>-->
-<!--        <li>-->
-<!--            <a href="https://elke.cafe/" target="_blank" title="elke.cafe">-->
-<!--                <img-->
-<!--                    src="https://elke.cafe/assets/images/buttons/elke.cafe.gif"-->
-<!--                    alt="elke dot cafe"-->
-<!--                />-->
-<!--            </a>-->
-<!--        </li>-->
-        <li>
-            <a
-                href="https://eris.meows.gay/"
-                target="_blank"
-                title="eris meow :3"
-            >
-                <img
-                    src="https://eris.meows.gay/images/badges/eris.png"
-                    alt="eris"
-                />
-            </a>
-        </li>
-        <li>
-            <a
-                    href="https://houl.floof.company/"
-                    target="_blank"
-                    title="Houl Floof :3c"
-            >
-                <img
-                        src="https://houl.floof.company/assets/images/buttons/houl.png"
-                        alt="Houl"
-                />
-            </a>
-        </li>
-        <li>
-            <a
-                href="https://lilysthings.org/"
-                target="_blank"
-                title="Lily's Things at The Cool Site"
-            >
-                <img
-                    src="https://lilysthings.org/buttons/lilysthings.png"
-                    alt="lily!!"
-                />
-            </a>
-        </li>
-        <li>
-            <a
-                href="https://microspinny.zip/"
-                target="_blank"
-                title="microsite"
-            >
-                <img src="/assets/buttons/micro.png" alt="Micro" />
-            </a>
-        </li>
-        <li>
-            <a
-                href="https://nelle.observer/"
-                target="_blank"
-                title="nelle.observer"
-            >
-                <img
-                    src="https://nelle.observer/assets/images/badges/mine/nelleobserver-gray.gif"
-                    alt="nelle observer"
-                />
-            </a>
-        </li>
-        <li>
-            <a
-                    href="https://notfire.cc"
-                    target="_blank"
-                    title="home // notfire.cc"
-            >
-                <img
-                        src="https://notfire.cc/design/images/buttons/notfire-cc-88x31-af-darkv.gif"
-                        alt="not fire dot CC"
-                />
-            </a>
-        </li>
-        <li>
-            <a
-                    href="https://floof.gay/"
-                    target="_blank"
-                    title="home - olivia"
-            >
-                <img
-                        src="https://floof.gay/img/badges/oli.svg"
-                        alt="oli"
-                />
-            </a>
-        </li>
-        <li>
-            <a
-                href="https://synth.download"
-                target="_blank"
-                title="synth download!"
-            >
-                <img
-                    src="https://synth.download/assets/buttons/synth.download.svg"
-                    alt="Synth.Download!"
-                />
-            </a>
-        </li>
-        <li>
-            <a href="https://void.rehab" target="_blank" title="void.rehab">
-                <img
-                    src="https://void.rehab/88x31/void.rehab.png"
-                    alt="void dot rehab"
-                />
-            </a>
-        </li>
-        <li>
-            <a href="https://w.on-t.work/" target="_blank" title="Won't Work!">
-                <img
-                    src="https://w.on-t.work/assets/88x31.png"
-                    alt="wont work"
-                />
-            </a>
-        </li>
-        <li>
-            <a href="https://zvava.org/" target="_blank" title="zvava.org">
-                <img
-                    src="https://zvava.org/images/buttons/zvava.org.png"
-                    alt="zvava dot org"
-                />
-            </a>
-        </li>
-    </ul>
-
-    <p>Cool things</p>
-
-    <ul class="buttons">
             <li>
                 <img
                         src="/assets/buttons/anythingbutchrome.gif"
@@ -468,8 +284,185 @@
                 <img src="/assets/buttons/wii.png" alt="Wii" title="Wii"/>
             </li>
         </ul>
+    </div>
 
-    <h3 id="webrings">Webrings</h3>
+    <div class="foreground card">
+        <h3>Other sites</h3>
+
+        <ul class="buttons">
+            <li>
+                <a href="https://aagaming.me/" target="_blank" title="aagaming">
+                    <img
+                            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAAfCAYAAABjyArgAAAACXBIWXMAAAsTAAALEwEAmpwYAAADVUlEQVR4nO3XiU/TYBjH8f59xmjUaIxGjfeBCAIqarxiVETFA5HLKxqPP8ErSiQaTYz3EY+ojG3d0R2EwU73NW1f2nWHTNicW0fSvO3TbW/74dlvbyVJkqhvUjkN6sBSHViqyLdM/at3sFQHxuYxVAVf1chDiAxBZBgmnpj16AuIvoLoG4i+M+uxLxD/BvHvkBgx60kZkl5IKZAK6rVf45Ce0PfTCUs8ZEbE1H52PbOW79x/D8z4feuxAGbyubUefStwP1rriR9idFrrqYAAHhO4k2JM5qBOB56NXV3AkXtZwMMC+Jm1HntdAPi7GB3WelIR0GEBnb+LC8HVDvD4nQzsRxB5LICfmvXoSy0qdOD31vfHv+UAazGR9AnYkBgjAjhmL2BJg70LkQdif8isTzwzokJFNuqxDxD7BPHPEP9q1hMOSLgMZG1M6cDGa9JRAZUC0kVBVnUGS7P952QA/5P57Af8uQ4slRpVXbbF3uX84JWzawvEQ/EdjHsbyNsr3pFS9W1FAsuNYmwBua3SF03tAbu3Wo89Oyp94dQYcAO4G0FuykDeWfILInwTxm7bEXgLyA0ii5szkHeVBjZ0FULXBPItGwK7Noku3mrpYh25feawwQEIXrTWwjftCLxR72IVWW4Ed3MW8m7w7gXvfvAeAN9h8B0B37E/4Pbm1sLXIHzDjsDrRReryCpwRhbLf85i/B3g77TWAucLR0X4ul2BN4Jrs4gJPYuRW4ueDOUkKKdAOZP/fPAShK4YWWwz4LU6slvv4tlMitKVB3cwA/iqDYGda4wuLsXEKKezgPshNAihS5UGqQywjrwOXBuMLtaiwt2kPULjaf3rdTGBs2LsgWBf3hVFDWzToS4H50pwrioOzbMLvFMrin3gPTgN8jntB49Ar0AerE1gRubCyHxwLADHInAshtGlMLoMRlcI5NVmVKhd7Coui/EeMpdt/o48yN16F2vIA7UKPGdGH2A+QjeDpwU8baKL28G7R1sX57xHOQ7+E9qKQj82u/g/ACkPsHajP9UunlfySfCpDx4HtS7Oxe7SshilG4I9tQ1s3LQWFQvLMiFqVPiPgv94/vOBCxDoq21g42a1LF5Stsnxd+oPHv586+J+bUVB8HKlgWa1/QYdo4m5c/5ljgAAAABJRU5ErkJggg=="
+                            alt="AA gaming"
+                    />
+                </a>
+            </li>
+            <li>
+                <a
+                        href="https://astrid.tech/"
+                        target="_blank"
+                        title="astrid dot tech"
+                >
+                    <img
+                            src="https://s3.us-west-000.backblazeb2.com/nyaabucket/a313cf12a8c46d0262c69cdf8a3accc3b6a2d159b8e1211b7abe30886a212884/astriddottech.png"
+                            alt="astrid dot tech"
+                    />
+                </a>
+            </li>
+            <li>
+                <a
+                        href="https://atapi.space/"
+                        target="_blank"
+                        title="Atapi's Homepage"
+                >
+                    <img
+                            src="https://atapi.space/assets/img/buttons/atapi.gif"
+                            alt="Atapi"
+                    />
+                </a>
+            </li>
+            <!--        <li>-->
+            <!--            <a-->
+            <!--                href="https://blueb.pages.gay"-->
+            <!--                target="_blank"-->
+            <!--                title="blueb's website"-->
+            <!--            >-->
+            <!--                <img-->
+            <!--                    src="https://blueb.pages.gay/_nuxt/kattgutte.D3vLs2tl.png"-->
+            <!--                    alt="kattgutte er ikke ekte"-->
+            <!--                />-->
+            <!--            </a>-->
+            <!--        </li>-->
+            <!--        <li>-->
+            <!--            <a href="https://elke.cafe/" target="_blank" title="elke.cafe">-->
+            <!--                <img-->
+            <!--                    src="https://elke.cafe/assets/images/buttons/elke.cafe.gif"-->
+            <!--                    alt="elke dot cafe"-->
+            <!--                />-->
+            <!--            </a>-->
+            <!--        </li>-->
+            <li>
+                <a
+                        href="https://eris.meows.gay/"
+                        target="_blank"
+                        title="eris meow :3"
+                >
+                    <img
+                            src="https://eris.meows.gay/images/badges/eris.png"
+                            alt="eris"
+                    />
+                </a>
+            </li>
+            <li>
+                <a
+                        href="https://houl.floof.company/"
+                        target="_blank"
+                        title="Houl Floof :3c"
+                >
+                    <img
+                            src="https://houl.floof.company/assets/images/buttons/houl.png"
+                            alt="Houl"
+                    />
+                </a>
+            </li>
+            <li>
+                <a
+                        href="https://lilysthings.org/"
+                        target="_blank"
+                        title="Lily's Things at The Cool Site"
+                >
+                    <img
+                            src="https://lilysthings.org/buttons/lilysthings.png"
+                            alt="lily!!"
+                    />
+                </a>
+            </li>
+            <li>
+                <a
+                        href="https://microspinny.zip/"
+                        target="_blank"
+                        title="microsite"
+                >
+                    <img src="/assets/buttons/micro.png" alt="Micro"/>
+                </a>
+            </li>
+            <li>
+                <a
+                        href="https://nelle.observer/"
+                        target="_blank"
+                        title="nelle.observer"
+                >
+                    <img
+                            src="https://nelle.observer/assets/images/88by31/mine/site-badges/nelleobserver-gray.gif"
+                            alt="nelle observer"
+                    />
+                </a>
+            </li>
+            <li>
+                <a
+                        href="https://notfire.cc"
+                        target="_blank"
+                        title="home // notfire.cc"
+                >
+                    <img
+                            src="https://notfire.cc/design/images/buttons/notfire-cc-88x31-af-darkv.gif"
+                            alt="not fire dot CC"
+                    />
+                </a>
+            </li>
+<!--            <li>-->
+<!--                <a-->
+<!--                        href="https://floof.gay/"-->
+<!--                        target="_blank"-->
+<!--                        title="home - olivia"-->
+<!--                >-->
+<!--                    <img-->
+<!--                            src="https://floof.gay/img/badges/oli.svg"-->
+<!--                            alt="oli"-->
+<!--                    />-->
+<!--                </a>-->
+<!--            </li>-->
+            <li>
+                <a
+                        href="https://synth.download"
+                        target="_blank"
+                        title="synth download!"
+                >
+                    <img
+                            src="https://synth.download/assets/buttons/synth.download.svg"
+                            alt="Synth.Download!"
+                    />
+                </a>
+            </li>
+            <li>
+                <a href="https://void.rehab" target="_blank" title="void.rehab">
+                    <img
+                            src="https://void.rehab/88x31/void.rehab.png"
+                            alt="void dot rehab"
+                    />
+                </a>
+            </li>
+            <li>
+                <a href="https://w.on-t.work/" target="_blank" title="Won't Work!">
+                    <img
+                            src="https://w.on-t.work/assets/88x31.png"
+                            alt="wont work"
+                    />
+                </a>
+            </li>
+            <li>
+                <a href="https://zvava.org/" target="_blank" title="zvava.org">
+                    <img
+                            src="https://zvava.org/images/buttons/zvava.org.png"
+                            alt="zvava dot org"
+                    />
+                </a>
+            </li>
+        </ul>
+    </div>
+
+    <h2 id="webrings">Webrings</h2>
 
     <p>Adjacent websites</p>
 
@@ -504,35 +497,19 @@
 
 <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: #b462cbff;
-    --accent-2: light-dark(hsl(287, 50%, 39%), hsl(287, 50%, 79%));
+    --background: light-dark(#f3dffc, #16051d);
-    --background: light-dark(hsl(302, 69%, 95%), hsl(302, 69%, 10%));
+    --foreground: light-dark(#faf0ff, #08020b);
-    --background-2: light-dark(hsl(302, 69%, 90%), hsl(302, 69%, 5%));
+    --text: light-dark(#0f0f0f, #efefef);
-    --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;
+    --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);
+    color: var(--text);
-
-    font-family: "FiraGO", sans-serif;
 }
 
 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,71 +113,6 @@ pre code {
     width: 100%;
     padding: 0.5rem;
     overflow-x: scroll;
-
-    background-color: #1a1b26;
-    color: #c0caf5;
-    border: 1px solid #c0caf5;
-}
-
-/* Code highlighting */
-.language-html,
-.language-md {
-    color: #9aa5ce;
-}
-
-.token.keyword,
-.token.tag {
-    color: #f7768e;
-}
-
-.token.boolean,
-.token.number {
-    color: #ff9e64;
-}
-
-.token.parameter,
-.regex-source {
-    color: #e0af68;
-}
-
-.token.string,
-.token.selector {
-    color: #9ece6a;
-}
-
-.token.property,
-.token.regex-flags,
-.token.title {
-    color: #7dcfff;
-}
-
-.token.literal-property,
-.token.url {
-    color: #73daca;
-}
-
-.token.function {
-    color: #7aa2f7;
-}
-
-.token.operator,
-.token.attr-name {
-    color: #bb9af7;
-}
-
-.token.constant,
-.token.environment,
-.token.class-name {
-    color: #c0caf5;
-}
-
-.token.comment {
-    color: #565f89;
-    font-style: italic;
-}
-
-details {
-    border-left: 2px solid var(--accent-2);
 }
 
 details[open] {
@@ -375,38 +132,34 @@ details>summary {
     padding: 0.5em;
     width: fit-content;
     cursor: pointer;
-
-    background-color: var(--accent-2);
-    color: var(--background);
 }
 
 kbd {
     padding-left: 0.5em;
     padding-right: 0.5em;
-
-    background-color: var(--background-2);
-    border-radius: var(--radius);
 }
 
 mark {
     padding-left: 0.25em;
     padding-right: 0.25em;
-
-    background-color: var(--accent);
-    color: var(--background);
 }
 
 button,
 input[type="submit"] {
     padding: 0.5em 1em;
 
-    background-color: var(--accent-2);
+    background-color: color-mix(in srgb, var(--foreground) 70%, var(--accent));
-    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],
@@ -418,10 +171,11 @@ input[type="text"] {
     padding: 0.5em;
 
     outline: none;
-    background-color: var(--background-2);
+    background-color: var(--foreground);
-    color: var(--foreground);
+    color: var(--text);
-    border: 1px solid var(--foreground);
+    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,28 +194,13 @@ table {
 }
 
 table.rows tbody tr {
-    background-color: var(--background-2);
+    background-color: var(--foreground);
 }
 
 table.rows tbody tr:nth-child(2n) {
     background-color: transparent;
 }
 
-.table-y {
-    background-color: var(--success);
-    color: black;
-}
-
-.table-p {
-    background-color: var(--warn);
-    color: black;
-}
-
-.table-n {
-    background-color: var(--error);
-    color: black;
-}
-
 .icon-link > a,
 .icon-link > span {
     padding-left: 0.15rem;
@@ -476,39 +215,36 @@ table.rows tbody tr:nth-child(2n) {
     margin-right: 0.25rem;
 }
 
-.notice {
+.upper {
-    display: block;
+    text-transform: uppercase;
-    padding: 0.5rem;
-
-    border: 2px dashed var(--warn);
 }
 
-.notice::before {
+.foreground {
-    content: "🛈 Notice";
+    background: var(--foreground);
-    color: var(--warn);
-    font-size: larger;
-    font-weight: bolder;
 }
 
-.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 {
+.card + .card {
-    text-transform: uppercase;
+    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();
-    }
-}