---
layout: layout
title: "Home"
---

{% include home_header.html %}

<div class="container content">
  <section id="new-articles" class="row">

  {% for post in site.posts limit: 4 offset: 1 %}
    <div class="new-article col-sm-3">
      <a href="{{ post.url }}">
        <div class="center-fill-container img-container">
          <img src="/images/posts/{{post.image}}" alt=""  class="img-center-fill {% if post.image == null %}hidden{% endif %}">
        </div>
        <div class="details text-center ">
          <h3 class="title">{{ post.title | truncatewords: 4}}</h3>
          <p class="tag">{{ post.subcategory }}</p>
        </div>
      </a>
    </div>
  {% endfor %}
  </section>
</div>

<div id="featured-articles-container" class=" container-fluid">
  <div id="featured-articles" class=" container">
    <div class="row">
      <h1 class="col-sm-12" id="featured-articles-title">Featured Articles</h1>
      {% for tag in site.data.homepage_categories %}
        {% assign posts = site.posts |  where: "tag", tag %}
        {% for post in posts %}
          {% if post.image != null %}
            <div class="article-container col-sm-4">
              <div class="article {{post.tag}}">

                <a href="{{ post.url }}">
                    <div class="center-fill-container article-cover-container">
                      <img src="/images/posts/{{ post.image }}" class="img-center-fill {% if post.image == null %}hidden{% endif %}">
                    </div>
                  <div class="details text-center">
                    <span class="tag">{{ post.tag }}</span>
                    <h3 class="title">{{ post.title  | truncatewords: 4}}</h3>
                    <p class="excerpt">{% if post.excerpt != null %}{{ post.excerpt | markdownify | truncate: 75 }}{% endif %}</p>
                  </div>
                </a>
              </div>
            </div>
            {% break %}
          {% endif %}
        {% endfor %}
      {% endfor %}
    </div>
  </div>
</div>

  <div class="pagination">
    {% if paginator.previous_page == 1 %}
      <a href="/" class="previous"><img src="/images/left.png"></a>
    {% elsif paginator.previous_page %}
      <a href="/page/{{ paginator.previous_page }}" class="previous"><img src="/images/left.png"></a>
    {% else %}
      <span class="previous"><img src="/images/left.png" class="disabled"></span>
    {% endif %}
      <span class="page_number ">Page {{ paginator.page }} of {{ paginator.total_pages }}</span>
    {% if paginator.next_page %}
      <a href="/page/{{ paginator.next_page }}" class="next"><img src="/images/right.png"></a>
    {% else %}
      <span class="next "><img src="/images/right.png" class="disabled"></span>
    {% endif %}
  </div>