index.html

---
layout: default
---

<div class="home">
  <div class="blog mdl-layout mdl-js-layout">
    <main class="mdl-layout__content">
      <section class="blog__posts mdl-grid">
        {% for post in paginator.posts %}
        <a href="{{ post.url | prepend: site.baseurl }}" class="mdl-card mdl-cell mdl-cell--{{post.size}}-col mdl-cell mdl-cell--{{post.sizeDesktop}}-col-desktop">
          <span class="mdl-card__media mdl-color-text--{{post.textColor}} {% if post.cover %} mdl-card__media--cover {% endif %}{% if post.cover %} mdl-card__media--cover--shadow {% endif %}"
          {% if post.cover %} style="background-image: url('{{site.baseurl}}/{{post.cover}}');" {% endif %}>
            <h3>{{post.title}}</h3>
          </span>

          <div class="mdl-card__supporting-text meta mdl-color-text--{{post.metaColor}}">
            <div class="minilogo" style="background-image: url(https://s.gravatar.com/avatar/{{site.authors[post.author].gravatar}});"></div>

            <div>
              <strong class="author">{{ site.authors[post.author].display_name }}</strong>
              <span class="date">{{ post.date | date: "%b %-d, %Y" }}</span>
            </div>
          </div>
        </a>
        {% endfor %}

        <!-- Pagination links -->
        <nav class="pagination mdl-color-text--grey-50 mdl-cell mdl-cell--12-col">
          {% if paginator.previous_page %}
          <a href="{{ paginator.previous_page_path | prepend: site.baseurl }}" class="pagination__button">
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color-text--grey-900" role="presentation">
              <i class="material-icons">arrow_back</i>
            </button>
            Newer
          </a>
          {% endif %}

          <div class="section-spacer"></div>

          {% if paginator.next_page %}
          <a href="{{ paginator.next_page_path | prepend: site.baseurl }}" class="pagination__button">
            Older
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color-text--grey-900" role="presentation">
              <i class="material-icons">arrow_forward</i>
            </button>
          </a>
          {% endif %}
        </nav>
      </section>
    </main>
  </div>
</div>