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

<Content>
    <Banner2
        title="Art & Project Feed"
        banner="banner.webp"
        bannerAlt="Mirror picture of me, pixelated beyond recognition"
        subtitle="subtitle missing"
        date="2026-04-06"
    />

    <button style="background-color: aqua; padding: 8px;">{data.currentPage - 1}</button>
    <p>{data.currentPage}</p>
    <button style="background-color: aqua; padding: 8px;">{data.currentPage + 1}</button>

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

    <p>This page is intended to offer a shared space for all my projects without the need to create strictly-separated pages for each hobby. Some other pages on this website have been merged into this one; namely the "Small Projects" and "Drawing Gallery" pages, so don't be surprised if content from those pages shows up here.</p>

    <p>I'll add some more of my past projects, new projects, and an option to filter by project type <i>soon™</i>. Maybe I'll also split the content into pages, if I ever figure out how to do that.</p>

    <p>I <b>MAY</b> merge this with the <a href="/projects">Projects</a> page, I've not yet decided.</p>

    <TableOfContents />
    
    {#each data.contents as post}
        <svelte:component this={post} />
    {/each}

</Content>

<style>
    .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: " -->";
    }
</style>
