mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve blog design

Browse Source
This commit is contained in:
prototypa
2023-01-08 19:39:31 -05:00
parent b21275bc9e
commit 842b17f493
7 changed files with 23 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/blog/Headline.astro Normal file
View File

@ -0,0 +1,10 @@
---
const { title = await Astro.slots.render('default'), subtitle = await Astro.slots.render('subtitle') } = Astro.props;
---
<header class="mb-8 md:mb-16 text-center">
<h1 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter font-heading">
{title}
</h1>
{subtitle && <div class="mt-2 md:mt-3 text-lg md:text-xl max-w-2xl mx-auto" set:html={subtitle} />}
</header>

2
src/components/blog/List.astro
View File

@ -12,7 +12,7 @@ const { posts } = Astro.props;
<ul>
{
posts.map((post) => (
<li class="mb-10 md:mb-16">
<li class="mb-12 md:mb-20">
<Item post={post} />
</li>
))

6
src/components/blog/ListItem.astro
View File

@ -23,7 +23,7 @@ const link = !BLOG?.post?.disabled ? getPermalink(post.slug, 'post') : '';
{
image && (
<a class="relative block group" href={link ?? 'javascript:void(0)'}>
<div class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-80 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg">
<div class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-72 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg">
{image && (
<Picture
src={image}
@ -40,11 +40,11 @@ const link = !BLOG?.post?.disabled ? getPermalink(post.slug, 'post') : '';
}
<div>
<header>
<h2 class="text-xl sm:text-2xl font-bold leading-snug mb-2 font-heading">
<h2 class="text-xl sm:text-2xl font-bold leading-tight mb-2 font-heading">
{
link ? (
<a
class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
class="hover:text-primary-600 hover:underline hover:underline-offset-4 hover:decoration-1 hover:decoration-dotted transition ease-in duration-200"
href={link}
>
{post.title}

8
src/components/blog/Title.astro
View File

@ -1,8 +0,0 @@
---
---
<header>
<h1 class="text-center text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-8 md:mb-16 font-heading">
<slot />
</h1>
</header>