valknar/palina-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: update home grid to 3 columns and enhance heading prominence with animation
All checks were successful
Deploy Theme / deploy (push) Successful in 12s
Details

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-20 10:15:43 +01:00
parent df0a3cd24e
commit 041f46f551
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
index.hbs
View File

@@ -1,13 +1,13 @@
{{!< default}} {{!< default}}
<header class="container mx-auto px-4 py-8 text-center"> <header class="container mx-auto px-4 py-16 md:py-24 text-center animate-fadeInUp">
<h1 class="text-5xl font-bold tracking-tight text-[var(--text-primary)]">{{@site.title}}</h1> <h1 class="text-6xl md:text-8xl font-bold tracking-tighter text-[var(--brand-primary)] mb-4">{{@site.title}}</h1>
<p class="mt-2 text-xl text-[var(--text-secondary)]">{{@site.description}}</p> <p class="mt-4 text-xl md:text-2xl text-[var(--text-secondary)] max-w-2xl mx-auto font-serif italic italic opacity-90">{{@site.description}}</p>
</header> </header>
<div class="container mx-auto px-4"> <div class="container mx-auto px-4 pb-20">
{{#if posts}} {{#if posts}}
<div id="posts-container" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> <div id="posts-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
{{#foreach posts}} {{#foreach posts}}
{{> "post-card"}} {{> "post-card"}}
{{/foreach}} {{/foreach}}
@@ -25,9 +25,9 @@
{{/if}} {{/if}}
</div> </div>
<div id="loading-spinner" class="htmx-indicator text-center py-8"> <div id="loading-spinner" class="htmx-indicator text-center py-12">
<div class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-[var(--brand-primary)] border-t-transparent"></div> <div class="inline-block animate-spin rounded-full h-10 w-10 border-4 border-[var(--brand-primary)] border-t-transparent"></div>
<p class="text-[var(--text-secondary)] mt-2">Loading more posts...</p> <p class="text-[var(--text-secondary)] mt-4 font-medium tracking-wide">Loading more posts...</p>
</div> </div>
{{else}} {{else}}