public/code-crispies
2
1
Fork 0
Code Issues Pull Requests Actions Activity

fix(animation): responsive bowl size - min 200px or 1/3 wrapper width

Browse Source
This commit is contained in:
Michael Czechowski
2026-01-14 17:01:21 +01:00
parent 4643477bf5
commit bfd2d6943f
1 changed files with 8 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/main.css
View File

@@ -723,33 +723,32 @@ kbd {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 50%; left: 50%;
margin-left: -100px; width: max(200px, 33.33%);
width: 200px; aspect-ratio: 1;
height: 200px;
background: url("/bowl.png") center/contain no-repeat; background: url("/bowl.png") center/contain no-repeat;
z-index: 5; z-index: 5;
pointer-events: none; pointer-events: none;
animation: bowl-peek 3s ease-in-out forwards; animation: bowl-peek 3s ease-in-out forwards;
transform: translateY(100%); transform: translateX(-50%) translateY(100%);
} }
@keyframes bowl-peek { @keyframes bowl-peek {
0% { 0% {
transform: translateY(100%); transform: translateX(-50%) translateY(100%);
opacity: 0; opacity: 0;
} }
20% { 20% {
transform: translateY(25%); transform: translateX(-50%) translateY(25%);
opacity: 1; opacity: 1;
} }
35% { 35% {
transform: translateY(30%); transform: translateX(-50%) translateY(30%);
} }
65% { 65% {
transform: translateY(28%); transform: translateX(-50%) translateY(28%);
} }
100% { 100% {
transform: translateY(100%); transform: translateX(-50%) translateY(100%);
opacity: 0; opacity: 0;
} }
} }