{{ define "head" }}
<style>
    html {
        background: var(--f_high);
    }

    body {
        -webkit-text-size-adjust: 100%;
        margin: 0;
    }

    a {
        color: var(--f_med);
    }

    .content {
        margin: 3rem auto 8rem;
        padding: 2rem;
        max-width: 30rem;
        background: var(--background);
        border-radius: var(--border-radius);
    }

    .logo {
        display: block;
        width: 8rem;
        height: 8rem;
        margin: 0 auto;
    }

    blockquote {
        color: var(--f_med);
        text-align: center;
        margin: 3rem 0.5rem 1rem;
    }

    blockquote p {
        margin: 0.5rem;
    }

    blockquote + cite {
        color: var(--f_med);
        display: block;
        text-align: center;
    }

    blockquote + cite::before {
        content: "- ";
    }

    .header {
        height: 40vh;
    }

    .header-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        image-rendering: crisp-edges;
    }

    hr {
        border: 1px solid var(--b_inv);
    }

    nav {
        margin-bottom: 4rem;
    }

    nav ul {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        list-style: none;
        text-align: center;
        font-size: 1.25rem;
        padding: 0;
    }

    nav li {
        padding: 0;
        margin-top: 1rem;
    }

    nav li > a {
        border: 1px solid var(--b_med);
        width: fit-content;
        padding: 0.25rem 0.5rem;
        margin: 0.5rem;
        box-shadow: 4px 4px var(--b_med);
        text-decoration: none;
        font-family: monospace;
        font-size: 1rem;
        border-radius: var(--border-radius);
    }

    nav li > a:hover {
        background: var(--b_high);
        color: var(--background);
        border-color: var(--background);
        box-shadow: 4px 4px var(--b_high);
    }

    @media screen and (max-width: 600px) {
        .header {
            height: 30vh;
        }

        .content {
            max-width: 17rem;
        }

        .logo {
            width: 6rem;
            height: 6rem;
        }
    }
</style>
{{ end }}

{{ define "body" }}
<div class="header">
    <img class="header-img" src="/assets/img/sunset-d.png">
</div>
<div class="content">
    <img class="logo" src="/assets/svg/logo-light.svg">
    <nav>
        <ul>
            <li>
                <a href="/creative">creative</a>
            </li>
            <li>
                <a href="/projects">projects</a>
            </li>
            <li>
                <a href="/about">about</a>
            </li>
            <!-- <li>
                <a href="/now">now</a>
            </li>
             -->
            <li>
                <a href="https://git.deserthorns.net/">git</a>
            </li>
        </ul>
    </nav>
    <hr>
    <blockquote>
        <p>Your hearts know in silence the secrets of the days and the nights.</p>
        <p>But your ears thirst for the sound of your heart’s knowledge.</p>
    </blockquote>
    <cite>Khalil Gibran, The Prophet</cite>
</div>
{{ end }}

{{ define "scripts" }}
{{ end }}