{{ define "body" }}
<main>
  <header class="platter">
    <h1 class="site">{{ partial "site_name.html" .Title }}</h1>
    <div id="content">
      {{ .Content }}
    </div>
    {{ partial "site_nav.html" . }}
  </header>
</main>
{{ end }}

{{ define "styles" }}
<style>
  :root {
    --animation-offset: 6px;
    --font-size-max: 12px;
    --line-height: 1.85;
  }

  body {
    display: flex;
    flex-direction: column;
    font-size: 2rem;
    justify-content: center;
    margin: auto;
  }

  h1 {
    font-size: 5rem;
    line-height: 1.3;
    margin: 0;
    padding: 0;
  }

  @media (max-width: 599px) {
    h1 {
      font-size: 4.25rem;
    }
  }

  header.site h1 { white-space: normal; }

  @media (max-width: 599px) {
    html {
      --font-size-scale-factor: 1.33vmax;
    }
  }

  main {
    line-height: var(--landing-line-height);
    margin-block-start: 10vh;
    width: inherit;
  }

  main header {
    align-items: first baseline;
    display: grid;
    gap: 0 2rem;
    grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 2fr);
    grid-template-rows: repeat(2, max-content);
    grid-template-areas:
      "title blurb"
      "title nav";
    padding-inline: 1em;
    width: min-content;
  }

  @media (max-width: 599px) {
    main header {
      gap: 1rem 0;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(3, max-content);
      grid-template-areas:
        "title"
        "blurb"
        "nav";
      justify-items: center;
      text-align: center;
    }
  }

  main h1 {
    letter-spacing: 0.025em;
    text-align: end;
  }

  @media (max-width: 599px) {
    main h1 {
      text-align: center;
    }
  }

  nav {
    align-items: baseline;
    align-self: center;
    display: flex;
    font-size: inherit;
    list-style: none;
    text-transform: lowercase;
  }

  p {
    margin: 0;
    line-height: var(--line-height);
  }

  h1 {
    grid-area: title;
  }

  #content {
    grid-area: blurb
  }

  nav {
    grid-area: nav
  }

  h1,
  #content>p,
  nav {
    position: relative;
  }

  h1 {
    animation: left-fade-in var(--transition-duration) ease-in-out;
  }

  @media (max-width: 599px) {
    h1 {
      animation: top-fade-in var(--transition-duration) ease-in-out;
    }
  }

  #content>p,
  nav {
    animation: right-fade-in var(--transition-duration) ease-in-out;
  }

  @media (max-width: 599px) {

    #content>p,
    nav {
      animation: bottom-fade-in var(--transition-duration) ease-in-out;
    }
  }

  @keyframes left-fade-in {
    from {
      opacity: 0%;
      left: var(--animation-offset);
    }

    33% {
      opacity: 0%;
      left: var(--animation-offset);
    }

    to {
      opacity: 100%;
      left: 0;
    }
  }

  @keyframes right-fade-in {
    from {
      opacity: 0%;
      left: calc(-1 * var(--animation-offset));
    }

    33% {
      opacity: 0%;
      left: calc(-1 * var(--animation-offset));
    }

    to {
      opacity: 100%;
      left: 0;
    }
  }

  @keyframes top-fade-in {
    from {
      opacity: 0%;
      bottom: calc(-1 * var(--animation-offset));
    }

    33% {
      opacity: 0%;
      bottom: calc(-1 * var(--animation-offset));
    }

    to {
      opacity: 100%;
      bottom: 0;
    }
  }

  @keyframes bottom-fade-in {
    from {
      opacity: 0%;
      bottom: var(--animation-offset);
    }

    33% {
      opacity: 0%;
      bottom: var(--animation-offset);
    }

    to {
      opacity: 100%;
      bottom: 0;
    }
  }

  .platter {
    padding: 1.5rem 3rem;
  }
</style>
{{ end }}