pages/src/lib/banner2.svelte

<script lang="ts">
    let {
        title,
        date = "", // date posted
        dateUpdated = "",
        subtitle = "",
        banner = "",
        bannerAlt = "",
        pixelated,
    }: {
        title: string;
        date?: string;
        dateUpdated?: string;
        subtitle?: string;
        banner?: string;
        bannerAlt?: string;
        pixelated?: boolean;
    } = $props();

</script>

{#snippet titles({title, subtitle, date}: {title: string, subtitle: string, date: string})}
	<div class="title-container">
        <div class="title-text-container">
            <h1 class="title">{title}</h1>
            {#if subtitle}
                <p class="subtitle">[ {subtitle} ]</p>
            {/if}
        </div>
        {#if date}
            <div class="date-container">
                <p class="date">posted :: {date}</p>
                {#if dateUpdated}
                    <p class="date">last updated :: {dateUpdated}</p>
                {/if}
            </div>
        {/if}
    </div>
{/snippet}

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

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

	.banner {
		max-height: 300px;
        width: 100%;
        object-fit: cover;
	}

    .title-container {
        display: flex;
        flex-direction: row;
        /* align-items: flex-end; */
        gap: 16px;
        margin: var(--margin-header-top) 0 var(--margin-header-bottom) 0;
    }

    .title-container + hr {
        /* Add top margin if no date element exists */
        margin-top: 16px;
    }

    .title-text-container {
        width: fit-content;
        flex: 1;
    }

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

    .title {
        box-sizing: border-box;
        height: fit-content;
        margin: 0;
    }

    .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);
        /* width: fit-content; */
        font-weight: 500;
        font-size: 1.0rem;
        margin: 0;
    }

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