Add buttons

src/components/atoms/Box.svelte

@@ -80,12 +80,13 @@
         border-radius: 10px;
 
         .title-label {
-          transform: translateY(-1em);
+          transform: translateY(-0.9em);
           padding: 0.25em;
           border-radius: 10%;
           color: var(--box-text-color);
           text-shadow: 0 0 20px var(--box-color);
           z-index: 99;
+          white-space: nowrap;
         }
 
         .border-left {

src/components/atoms/Button8831.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  export let src: string;
+  export let alt: string = "88x31 Button";
+  export let href: string | undefined = undefined;
+</script>
+
+<div class="button-88-31">
+  {#if href}
+    <a class="unstyled-link" {href} target="_blank">
+      <img {src} {alt} loading="lazy" />
+    </a>
+  {:else}
+    <img {src} {alt} loading="lazy" />
+  {/if}
+</div>
+
+<style lang="scss">
+  @layer component {
+    .button-88-31 {
+        margin: 2px;
+      height: 31px;
+      width: 88px;
+      padding: 0;
+    }
+  }
+</style>

src/components/molecules/Buttons.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { shuffle } from "$lib";
+  import Button8831 from "../atoms/Button8831.svelte";
+
+  const buttons: {
+    src: string;
+    alt: string;
+    href?: string;
+  }[] = [
+    {
+      src: "/buttons/adobe_getflash4.gif",
+      alt: "Get Adobe Flash Player.",
+    },
+    { src: "/buttons/get_firefox.gif", alt: "Get Firefox." },
+    {
+      src: "/buttons/nft_no_fucking_thanks.gif",
+      alt: "NFT? No Fucking Thanks.",
+    },
+    { src: "/buttons/javanow.gif", alt: "Java. Get it now." },
+    { src: "/buttons/wget.gif", alt: "I surf with wget. And you?" },
+    { src: "/buttons/bestview.gif", alt: "Best viewed with open eyes." },
+    { src: "/buttons/html_learn_it_today.gif", alt: "HTML. Learn it today." },
+    {
+      src: "/buttons/buy_kofi.gif",
+      alt: "Buy Ko-Fi.",
+      href: "https://ko-fi.com/trivernisdev",
+    },
+    {
+      src: "https://dimden.dev/services/images/88x31.gif",
+      alt: "dimden.dev",
+      href: "https://dimden.dev/",
+    },
+    {
+      src: "https://www.tanguy.cyou/assets/img/links/button.webp",
+      alt: "tanguy.cyou",
+      href: "https://www.tanguy.cyou/",
+    },
+    {
+      src: "https://coolbugs.win/media/coolbugs-88x31.gif",
+      alt: "coolbugs.win",
+      href: "https://coolbugs.win",
+    },
+    {
+      src: "https://screamingegg.neocities.org/0_assets/pics/index/buttons/screamingegg_button-1.jpg",
+      alt: "screamingegg",
+      href: "https://screamingegg.neocities.org/",
+    },
+  ];
+
+  shuffle(buttons);
+</script>
+
+<div class="buttons">
+  {#each buttons as button}
+    <Button8831 src={button.src} alt={button.alt} href={button.href} />
+  {/each}
+</div>
+
+<style lang="scss">
+  @layer component {
+    .buttons {
+      width: 100%;
+      height: auto;
+      display: flex;
+      padding-bottom: 1em;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+  }
+</style>

src/components/organisms/Footer.svelte

@@ -1,10 +1,12 @@
 <script>
   import "$lib/vars.scss";
   import Box from "../atoms/Box.svelte";
+    import Buttons from "../molecules/Buttons.svelte";
 </script>
 
 <div class="footer">
   <Box color="purple">
+    <Buttons />
     <div class="justified">
       <div class="left">
         <span><i>CC0 Public Domain, 2024</i></span>
@@ -34,7 +36,9 @@
         flex-direction: row;
         justify-content: space-between;
 
-        .left, .right, .center {
+        .left,
+        .right,
+        .center {
           width: 33%;
           display: flex;
           flex-direction: row;

src/lib/index.ts

@@ -14,6 +14,22 @@ export function randInt(min: number, max: number): number {
 	return Math.floor(Math.random() * (max - min + 1) + min);
 }
 
+export function shuffle<T>(array: T[]) {
+	let currentIndex = array.length;
+
+	// While there remain elements to shuffle...
+	while (currentIndex !== 0) {
+		// Pick a remaining element...
+		const randomIndex = Math.floor(Math.random() * currentIndex);
+		currentIndex--;
+
+		// And swap it with the current element.
+		[array[currentIndex], array[randomIndex]] = [
+			array[randomIndex],
+			array[currentIndex],
+		];
+	}
+}
 export type ImageMetadata = {
 	caption?: string;
 	altText?: string;