From 4d8d10765cccf49d552c7b1fd87a279b6080729b Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Mon, 2 Feb 2026 20:50:57 +0100
Subject: [PATCH] added SubtitledImage component

---
 src/lib/components/subtitled-image.svelte    | 111 +++++++++++++++++++
 src/routes/+layout.svelte                    |   3 +-
 src/routes/projects/projectn5/+layout.svelte |   5 -
 src/routes/test/+page.svelte                 |  41 +++++++
 4 files changed, 154 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/components/subtitled-image.svelte
 delete mode 100644 src/routes/projects/projectn5/+layout.svelte
 create mode 100644 src/routes/test/+page.svelte

diff --git a/src/lib/components/subtitled-image.svelte b/src/lib/components/subtitled-image.svelte
new file mode 100644
index 0000000..de34050
--- /dev/null
+++ b/src/lib/components/subtitled-image.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+    let {
+        image,
+        altText,
+        subtitle,
+        // options: left, right. leaving empty means centred
+        alignment,
+    }: {
+        image: string;
+        altText: string;
+        subtitle?: string;
+        alignment?: string;
+    } = $props();
+</script>
+
+{#snippet subtitledImageContent()}
+    <img class="subtitled-img" src="{image}" alt="{altText}">
+    
+    {#if subtitle}
+        <hr>
+        <div class="subtitled-img-text-container">
+            <span class="subtitled-img-logo">ⓘ</span>
+            <p class="subtitled-img-text">{subtitle}</p>
+        </div>
+    {/if}
+{/snippet}
+
+{#if alignment && alignment == "left"}
+    <a class="subtitled-img-container subtitled-img-container-left" href="{image}">
+        {@render subtitledImageContent()}
+    </a>
+{:else if alignment && alignment == "right"}
+    <a class="subtitled-img-container subtitled-img-container-right" href="{image}">
+        {@render subtitledImageContent()}
+    </a>
+{:else}
+    <a class="subtitled-img-container subtitled-img-container-centred" href="{image}">
+        {@render subtitledImageContent()}
+    </a>
+{/if}
+
+<style>
+    .subtitled-img-container {
+        display: flex;
+        flex-direction: column;
+        border: 2px var(--color-highlight) dashed;
+        text-decoration: none;
+        box-sizing: border-box;
+        transition: background-color 0.1s ease-out;
+    }
+
+    .subtitled-img-container-centred {
+        width: var(--media-width);
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .subtitled-img-container-left, .subtitled-img-container-right {
+        width: 34%;
+    }
+
+    /* Don't limit height of images set to the side because text flows around them */
+    .subtitled-img-container-left img, .subtitled-img-container-right img {
+        max-height: initial;
+    }
+
+    .subtitled-img-container-left {
+        float: left;
+        margin-right: 16px;
+    }
+
+    .subtitled-img-container-right {
+        float: right;
+        margin-left: 16px;
+    }
+
+    .subtitled-img-container:hover {
+        background-color: var(--color-background-highlight)
+    }
+
+    .subtitled-img {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 8px;
+    }
+
+    hr {
+        margin: 0;
+    }
+
+    .subtitled-img-logo {
+        color: var(--color-highlight);
+    }
+
+    .subtitled-img-text-container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin: 0 0 4px 0;
+        padding: 8px 16px;
+        gap: 8px;
+    }
+
+    .subtitled-img-text {
+        box-sizing: border-box;
+        font-size: 0.95rem;
+        line-height: 1.3rem;
+        color: var(--color-text-secondary);
+        margin: 0;
+    }
+</style>
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e452c8d..d19948d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -97,6 +97,7 @@
     :global {
         :root {
             --color-text: #d0d0d0;
+            --color-text-secondary: #b0b0b0;
             --color-text-img: invert(98%) sepia(1%) saturate(4643%) hue-rotate(297deg) brightness(115%) contrast(76%);
             --color-text-dark: #1e1e1e;
             --color-highlight: #51B86B;
@@ -340,7 +341,7 @@
         .pixelated-img {
             image-rendering: pixelated;
         }
-        
+
         .small-supertext {
             font-size: 0.7rem;
             line-height: 0.7rem;
diff --git a/src/routes/projects/projectn5/+layout.svelte b/src/routes/projects/projectn5/+layout.svelte
deleted file mode 100644
index 10a92f9..0000000
--- a/src/routes/projects/projectn5/+layout.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	let { children } = $props();
-</script>
-
-{@render children()}
\ No newline at end of file
diff --git a/src/routes/test/+page.svelte b/src/routes/test/+page.svelte
new file mode 100644
index 0000000..27282ff
--- /dev/null
+++ b/src/routes/test/+page.svelte
@@ -0,0 +1,41 @@
+<script>
+    import SubtitledImage from "$lib/components/subtitled-image.svelte";
+    import Content from "$lib/viewport/content.svelte";
+
+</script>
+
+
+<Content>
+    <p>this is a test page. please disregard. or not i'm not your boss</p>
+
+    <SubtitledImage
+        image="/meta/about/taskbar.webp"
+        altText="taskbar"
+        subtitle="My taskbar with a little Clank backback on the left side because it's very cute. very cute. very very very cute indeed. very much indeed so. sample text. lorem ipsum. this text needs to break. how long can i make this text be? i need to write a lot to see how this text box handles very long text and if this actually looks good. let's see hmm what can I think of? nothing really. PUSH UR T3MPRR"
+        />
+    <SubtitledImage
+        image="/projects/projectn5/devlog/2025/0427/laura-v4-full.webp"
+        altText="taskbar"
+        subtitle="old as fuck laura. very tall. very very very tall indeed. very much indeed so. sample text. lorem ipsum. PUSH UR T3MPRR"
+        alignment="left"
+        />
+
+        <p>test text to see whether this aligmne tactually works afdsdfasjd iofjaopsid iofjasiop[d iofajiope juiorpfjah sidfokljasolkdjf ioajsu0oid kfjpzxj niujkhjozx jcio gjzoxij cviozjhxioc jvzxjc asdjfoasd iozxoic uoizxcu hoiwe oijfio aswjiofjo sajdj asd  hnnhnhnhan han n nhnhnhnhnnhnh nhnh nggnhngh ng nhng nhng nh na asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdftest text to see whether this aligmne tactually works afdsdfasjd iofjaopsid iofjasiop[d iofajiope juiorpfjah sidfokljasolkdjf ioajsu0oid kfjpzxj niujkhjozx jcio gjzoxij cviozjhxioc jvzxjc asdjfoasd iozxoic uoizxcu hoiwe oijfio aswjiofjo sajdj asd  hnnhnhnhan han n nhnhnhnhnnhnh nhnh nggnhngh ng nhng nhng nh na asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdftest text to see whether this aligmne tactually works nhng nh na asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdftest text to see whether this aligmne tactually works afdsdfasjd if asdf</p>
+    <SubtitledImage
+        image="/meta/about/taskbar.webp"
+        altText="taskbar"
+        subtitle="My taskbar with a little Clank backback on the left side because it's very cute. very cute. very very very cute indeed. very much indeed so. sample text. lorem ipsum. this text needs to break. how long can i make this text be? i need to write a lot to see how this text box handles very long text and if this actually looks good. let's see hmm what can I think of? nothing really. PUSH UR T3MPRR"
+        alignment="right"
+        />
+
+        <p>test text to see whether this aligmne tactually works afdsdfasjd iofjaopsid iofjasiop[d iofajiope juiorpfjah sidfokljasolkdjf ioajsu0oid kfjpzxj niujkhjozx jcio gjzoxij cviozjhxioc jvzxjc asdjfoasd iozxoic uoizxcu hoiwe oijfio aswjiofjo sajdj asd  hnnhnhnhan han n nhnhnhnhnnhnh nhnh nggnhngh ng nhng nhng nh na asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdftest text to see whether this aligmne tactually works afdsdfasjd iofjaopsid iofjasiop[d iofajiope juiorpfjah sidfokljasolkdjf ioajsu0oid kfjpzxj niujkhjozx jcio gjzoxij cviozjhxioc jvzxjc asdjfoasd iozxoic uoizxcu hoiwe oijfio aswjiofjo sajdj asd  hnnhnhnhan han n nhnhnhnhnnhnh nhnh nggnhngh ng nhng nhng nh na asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdftest text to see whether this aligmne tactually works afdsdfasjd iofjaopsid iofjasiop[d iofajiope juiorpfjah sidfokljasolkdjf ioajsu0oid kfjpzxj niujkhjozx jcio gjzoxij cviozjhxioc jvzxjc asdjfoasd iozxoic uoizxcu hoiwe oijfio aswjiofjo sajdj asd  hnnhnhnhan han n nhnhnhnhnnhnh nhnh nggnhngh ng nhng nhng nh na asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdftest text to see whether this aligmne tactually works afdsdfasjd iofjaopsid iofjasiop[d iofajiope juiorpfjah sidfokljasolkdjf ioajsu0oid kfjpzxj niujkhjozx jcio gjzoxij cviozjhxioc jvzxjc asdjfoasd iozxoic uoizxcu hoiwe oijfio aswjiofjo sajdj asd  hnnhnhnhan han n nhnhnhnhnnhnh nhnh nggnhngh ng nhng nhng nh na asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdftest text to see whether this aligmne tactually works afdsdfasjd iofjaopsid iofjasiop[d iofajiope juiorpfjah sidfokljasolkdjf ioajsu0oid kfjpzxj niujkhjozx jcio gjzoxij cviozjhxioc jvzxjc asdjfoasd iozxoic uoizxcu hoiwe oijfio aswjiofjo sajdj asd  hnnhnhnhan han n nhnhnhnhnnhnh nhnh nggnhngh ng nhng nhng nh na asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf</p>
+    <SubtitledImage
+        image="/meta/about/taskbar.webp"
+        altText="taskbar"
+        alignment="right"
+        />
+    <SubtitledImage
+        image="/meta/about/taskbar.webp"
+        altText="taskbar"
+        />
+</Content>
\ No newline at end of file