wona.github.com/index.html

---
layout: layout
title: "Home"
---
{% include header.html %}

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

  {% for post in site.posts limit: 4 offset: 1 %}
    <div class="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.category }}</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 cat in site.data.homepage_categories %}
        {% for post in site.categories[cat] %}
          {% if post.image != null %}
            <div class="article-container col-sm-4">
              <div class="article {{post.category}}">

                <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.category }}</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>

  <!-- Carousel
    ================================================== -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        {% for video in site.data.youtube %}
          <li data-target="#myCarousel" data-slide-to="{{ forloop.index0 }}" class="{% if forloop.first %}active{% endif %}"></li>
        {% endfor %}
        <!--
        <li data-target="#myCarousel" data-slide-to="0" class=""></li>
        <li class="" data-target="#myCarousel" data-slide-to="1"></li>
        <li class="" data-target="#myCarousel" data-slide-to="2"></li>
        -->
      </ol>
      <div class="carousel-inner" role="listbox">
        {% for video in site.data.youtube %}
        <div class="item {% if forloop.first %}active{% endif %}">
          <div class="container">
            <div class="video-container center-both">
              <div class="embed-responsive embed-responsive-16by9">
                <iframe src="https://www.youtube.com/embed/{{ video.id }}" frameborder="0" allowfullscreen></iframe>
              </div>
            </div>
            <div class="carousel-caption">
              <h1>{{ video.title }}</h1>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
      <a class="left carousel-control" href="#myCarousel" role="button"
                                                          data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"
              aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control"
         href="#myCarousel" role="button"
                            data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"
              aria-hidden="true"></span>
        <span
              class="sr-only">Next</span>
      </a>
    </div><!-- /.carousel -->