refactor: adjust layout
This commit is contained in:
parent
44f78b7ac5
commit
d1b47f3056
6 changed files with 13 additions and 13 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue