pages/src/lib/lists/gallery-row.svelte

<script lang="ts">
    export interface GalleryRowEntry {
        title: string;
        description: string;
        img: string;
        altText: string;
        link: string;
    }

    let {
        entries,
    }: {
        entries: GalleryRowEntry[];
    } = $props();
</script>

<div class="row-container">
    {#each entries as entry}
        <a class="row-entry" href="{entry.link}">
            <div class="row-img-container">
                <img class="row-img" src="{entry.img}" alt="{entry.altText}">
            </div>
            <div class="row-text-container">
                <p class="row-title">&gt; {entry.title}</p>
                <p class="row-description">{@html entry.description}</p>
            </div>
        </a>
    {/each}
</div>

<style>
    .row-container {
        display: flex;
        flex-direction: row;
        /* margin-bottom: 8px;
        gap: 8px; */
    }

    .row-entry {
        flex: 1 1 0px;
        box-sizing: border-box;
        margin: 0;
        padding: 8px;
        text-decoration: none;
        transition: background-color 0.1s ease-out, border-color 0.1s ease-out;
        border: 2px dashed transparent;
    }

    .row-entry:hover {
        background-color: var(--color-background-highlight);
        border-color: var(--color-highlight);
    }

    .row-entry:hover .row-img {
        scale: 1.06;
    }

    .row-img-container {
        width: 100%;
        height: 160px;
        overflow: hidden;
        display: flex;
        justify-content: center;
    }

    .row-img {
        width: 100%;
        object-fit: cover;
        transition: scale 0.1s ease-out;
    }

    .row-text-container {
        margin-top: 8px;
    }

    .row-title {
        font-family: var(--font-mono);
        font-weight: 700;
        color: var(--color-highlight);
        margin: 0;
    }

    .row-description {
        font-size: 1.0rem;
        line-height: 1.3rem;
        margin: 0;
    }

    @media screen and (max-width: 600px) {
        .row-container {
            flex-direction: column;
        }
    }
</style>