index.html

---
layout: default
---

<div class="mdl-cell--8-col">

  <ul class="posts">

    {% for post in paginator.posts %}
      <li>
        <div class="mdl-card mdl-shadow--2dp layout-card">
          {% if post.cover %}
          <div class="mdl-card__media mdl-color-text--grey-50" style="background-image: url('{{ post.cover }}');">
          </div>
          {% endif %}
          <div class="mdl-card__title">
            <a href="{{ post.url | prepend: site.baseurl }}">
              <h1 class="mdl-card__title-text">{{ post.title }}</h1>
            </a>
          </div>
          <div class="mdl-card__supporting-text">
            <span class="post-date">{{ post.date | date: "%-d %B %Y" }}</span>
            <p class="post-preview">
              {{ post.content | strip_html | truncatewords:20}}
            </p>
          </div>
        </div>
      </li>
    {% endfor %}
  </ul>

  <!-- Pagination links -->
<div class="pagination">
  {% if paginator.previous_page %}
    <a href="{{ site.url }}{{ paginator.previous_page_path }}" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">Before</a>
  {% else %}
  {% endif %}
  <span class="page_number ">Halaman: {{ paginator.page }} from {{ paginator.total_pages }}</span>
  {% if paginator.next_page %}
    <a href="{{ site.url }}{{ paginator.next_page_path }}" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">Next</a>
  {% else %}
  {% endif %}
</div>

</div>