<script>
  export let data
</script>

<svelte:head>
    <style>
        /*
         * Done within <head> because elements within svelte:component
         * are otherwise not styled
         */
        .content p, .content h2, .content h3, .content h4 {
            font-family: 'Source Serif Pro', serif;
        }
        .content h3 {
            font-size: 1.3rem;
        }
    </style>
</svelte:head>

<div class="title-with-image">
    <h1>{data.metadata.title}</h1>
    <img src={data.metadata.headerImage}  alt={data.metadata.headerImageAlt}/>
</div>
<div class="content">
    <svelte:component this={data.content} />
</div>

<style>
    h1 {
        margin-bottom: 0;
    }

    .content {
        max-width: 90vw;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }

    .title-with-image {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    .title-with-image h1 {
        font-size: 5rem;
    }
    .title-with-image img {
        margin: 0 2em 0;
    }
    .title-with-image img {
        max-width: 80vw;
    }

    @media (min-width: 720px) {
        .content {
            flex-wrap: nowrap;
            max-width: calc(min(700px, 100%));
        }
        .title-with-image img {
            max-width: 30vw;
        }
    }
</style>