pages/src/lib/banner2.svelte

<script lang="ts">
    let {
        title,
        date = "", // date posted
        dateUpdated = "",
        dateIndeterminate = "", // raw date without an explanation marker next to it
        subtitle = "",
        banner = "",
        bannerAlt = "",
        tags = [],
        pixelated,
    }: {
        title: string;
        date?: string;
        dateUpdated?: string;
        dateIndeterminate?: string;
        subtitle?: string;
        banner?: string;
        bannerAlt?: string;
        tags?: string[];
        pixelated?: boolean;
    } = $props();

</script>

{#snippet titles({title, subtitle, date}: {title: string, subtitle: string, date: string})}
    <h1 class="title">{title}</h1>
	<div class="title-container">
        <div class="title-text-container">
            {#if subtitle}
                <p class="subtitle">[ {subtitle} ]</p>
            {/if}
            {#if tags.length}
                <div class="tag-container">
                    {#each tags as tag}
                        <span class="post-tag">{tag}</span>
                    {/each}
                </div>
            {/if}
        </div>
        {#if date || dateIndeterminate}
            <div class="date-container">
                {#if dateIndeterminate}
                    <p class="date">:: {dateIndeterminate}</p>
                {/if}
                {#if date}
                    <p class="date">posted :: {date}</p>
                {/if}
                {#if dateUpdated}
                    <p class="date">last updated :: {dateUpdated}</p>
                {/if}
            </div>
        {/if}
    </div>
{/snippet}

<div class="container">
    {#if banner && banner !== ""}
        <div class="banner-container">
            {#if pixelated}
                <img class="banner pixelated-img" src="{banner}" alt="{bannerAlt}">
            {:else}
                <img class="banner" src="{banner}" alt="{bannerAlt}">
            {/if}
        </div>
    {/if}
    {@render titles({title, subtitle, date})}
    <hr>
</div>

<style>
    .container {
        width: 100%;
    }

    .banner-container {
		max-height: 300px;
        height: 300px;
        width: 100%;
        overflow: hidden;
    }

	.banner {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: scale var(--duration-animation) var(--anim-curve);
	}

    .banner-container:hover .banner {
        scale: 1.04;
    }

    .title-container {
        display: flex;
        flex-direction: row;
        /* align-items: flex-end; */
        gap: 16px;
        margin: 4px 0 8px;
    }

    .title-text-container {
        width: fit-content;
        display: flex;
        flex-direction: column;
        flex: 1;
        gap: 8px;
    }

    .tag-container {
        display: flex;
        gap: 4px;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 4px;
    }

    .date-container {
        width: fit-content;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .title {
        box-sizing: border-box;
        height: fit-content;
        margin: 0;
        margin-top: var(--margin-header-top);
    }

    .date {
        font-weight: 500;
        font-family: var(--font-mono);
        font-size: 1.0rem;
        line-height: 1.4rem;
        font-style: italic;
        margin: 0;
        color: var(--color-highlight);
    }

    .subtitle {
        font-family: var(--font-mono);
        font-weight: 500;
        font-size: 1.0rem;
        line-height: 1.4rem;
        margin: 0;
    }

    @media screen and (max-width: 800px) {
        .title-container {
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
        }

        .date-container {
            align-items: flex-start;
        }

        .date {
            font-size: 0.9rem;
            line-height: 1.2rem;
        }

        .banner-container {
            height: 180px;
            max-height: 180px;
        }
    }
</style>