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.
Add drifting cloud effect and rounder typography
- Use Nunito for headers: friendly rounded sans-serif
- Keep Inter for body: clean, readable sans-serif
- Add drifting effect with alternating translateX on cards
- Cards shift left/right to create floating cloud aesthetic
- Buttons use rounded heading font for consistency
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
+44
-2
src/app.css
+44
-2
src/app.css
···
1
+
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap');
2
+
1
3
* {
2
4
box-sizing: border-box;
3
5
margin: 0;
···
40
42
--color-link: var(--sky-slate);
41
43
--color-link-hover: var(--sky-apricot-dark);
42
44
43
-
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
45
+
/* Typography */
46
+
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
47
+
--font-heading: 'Nunito', 'Varela Round', 'Quicksand', sans-serif;
48
+
49
+
font-family: var(--font-body);
44
50
line-height: 1.6;
45
51
color: var(--color-text);
46
52
}
···
257
263
text-decoration: none;
258
264
}
259
265
266
+
h1, h2, h3, h4, h5, h6 {
267
+
font-family: var(--font-heading);
268
+
font-weight: 700;
269
+
letter-spacing: -0.01em;
270
+
}
271
+
260
272
button {
261
-
font-family: inherit;
273
+
font-family: var(--font-heading);
274
+
font-weight: 600;
275
+
}
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) {
287
+
transform: translateX(1rem);
288
+
}
289
+
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);
294
+
}
295
+
296
+
.container > *:nth-child(even) .cloud-card,
297
+
.container > div:nth-child(even) {
298
+
transform: translateX(-1.5rem);
299
+
}
300
+
301
+
.container > *:nth-child(3n) .cloud-card,
302
+
.container > div:nth-child(3n) {
303
+
transform: translateX(0.75rem);
262
304
}
263
305
264
306
/* Modal styles */