Showing each post for each cat

_data/homepage_categories.yaml

@@ -0,0 +1,7 @@
+---
+- phekingnews 
+- editorial
+- coverstory
+- bigstory
+- verbatim
+- almostfamous

css/base.scss

@@ -249,6 +249,7 @@ body {
       top: -0.1 * $article-cover-img-height;
       background: $featured-articles-bg-color;
       width: 0.9 * $article-cover-img-width; ;
+      height: 120px;
 
       .tag {
         position: absolute;

index.html

@@ -16,7 +16,7 @@ title: "Home"
         </div>
         <div class="details text-center ">
           <h3 class="title">{{ post.title | truncatewords: 4}}</h3>
-          <p class="tag">{{ post.tag}}</p>
+          <p class="tag">{{ post.subcategory }}</p>
         </div>
       </a>
     </div>
@@ -28,30 +28,28 @@ title: "Home"
   <div id="featured-articles" class=" container">
     <div class="row">
       <h1 class="col-sm-12" id="featured-articles-title">Featured Articles</h1>
-      {% for cat in site.categories %}
-        {{ cat | inspect }}
-        {% assign post = cat.second.first %}
-        {% if post.categories contains 'wona' and post.image != null %}
+      {% for tag in site.data.homepage_categories %}
+        {% assign posts = site.posts |  where: "tag", tag %}
+        {% for post in posts %}
+          {% if post.image != null %}
             <div class="article-container col-sm-4">
               <div class="article {{post.tag}}">
 
                 <a href="{{ post.url }}">
-                  {% if post.image %}
                     <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>
-                  {% else %}
-                    <br><br>
-                  {% endif %}
                   <div class="details text-center">
                     <span class="tag">{{ post.tag }}</span>
                     <h3 class="title">{{ post.title  | truncatewords: 4}}</h3>
-                    <p class="excerpt">{{ post.excerpt | markdownify | truncate: 75 }}</p>
+                    <p class="excerpt">{% if post.excerpt != null %}{{ post.excerpt | markdownify | truncate: 75 }}{% endif %}</p>
                   </div>
                 </a>
               </div>
             </div>
-        {% endif %}
+            {% break %}
+          {% endif %}
+        {% endfor %}
       {% endfor %}
     </div>
   </div>