added SubtitledImage component

2026-02-02 20:50:57 +01:00
parent 730ec4bc24
commit 4d8d10765c
4 changed files with 154 additions and 6 deletions
--- a/src/lib/components/subtitled-image.svelte
+++ 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>