responsive stuff

package-lock.json

@@ -12,10 +12,10 @@
         "@picocss/pico": "^1.5.6",
         "astro": "^1.6.13",
         "astro-remote": "^0.2.3",
-        "date-fns": "^2.29.3",
+        "date-fns": "^2.29.3"
-        "prettier": "^2.8.1"
       },
       "devDependencies": {
+        "prettier": "^2.8.1",
         "prettier-plugin-astro": "^0.7.0"
       }
     },

src/components/BlogHeader.astro

@@ -0,0 +1,15 @@
+---
+import { format } from "date-fns";
+
+interface Props {
+  title: String;
+  date: String;
+}
+
+const { title, date } = Astro.props;
+---
+
+<div class="blog-header">
+  <h4>{title}</h4>
+  <h5>{`🗓️ ${format(new Date(date), "MMM do, y")}`}</h5>
+</div>

src/pages/index.astro

@@ -1,8 +1,8 @@
 ---
-import { format } from "date-fns";
 import { Markup } from "astro-remote";
 
 import Layout from "../layouts/Layout.astro";
+import BlogHeader from "../components/BlogHeader.astro";
 
 const response = await fetch(
   `https://api.cosmicjs.com/v2/buckets/${
@@ -26,13 +26,7 @@ const posts = await response.json();
             </div>
           ) : null}
           <div>
-            <div style={{ display: "flex", justifyContent: "space-between" }}>
+            <BlogHeader title={post.title} date={post.published_at} />
-              <h4>{post.title}</h4>
-              <h5>{`🗓️ ${format(
-                new Date(post.published_at),
-                "MMM do, y"
-              )}`}</h5>
-            </div>
             <Markup content={`<p>${post.content.split("</p>")[0]}`} />
             <a href={`/posts/${post.slug}`}>Read More</a>
           </div>

src/pages/posts/[slug].astro

@@ -3,6 +3,7 @@ import { format } from "date-fns";
 import { Markup } from "astro-remote";
 
 import Layout from "../../layouts/Layout.astro";
+import BlogHeader from "../../components/BlogHeader.astro";
 
 const { slug } = Astro.params;
 
@@ -27,10 +28,9 @@ const post = posts.objects[0];
         </div>
       ) : null
     }
-    <div style={{ display: "flex", justifyContent: "space-between" }}>
+    <div>
-      <h4>{post.title}</h4>
+      <BlogHeader title={post.title} date={post.published_at} />
-      <h5>{`🗓️ ${format(new Date(post.published_at), "MMM do, y")}`}</h5>
+      <Markup content={post.content} />
     </div>
-    <Markup content={post.content} />
   </article>
 </Layout>

src/styles/global.css

@@ -1,3 +1,20 @@
 img {
   border-radius: 5px;
 }
+
+.blog-header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.blog-header h5 {
+  font-size: 1rem;
+  font-weight: normal;
+}
+
+@media (max-width: 768px) {
+  .blog-header {
+    flex-direction: column;
+    justify-content: left;
+  }
+}