Post Card styling: make every sixth post "large"
This is consistent with the style Ghost uses to display posts
This commit is contained in:
parent
9a0415d3ff
commit
2c63ea707e
2 changed files with 6 additions and 2 deletions
|
@ -45,7 +45,8 @@ export default {
|
||||||
Avatar
|
Avatar
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
cardData: Object
|
cardData: Object,
|
||||||
|
isLarge: Boolean
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
articleClass() {
|
articleClass() {
|
||||||
|
@ -57,6 +58,9 @@ export default {
|
||||||
var cardTagClass = "post-" + this.cardData.tags[i].slug;
|
var cardTagClass = "post-" + this.cardData.tags[i].slug;
|
||||||
classes.push(cardTagClass);
|
classes.push(cardTagClass);
|
||||||
}
|
}
|
||||||
|
if (this.isLarge) {
|
||||||
|
classes.push("post-card-large");
|
||||||
|
}
|
||||||
return classes;
|
return classes;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -24,7 +24,7 @@
|
||||||
<main id="site-main" class="site-main outer">
|
<main id="site-main" class="site-main outer">
|
||||||
<div class="inner">
|
<div class="inner">
|
||||||
<div class="post-feed">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
Loading…
Reference in a new issue