index.html

---
layout: page
css: ["index.css"]
---
<div class="row">
  {% for post in paginator.posts %}
  <div class="col s12">
    <div class="card hoverable">
      <div class="card-content">
        <span id="post-title" class="card-title">{{post.title}}</span>
        <p id="post-date">
          <i class="material-icons">date_range</i>
          {{post.date | date: "%d/%m/%Y %H:%M"}}
        </p>
        <p id="post-content">{{post.excerpt | remove: '<p>' | remove: '</p>'}}</p>
      </div>
      <div class="card-action">
        <a href="{{post.url | prepend: site.baseurl}}">
          Read More
        </a>
      </div>
    </div>
  </div>
  {% endfor %}
  <div class="col s12 center-align">
    <ul class="pagination">
      <li class="{% unless paginator.previous_page %}disabled{% else %}waves-effect{% endunless %}">
        {% if paginator.previous_page %}
        {% if paginator.previous_page == 1 %}
        <a href="{{site.baseurl}}/">
        {% else %}
        <a href="{{site.baseurl}}/page{{paginator.previous_page}}">
        {% endif %}
        {% else %}
        <a href="#!">
        {% endif %}
          <i class="material-icons">chevron_left</i>
        </a>
      </li>
      {% if paginator.page == 1 %}
      <li class="active teal">
        <a href="#!">1</a>
      {% else %}
      <li class="waves-effect">
        <a href="{{site.baseurl}}/">1</a>
      {% endif %}
      </li>
      {% for count in (2..paginator.total_pages) %}
      {% if count == paginator.page %}
      <li class="active teal"><a href="#!">{{count}}</a></li>
      {% else %}
      <li class="waves-effect"><a href="{{site.baseurl}}/page{{count}}">{{count}}</a></li>
      {% endif %}
      {% endfor %}
      <li class="{% unless paginator.next_page %}disabled{% else %}waves-effect{% endunless %}">
        {% if paginator.next_page %}
        <a href="{{site.baseurl}}/page{{paginator.next_page}}">
        {% else %}
        <a href="#!">
        {% endif %}
          <i class="material-icons">chevron_right</i>
        </a>
      </li>
    </ul>
  </div>
</div>