astro-ghostcms/packages/astro-ghostcms-theme-default/src/components/PostPreviewList.astro

44 lines
869 B
Plaintext

---
import PostPreview from "../components/PostPreview.astro";
import type { Settings, Post } from "@matthiesenxyz/astro-ghostcms/api";
export type Props = {
posts: Post[];
settings: Settings;
isHome?: boolean;
};
const { posts, settings, isHome = false } = Astro.props as Props;
---
<div class="post-feed">
{posts.map((post: Post, index: number) => (
<PostPreview
post={post}
index={index}
settings={settings}
isHome={isHome}
/>
))}
</div>
<style lang="scss">
.post-feed {
position: relative;
display: grid;
grid-gap: 4vmin;
grid-template-columns: 1fr 1fr 1fr;
padding: 4vmin 0;
}
@media (max-width: 1000px) {
.post-feed {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 700px) {
.post-feed {
grid-template-columns: 1fr;
grid-gap: 40px;
}
}
</style>