From 227ba427745a1344f12236f6ce5f524ebddd79d8 Mon Sep 17 00:00:00 2001
From: Asutosh Palai <asupalai@gmail.com>
Date: Sun, 25 Dec 2016 14:26:20 +0530
Subject: [PATCH] Category page complete

---
 _includes/cat_header.html      | 31 +++++++++++-----
 _includes/header.html          |  9 -----
 _includes/horizontal_post.html | 17 +++++++++
 _layouts/category.html         | 28 +++++----------
 _layouts/layout.html           |  9 +++++
 css/base.scss                  | 64 ++++++++++++++++++++++++----------
 index.html                     | 19 +++-------
 7 files changed, 106 insertions(+), 71 deletions(-)
 create mode 100644 _includes/horizontal_post.html

diff --git a/_includes/cat_header.html b/_includes/cat_header.html
index 7eab159..95c4c7f 100644
--- a/_includes/cat_header.html
+++ b/_includes/cat_header.html
@@ -1,12 +1,25 @@
-<div id="header" class="container-fluid category-header">
-  <div class="cover center-both text-center">
-    <h1 class="title">{{ page.category | capitalize }}</h1>
-  </div>
+{% assign post = site.categories[page.category].first %}
+<div id="header" class="container category-header">
+  <div class="row">
+    <div class="col-md-8 tinted cover-image center-fill-container">
+      {% if post.image != nil %}
+      <div class="img-container">
+        <img class="center-both img-center-fill" src="/images/posts/{{ post.image }}" alt="">
+      </div>
+      {% endif %}
+    </div>
 
-  <div class="left">
+    <div class="col-md-4 cover-details">
+      <div class="cover-title">
+        <a  href="{{ post.url }}" class="cover-link">
+          <h1 class="title">{{ post.title  }}</h1>
+        </a>
+      </div>
+      <div class="date">{{ post.date | date: "%-d %B %Y" }}</div>
+      <div class="cover-excerpt">
+        {{ post.excerpt | truncate: 350 }}
+      </div>
+    </div>
   </div>
-
-  <div class="right">
-  </div>
-
 </div>
+
diff --git a/_includes/header.html b/_includes/header.html
index 61c3be0..5369385 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -3,15 +3,6 @@
   {% assign post = page %}
 {% endif %}
 
-<div id="fb-root"></div>
-<script>(function(d, s, id) {
-  var js, fjs = d.getElementsByTagName(s)[0];
-  if (d.getElementById(id)) return;
-  js = d.createElement(s); js.id = id;
-  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=691723664330476";
-  fjs.parentNode.insertBefore(js, fjs);
-}(document, 'script', 'facebook-jssdk'));</script>
-
 <div id="header" class="container {% if page.is_post %}post-header{% endif %}">
   <div class="row header-row outer-row">
     {% if post.image != nil %}
diff --git a/_includes/horizontal_post.html b/_includes/horizontal_post.html
new file mode 100644
index 0000000..6508286
--- /dev/null
+++ b/_includes/horizontal_post.html
@@ -0,0 +1,17 @@
+{% assign post = include.post %}
+<div class="row article article-horiozntal">
+  <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-->
+
diff --git a/_layouts/category.html b/_layouts/category.html
index a8a42eb..dfb07dc 100644
--- a/_layouts/category.html
+++ b/_layouts/category.html
@@ -5,25 +5,15 @@ layout: layout
 {% include cat_header.html %}
 
 <div class="category-posts container">
-  {% for post in site.categories[page.category] %}
-    <div class="category-post row">
-      {% if post.image != nil %}
-        <div class="col-sm-3 center-fill-container img-container">
-          <a href="{{ post.url }}">
-            <img src="/images/posts/{{post.image}}" alt=""  class="img-center-fill {% if post.image == null %}hidden{% endif %}">
-          </a>
-        </div>
-        <div class="col-sm-9 details">
-          <h3 class="title"><a href="{{ post.url }}">{{ post.title}}</a></h3>
-          <p class="tag">{{ post.excerpt }}</p>
-        </div>
-      {% else %}
-        <div class="col-sm-12 details">
-          <h3 class="title"><a href="{{ post.url }}">{{ post.title}}</a></h3>
-          <p class="tag">{{ post.excerpt }}</p>
-        </div>
-      {% endif %}
+  <div class="row">
+    <div class="col-md-8">
+      {% for post in site.categories[page.category] offset: 1 %}
+      {% include horizontal_post.html post=post %}
+      {% endfor %}
     </div>
