feat: blog container queries

Rodgers Gitau · Rodgers Gitau · commit 2ba69b02f1c7 · 2023-10-31T23:53:05.000+03:00
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
@@ -34,8 +34,8 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 
 <Layout>
   <article>
-    <div class="container mx-auto">
-      <div class="relative w-full">
+    <div class="container mx-auto @container flex flex-col-reverse w-1/4">
+      <div class="relative w-full @md:w-1/2 @3xl:w-1/4">
         {
           heroImage && (
             <img
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
@@ -11,7 +11,7 @@ const posts = (await getCollection("blog")).sort(
 
 <Layout>
   <section class="mx-auto py-10">
-    <ul class="grid grid-cols-1 lg:grid-cols-2 gap-10">
+    <ul class="flex flex-col gap-8">
       {
         posts.map((post) => (
           <li class="w-full mx-auto">

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ const posts = (await getCollection("blog")).sort(`
`11`	`11`
`12`	`12`	`<Layout>`
`13`	`13`	`<section class="mx-auto py-10">`
`14`		`- <ul class="grid grid-cols-1 lg:grid-cols-2 gap-10">`
	`14`	`+ <ul class="flex flex-col gap-8">`
`15`	`15`	`{`
`16`	`16`	`posts.map((post) => (`
`17`	`17`	`<li class="w-full mx-auto">`