index.html

---
layout: default
id: "homepage"
pagination:
  enabled: true
---

<div class="home"> 
  <div class="recipes xs-px1 xs-mt2">
    <div class="clearfix">
    
    {% for post in paginator.posts %}

      <div class="sm-col sm-col-6 md-col-6 lg-col-4 xs-px1 xs-mb2">
          <a class="block relative bg-accent" href="{{ post.url | prepend: site.baseurl }}">
            <div class="image ratio bg-cover"{% if post.images and post.images.size != 0 %} style="background-image:url({{site.baseurl}}/images/{{ post.images[0].path }});"{% endif %}></div>
            <h1 class="title p2 m0 absolute bold white bottom-0 left-0">{{ post.title }}</h1>
          </a>
      </div>
      {% endfor %}
    </div>
  </div>

  <div class="paginator-nav xs-px1 xs-mt2">
    <div class="clearfix">
    {% if paginator.total_pages > 1 %}
      <ul class="paginator-list">
        {% if paginator.first_page %}
        {% unless paginator.page == paginator.first_page or paginator.previous_page == paginator.first_page %}
        <li class="paginator-prev">
          <a href="{{ paginator.first_page_path | prepend: site.baseurl }}">{{ site.translation[site.language].paginator_first }}</a>
        </li>
        {% endunless %}
        {% endif %}

        {% if paginator.page_trail %}
          {% for trail in paginator.page_trail %}
          <li class="paginator-trail{% if page.url == trail.path %} selected{% endif %}">
            <a href="{{ trail.path | prepend: site.baseurl }}" title="{{trail.title}}">{{ trail.num }}</a>
          </li>
          {% endfor %}
        {% endif %}

        {% if paginator.last_page and page.url != paginator.last_page_path %}
        {% unless page.url contains paginator.last_page_path or paginator.next_page == paginator.last_page %}
        <li class="paginator-next">
          <a href="{{ paginator.last_page_path | prepend: site.baseurl }}">{{ site.translation[site.language].paginator_last }}</a>
        </li>
        {% endunless %}
        {% endif %}
      </ul>
      {% endif %}
    </div>
  </div>
</div>