{{> header}}

<style type="text/css">
  form {
    padding: {{spacing}}rem;
    display: none;
  }

  input{
    line-height: {{body_font.line_height}};
    font-size: {{body_font.font_size}}px;
  }

  input[name="q"] {
    width: 300px;
  }
</style>
<form action="/search">
  <input type="text" name="q" placeholder="Search the archives">
  <input type="submit" value="Search">
</form>

<div class="archives">
  {{#archives}}
  {{#months}}
  {{#entries}}
  <a href="{{{url}}}">
    <span class="thumbnail">
    {{#thumbnail.small.url}}
        <img loading="lazy" src="{{{thumbnail.small.url}}}" class="pre-loaded" onload="this.className+=' loaded';" />
      <noscript>  
      <img loading="lazy" src="{{{thumbnail.small.url}}}">
      </noscript>
    {{/thumbnail.small.url}}
    </span>
    <span class="title">{{title}}    <span class="date">{{date}}</span>
</span>
  </a>
  {{/entries}}
  {{/months}}
  {{/archives}}
</div>

{{> footer}}