pages/src/lib/components/subtitled-image.svelte

<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);
        margin: 0;
    }

    .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>