moved stylised button to outlined-button.svelte; added drawing gallery (currently hidden)

src/lib/components/outlined-button.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    let {
+        text,
+        onClick,
+        fullWidth,
+    }: {
+        text: string;
+        onClick: () => undefined;
+        fullWidth?: boolean;
+    } = $props();
+</script>
+
+{#if fullWidth}
+    <button class="outlined-button outlined-button-fullwidth" onclick={onClick}>{text}</button>   
+{:else}
+    <button class="outlined-button" onclick={onClick}>{text}</button>
+{/if}
+
+<style>
+    .outlined-button {
+        font-family: var(--font-mono);
+        font-size: var(--font-size-mono);
+        padding: 8px;
+        border: dashed 2px var(--color-highlight);
+        color: var(--color-highlight);
+        font-weight: 700;
+        cursor: pointer;
+        transition: background-color 0.05s ease-out;
+    }
+
+    .outlined-button:hover {
+        background-color: var(--color-background-highlight);
+    }
+
+    .outlined-button-fullwidth {
+        width: 100%;
+    }
+</style>

src/routes/+layout.svelte

@@ -100,6 +100,7 @@
             --color-text-img: invert(98%) sepia(1%) saturate(4643%) hue-rotate(297deg) brightness(115%) contrast(76%);
             --color-text-dark: #1e1e1e;
             --color-highlight: #51B86B;
+            --color-highlight-dark: color-mix(in srgb, var(--color-highlight) 60%, black);
             --color-highlight-alt: #d03b4a;
             --color-header: color-mix(in srgb, var(--color-highlight) 80%, black);
             --color-header-highlight: color-mix(in srgb, #6d1e26 80%, transparent);
@@ -107,6 +108,7 @@
             --color-background: #111111;
             --color-background-highlight: color-mix(in srgb, var(--color-highlight) 10%, transparent);
             --color-background-highlight-hover: color-mix(in srgb, var(--color-highlight) 60%, transparent);
+            --color-background-highlight-hover-dark: color-mix(in srgb, var(--color-highlight-dark) 60%, transparent);
             
             --color-waters: #242424;
 
@@ -189,23 +191,9 @@
         }
 
         button {
-            font-family: var(--font-mono);
-            font-size: var(--font-size-mono);
-            padding: 8px;
             background-color: transparent;
-            border: dashed 2px var(--color-highlight);
-            color: var(--color-highlight);
-            font-weight: 700;
-            cursor: pointer;
-            transition: background-color 0.05s ease-out;
-        }
-
-        button:hover {
-            background-color: var(--color-background-highlight);
-        }
-
-        .button-fullwidth {
-            width: 100%;
+            border: none;
+            padding: 0;
         }
 
         /* #region Headers */

src/routes/garden/drawing-gallery/+page.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+    import Banner2 from "$lib/banner2.svelte";
+    import Content from "$lib/viewport/content.svelte";
+    import { drawings, type DrawingData } from "./drawing-data";
+
+    let selectedDrawingIndex: number = $state(-1);
+
+    function selectDrawing(index: number) {
+        selectedDrawingIndex = index;
+    }
+</script>
+
+<svelte:head>
+    <title>Drawing Gallery | denizk0461</title> 
+</svelte:head>
+
+{#snippet drawing({ drawing }: { drawing: DrawingData })}
+    <button class="drawing-link-container" onclick={(event) => selectDrawing(drawings.indexOf(drawing))}>
+        <div class="drawing-content-container">
+            <img class="drawing-img" src="{drawing.fileName}" alt="{drawing.altText}">
+            <div class="drawing-overlay"></div>
+        </div>
+    </button>
+{/snippet}
+
+{#snippet inspector({ index }: { index: number })}
+    {#if index == -1}
+        <p class="inspector-img-note">click on an image to view details about it</p>
+    {:else}
+        <a class="inspector-link" href="{drawings[index].fileName}">
+            <img class="inspector-img" src="{drawings[index].fileName}" alt="{drawings[index].altText}">
+        </a>
+        <p class="inspector-date">{drawings[index].date}</p>
+        <hr>
+        {#each drawings[index].notes as n}
+            <p class="inspector-paragraph">{n}</p>
+        {/each}
+    {/if}
+{/snippet}
+
+<Content>
+    <Banner2
+        title="Drawing Gallery" />
+
+    <p>I'm trying this to motivate myself to draw more now. Let's see where this takes us.</p>
+
+    <div class="page-container">
+        <div class="drawing-gallery">
+            {#each drawings as d}
+                {@render drawing({drawing: d})}
+            {/each}
+        </div>
+        <div class="inspector">
+            {@render inspector({ index: selectedDrawingIndex })}
+        </div>
+    </div>
+</Content>
+
+<style>
+    .page-container {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .drawing-gallery {
+        display: flex;
+        flex-wrap: wrap;
+        width: 60%;
+        padding-right: 16px;
+        box-sizing: border-box;
+    }
+
+    .drawing-link-container {
+        display: flex;
+        height: 14vh;
+        flex-grow: 1;
+        overflow: hidden;
+    }
+
+    .drawing-content-container {
+        position: relative;
+        cursor: pointer;
+    }
+
+    .drawing-img {
+        max-height: 100%;
+        min-width: 100%;
+        object-fit: cover;
+        vertical-align: bottom;
+        transition: scale 0.06s ease-out, filter 0.06s ease-out;
+    }
+
+    .drawing-overlay {
+        opacity: 0;
+        transition: opacity 0.06s ease-out;
+        background-color: var(--color-background-highlight-hover-dark);
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        pointer-events: none;
+        display: flex;
+        flex-direction: column;
+        justify-content: end;
+    }
+
+    .drawing-content-container:hover .drawing-overlay {
+        opacity: 1;
+    }
+
+    .drawing-content-container:hover .drawing-img, .inspector-link:hover .inspector-img {
+        scale: 1.1;
+        /* filter: grayscale(60%); */
+    }
+
+    .inspector {
+        width: 40%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .inspector-link {
+        width: 100%;
+        margin-left: auto;
+        margin-right: auto;
+        overflow: hidden;
+    }
+
+    .inspector-img {
+        width: 100%;
+        margin: 0;
+        transition: scale 0.06s ease-out;
+    }
+
+    .inspector-date {
+        font-family: var(--font-mono);
+        font-weight: 600;
+        color: var(--color-highlight);
+        margin: 2px 0;
+    }
+
+    .inspector-paragraph {
+        margin: 2px 0;
+    }
+
+    .inspector-img-note {
+        padding: 64px 16px;
+        background-color: var(--color-background-highlight);
+    }
+</style>

src/routes/garden/drawing-gallery/drawing-data.ts

@@ -0,0 +1,31 @@
+export interface DrawingData {
+    fileName: string;
+    altText: string;
+
+    // Format: yyyy-MM-dd
+    date: string;
+
+    notes: string[];
+}
+
+export let drawings: DrawingData[] = [
+    {
+        fileName: "2026/breadgirl.webp",
+        altText: "An anime-style girl chewing on a piece of bread. She wears a ponytail and a sleeveless top.",
+        date: "2026-01-30",
+        notes: [
+            "I drew her during a game of Wizard. I initially wanted to make her chew on a whole loaf but I wasn't sure if I could draw that.",
+            "Wasn't really sure how to convey that her mouth is full, but in retrospect, I could have exaggerated the bow in her lower eyelids to do so.",
+            "I like her eyes. Her head could be taller, actually.",
+        ],
+    },
+    {
+        fileName: "2026/girl.webp",
+        altText: "An anime-style girl's head. She has a ponytail and is looking towards the left with a concentrated gaze.",
+        date: "2026-01-29",
+        notes: [
+            "Her nose is a bit high but I do like her focused gaze. I think I nailed the eyes, to be honest, at least the left one, considering the drawing is just 3x4cm.",
+            "I'm super happy with this, especially since it was my first try drawing in a long time and I only used a ballpoint pen (non-erasable!).",
+        ],
+    },
+];

src/routes/projects/projectn5/+page.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
     import Banner2 from "$lib/banner2.svelte";
     import Content from "$lib/viewport/content.svelte";
-    // import type { DevlogPost } from "./devlog-posts";
     import { posts, type DevlogPost } from "./devlog/posts";
     import Gallery, { type GalleryEntry } from "$lib/lists/gallery.svelte";
 
     let allEntries: GalleryEntry[] = posts.entries().map(mapEntries).toArray()
-    // let entries: GalleryEntry[] = allEntries;//$state(allEntries.slice(0, 3));
-    let loadEntryButton: HTMLElement;
 
     function mapEntries(m: [String, DevlogPost], index: number): GalleryEntry {
         return {
@@ -19,11 +16,6 @@
         };
     }
 
-    // function loadAllEntries() {
-    //     entries = allEntries;
-    //     loadEntryButton.style.display = "none";
-    // }
-
     // Leftpads a single-digit number to two digits
     function leftpad(n: number): String {
         var result = n.toString();
@@ -51,6 +43,4 @@
     <p>Development log entries in reverse chronological order (newest to oldest).</p> 
 
     <Gallery entries={allEntries} reverseTextOrder />
-
-    <!-- <button class="button-fullwidth" onclick={loadAllEntries} bind:this={loadEntryButton}>Load all entries</button> -->
 </Content>