pages/src/lib/banner2.svelte

<script lang="ts">
    import SeparatorLine from "./separator-line.svelte";

    let {
        title,
        date = "",
        subtitle = "",
        banner = "",
        bannerAlt = "",
        pixelated,
    }: {
        title: string;
        date?: string;
        subtitle?: string;
        banner?: string;
        bannerAlt?: string;
        pixelated?: boolean;
    } = $props();

</script>

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

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

{#snippet titles({title, subtitle, date}: {title: string, subtitle: string, date: string})}
	<h1 class="title">{title}</h1>
	{#if subtitle}
		<p class="subtitle">[ {subtitle} ]</p>
	{/if}
	{#if date}
		<p class="date">» {date}</p>
	{/if}
{/snippet}

<SeparatorLine />

<style>
    .container {
        width: 100%;
        background-color: var(--color-background-highlight);
    }

    .subcontainer {
        max-width: var(--page-width);
        /* min-height: 250px;
		max-height: 600px; */
        display: flex;
        flex-direction: row;
        margin-left: auto;
        margin-right: auto;
    }

	.banner {
		/* position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0; */
		max-height: 260px;
	}

    .img-container {
        flex-grow: 1;
        width: 50%;
		position: relative;
    }

    .text-container {
        margin-left: var(--margin-content-side);
        margin-right: var(--margin-content-side);
		/* position: absolute;
		bottom: 0; */
    }

    .container img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .title {
        width: 100%;
        box-sizing: border-box;
        height: fit-content;
        left: 0;
        right: 0;
        bottom: 0px;
        /* font-style: italic; */
    }

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

    .subtitle {
        font-style: italic;
        font-family: var(--font-mono);
        font-weight: 800;
        font-size: 1.3rem;
        margin-top: 0;
    }

    @media screen and (max-width: 800px) {
        .subcontainer {
            height: fit-content;
            flex-direction: column;
        }
        .text-container {
            width: initial;
        }
        .img-container {
            width: 100%;
        }
        .img-container img {
            height: 200px;
        }
        .subtitle {
            font-size: 1.0rem;
            line-height: 1.1rem;
        }
    }
</style>