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 refined typography with Google Fonts and angular contrast
- Use Crimson Text for body: elegant, readable serif without flourish
- Use Libre Baskerville for headings: strong traditional typography
- Add .sharp-card variant with angular corners for design contrast
- Update button styling with sharper corners and better typography
- Increase base font size to 18px for better readability
- Mix rounded cloud cards with angular elements for visual interest
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
+37
-5
+37
-5
src/app.css
+37
-5
src/app.css
···
1
+
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&family=Libre+Baskerville:wght@400;700&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;
44
-
line-height: 1.6;
45
+
/* Typography */
46
+
--font-body: 'Crimson Text', Georgia, 'Times New Roman', serif;
47
+
--font-heading: 'Libre Baskerville', Baskerville, 'Times New Roman', serif;
48
+
49
+
font-family: var(--font-body);
50
+
font-size: 18px;
51
+
line-height: 1.7;
45
52
color: var(--color-text);
46
53
}
47
54
···
252
259
z-index: -1;
253
260
}
254
261
262
+
/* Sharp card variant for angular contrast */
263
+
.sharp-card {
264
+
background: linear-gradient(
265
+
135deg,
266
+
rgba(255, 255, 255, 0.95) 0%,
267
+
rgba(245, 248, 250, 0.92) 100%
268
+
);
269
+
border: 1px solid rgba(90, 122, 144, 0.12);
270
+
border-radius: 0.5rem;
271
+
box-shadow:
272
+
0 2px 8px rgba(90, 122, 144, 0.08),
273
+
0 4px 16px rgba(90, 122, 144, 0.04);
274
+
backdrop-filter: blur(8px);
275
+
position: relative;
276
+
}
277
+
255
278
a {
256
279
color: inherit;
257
280
text-decoration: none;
258
281
}
259
282
283
+
h1, h2, h3, h4, h5, h6 {
284
+
font-family: var(--font-heading);
285
+
font-weight: 700;
286
+
letter-spacing: -0.01em;
287
+
line-height: 1.3;
288
+
}
289
+
260
290
button {
261
-
font-family: inherit;
291
+
font-family: var(--font-heading);
292
+
font-size: 1rem;
262
293
}
263
294
264
295
/* Modal styles */
···
336
367
.modal-footer button {
337
368
padding: 0.75rem 1.5rem;
338
369
border: none;
339
-
border-radius: 0.5rem;
370
+
border-radius: 0.375rem;
340
371
cursor: pointer;
341
372
font-size: 1rem;
342
373
transition: all 0.2s;
343
-
font-weight: 500;
374
+
font-weight: 600;
375
+
letter-spacing: 0.01em;
344
376
}
345
377
346
378
.modal-footer .btn-primary {