added 88x31 buttons to main page

src/lib/components/indie-button.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import { type IndieButton } from "./indie-button";
+
+    let {
+        button
+    }: {
+        button: IndieButton;
+    } = $props();
+</script>
+
+<a class="button" href="{button.link}">
+    <img src="/common/buttons/{button.img}" alt="{button.alt}">
+</a>
+
+<style>
+    .button {
+        width: 88px;
+        height: 31px;
+        transition: scale var(--duration-animation) var(--anim-curve);
+        margin: 0;
+    }
+
+    .button:hover {
+        scale: 1.2;
+        z-index: 10;
+    }
+
+    .button img {
+        height: 100%;
+        width: 100%;
+    }
+</style>

src/lib/components/indie-button.ts

@@ -0,0 +1,43 @@
+export interface IndieButton {
+    img: string;
+    alt: string;
+    link?: string;
+}
+
+export let buttons: IndieButton[] = [
+    {
+        img: "flag-progress.png",
+        alt: "A button showing the progress pride flag.",
+    },
+    {
+        img: "gnu-linux.gif",
+        alt: "A button with the Linux penguin and the text 'Made on GNU/Linux'.",
+    },
+    {
+        img: "iso8601.png",
+        alt: "A button with the text 'ISO 8601 YYYY-MM-DD'.",
+        link: "https://www.iso8601.com/",
+    },
+    {
+        img: "notbyai.png",
+        alt: "A button with the text 'created by a human, not by AI' and a smiley next to it.",
+    },
+    {
+        img: "queercoded.png",
+        alt: "A button with the text \"you're telling me a queer coded this\" on a rainbow background.",
+    },
+    {
+        img: "madewithsveltekit.gif",
+        alt: "A red button with the text 'MADE WITH SVELTEKIT'.",
+        link: "https://svelte.dev",
+    },
+    {
+        img: "sexno.png",
+        alt: "A button with the text 'SEX? NO.' on a white background with a blue border.",
+        link: "https://youtu.be/J4i0tuoYBG0?t=176",
+    },
+    {
+        img: "trans-rights-now.png",
+        alt: "A button with the text 'TRANS RIGHTS NOW!' next to a trans flag.",
+    },
+];

src/routes/+page.svelte

@@ -7,6 +7,8 @@
     import { posts as blogPosts } from "./blog/posts";
     import { entries as updateEntries } from "./meta/updates/updates";
     import UpdateEntry from "$lib/components/update-entry.svelte";
+    import IndieButton from "$lib/components/indie-button.svelte";
+    import { buttons } from "$lib/components/indie-button";
 
     let latestDevlogDate = devlogPosts[0].post.date;
     let latestBlogDate = blogPosts[0].post.date;
@@ -98,9 +100,9 @@
     <GalleryRow entries={galleryTopRow} />
     <GalleryRow entries={galleryBottomRow} />
 
-    <hr>
-
+    <div class="split-container">
         <div class="webring-container">
+            <h4 class="update-header">webrings</h4>
             <div class="webring">
                 <iframe title="bucket webring" id="bucket-webring" style="width: 100%; height: 3rem; border: none;" src="https://webring.bucketfish.me/embed.html?name=denizk0461"></iframe>
             </div>
@@ -126,6 +128,16 @@
             <img class="webring-img" usemap="#w95widget" src="/webrings/noai/w95widget.webp" alt="a gray Windows 95 style dialog box titled 'The No AI Webring' with a little icon showing a computer chip in a rubbish bin. beside it are three clickable buttons, labeled Previous, Random... and Next">
         </div>
 
+        <div class="button-container">
+            <h4 class="update-header">88x31 buttons</h4>
+            <div class="button-subcontainer">
+                {#each buttons as button}
+                    <IndieButton button={button} />
+                {/each}
+            </div>
+            <p class="small-supertext">my own 88x31 button is in the making. ETA: ???</p>
+        </div>
+    </div>
 </Content>
 
 <style>
@@ -134,7 +146,7 @@
         display: flex;
         flex-direction: row;
         gap: 16px;
-        margin-bottom: 16px;
+        margin: 16px 0;
     }
 
     @media screen and (max-width: 900px) {
@@ -144,6 +156,18 @@
         }
     }
 
+    .button-container {
+        flex: 2;
+    }
+
+    .button-subcontainer {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        justify-content: center;
+        align-content: center;
+    }
+
     .webring {
         display: flex;
         flex-direction: row;
@@ -162,21 +186,23 @@
         margin-right: 12px;
     }
 
-    .update-container, .info-container {
+    .update-container, .info-container, .button-container, .webring-container {
         padding: 8px 24px;
         backdrop-filter: blur(var(--blur-radius-background));
         flex: 2;
     }
 
-    .update-container {
+    .update-container, .button-container, .webring-container {
         border: var(--border-dash-size) var(--color-highlight) var(--border-style);
     }
 
-    .info-container {
+    .info-container, .button-container {
         border: var(--border-dash-size) var(--color-highlight-alt) var(--border-style);
+    }
+    .info-container {
         flex: 1;
     }
-    .info-container > h4 {
+    .info-container > h4, .button-container > h4 {
         color: var(--color-highlight-alt);
     }
     .info-container p, .info-container a {
@@ -190,6 +216,7 @@
         flex-wrap: wrap;
         align-items: center;
         justify-content: center;
+        flex: 3;
         /* flex-wrap: wrap; */
         /* gap: 8px; */
         padding-top: 16px;