From d1b47f30562196807b4bd7f6b7afcca85a99be7d Mon Sep 17 00:00:00 2001
From: fiatcode <fiatcode@posteo.com>
Date: Tue, 17 Feb 2026 19:28:52 +0700
Subject: [PATCH] refactor: adjust layout

---
 src/components/BlogPostEntry.astro | 4 ++--
 src/components/Header.astro        | 8 ++++----
 src/components/Intro.astro         | 2 +-
 src/components/Markdown.astro      | 2 +-
 src/components/Sidebar.astro       | 4 ++--
 src/layouts/Layout.astro           | 6 +++---
 6 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/BlogPostEntry.astro b/src/components/BlogPostEntry.astro
index f1f50b2..b51ac1f 100644
--- a/src/components/BlogPostEntry.astro
+++ b/src/components/BlogPostEntry.astro
@@ -15,7 +15,7 @@ const { id, date, title, description } = Astro.props;
   <Link href={`/posts/${id}`}>
     <h2 class="text-lg font-semibold">{title}</h2>
   </Link>
-  <div class="flex items-center text-neutral-500 text-sm">
+  <time class="block text-neutral-500 text-sm">
     {
       date.toLocaleDateString("en-US", {
         year: "numeric",
@@ -23,6 +23,6 @@ const { id, date, title, description } = Astro.props;
         day: "numeric",
       })
     }
-  </div>
+  </time>
   <p class="text-base text-neutral-400">{description}</p>
 </div>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 5627068..bbf4166 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -9,17 +9,17 @@ import Link from "@/components/Link.astro";
         <a
           href="/"
           aria-label="Home"
-          class="flex before:content-['['] after:content-[']_#'] p-1 bg-green-600 text-neutral-800 hover:bg-green-500 transition-colors"
+          class="inline-block before:content-['['] after:content-[']_#'] p-1 bg-green-600 text-neutral-800 hover:bg-green-500 transition-colors"
           >dhemasnurjaya</a
         >
       </li>
-      <li class="flex before:content-['./'] before:text-neutral-500">
+      <li class="inline-flex before:content-['./'] before:text-neutral-500">
         <Link href="/posts" ariaLabel="Posts">posts</Link>
       </li>
-      <li class="flex before:content-['./'] before:text-neutral-500">
+      <li class="inline-flex before:content-['./'] before:text-neutral-500">
         <Link href="/tags" ariaLabel="Tags">tags</Link>
       </li>
-      <li class="flex before:content-['./'] before:text-neutral-500">
+      <li class="inline-flex before:content-['./'] before:text-neutral-500">
         <Link href="/search" ariaLabel="Search">search</Link>
       </li>
     </ul>
diff --git a/src/components/Intro.astro b/src/components/Intro.astro
index 1d03444..d07be3f 100644
--- a/src/components/Intro.astro
+++ b/src/components/Intro.astro
@@ -8,7 +8,7 @@ import Facebook from "@/assets/images/facebook.svg";
 import Mail from "@/assets/images/at-sign.svg";
 ---
 
-<div class="flex flex-col">
+<div>
   <PageTitle title="Hi, I'm Dhemas 👋" />
   <p class="mb-4">
     Cross-platform developer. Linux fan stuck on Windows. Craftsman at heart.
diff --git a/src/components/Markdown.astro b/src/components/Markdown.astro
index 59620ac..da6dca0 100644
--- a/src/components/Markdown.astro
+++ b/src/components/Markdown.astro
@@ -1,5 +1,5 @@
 <div
-  class="max-w-5xl mb-8
+  class="mb-8 max-w-none
       prose prose-invert
       prose-p:text-neutral-300
       prose-headings:pb-4 prose-headings:text-neutral-300 prose-headings:before:mr-2 prose-headings:before:text-neutral-500
diff --git a/src/components/Sidebar.astro b/src/components/Sidebar.astro
index 59449f1..838738d 100644
--- a/src/components/Sidebar.astro
+++ b/src/components/Sidebar.astro
@@ -3,10 +3,10 @@ import { getQuote } from "@/lib/quote";
 const { quote, author } = await getQuote();
 ---
 
-<div class="flex flex-col sticky top-4">
+<div class="sticky top-4">
   <blockquote class="border-l border-neutral-500 pl-4">
     <p class="mb-2">{quote}</p>
     <footer class="text-neutral-400 text-sm">{author}</footer>
   </blockquote>
-  <span class="text-neutral-500 py-4">---</span>
+  <span class="block text-neutral-500 py-4">---</span>
 </div>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 9dbe215..a4728cc 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -24,11 +24,11 @@ const { title, description } = Astro.props;
   </head>
   <body class="max-w-5xl mx-auto flex flex-col font-default">
     <Header />
-    <main class="flex flex-col md:flex-row">
-      <section class="w-full md:flex-3 p-4 bg-neutral-800">
+    <main class="grid grid-cols-1 md:grid-cols-4 gap-0 items-start">
+      <section class="md:col-span-3 p-4 bg-neutral-800">
         <slot />
       </section>
-      <aside class="w-full md:flex-1 p-4">
+      <aside class="p-4">
         <Sidebar />
       </aside>
     </main>