goose.art
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.
Apply rotation to all game sections and fix spacing consistency
- Add rotation effect to archive cards and waiting game items
- Fix inconsistent spacing in waiting-games section
- Update game-item-compact padding/gap to match game-item (1rem/1.25rem)
- All game lists now have consistent floating cloud rotation effect
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
+12
-7
+10
-5
src/app.css
+10
-5
src/app.css
···
276
276
277
277
/* Floating cloud effect - subtle rotation for natural off-kilter look */
278
278
.games-list .game-item:nth-child(odd),
279
-
.archive-list .game-item:nth-child(odd) {
279
+
.archive-grid .archive-card:nth-child(odd),
280
+
.waiting-games-grid .game-item-compact:nth-child(odd) {
280
281
transform: rotate(0.5deg);
281
282
}
282
283
283
284
.games-list .game-item:nth-child(even),
284
-
.archive-list .game-item:nth-child(even) {
285
+
.archive-grid .archive-card:nth-child(even),
286
+
.waiting-games-grid .game-item-compact:nth-child(even) {
285
287
transform: rotate(-0.5deg);
286
288
}
287
289
288
290
.games-list .game-item:nth-child(3n),
289
-
.archive-list .game-item:nth-child(3n) {
291
+
.archive-grid .archive-card:nth-child(3n),
292
+
.waiting-games-grid .game-item-compact:nth-child(3n) {
290
293
transform: rotate(1deg);
291
294
}
292
295
293
296
.games-list .game-item:nth-child(4n),
294
-
.archive-list .game-item:nth-child(4n) {
297
+
.archive-grid .archive-card:nth-child(4n),
298
+
.waiting-games-grid .game-item-compact:nth-child(4n) {
295
299
transform: rotate(-1deg);
296
300
}
297
301
298
302
.games-list .game-item:nth-child(5n),
299
-
.archive-list .game-item:nth-child(5n) {
303
+
.archive-grid .archive-card:nth-child(5n),
304
+
.waiting-games-grid .game-item-compact:nth-child(5n) {
300
305
transform: rotate(0.25deg);
301
306
}
302
307
+2
-2
src/routes/+page.svelte
+2
-2
src/routes/+page.svelte
···
1078
1078
display: flex;
1079
1079
flex-wrap: wrap;
1080
1080
align-items: center;
1081
-
gap: 0.5rem;
1082
-
padding: 0.875rem 1rem;
1081
+
gap: 1rem;
1082
+
padding: 1rem 1.25rem;
1083
1083
border: 1px solid var(--sky-blue-pale);
1084
1084
border-radius: 0.75rem;
1085
1085
background: linear-gradient(135deg, var(--sky-white) 0%, var(--sky-cloud) 100%);