From 5628819535b63358d5be663accea903ceb33a6b4 Mon Sep 17 00:00:00 2001
From: Asutosh Palai <asupalai@gmail.com>
Date: Mon, 26 Dec 2016 01:03:56 +0530
Subject: [PATCH] Finished article page

---
 _data/categories_name.yaml     | 15 ++++++
 _includes/header.html          |  2 +-
 _includes/horizontal_post.html |  2 +-
 _includes/navbar.html          | 14 +++---
 _layouts/post.html             | 66 +++++++++++++++----------
 css/base.scss                  | 90 +++++++++++++++++++++++++++-------
 6 files changed, 138 insertions(+), 51 deletions(-)
 create mode 100644 _data/categories_name.yaml

diff --git a/_data/categories_name.yaml b/_data/categories_name.yaml
new file mode 100644
index 0000000..1c26c2a
--- /dev/null
+++ b/_data/categories_name.yaml
@@ -0,0 +1,15 @@
+---
+academics: Academics
+cultural: Cultual
+columns: Columns
+coverstory: Cover Story
+bigstory: Big Story
+almostfamous: Almost Famous
+phekingnews: Pheking News
+guestcomentary: Guest Comentary
+tech: Tech
+career: Career
+sac: SAC
+editorial: Editorial
+verbatim: Verbatim
+sports: Sports
diff --git a/_includes/header.html b/_includes/header.html
index 5369385..51f21f7 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -47,7 +47,7 @@
         <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>
+            <div class="tag"><a href="/category/{{ post.category }}/">{{ site.data.categories_name[post.category] }}</a></div>
             <span class="date">{{ post.date | date: "%b %e, %Y" | upcase }}</span>
           </div>
           {% if forloop.index < 3 %}
diff --git a/_includes/horizontal_post.html b/_includes/horizontal_post.html
index 6508286..658117e 100644
--- a/_includes/horizontal_post.html
+++ b/_includes/horizontal_post.html
@@ -7,7 +7,7 @@
     <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>
