<style lang="scss">
    .header {
        background: var(--primary-color-faded);
    }

    nav {
        max-width: 30rem;
        margin: 0 auto;

        display: flex;
        justify-content: space-between;

        & a {
            flex: 1;
            max-width: 8rem;
            padding: 0.25rem 1rem;

            font-size: 1.75rem;
            color: white;
            text-decoration: none;
            text-align: center;

            &:hover {
                background: hsl(0deg 0% 0% / 10%);
            }
        }
    }
</style>

<div class="header">
    <nav>
        <a data-sveltekit-preload-data="hover" href="/">Home</a>
        <a data-sveltekit-preload-data="hover" href="/posts">Posts</a>
        <a data-sveltekit-preload-data="hover" href="/about">About</a>
    </nav>
</div>

<main>
    <slot></slot>
</main>