From 2c63ea707e93eea627ac2d14d91bca6e7b08be76 Mon Sep 17 00:00:00 2001
From: Hippo <badrihippo@gmail.com>
Date: Tue, 24 Dec 2019 13:47:40 +0530
Subject: [PATCH] Post Card styling: make every sixth post "large"

This is consistent with the style Ghost uses to display posts
---
 src/components/Card.vue | 6 +++++-
 src/pages/Index.vue     | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Card.vue b/src/components/Card.vue
index 863f2cd..31d55a6 100644
--- a/src/components/Card.vue
+++ b/src/components/Card.vue
@@ -45,7 +45,8 @@ export default {
     Avatar
   },
   props: {
-    cardData: Object
+    cardData: Object,
+    isLarge: Boolean
   },
   computed: {
     articleClass() {
@@ -57,6 +58,9 @@ export default {
         var cardTagClass = "post-" + this.cardData.tags[i].slug;
         classes.push(cardTagClass);
       }
+      if (this.isLarge) {
+        classes.push("post-card-large");
+      }
       return classes;
     }
   },
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 17f06d7..f6959bb 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -24,7 +24,7 @@
     <main id="site-main" class="site-main outer">
       <div class="inner">
         <div class="post-feed">
-          <Card v-for="{ node } in $page.posts.edges" :key="node.id" :cardData="node" />
+          <Card v-for="{ node }, count in $page.posts.edges" :key="node.id" :cardData="node" :isLarge="count % 6 == 0 ? true : false" />
         </div>
       </div>
     </main>