mirror of
https://github.com/tiennm99/ai-coding-workflow-labs.git
synced 2026-09-17 04:18:33 +00:00
tiennm99
bc85f0b690
Tile pop and merge @keyframes were setting transform: scale() which overrode transform: translate() used for tile positioning, causing tiles to jump to (0,0) during animation. Fix by using individual CSS properties: translate for positioning, scale in keyframes.
84 lines
1.6 KiB
CSS
84 lines
1.6 KiB
CSS
@import "tailwindcss";
|
|
|
|
@font-face {
|
|
font-family: 'Clear Sans';
|
|
src: url('/fonts/ClearSans-Regular.woff2') format('woff2');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Clear Sans';
|
|
src: url('/fonts/ClearSans-Bold.woff2') format('woff2');
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
:root {
|
|
--grid-gap: 15px;
|
|
--grid-padding: 15px;
|
|
--cell-size: 106.25px;
|
|
--container-size: 500px;
|
|
--title-size: 80px;
|
|
--score-value-size: 25px;
|
|
--overlay-msg-size: 60px;
|
|
--tile-font-1: 55px;
|
|
--tile-font-2: 45px;
|
|
--tile-font-3: 35px;
|
|
--tile-font-4: 25px;
|
|
--tile-font-5: 15px;
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
:root {
|
|
--grid-gap: 10px;
|
|
--grid-padding: 10px;
|
|
--cell-size: 57.5px;
|
|
--container-size: 280px;
|
|
--title-size: 45px;
|
|
--score-value-size: 16px;
|
|
--overlay-msg-size: 35px;
|
|
--tile-font-1: 30px;
|
|
--tile-font-2: 25px;
|
|
--tile-font-3: 20px;
|
|
--tile-font-4: 14px;
|
|
--tile-font-5: 10px;
|
|
}
|
|
}
|
|
|
|
body {
|
|
background: #faf8ef;
|
|
font-family: 'Clear Sans', 'Helvetica Neue', Arial, sans-serif;
|
|
margin: 0;
|
|
}
|
|
|
|
@keyframes tile-pop {
|
|
0% { scale: 0; }
|
|
100% { scale: 1; }
|
|
}
|
|
|
|
@keyframes overlay-fade {
|
|
0% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
@keyframes score-float {
|
|
0% { opacity: 1; transform: translateY(0); }
|
|
100% { opacity: 0; transform: translateY(-30px); }
|
|
}
|
|
|
|
@keyframes tile-merge {
|
|
0% { scale: 1; }
|
|
50% { scale: 1.2; }
|
|
100% { scale: 1; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
transition-duration: 0s !important;
|
|
animation-duration: 0s !important;
|
|
}
|
|
}
|