From 1d5d9c0904d644bc5bc91de1777a8bb61033e752 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sat, 21 Feb 2026 20:12:26 +0100
Subject: [PATCH] feat: apply global fadeInUp animation to all page transitions

---
 assets/js/main.js | 8 ++++++++
 author.hbs        | 2 +-
 default.hbs       | 2 +-
 error-404.hbs     | 2 +-
 index.hbs         | 2 +-
 tag.hbs           | 2 +-
 6 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/assets/js/main.js b/assets/js/main.js
index a0d65ee..40676eb 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -20,6 +20,14 @@ document.addEventListener('DOMContentLoaded', () => {
     // Re-run animation and other setup when HTMX settles new content
     // Use document instead of document.body to persist across boosted navigation
     document.addEventListener('htmx:afterSettle', (event) => {
+        // Global page fade-in animation
+        const mainContent = document.getElementById('main-content');
+        if (mainContent) {
+            mainContent.classList.remove('animate-fadeInUp');
+            void mainContent.offsetWidth; // Force reflow to restart animation
+            mainContent.classList.add('animate-fadeInUp');
+        }
+
         // If the settled element is the posts-container or contains grid items
         const target = event.detail.target;
         if (target.id === 'posts-container' || target.querySelector('.post-grid-item')) {
diff --git a/author.hbs b/author.hbs
index eb2fccb..b1f1094 100644
--- a/author.hbs
+++ b/author.hbs
@@ -1,7 +1,7 @@
 {{!< default}}
 
 {{#author}}
-<header class="author-header relative w-full mb-12 animate-fadeInUp">
+<header class="author-header relative w-full mb-12">
     {{#if cover_image}}
         <div class="w-full h-64 md:h-96 relative overflow-hidden">
             <img class="w-full h-full object-cover opacity-40 grayscale hover:grayscale-0 transition-all duration-700" src="{{img_url cover_image size="xl"}}" alt="{{name}}'s cover image">
diff --git a/default.hbs b/default.hbs
index 4d128fb..d0a206c 100644
--- a/default.hbs
+++ b/default.hbs
@@ -59,7 +59,7 @@
     {{> header}}
     {{> scroll-top}}
 
-    <main id="main-content" class="flex-grow">
+    <main id="main-content" class="flex-grow animate-fadeInUp">
         {{{body}}}
     </main>
 
diff --git a/error-404.hbs b/error-404.hbs
index 4c0b73e..83c3dd8 100644
--- a/error-404.hbs
+++ b/error-404.hbs
@@ -1,6 +1,6 @@
 {{!< default}}
 
-<section class="container mx-auto px-4 py-20 md:py-32 flex flex-col items-center justify-center text-center animate-fadeInUp">
+<section class="container mx-auto px-4 py-20 md:py-32 flex flex-col items-center justify-center text-center">
     <h1 class="text-9xl font-bold tracking-tighter text-[var(--brand-primary)] opacity-20 mb-4">404</h1>
     <h2 class="text-4xl md:text-6xl font-bold mb-12">Page Not Found</h2>
     
diff --git a/index.hbs b/index.hbs
index 65d202f..8deba51 100644
--- a/index.hbs
+++ b/index.hbs
@@ -1,6 +1,6 @@
 {{!< default}}
 
-<header class="container mx-auto px-4 py-16 md:py-24 text-center animate-fadeInUp">
+<header class="container mx-auto px-4 py-16 md:py-24 text-center">
     <h1 class="text-6xl md:text-8xl font-bold tracking-tighter text-[var(--brand-primary)] mb-4">{{@site.title}}</h1>
     <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>
diff --git a/tag.hbs b/tag.hbs
index 99b1a3c..55c9426 100644
--- a/tag.hbs
+++ b/tag.hbs
@@ -1,7 +1,7 @@
 {{!< default}}
 
 {{#tag}}
-<header class="container mx-auto px-4 py-16 md:py-24 text-center animate-fadeInUp">
+<header class="container mx-auto px-4 py-16 md:py-24 text-center">
     <span class="text-xs uppercase tracking-[0.3em] text-[var(--text-tertiary)] mb-4 block">Tag</span>
     <h1 class="text-6xl md:text-8xl font-bold tracking-tighter text-[var(--brand-primary)] mb-4">{{name}}</h1>
     {{#if description}}