Make blog grid more responsive

This commit is contained in:
SkyfallWasTaken 2024-07-07 21:48:53 +01:00
parent a4187a3dbf
commit a2a4d9ddde
2 changed files with 4 additions and 4 deletions

View file

@ -21,7 +21,9 @@ const posts = (await getCollection("blog")).sort(
<Header /> <Header />
<main> <main>
<section> <section>
<ul class="container grid grid-cols-3 gap-6 m-4 mb-6 text-text"> <ul
class="container mx-auto px-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 m-4 my-6 text-text"
>
{ {
posts.map((post) => ( posts.map((post) => (
<li> <li>

View file

@ -23,9 +23,7 @@ import Button from "../components/ui/Button.astro";
tuned! tuned!
</p> </p>
<div class="flex flex-row gap-2"> <div class="flex flex-row gap-2">
<Button> <a href="/blog"><Button>Read my blog</Button></a>
<a href="/blog">Read my blog</a>
</Button>
</div> </div>
</div> </div>
</main> </main>