+        <div class="tag"><a href="/category/{{ post.category }}/">{{ site.data.categories_name[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>
diff --git a/_includes/navbar.html b/_includes/navbar.html
index 5da7db9..99b8385 100644
--- a/_includes/navbar.html
+++ b/_includes/navbar.html
@@ -1,11 +1,13 @@
 <div class="pre-nav container">
-  <div class="brand pull-left">
-    <img class="logo" src="/images/logo-black.png">
-    <div class="name-container">
-      <div class="name">Watch Out!</div>
-      <div class="desc">Official News<br>Body of IITR</div>
+  <a href="/">
+    <div class="brand pull-left">
+      <img class="logo" src="/images/logo-black.png">
+      <div class="name-container">
+        <div class="name">Watch Out!</div>
+        <div class="desc">Official News<br>Body of IITR</div>
+      </div>
     </div>
-  </div>
+  </a>
   <div class="social pull-right">
     <a href="/about">About</a>
     <img src="/images/fb-logo.svg" href="http://fb.com/WatchOutNewsAgency">
diff --git a/_layouts/post.html b/_layouts/post.html
index 466353a..fc8c2d1 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -1,49 +1,63 @@
 ---
 layout: layout
 ---
-{% include header.html %}
-
 <section class="post container">
-  <h1>
-    <a href="{{ page.url }}">{{ page.title }}</a>
-  </h1>
-
-  <section class="byline col-md-12">
-    {{ page.date | date: "%B %e, %Y" }}
-  </section>
-
-  <div class="col-md-8">
-    <section class="content{% if page.justify %} justify{% endif %}">
-      {{ content }}
-    </section>
+  <div class="header">
+    <h3 class="tag">
+      <a href="/category/{{ page.category }}/">{{ site.data.categories_name[page.category] }}</a>
+    </h3>
+    <h1 class="title">
+      <a href="{{ page.url }}">{{ page.title }}</a>
+    </h1>
+    <div class="date">
+      {{ page.date | date: "%B %e, %Y" }}
+    </div>
   </div>
+  <div class="row body">
 
-  <div class="fb-page col-md-4" data-href="https://www.facebook.com/WatchOutNewsAgency/" data-tabs="timeline" data-width="330" data-height="400" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/WatchOutNewsAgency/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/WatchOutNewsAgency/">Watch Out! News Agency</a></blockquote></div>
+    <section class="col-md-8 content{% if page.justify %} justify{% endif %}">
+      {{ content }}
 
-    <br/>
-  <div class="fb-like" data-href="{{ site.url }}{{ page.url }}" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
+      <div class="fb-content">
+        <div class="fb-like" data-href="{{ site.url }}{{ page.url }}" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
 
-  <br/>
+        <div class="fb-comments" data-href="{{ site.url }}{{ page.url }}" data-width="100%" data-numposts="5"></div>
+      </div>
 
-  <div class="fb-comments" data-href="{{ site.url }}{{ page.url }}" data-width="100%" data-numposts="5"></div>
+    </section>
+
+    <div class="col-md-4">
+      <div class="fb-page" data-href="https://www.facebook.com/WatchOutNewsAgency/" data-tabs="timeline" data-width="330" data-height="400" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/WatchOutNewsAgency/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/WatchOutNewsAgency/">Watch Out! News Agency</a></blockquote></div>
+    </div>
+  </div> <!-- body -->
 
 </section>
 
-<div id="related-articles-container" class="container-fluid">
-  <section id="related-articles" class="row">
+<div id="more-articles-container" class="container">
+  <div class="head-wrapper">
+    <h1 class="container-title">More from {{ page.category | capitalize }}</h1>
+    <span class="view-all">view all</span>
+  </div>
+  <section id="more-articles" class="row">
 
-  {% for post in site.related_posts limit: 4 %}
+    {% for post in site.categories[page.category] limit: 5 %}
+    {% if post.url != page.url %}
+    {% if forloop.index < 5 or found %}
     <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 center-both {% if post.image == null %}hidden{% endif %}">
         </div>
-        <div class="details text-center ">
-          <h3 class="title">{{ post.title | truncatewords: 4}}</h3>
-          <p class="tag">{{ post.tag }}</p>
+        <div class="details">
+          <h3 class="title">{{ post.title | truncatewords: 7}}</h3>
+          <div class="date">{{ post.date | date: "%B %e, %Y" }}</div>
         </div>
       </a>
     </div>
-  {% endfor %}
+    {% endif %}
+    {% else %}
+      {% assign found = true %}
+    {% endif %}
+    {% endfor %}
   </section>
 </div>
diff --git a/css/base.scss b/css/base.scss
index 2905d1f..91de476 100644
--- a/css/base.scss
+++ b/css/base.scss
@@ -360,7 +360,6 @@ nav {
   }
 }
 
-
 #related-articles {
   z-index: 10;
 
@@ -595,21 +594,18 @@ blockquote {
 // ============== POST ============== //
 
 .post {
-  z-index: 10;
-  position: relative;
-	background: white;
-	padding: 10px 50px;
-  margin-bottom: 20px;
-	font-size: 1.1em;
+ 	font-size: 1.1em;
 	line-height: 1.5em;
 	color: #333332;
 
-  .content {
-    margin-top: 2em;
+  .header {
+    border-bottom: 4px solid #e7ce00;
+    font-weight: bold;
+    padding-bottom: 30px;
   }
 
-  .fb-page {
-    top:2em;
+  .body {
+    padding-top: 4em;
   }
 
 	p img {
@@ -622,20 +618,80 @@ blockquote {
   .justify {
     text-align: justify;
   }
+
+  .fb-content {
+    margin-top: 40px;
+  }
+
+  .fb-like {
+    margin-bottom: 30px;
+  }
 }
 
-.post-header {
-  box-shadow: 0 100px 125px -100px;
+.header {
+  .tag {
+    text-transform: uppercase;
+    color: #e7ce00;
+    font-size: 16px;
+  }
+
+  .title {
+    font-size: 24px;
+    color: #333333;
+  }
+
+  .date {
+    color: #8b8b8b;
+    font-size: 12px;
+  }
 }
 
 // ============== /POST ============== //
 
 // ========= RELATED-ARTICLES ======== //
+#more-articles-container {
+  margin-top: 35px;
+  margin-bottom: 40px;
+  border-top: 1px solid #ededed;
+  padding-top: 15px;
 
-#related-articles {
-  padding-top: 40px;
-  padding-bottom: 20px;
-  background: #f0f0f0;
+  .head-wrapper {
+    position: relative;
+  }
+
+  .view-all {
+    font-family: Merriweather;
+    font-style: italic;
+    color: #ababab;
+    font-size: 16px;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}
+
+#more-articles {
+  color: white;
+
+  .article {
+    height: 155px;
+    position: relative;
+  }
+
+  .details {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    padding: 1.5em;
+  }
+
+  .title {
+    font-size: 16px;
+  }
+
+  .date {
+    position: static;
+  }
 }
 
 // ========= /RELATED-ARTICLES ======= //