pages/src/lib/banner-title-alt.svelte

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

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

</script>

<div class="container">
    <div class="subcontainer">
        <div class="img-container">
            <img src="{banner}">
        </div>
        <div class="text-container">
            <h1 class="title">{title}</h1>
            {#if subtitle}
            <p class="subtitle">[ {subtitle} ]</p>
            {/if}
            {#if date}
            <p class="date">» {date}</p>
            {/if}
        </div>
    </div>
</div>

<SeparatorLine />

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

    .subcontainer {
        max-width: 1600px;
        height: 600px;
        display: flex;
        flex-direction: row;
        margin-left: auto;
        margin-right: auto;
    }

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

    .text-container {
        width: 48%;
        margin: auto 24px;
    }

    .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-weight: 900;
        /* 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;
    }
</style>