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

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

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