wona.github.com/index.html

---
layout: layout
title: "Watch Out!, IIT Roorkee"
---
{% include header.html %}

<div id="featured-articles-container" class="container">
  <h1 class="container-title">Featured Articles</h1>
  <div class="row">
    <div id="featured-articles" class="col-md-8">
      {% for cat in site.data.homepage_categories.featured_articles %}
      {% for post in site.categories[cat] %}
      {% if post.image != null %}
      <div class="row article">
        <div class="col-md-4 center-fill-container img-container">
          <img src="/images/posts/{{post.image}}" alt=""  class="img-center-fill center-both {% if post.image == null %}hidden{% endif %}">
        </div>
        <div class="details-container col-md-8">
          <div class="details">
            <div class="head">
              <h3 class="title"><a href="{{ post.url }}">{{ post.title }}</a></h3>
              <div class="tag"><a href="/category/{{ post.category }}/">{{ post.category }}</a></div>
              <span class="date">{{ post.date | date: "%b %e, %Y" | upcase }}</span>
            </div>
            <div class="excerpt">{% if post.excerpt != null %}{{ post.excerpt | markdownify | truncate: 250 }}{% endif %}</div>
          </div> <!--details-->
        </div> <!--details-container-->
      </div> <!--article-->
      {% break %}
      {% endif %}
      {% endfor %}
      {% endfor %}
    </div>
  </div>
</div>

<div id="yt-videos-container" class="container">
  <h1 class="container-title">Videos</h1>
  <div class="row">
    <div class="col-md-8">
      {% assign video = site.data.youtube.first %}
      <div class="video-container">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="youtube-video" id="youtube-video-{{ video.id }}" data-id="{{ video.id }}" src="https://www.youtube.com/embed/{{ video.id }}?enablejsapi=1&showinfo=0" allowfullscreen></iframe>
        </div>
      </div>
      <div class="video-caption" id="youtube-title-{{ video.id }}" data-id="{{ video.id }}">
        <h2 class="caption">{{ video.title }}</h2>
      </div>
    </div> <!-- col-md-8 -->
    <ul class="col-md-4 video-list">
      {% for video in site.data.youtube offset: 1 limit: 4 %}
        <li class="row list-video">
          <a href="https://www.youtube.com/watch?v={{ video.id }}">
            <div class="col-md-6 img-container">
              <img class="center-both img-center-fill" src="http://img.youtube.com/vi/{{ video.id  }}/mqdefault.jpg">
            </div>
            <div class="col-md-6 caption"><span class="center-vertical">{{ video.title }}</span></div>
          </a>
        </li>
      {% endfor %}
    </ul>
  </div> <!-- row -->
</div>