-  {% endfor %}
+    <div class="col-md-4">
+      <div class="fb-page" data-href="https://www.facebook.com/WatchOutNewsAgency/" data-tabs="timeline" data-width="330" data-height="540" 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>
 </div>
 
diff --git a/_layouts/layout.html b/_layouts/layout.html
index d16f824..9794608 100644
--- a/_layouts/layout.html
+++ b/_layouts/layout.html
@@ -5,6 +5,15 @@
 
   <body>
 
+    <div id="fb-root"></div>
+    <script>(function(d, s, id) {
+      var js, fjs = d.getElementsByTagName(s)[0];
+      if (d.getElementById(id)) return;
+      js = d.createElement(s); js.id = id;
+      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=691723664330476";
+      fjs.parentNode.insertBefore(js, fjs);
+    }(document, 'script', 'facebook-jssdk'));</script>
+
     {% include navbar.html %}
     
     {{ content }}
diff --git a/css/base.scss b/css/base.scss
index 4c2b23e..2905d1f 100644
--- a/css/base.scss
+++ b/css/base.scss
@@ -220,6 +220,10 @@ nav {
 
   }
 
+  .row {
+    margin-left: 0;
+  }
+
   .cover-image {
     height: $home-header-height;
   }
@@ -253,6 +257,25 @@ nav {
   }
 }
 
+#header.category-header {
+  font-size: 16px;
+
+  .cover-image {
+    border-radius: 10px;
+  }
+
+  .title {
+    margin-bottom: 0;
+  }
+
+  .date {
+    font-size: 12px;
+    font-weight: bold;
+    font-style: italic;
+    color: #e7ce00;
+  }
+}
+
 .red-strip {
   height: 0px;
   width: 90px;
@@ -394,15 +417,16 @@ nav {
 // ========== FEATURED-ARTICLE =========== //
 #featured-articles-container {
   padding-top: 20px;
-  padding-bottom: 30px;
+  padding-bottom: 10px;
   border-top: 1px solid #ededed;
   border-bottom: 1px solid #ededed;
 
-  .article {
-    height: 180px;
-    padding: 1.5em 0 2em;
-    margin-left: 0;
-  }
+}
+
+.article-horiozntal {
+  height: 10em;
+  margin-bottom: 3.5em;
+  margin-left: 0;
 
   .title {
     font-size: 19px;
@@ -426,7 +450,6 @@ nav {
 // ================ VIDEO ================ //
 #yt-videos-container {
   padding-top: 20px;
-  margin-bottom: 10px;
 }
 
 .video-container {
@@ -623,6 +646,7 @@ footer {
   position: relative;
 	background: #f3f3f3;
   color: #b8b8b8;
+  margin-top: 20px;
   padding-top: 22px;
   border-top: 1px solid #c5c5c5;
 
@@ -640,23 +664,25 @@ footer {
 // ============== /FOOTER ============== //
 
 // ============== CATEGORY-POSTS ===========//
-.category-posts {
-  position: relative;
-  z-index: 10;
-  background: white;
-  padding-top: 20px;
-  min-height: 100px;
 
-  .category-post {
-    margin-bottom: 30px;
-    padding: 0 10px 30px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+.category-posts {
+  margin-top: 20px;
+
+  .tag {
+    display: none;
   }
 
-  .img-container {
-    height: $article-cover-img-height;
+  .date {
+    display: block;
+    position: static;
+    color: #d1d1d1;
+  }
+  
+  .excerpt {
+    margin-top: 10px;
   }
 }
+
 // ============= /CATEGORY-POSTS ===========//
 
 // ============== TEAM ============== //
diff --git a/index.html b/index.html
index b0f7a7f..76ff508 100644
--- a/index.html
+++ b/index.html
@@ -11,26 +11,15 @@ title: "Watch Out!, IIT Roorkee"
       {% 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-->
+        {% include horizontal_post.html post=post %}
       {% break %}
       {% endif %}
       {% endfor %}
       {% endfor %}
     </div>
+    <div class="col-md-4">
+      <div class="fb-page" data-href="https://www.facebook.com/WatchOutNewsAgency/" data-tabs="timeline" data-width="330" data-height="540" 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>
 </div>