pages/src/routes/feed/+page.svelte

<script lang="ts">
    import Content from "$lib/viewport/content.svelte";
    import Banner2 from "$lib/banner2.svelte";
    import TableOfContents from "$lib/components/table-of-contents.svelte";

    export let data;
</script>

<svelte:head>
    <title>Art Feed | denizk0461</title>
</svelte:head>

{#snippet pageButtons(currentIndex: number)}
    <div class="page-button-container blurred-background">
        {#if currentIndex == 1}
            <p class="page-button page-button-left">x</p>
        {:else}
            <a class="page-button page-button-left page-button-clickable" href="?p={currentIndex - 1}">&lt;</a>
        {/if}

        {#each { length: data.maxPages }, index}
            <a class="page-index" href="?p={index + 1}">{index + 1}</a>
        {/each}

        {#if currentIndex == data.maxPages}
            <p class="page-button page-button-right">x</p>
        {:else}
            <a class="page-button page-button-right page-button-clickable" href="?p={currentIndex + 1}">&gt;</a>
        {/if}
    </div>
{/snippet}

<Content>
    <Banner2
        title="Creative Feed"
        banner="banner.webp"
        bannerAlt="Mirror picture of me, pixelated beyond recognition"
        subtitle="minor things I have worked on"
    />

    <p>Welcome to my creative feed! It is heavily inspired by <a href="https://deathsurplus.com/">DeathSurplus' art blog</a> – definitely go check out his website!</p>

    <p>This page is intended to be a contrasting companion to the <a href="/projects"><code>projects</code> page</a>; I'll use this page for smaller things that don't fit the dedicated-page-format.</p>

    <!-- <TableOfContents /> -->

    {@render pageButtons(data.currentPage)}
    
    {#each data.feedEntries as entry}
        <h2>{entry.title}</h2>
        <p class="subtitle">{entry.subtitle}</p>
        <p class="subtitle">{entry.date}</p>
        <svelte:component this={entry.content} />
        {#if entry.images && entry.images.length > 0}
            <div class="image-gallery">
                {#each entry.images as i, index}
                    <a class="image-gallery-link" href="{entry.path}/{i}.webp">
                        <img class="image-gallery-img" loading="lazy" src="{entry.path}/{i}.webp" alt={entry.imageAlts[index]}>
                    </a>
                {/each}
            </div>
        {/if}
    {/each}

    {@render pageButtons(data.currentPage)}

</Content>

<style>
    .page-button-container {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        border-radius: var(--border-radius);
        overflow: hidden;
        width: fit-content;
        margin: 12px auto;
        border-top: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
        border-bottom: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
    }

    .page-button, .page-index {
        font-family: var(--font-mono);
        padding: 8px 18px;
        font-weight: 600;
        margin: 0;
        transition: background-color var(--duration-animation) var(--anim-curve);
    }

    .page-button {
        color: var(--color-text);
    }
    .page-button-left {
        border-right: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
    }
    .page-button-right {
        border-left: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
    }
    .page-button-clickable:hover {
        cursor: pointer;
    }

    .page-index:link, .page-index:visited {
        color: var(--color-text)
    }

    .page-index:hover, .page-button-clickable:hover {
        text-decoration: none;
        background-color: var(--color-background-highlight-alt);
    }

    .image-gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 4px;
    }

    .image-gallery-img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        filter: brightness(60%) saturate(80%);
        max-height: 320px;
        transition: filter var(--duration-animation) var(--anim-curve),
                    scale var(--duration-animation) var(--anim-curve),
                    border-radius var(--duration-animation) var(--anim-curve);
        scale: 1.04;
    }

    .image-gallery-link {
        outline: var(--border-style) var(--border-dash-size) transparent;
        border-radius: var(--border-radius);
        z-index: 10;
        transition: outline-color var(--duration-animation) var(--anim-curve);
        overflow: hidden;
        margin: 0;
    }

    .image-gallery-link:hover .image-gallery-img {
        border-radius: var(--border-radius);
        filter: brightness(100%) saturate(100%);
        scale: 1.0;
    }

    .image-gallery-link:hover {
        outline-color: var(--color-highlight);
    }

    .subtitle {
        font-family: var(--font-mono);
        margin: 0;
        font-size: 1rem;
        line-height: 1.4rem;
        font-style: italic;
        font-weight: 700;
        color: var(--color-highlight-alt);
    }

    .subtitle::before {
        content: "<!-- ";
    }

    .subtitle::after {
        content: " -->";
    }

    @media screen and (max-width: 800px) {
        .image-gallery-link, .image-gallery-link:hover .image-gallery-img {
            border-radius: 0;
        }

        .image-gallery-link:hover {
            outline-color: transparent;
        }

        .image-gallery-img {
            border-radius: 0;
            scale: 1.0;
            filter: brightness(100%) saturate(100%);
        }
    }
</style>