From 2e9b61cd7722064ce1aeae72e9291136f456f9bd Mon Sep 17 00:00:00 2001
From: Asutosh Palai <asupalai@gmail.com>
Date: Mon, 26 Dec 2016 01:25:33 +0530
Subject: [PATCH] Minor fixes in new articles

---
 _includes/header.html |  5 ++++-
 css/base.scss         | 31 ++++++++++++++++++++++++-------
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/_includes/header.html b/_includes/header.html
index 51f21f7..73deea1 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -31,6 +31,7 @@
 </div>
 
 <div id="new-articles" class="container content">
+  <div class="container-title">New Articles</div>
   <section>
     <div class="row outer-row">
       {% for post in site.related_posts limit: 5 %}
@@ -40,7 +41,8 @@
         <div class="row outer-row">
       {% endif %}
 
-      <div class="article col-sm-{% if forloop.index < 3 %}6{% else %}4{% endif %}">
+      <div class="col-sm-{% if forloop.index < 3 %}6{% else %}4{% endif %} article-col">
+        <div class="article">
         <div class="center-fill-container img-container tinted">
           <img src="/images/posts/{{post.image}}" alt=""  class="img-center-fill center-both {% if post.image == null %}hidden{% endif %}">
         </div>
@@ -53,6 +55,7 @@
           {% if forloop.index < 3 %}
           <div class="excerpt">{% if post.excerpt != null %}{{ post.excerpt | markdownify }}{% endif %}</div>
           {% endif %}
+        </div> <!-- details -->
         </div>
       </div>
       {% endfor %}
diff --git a/css/base.scss b/css/base.scss
index 91de476..8e0de60 100644
--- a/css/base.scss
+++ b/css/base.scss
@@ -291,13 +291,23 @@ nav {
 #new-articles {
   color: white;
   margin-bottom: 60px;
+  position: relative;
 
-  .article {
-    position: relative;
-    height: 340px;
-    padding: 0 5px;
-    margin-top: 10px;
+  .container-title {
+    position: absolute;
+    top: -2.25em;
+    left: -.5em;
+    z-index: 10;
+    color: #252525;
+    background: #fafafa;
+    font-size: 14px;
+    padding: 0.35em 2.35em;
     box-shadow: 0 0 35px 6px rgba(0,0,0,0.35);
+    border-radius: 0.4em;
+  }
+
+  .article-col {
+    padding: 0 5px;
 
     &:first-of-type {
       padding-left: 0;
@@ -308,6 +318,13 @@ nav {
     }
   }
 
+  .article {
+    position: relative;
+    height: 340px;
+    margin-top: 10px;
+    box-shadow: 0 0 35px 6px rgba(0,0,0,0.35);
+  }
+
   .details {
     position: absolute;
     bottom: 0;
@@ -319,12 +336,12 @@ nav {
   }
 
   .row:last-of-type {
-    .article:first-of-type {
+    .article-col:first-of-type .article {
       overflow: hidden;
       border-radius: 0px 0px 0px 10px;
     }
 
-    .article:last-of-type {
+    .article-col:last-of-type .article {
       overflow: hidden;
       border-radius: 0px 0px 10px 0px;
     }