Added category page

_config.yml

@@ -16,6 +16,11 @@ defaults:
       type: posts   # limit to posts
     values:
       is_post: true # automatically set is_post=true for all posts
+  - scope:
+      path: "category"
+    values:
+      is_category_page: true
+      layout: category
 
 name: WONA
 url: http://wona.co.in

_includes/cat_header.html

@@ -0,0 +1,12 @@
+<div id="header" class="container-fluid category-header">
+  <div class="cover center-both text-center">
+    <h1 class="title">{{ page.category | capitalize }}</h1>
+  </div>
+
+  <div class="left">
+  </div>
+
+  <div class="right">
+  </div>
+
+</div>

_includes/navbar.html

@@ -22,7 +22,9 @@
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ cat.name | uppercase }} <span class="caret"></span></a>
                 <ul class="dropdown-menu">
                   {% for subcat in cat.subcategories %}
-                  <li><a href="/category/{{ subcat }}">{{ subcat | uppercase }}</a></li>
+                   {% if site.categories[subcat] != nil %}
+                    <li><a href="/category/{{ subcat }}">{{ subcat | uppercase }}</a></li>
+                    {% endif %}
                   {% endfor %}
                 </ul>
               </li>

_layouts/category.html

@@ -0,0 +1,28 @@
+---
+layout: layout
+no_header: true
+---
+
+{% 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">
+          <img src="/images/posts/{{post.image}}" alt=""  class="img-center-fill {% if post.image == null %}hidden{% endif %}">
+        </div>
+        <div class="col-sm-9 details">
+          <h3 class="title">{{ post.title}}</h3>
+          <p class="tag">{{ post.excerpt }}</p>
+        </div>
+      {% else %}
+        <div class="col-sm-12 details">
+          <h3 class="title">{{ post.title}}</h3>
+          <p class="tag">{{ post.excerpt }}</p>
+        </div>
+      {% endif %}
+    </div>
+  {% endfor %}
+</div>
+

_layouts/layout.html

@@ -7,7 +7,9 @@
 
     {% include navbar.html %}
 
-    {% include header.html %}
+    {% if page.no_header %}
+      {% include header.html %}
+    {% endif %}
     
     {{ content }}
 

category/editorial/index.html

@@ -0,0 +1,3 @@
+---
+category: editorial
+---

category/phekingnews/index.html

@@ -0,0 +1,3 @@
+---
+category: phekingnews
+---

css/base.scss

@@ -148,6 +148,11 @@ body {
   padding: 0;
   overflow: hidden;
 
+  &.category-header {
+    height: 300px;
+    box-shadow: 0 100px 125px -100px;
+  }
+
   .cover {
     z-index: 10;
     color: white;
@@ -439,6 +444,25 @@ footer {
 
 // ============== /FOOTER ============== //
 
+// ============== CATEGORY-POSTS ===========//
+.category-posts {
+  position: relative;
+  z-index: 10;
+  background: white;
+  padding-top: 10px;
+
+  .category-post {
+    margin-bottom: 30px;
+    padding: 0 10px 30px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  }
+
+  .img-container {
+    height: $article-cover-img-height;
+  }
+}
+// ============= /CATEGORY-POSTS ===========//
+
 // ============== TEAM ============== //
 
 .team {

index.html

@@ -14,7 +14,7 @@ category_page: news
         </div>
         <div class="details text-center ">
           <h3 class="title">{{ post.title | truncatewords: 4}}</h3>
-          <p class="tag">{{ post.tag }}</p>
+          <p class="tag">{{ post.category }}</p>
         </div>
       </a>
     </div>
@@ -26,19 +26,18 @@ category_page: news
   <div id="featured-articles" class=" container">
     <div class="row">
       <h1 class="col-sm-12" id="featured-articles-title">Featured Articles</h1>
-      {% for tag in site.data.homepage_categories %}
+      {% for cat in site.data.homepage_categories %}
-        {% assign posts = site.posts |  where: "tag", tag %}
+        {% for post in site.categories[cat] %}
-        {% for post in posts %}
           {% if post.image != null %}
             <div class="article-container col-sm-4">
-              <div class="article {{post.tag}}">
+              <div class="article {{post.category}}">
 
                 <a href="{{ post.url }}">
                     <div class="center-fill-container article-cover-container">
                       <img src="/images/posts/{{ post.image }}" class="img-center-fill {% if post.image == null %}hidden{% endif %}">
                     </div>
                   <div class="details text-center">
-                    <span class="tag">{{ post.tag }}</span>
+                    <span class="tag">{{ post.category }}</span>
                     <h3 class="title">{{ post.title  | truncatewords: 4}}</h3>
                     <p class="excerpt">{% if post.excerpt != null %}{{ post.excerpt | markdownify | truncate: 75 }}{% endif %}</p>
                   </div>