index.html

---
layout: default
---

<div class="home">
  <div class="container">

    {% for post in site.posts %}
      <article class="post post--list">
        <time
          class="post__date"
          datetime="{{ post.date | date_to_xmlschema }}"
          itemprop="datePublished"
        >
          {{ post.date | date: "%b %-d, %Y" }}
        </time>

        <h2>
          <a
            class="post__title post__title--list _unborder"
            href="{{ post.url | prepend: site.baseurl }}"
            tabindex="-1"
          >
            {{ post.title }}
          </a>
        </h2>

        {{ post.excerpt | strip_html | truncate: 300 }}

        {% if post.excerpt | size > 300 %}
          <a
            class="_unborder js-read-more"
            href="{{ post.url | prepend: site.baseurl }}"
          >
            <strong>Read more →</strong>
          </a>
        {% endif %}
      </article>
    {% endfor %}

  </div>
</div>

<script>
  (function (d) {
    var buttons = [].slice.call(d.querySelectorAll('.js-read-more'));

    function addFocusListener (button) {
      function toggleFocused () {
        button.parentNode.classList.toggle('post--list--focused');
      }

      button.addEventListener('focus', toggleFocused);
      button.addEventListener('blur', toggleFocused);
    }

    buttons.forEach(addFocusListener);
  })(document);
</script>