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

46
src/pages/blog.astro
View File

@ -6,32 +6,26 @@ 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="mb-12 dark:border-zinc-700/75" />
<hr class="dark:border-zinc-700/75" /> <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
<div class="grid grid-cols-1 gap-12 lg:grid-cols-2"> {
{ allBlogposts.map((post) => (
allBlogposts.map((post) => ( <div class="flex flex-col space-y-4">
<div> <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">
<h2 class="mb-2 text-lg font-bold sm:text-xl"> <a href={`/blog/${post.slug}`}>{post.data.title}</a>
<a </h2>
class="leading-7 text-zinc-800 hover:text-zinc-600 dark:text-zinc-200 dark:hover:text-zinc-400" <a
href={`/blog/${post.slug}`}> class="text-primary-600 hover:text-primary-400 dark:text-primary-400 dark:hover:text-primary-300 text-sm font-medium"
{post.data.title} href={`/blog/${post.slug}`}>
</a> Read more
</h2> </a>
<a </div>
class="text-sm font-medium text-primary-600 hover:text-primary-400 dark:text-primary-400 dark:hover:text-primary-300" ))
href={`/blog/${post.slug}`}> }
Read more
</a>
</div>
))
}
</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>