refactor: adjust layout

This commit is contained in:
fiatcode 2026-02-17 19:28:52 +07:00
parent 44f78b7ac5
commit d1b47f3056
6 changed files with 13 additions and 13 deletions

View file

@ -15,7 +15,7 @@ const { id, date, title, description } = Astro.props;
<Link href={`/posts/${id}`}> <Link href={`/posts/${id}`}>
<h2 class="text-lg font-semibold">{title}</h2> <h2 class="text-lg font-semibold">{title}</h2>
</Link> </Link>
<div class="flex items-center text-neutral-500 text-sm"> <time class="block text-neutral-500 text-sm">
{ {
date.toLocaleDateString("en-US", { date.toLocaleDateString("en-US", {
year: "numeric", year: "numeric",
@ -23,6 +23,6 @@ const { id, date, title, description } = Astro.props;
day: "numeric", day: "numeric",
}) })
} }
</div> </time>
<p class="text-base text-neutral-400">{description}</p> <p class="text-base text-neutral-400">{description}</p>
</div> </div>

View file

@ -9,17 +9,17 @@ import Link from "@/components/Link.astro";
<a <a
href="/" href="/"
aria-label="Home" 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 >dhemasnurjaya</a
> >
</li> </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> <Link href="/posts" ariaLabel="Posts">posts</Link>
</li> </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> <Link href="/tags" ariaLabel="Tags">tags</Link>
</li> </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> <Link href="/search" ariaLabel="Search">search</Link>
</li> </li>
</ul> </ul>

View file

@ -8,7 +8,7 @@ import Facebook from "@/assets/images/facebook.svg";
import Mail from "@/assets/images/at-sign.svg"; import Mail from "@/assets/images/at-sign.svg";
--- ---
<div class="flex flex-col"> <div>
<PageTitle title="Hi, I'm Dhemas 👋" /> <PageTitle title="Hi, I'm Dhemas 👋" />
<p class="mb-4"> <p class="mb-4">
Cross-platform developer. Linux fan stuck on Windows. Craftsman at heart. Cross-platform developer. Linux fan stuck on Windows. Craftsman at heart.

View file

@ -1,5 +1,5 @@
<div <div
class="max-w-5xl mb-8 class="mb-8 max-w-none
prose prose-invert prose prose-invert
prose-p:text-neutral-300 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 prose-headings:pb-4 prose-headings:text-neutral-300 prose-headings:before:mr-2 prose-headings:before:text-neutral-500

View file

@ -3,10 +3,10 @@ import { getQuote } from "@/lib/quote";
const { quote, author } = await getQuote(); 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"> <blockquote class="border-l border-neutral-500 pl-4">
<p class="mb-2">{quote}</p> <p class="mb-2">{quote}</p>
<footer class="text-neutral-400 text-sm">{author}</footer> <footer class="text-neutral-400 text-sm">{author}</footer>
</blockquote> </blockquote>
<span class="text-neutral-500 py-4">---</span> <span class="block text-neutral-500 py-4">---</span>
</div> </div>

View file

@ -24,11 +24,11 @@ const { title, description } = Astro.props;
</head> </head>
<body class="max-w-5xl mx-auto flex flex-col font-default"> <body class="max-w-5xl mx-auto flex flex-col font-default">
<Header /> <Header />
<main class="flex flex-col md:flex-row"> <main class="grid grid-cols-1 md:grid-cols-4 gap-0 items-start">
<section class="w-full md:flex-3 p-4 bg-neutral-800"> <section class="md:col-span-3 p-4 bg-neutral-800">
<slot /> <slot />
</section> </section>
<aside class="w-full md:flex-1 p-4"> <aside class="p-4">
<Sidebar /> <Sidebar />
</aside> </aside>
</main> </main>