From 356098496d654de24abe45b775d335624c7f560f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= Date: Wed, 29 Apr 2026 10:37:38 +0200 Subject: [PATCH] feat: animate header logo with counter-rotating rings, static in footer Co-Authored-By: Claude Sonnet 4.6 --- assets/css/main.css | 16 +++++ layouts/partials/footer.html | 2 +- layouts/partials/logo.html | 133 +++++++++++++++++++---------------- 3 files changed, 88 insertions(+), 63 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index fc9dcbb..d631066 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -624,3 +624,19 @@ footer nav a.label:hover svg { @keyframes page-in { from { opacity: 0; transform: translateY(14px); } } + +/* ── Logo bloom animation ──────────────────────────────────── */ +.logo-r1, .logo-r2, .logo-r3 { + transform-box: fill-box; + transform-origin: 50% 50%; +} +.logo-bloom:not(.logo-static) .logo-r1 { animation: logo-cw 30s linear infinite; } +.logo-bloom:not(.logo-static) .logo-r2 { animation: logo-ccw 20s linear infinite; } +.logo-bloom:not(.logo-static) .logo-r3 { animation: logo-cw 12s linear infinite; } + +.logo-bloom:not(.logo-static):hover .logo-r1 { animation-duration: 3s; } +.logo-bloom:not(.logo-static):hover .logo-r2 { animation-duration: 2s; } +.logo-bloom:not(.logo-static):hover .logo-r3 { animation-duration: 1.2s; } + +@keyframes logo-cw { to { transform: rotate(360deg); } } +@keyframes logo-ccw { to { transform: rotate(-360deg); } } diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 97ae9ba..c240035 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -13,7 +13,7 @@
- {{- partial "logo.html" (dict "id" "footer" "class" "h-10 w-auto") -}} + {{- partial "logo.html" (dict "id" "footer" "class" "h-10 w-auto logo-static") -}}

{{ .Site.Params.description }}

diff --git a/layouts/partials/logo.html b/layouts/partials/logo.html index 3d1b543..becc87e 100644 --- a/layouts/partials/logo.html +++ b/layouts/partials/logo.html @@ -5,66 +5,75 @@ class — CSS classes on the element (default: "h-9 w-auto") */ -}} {{- $class := .class | default "h-9 w-auto" -}} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +