feat(blog): improve blog overview teasers layout
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 19s
Build & Deploy / 🧪 QA (push) Successful in 5m42s
Build & Deploy / 🏗️ Build (push) Failing after 31s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🧪 Smoke Test (push) Has been skipped
Build & Deploy / ⚡ Lighthouse (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 3s

Increases the line clamps for title and excerpt in the blog

overview grid. Also parses the markdown content to

auto-generate a fallback excerpt if omitted in frontmatter.
This commit is contained in:
2026-02-21 21:45:30 +01:00
parent 36455ef479
commit f696e55600
2 changed files with 40 additions and 6 deletions

View File

@@ -94,7 +94,7 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
<Heading level={1} className="text-white mb-4 md:mb-8">
{featuredPost.frontmatter.title}
</Heading>
<p className="text-base md:text-xl text-white/80 mb-6 md:mb-10 line-clamp-2 md:line-clamp-2 max-w-2xl">
<p className="text-base md:text-xl text-white/80 mb-6 md:mb-10 line-clamp-3 md:line-clamp-4 max-w-2xl">
{featuredPost.frontmatter.excerpt}
</p>
<Button
@@ -197,10 +197,10 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
</span>
)}
</div>
<h3 className="text-lg md:text-2xl font-bold text-primary mb-3 md:mb-6 group-hover:text-accent-dark transition-colors line-clamp-2 leading-tight">
<h3 className="text-lg md:text-2xl font-bold text-primary mb-3 md:mb-6 group-hover:text-accent-dark transition-colors line-clamp-3 md:line-clamp-4 leading-tight">
{post.frontmatter.title}
</h3>
<p className="text-text-secondary text-sm md:text-lg line-clamp-2 md:line-clamp-3 mb-4 md:mb-8 leading-relaxed">
<p className="text-text-secondary text-sm md:text-lg line-clamp-3 md:line-clamp-4 mb-4 md:mb-8 leading-relaxed">
{post.frontmatter.excerpt}
</p>
<div className="mt-auto pt-4 md:pt-8 border-t border-neutral-medium flex items-center justify-between">