{{> header }}

<header class="grid" id="home">
  <div class="grid__col grid__col--1-of-2">
    {{{ contents }}}

    <label for="morebio">
      <a>Bio...</a>
    </label>

    <input type="checkbox" id="morebio" />

    <aside id="bio">
      <img src="/assets/photo.jpg" alt="Rainbow haired smiling gentlemen" />
      <p>
        <small>
          Passionate interactive experience crafter breathing the merger of design and development.
        </small>
      </p>
      <p>
        <small class="secondary">
          💖 Remote gigs.
          <br />
          🎤 Happy to speak at your event.
          <br />
          👂 Open to hearing opportunities.
        </small>
      </p>
    </aside>
  </div>

  <img id="logo" class="grid__col grid__col--1-of-2" src="../../assets/site/logo.png" alt="" />
</header>

<ul class="posts grid">
  {{#each collections.posts as |post|}}
    <li data-type="{{ post.type }}" class="grid__col grid__col--1-of-3 grid__col--m-1-of-2 grid__col--s-1-of-1">
      <figure onclick="window.location = '{{ post.path }}'">
        <div class="preview" style="background-image: url(../../assets/media/{{ post.preview }})">
          <h3>{{ post.title }}</h3>
        </div>
        <figcaption>
          {{ post.description }}
          <footer>
            {{ post.client }}
            <span class="secondary">
              Continue...
            </span>
          </footer>
        </figcaption>
      </figure>
  {{/each}}
</ul>

{{> footer }}