index.html

---
layout: default
---
<div class="page-content">
  <div class="mdl-grid">
  {% if site.post_type == 'highlight' %}

    {% for post in site.posts %}
    {% if post.highlight %}

    <div class="section-highlight section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">

      <header class="section__play-btn mdl-cell mdl-cell--3-col-desktop mdl-cell--2-col-tablet mdl-cell--4-col-phone" {% if post.image %} style="background: url('{{ post.image }}') center/cover;" {% endif %}></header>

      <div class="mdl-card mdl-cell mdl-cell--9-col-desktop mdl-cell--6-col-tablet mdl-cell--4-col-phone">
        <div class="mdl-card__supporting-text">
          <h4>{{ post.title }}</h4>
          <p>{{ post.excerpt }}</p>
        </div>
        <div class="mdl-card__actions">
          <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="{{ post.url | prepend: site.baseurl }}">Read More</a>
        </div>
      </div>

      <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="btn-high-{{ post.id }}">
        <i class="material-icons">share</i>
      </button>
      <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right" for="btn-high-{{ post.id }}">
        <li>
          <a href="https://facebook.com/sharer.php?u={{ site.url }}{{ post.url }}"
            rel="nofollow"
            target="_blank"
            title="Share on Facebook"
            onclick="trackShareCardLink(this.href, 'Facebook'); return false;"
            class="mdl-menu__item">
              Facebook
          </a>
        </li>
        <li>
          <a href="https://twitter.com/intent/tweet?text={{ post.title }}&url={{ site.url }}{{ post.url }}&via={{ site.twitter_username }}&related={{ site.twitter_username }}"
            rel="nofollow"
            target="_blank"
            title="Share on Twitter"
            onclick="trackShareCardLink(this.href, 'Twitter'); return false;"
            class="mdl-menu__item">
              Twitter
          </a>
        </li>
        <li>
          <a href="https://plus.google.com/share?url={{ site.url }}{{ post.url }}"
            rel="nofollow"
            target="_blank"
            title="Share on Google+"
            onclick="trackShareCardLink(this.href, 'Google+'); return false;"
            class="mdl-menu__item">
              Google+
          </a>
        </li>
        <li>
          <a href="http://www.linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ post.url }}&title={{ post.title }}&summary=&source={{ site.url }}{{ post.url }}"
            rel="nofollow"
            target="_blank"
            title="Share on LinkedIn"
            onclick="trackShareCardLink(this.href, 'LinkedIn'); return false;"
            class="mdl-menu__item">
              LinkedIn
          </a>
        </li>
        <li>
          <a href="mailto:?subject={{ page.title }} - {{ site.title }}&body=I want to share with you {{ page.title }} ({{ site.url }}{{ page.url }}), an article written by {{ site.author }} (@{{ site.twitter_username }})."
            rel="nofollow"
            target="_blank"
            title="Share via Email"
            onclick="trackShareCardLink(this.href, 'Email'); return false;"
            class="mdl-menu__item">
              Email
          </a>
        </li>
      </ul>

    </div>

    {% else %}

    <div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--12-col-phone">
      <div class="mdl-card__title" {% if post.image %} style="background: url('{{ post.image }}') center/cover;" {% endif %}>
        <h2 class="mdl-card__title-text">{{ post.title }}</h2>
      </div>
      <div class="mdl-card__supporting-text">
        <span>{{ post.date | date: "%b %-d, %Y" }}</span>
        <p>{{ post.excerpt }}</p>
      </div>
      <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="{{ post.url | prepend: site.baseurl }}">Read More</a>
      </div>
      <div class="mdl-card__menu">
        <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect" id="post-{{ post.id }}">
          <i class="material-icons">share</i>
        </button>
      <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right" for="btn-high-{{ post.id }}">
        <li>
          <a href="https://facebook.com/sharer.php?u={{ site.url }}{{ post.url }}"
            rel="nofollow"
            target="_blank"
            title="Share on Facebook"
            onclick="trackShareCardLink(this.href, 'Facebook'); return false;"
            class="mdl-menu__item">
              Facebook
          </a>
        </li>
        <li>
          <a href="https://twitter.com/intent/tweet?text={{ post.title }}&url={{ site.url }}{{ post.url }}&via={{ site.twitter_username }}&related={{ site.twitter_username }}"
            rel="nofollow"
            target="_blank"
            title="Share on Twitter"
            onclick="trackShareCardLink(this.href, 'Twitter'); return false;"
            class="mdl-menu__item">
              Twitter
          </a>
        </li>
        <li>
          <a href="https://plus.google.com/share?url={{ site.url }}{{ post.url }}"
            rel="nofollow"
            target="_blank"
            title="Share on Google+"
            onclick="trackShareCardLink(this.href, 'Google+'); return false;"
            class="mdl-menu__item">
              Google+
          </a>
        </li>
        <li>
          <a href="http://www.linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ post.url }}&title={{ post.title }}&summary=&source={{ site.url }}{{ post.url }}"
            rel="nofollow"
            target="_blank"
            title="Share on LinkedIn"
            onclick="trackShareCardLink(this.href, 'LinkedIn'); return false;"
            class="mdl-menu__item">
              LinkedIn
          </a>
        </li>
        <li>
          <a href="mailto:?subject={{ page.title }} - {{ site.title }}&body=I want to share with you {{ page.title }} ({{ site.url }}{{ page.url }}), an article written by {{ site.author }} (@{{ site.twitter_username }})."
            rel="nofollow"
            target="_blank"
            title="Share via Email"
            onclick="trackShareCardLink(this.href, 'Email'); return false;"
            class="mdl-menu__item">
              Email
          </a>
        </li>
      </ul>
      </div>
    </div>
    {% endif %}
    {% endfor %}

  {% else %}

    {% for post in site.posts %}

    <div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-desktop mdl-cell--4-col-tablet  mdl-cell--12-col-phone">
      <div class="mdl-card__title" {% if post.image %} style="background: url('{{ post.image }}') center/cover;" {% endif %}>
        <h2 class="mdl-card__title-text">{{ post.title }}</h2>
      </div>
      <div class="mdl-card__supporting-text">
        <span>{{ post.date | date: "%b %-d, %Y" }}</span>
        <p>{{ post.excerpt }}</p>
      </div>
      <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="{{ post.url | prepend: site.baseurl }}">
          Read More
        </a>
      </div>
      <div class="mdl-card__menu">
        <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect" id="post-{{ post.id }}">
          <i class="material-icons">share</i>
        </button>
      <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right" for="btn-high-{{ post.id }}">
        <li>
          <a href="https://facebook.com/sharer.php?u={{ site.url }}{{ post.url }}"
            rel="nofollow"
            target="_blank"
            title="Share on Facebook"
            onclick="trackShareCardLink(this.href, 'Facebook'); return false;"
            class="mdl-menu__item">
              Facebook
          </a>
        </li>
        <li>
          <a href="https://twitter.com/intent/tweet?text={{ post.title }}&url={{ site.url }}{{ post.url }}&via={{ site.twitter_username }}&related={{ site.twitter_username }}"
            rel="nofollow"
            target="_blank"
            title="Share on Twitter"
            onclick="trackShareCardLink(this.href, 'Twitter'); return false;"
            class="mdl-menu__item">
              Twitter
          </a>
        </li>
        <li>
          <a href="https://plus.google.com/share?url={{ site.url }}{{ post.url }}"
            rel="nofollow"
            target="_blank"
            title="Share on Google+"
            onclick="trackShareCardLink(this.href, 'Google+'); return false;"
            class="mdl-menu__item">
              Google+
          </a>
        </li>
        <li>
          <a href="http://www.linkedin.com/shareArticle?mini=true&url={{ site.url }}{{ post.url }}&title={{ post.title }}&summary=&source={{ site.url }}{{ post.url }}"
            rel="nofollow"
            target="_blank"
            title="Share on LinkedIn"
            onclick="trackShareCardLink(this.href, 'LinkedIn'); return false;"
            class="mdl-menu__item">
              LinkedIn
          </a>
        </li>
        <li>
          <a href="mailto:?subject={{ page.title }} - {{ site.title }}&body=I want to share with you {{ page.title }} ({{ site.url }}{{ page.url }}), an article written by {{ site.author }} (@{{ site.twitter_username }})."
            rel="nofollow"
            target="_blank"
            title="Share via Email"
            onclick="trackShareCardLink(this.href, 'Email'); return false;"
            class="mdl-menu__item">
              Email
          </a>
        </li>
      </ul>
      </div>
    </div>

    {% endfor %}

  {% endif %}
  </div>
</div>