nvrl/narlblog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

VIM!!!

Browse Source
This commit is contained in:
Nils Pukropp
2026-03-25 16:02:35 +01:00
parent 587954b164
commit 34d7b42180
5 changed files with 114 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/pages/index.astro
View File

@@ -43,7 +43,7 @@ function formatSlug(slug: string) {
</p>
</section>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
<div class="flex flex-col space-y-6">
{error && (
<div class="glass p-4 md:p-6 text-red text-center border-red/20 text-sm md:text-base">
{error}
@@ -58,17 +58,17 @@ function formatSlug(slug: string) {
{posts.map((post) => (
<a href={`/posts/${post.slug}`} class="group block">
<article class="glass p-5 md:p-8 transition-all hover:scale-[1.01] hover:bg-surface0/80 active:scale-[0.99] h-full flex flex-col justify-between">
<div>
<h2 class="text-xl md:text-2xl font-bold text-lavender group-hover:text-mauve transition-colors mb-1 md:mb-2 line-clamp-2">
<article class="glass p-5 md:p-8 transition-all hover:scale-[1.01] hover:bg-surface0/80 active:scale-[0.99] flex flex-col md:flex-row justify-between md:items-center gap-4 md:gap-6">
<div class="flex-1">
<h2 class="text-xl md:text-3xl font-bold text-lavender group-hover:text-mauve transition-colors mb-2 md:mb-3">
{formatSlug(post.slug)}
</h2>
<p class="text-subtext0 text-sm md:text-base line-clamp-3">
Read more about {formatSlug(post.slug)}...
<p class="text-subtext1 text-sm md:text-base leading-relaxed line-clamp-3">
{post.excerpt || `Read more about ${formatSlug(post.slug)}...`}
</p>
</div>
<div class="text-mauve opacity-0 group-hover:opacity-100 transition-opacity self-end mt-4">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="md:w-6 md:h-6"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
<div class="text-mauve opacity-0 group-hover:opacity-100 transition-opacity self-end md:self-auto shrink-0 hidden md:block">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="md:w-8 md:h-8"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
</div>
</article>
</a>