pages/src/lib/banner2.svelte

<script lang="ts">
    let {
        title,
        date = "",
        subtitle = "",
        banner = "",
        bannerAlt = "",
        pixelated,
    }: {
        title: string;
        date?: 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">
        <h1 class="title">{title}</h1>
        {#if subtitle}
            <p class="subtitle">[ {subtitle} ]</p>
        {/if}
    </div>
	{#if date}
		<p class="date">» {date}</p>
	{/if}
{/snippet}

<div class="container">
    {#if 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: 12px;
    }

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

    .date {
        font-weight:700;
        font-size: 1.3rem;
        margin-top: 0;
        color: var(--color-highlight);
    }

    .subtitle {
        font-family: var(--font-mono);
        font-weight: 500;
        font-size: 1.0rem;
    }
</style>