pages/src/routes/drawing-gallery/+page.svelte

<script lang="ts">
    import Banner2 from "$lib/banner2.svelte";
    import Content from "$lib/viewport/content.svelte";
    import { drawings, type DrawingData } from "./drawing-data";

    let selectedDrawingIndex: number = $state(-1);

    function selectDrawing(index: number) {
        selectedDrawingIndex = index;
    }
</script>

<svelte:head>
    <title>Drawing Gallery | denizk0461</title> 
</svelte:head>

{#snippet drawing({ drawing }: { drawing: DrawingData })}
    <button class="drawing-link-container" onclick={(event) => selectDrawing(drawings.indexOf(drawing))}>
        <div class="drawing-content-container">
            <img class="drawing-img" src="{drawing.fileName}" alt="{drawing.altText}">
            <div class="drawing-overlay"></div>
        </div>
    </button>
{/snippet}

{#snippet inspector({ index }: { index: number })}
    {#if index == -1}
        <p class="inspector-img-note">click on an image to view details about it</p>
    {:else}
        <a class="inspector-link" href="{drawings[index].fileName}">
            <img class="inspector-img" src="{drawings[index].fileName}" alt="{drawings[index].altText}">
        </a>
        <p class="inspector-date">{drawings[index].date}</p>
        <hr>
        {#each drawings[index].notes as n}
            <p class="inspector-paragraph">{n}</p>
        {/each}
    {/if}
{/snippet}

<Content>
    <Banner2
        title="Drawing Gallery" />

    <p>I'm trying this to motivate myself to draw more now. Let's see where this takes us.</p>

    <div class="page-container">
        <div class="drawing-gallery">
            {#each drawings as d}
                {@render drawing({drawing: d})}
            {/each}
        </div>
        <div class="inspector">
            {@render inspector({ index: selectedDrawingIndex })}
        </div>
    </div>
</Content>

<style>
    .page-container {
        display: flex;
        flex-direction: row;
    }

    .drawing-gallery {
        display: flex;
        flex-wrap: wrap;
        width: 60%;
        padding-right: 16px;
        box-sizing: border-box;
    }

    .drawing-link-container {
        display: flex;
        height: 14vh;
        flex-grow: 1;
        overflow: hidden;
    }

    .drawing-content-container {
        position: relative;
        cursor: pointer;
    }

    .drawing-img {
        max-height: 100%;
        min-width: 100%;
        object-fit: cover;
        vertical-align: bottom;
        transition: scale 0.06s ease-out, filter 0.06s ease-out;
    }

    .drawing-overlay {
        opacity: 0;
        transition: opacity 0.06s ease-out;
        background-color: var(--color-background-highlight-hover-dark);
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        pointer-events: none;
        display: flex;
        flex-direction: column;
        justify-content: end;
    }

    .drawing-content-container:hover .drawing-overlay {
        opacity: 1;
    }

    .drawing-content-container:hover .drawing-img, .inspector-link:hover .inspector-img {
        scale: 1.1;
        /* filter: grayscale(60%); */
    }

    .inspector {
        width: 40%;
        display: flex;
        flex-direction: column;
    }

    .inspector-link {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
    }

    .inspector-img {
        width: 100%;
        margin: 0;
        transition: scale 0.06s ease-out;
    }

    .inspector-date {
        font-family: var(--font-mono);
        font-weight: 600;
        color: var(--color-highlight);
        margin: 2px 0;
    }

    .inspector-paragraph {
        margin: 2px 0;
    }

    .inspector-img-note {
        padding: 64px 16px;
        background-color: var(--color-background-highlight);
    }
</style>