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}`}>
|
<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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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.
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue