hotfix: blog posts list has no gap between entries

code-calico · May 31, 2024 · 062b125 · 062b125
1 parent 6dcb6b9
commit 062b125
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/src/components/BlogPost.astro b/src/components/BlogPost.astro
@@ -26,7 +26,6 @@ const { url, title, description } = Astro.props;
 		padding: 1em;
 		gap: 1em;
 		flex: 1;
-		flex-basis: 300px;
 	}
 
 	.blog-post-card .info span {

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -16,9 +16,11 @@ const members = await Astro.glob('../pages/members/*.md');
 		<p>Welcome to our website! We're a team of hobbyist programmers, working together to craft something fun.</p>
 
 		<h2>What are we up to?</h2>
-		{posts.sort((a, b) => a.frontmatter.pubDate > b.frontmatter.pubDate ? -1 : 1).slice(0, 3).map((post) =>
-			<BlogPost url={post.url} {...post.frontmatter} />
-		)}
+		<div class="posts">
+			{posts.sort((a, b) => a.frontmatter.pubDate > b.frontmatter.pubDate ? -1 : 1).slice(0, 3).map((post) =>
+				<BlogPost url={post.url} {...post.frontmatter} />
+			)}
+		</div>
 
 		<h2>Who are we?</h2>
 		<div class="members">
@@ -62,4 +64,10 @@ const members = await Astro.glob('../pages/members/*.md');
 		gap: 1em;
 		flex-wrap: wrap;
 	}
+
+	.posts {
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+	}
 </style>