From 3f1bd46deba588b46e1d3350f55f5b70ab6e0eb2 Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Wed, 14 Jan 2026 17:01:21 +0100 Subject: [PATCH] fix(animation): responsive bowl size - min 200px or 1/3 wrapper width --- src/main.css | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/src/main.css b/src/main.css index d967f69..2de928d 100644 --- a/src/main.css +++ b/src/main.css @@ -723,33 +723,32 @@ kbd { position: absolute; bottom: 0; left: 50%; - margin-left: -100px; - width: 200px; - height: 200px; + width: max(200px, 33.33%); + aspect-ratio: 1; background: url("/bowl.png") center/contain no-repeat; z-index: 5; pointer-events: none; animation: bowl-peek 3s ease-in-out forwards; - transform: translateY(100%); + transform: translateX(-50%) translateY(100%); } @keyframes bowl-peek { 0% { - transform: translateY(100%); + transform: translateX(-50%) translateY(100%); opacity: 0; } 20% { - transform: translateY(25%); + transform: translateX(-50%) translateY(25%); opacity: 1; } 35% { - transform: translateY(30%); + transform: translateX(-50%) translateY(30%); } 65% { - transform: translateY(28%); + transform: translateX(-50%) translateY(28%); } 100% { - transform: translateY(100%); + transform: translateX(-50%) translateY(100%); opacity: 0; } }