Added bg image to yt video container

Gemfile.lock

@@ -102,7 +102,6 @@ GEM
     rb-fsevent (0.9.7)
     rb-inotify (0.9.7)
       ffi (>= 0.5.0)
-    rdiscount (2.2.0.1)
     rouge (1.10.1)
     safe_yaml (1.0.4)
     sass (3.4.22)
@@ -121,7 +120,6 @@ PLATFORMS
 
 DEPENDENCIES
   github-pages
-  rdiscount
 
 BUNDLED WITH
-   1.12.3
+   1.13.0.rc.1

css/base.scss

@@ -271,7 +271,7 @@ body {
     width: $new-article-img-width;
     height: $new-article-img-height;
     border-radius: 1%;
-    box-shadow: 0 0 15px 0 rgba(0,0,0, 0.5);
+    box-shadow: 0 0 15px 0 rgba(0,0,0, 0.4);
   }
 
   .details:hover ~ .cover-container-container {
@@ -290,10 +290,11 @@ body {
       text-transform: capitalize;
       font-family: 'Montserrat', sans-serif;
       font-size: 20px;
-      margin-top: 10px;
+      margin-top: 5px;
     }
 
     .tag {
+      margin-top: 5px;
       text-transform: uppercase;
       font-size: 14px;
       color: $new-article-tag-color;
@@ -322,7 +323,7 @@ body {
   .article-cover-container {
     width: $article-cover-img-width;
     height: $article-cover-img-height;
-    box-shadow: 0px 35px 40px -20px rgba(0,0,0, 0.5);
+    box-shadow: 0px 35px 40px -20px rgba(0,0,0, 0.4);
   }
 
   a {
@@ -406,6 +407,19 @@ body {
 }
 .carousel-inner{
 
+  .cover-image {
+    width: 100%;
+    position: absolute;
+
+    .img-responsive {
+      width: 100%;
+    }
+
+    img {
+      -webkit-filter: blur(15px);
+      filter: blur(15px);
+    }
+  }
   .video-container {
     width: 70%;
     padding: 2%;

index.html

@@ -18,8 +18,8 @@ title: "Watch Out!, IIT Roorkee"
               </div>
             </div>
             <div class="details text-center ">
-              <h3 class="title">{{ post.title }}</h3>
               <p class="tag">{{ post.category }}</p>
+              <h3 class="title">{{ post.title }}</h3>
             </div>
           </a>
         </div>
@@ -76,6 +76,7 @@ title: "Watch Out!, IIT Roorkee"
       <div class="carousel-inner" role="listbox">
         {% for video in site.data.youtube %}
         <div class="item {% if forloop.first %}active{% endif %}">
+          <div class="cover-image center-vertical"><img class="center-both img-center-fill" src="http://img.youtube.com/vi/{{ video.id }}/hqdefault.jpg" alt=""></div>
           <div class="container">
             <div class="video-container center-both">
               <div class="embed-responsive embed-responsive-16by9">