extremely claude-assisted go game based on atproto! working on cleaning up and giving a more unique design, still has a bit of a slop vibe to it.
Refine drifting effect to only apply to game lists
- Remove global card drifting that affected all cards
- Apply subtle left/right shifts only to game-item elements
- Create staggered tiling effect in games lists
- Alternating pattern with 4 variations for visual variety
- Keeps main cards (header, login, etc) centered and stable
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
+12
-20
+12
-20
src/app.css
+12
-20
src/app.css
···
274
274
font-weight: 600;
275
275
}
276
276
277
-
/* Drifting cloud effect - alternating left/right shifts */
278
-
.cloud-card:nth-child(odd) {
279
-
transform: translateX(2rem);
280
-
}
281
-
282
-
.cloud-card:nth-child(even) {
283
-
transform: translateX(-2rem);
284
-
}
285
-
286
-
.cloud-card:nth-child(3n) {
277
+
/* Drifting cloud effect - only for game lists and repeated items */
278
+
.games-list .game-item:nth-child(odd),
279
+
.archive-list .game-item:nth-child(odd) {
287
280
transform: translateX(1rem);
288
281
}
289
282
290
-
/* For cards in containers, apply drift more subtly */
291
-
.container > *:nth-child(odd) .cloud-card,
292
-
.container > div:nth-child(odd) {
293
-
transform: translateX(1.5rem);
283
+
.games-list .game-item:nth-child(even),
284
+
.archive-list .game-item:nth-child(even) {
285
+
transform: translateX(-1rem);
294
286
}
295
287
296
-
.container > *:nth-child(even) .cloud-card,
297
-
.container > div:nth-child(even) {
298
-
transform: translateX(-1.5rem);
288
+
.games-list .game-item:nth-child(3n),
289
+
.archive-list .game-item:nth-child(3n) {
290
+
transform: translateX(0.5rem);
299
291
}
300
292
301
-
.container > *:nth-child(3n) .cloud-card,
302
-
.container > div:nth-child(3n) {
303
-
transform: translateX(0.75rem);
293
+
.games-list .game-item:nth-child(4n),
294
+
.archive-list .game-item:nth-child(4n) {
295
+
transform: translateX(-0.5rem);
304
296
}
305
297
306
298
/* Modal styles */