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: var(--border-dash-size) var(--color-highlight) dashed;
        text-decoration: none;
        box-sizing: border-box;
        backdrop-filter: blur(var(--blur-radius-background));
        transition: background-color var(--duration-animation) ease-out;
    }

    .subtitled-img-container-centred {
        width: var(--media-width);
        margin-left: auto;
        margin-right: auto;
    }

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

    @media screen and (max-width: 600px) {
        .subtitled-img-container-left, .subtitled-img-container-right {
            width: var(--media-width);
            margin-left: auto;
            margin-right: auto;
        }
    }

    @media screen and (min-width: 600px) {
        .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;
        }
    }
</style>