deployn/astro-deploy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): enhance spacing and layout

Browse Source
This commit is contained in:
Jewgeni Lewash 2024-03-04 06:27:43 +01:00
parent b6ad125d94
commit 6df0274c3a
2 changed files with 21 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/pages/blog.astro
View File

@ -6,25 +6,20 @@ const allBlogposts = await getCollection('blog');
--- ---
<BaseLayout> <BaseLayout>
<div class="container mx-auto space-y-12 px-4 py-16 lg:px-8 lg:py-32 xl:max-w-7xl"> <div class="container mx-auto px-4 py-16 sm:py-24 lg:px-8 lg:py-32 xl:max-w-7xl">
<div class="flex flex-col space-y-4"> <div class="mb-12 text-center text-zinc-900 dark:text-zinc-200">
<div class="text-center text-zinc-900 dark:text-zinc-200">
<Heading level={1}>Blog</Heading> <Heading level={1}>Blog</Heading>
</div> </div>
<hr class="dark:border-zinc-700/75" /> <hr class="mb-12 dark:border-zinc-700/75" />
<div class="grid grid-cols-1 gap-12 lg:grid-cols-2"> <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
{ {
allBlogposts.map((post) => ( allBlogposts.map((post) => (
<div> <div class="flex flex-col space-y-4">
<h2 class="mb-2 text-lg font-bold sm:text-xl"> <h2 class="text-lg font-semibold text-zinc-800 hover:text-zinc-600 dark:text-zinc-200 dark:hover:text-zinc-400 sm:text-xl">
<a <a href={`/blog/${post.slug}`}>{post.data.title}</a>
class="leading-7 text-zinc-800 hover:text-zinc-600 dark:text-zinc-200 dark:hover:text-zinc-400"
href={`/blog/${post.slug}`}>
{post.data.title}
</a>
</h2> </h2>
<a <a
class="text-sm font-medium text-primary-600 hover:text-primary-400 dark:text-primary-400 dark:hover:text-primary-300" class="text-primary-600 hover:text-primary-400 dark:text-primary-400 dark:hover:text-primary-300 text-sm font-medium"
href={`/blog/${post.slug}`}> href={`/blog/${post.slug}`}>
Read more Read more
</a> </a>
@ -33,5 +28,4 @@ const allBlogposts = await getCollection('blog');
} }
</div> </div>
</div> </div>
</div>
</BaseLayout> </BaseLayout>

3
src/pages/blog/[...slug].astro
View File

@ -23,8 +23,7 @@ const { title } = entry.data;
--- ---
<BaseLayout> <BaseLayout>
<div <div class="prose dark:prose-invert container mx-auto px-4 py-16 lg:px-8 lg:py-32 xl:max-w-7xl">
class="prose dark:prose-invert container mx-auto space-y-16 px-4 py-16 lg:px-8 lg:py-32 xl:max-w-7xl">
<h1 class="text-4xl font-bold">{title}</h1> <h1 class="text-4xl font-bold">{title}</h1>
<Content components={components} /> <Content components={components} />
</div> </div>