zzstoatzz.io
interactive intro to open social
at-me.zzstoatzz.io
improve mobile experience and visual polish
- upgrade font stack to modern system monospace fonts
- add responsive touch targets for all interactive elements
- improve button/link active states for mobile
- make detail panel full-width on mobile
- add tap highlight removal for better mobile feel
- increase padding on mobile for better usability
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
+72
-9
+72
-9
src/templates.rs
+72
-9
src/templates.rs
···
90
90
}}
91
91
92
92
body {{
93
-
font-family: 'Courier New', monospace;
93
+
font-family: ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Menlo, 'Courier New', monospace;
94
94
height: 100vh;
95
95
background: var(--bg);
96
96
color: var(--text);
97
97
overflow: hidden;
98
98
position: relative;
99
+
-webkit-font-smoothing: antialiased;
100
+
-moz-osx-font-smoothing: grayscale;
99
101
}}
100
102
101
103
.canvas {{
···
118
120
padding: 0.4rem 0.8rem;
119
121
transition: all 0.2s ease;
120
122
z-index: 100;
123
+
-webkit-tap-highlight-color: transparent;
124
+
cursor: pointer;
125
+
border-radius: 2px;
121
126
}}
122
127
123
-
.logout:hover {{
128
+
.logout:hover, .logout:active {{
124
129
background: var(--surface);
125
130
color: var(--text);
131
+
border-color: var(--text-light);
132
+
}}
133
+
134
+
@media (max-width: 768px) {{
135
+
.logout {{
136
+
padding: 0.6rem 1rem;
137
+
font-size: 0.75rem;
138
+
top: 1rem;
139
+
right: 1rem;
140
+
}}
126
141
}}
127
142
128
143
.info {{
···
144
159
-webkit-tap-highlight-color: transparent;
145
160
}}
146
161
147
-
.info:hover {{
162
+
.info:hover, .info:active {{
148
163
background: var(--surface);
149
164
color: var(--text);
165
+
border-color: var(--text-light);
150
166
}}
151
167
152
168
@media (max-width: 768px) {{
···
154
170
width: 40px;
155
171
height: 40px;
156
172
font-size: 0.85rem;
173
+
top: 1rem;
174
+
left: 1rem;
157
175
}}
158
176
}}
159
177
···
210
228
background: var(--bg);
211
229
border: 1px solid var(--border);
212
230
color: var(--text);
213
-
font-family: 'Courier New', monospace;
231
+
font-family: inherit;
214
232
font-size: 0.7rem;
215
233
cursor: pointer;
216
234
transition: all 0.2s ease;
235
+
-webkit-tap-highlight-color: transparent;
236
+
border-radius: 2px;
217
237
}}
218
238
219
-
.info-modal button:hover {{
239
+
.info-modal button:hover, .info-modal button:active {{
220
240
background: var(--surface-hover);
241
+
border-color: var(--text-light);
242
+
}}
243
+
244
+
@media (max-width: 768px) {{
245
+
.info-modal button {{
246
+
padding: 0.65rem 1.2rem;
247
+
font-size: 0.75rem;
248
+
}}
221
249
}}
222
250
223
251
.overlay {{
···
250
278
z-index: 10;
251
279
cursor: pointer;
252
280
transition: all 0.2s ease;
281
+
-webkit-tap-highlight-color: transparent;
253
282
}}
254
283
255
-
.identity:hover {{
284
+
.identity:hover, .identity:active {{
256
285
transform: scale(1.05);
257
286
border-color: var(--text);
258
287
box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
259
288
}}
260
289
290
+
@media (max-width: 768px) {{
291
+
.identity {{
292
+
width: 100px;
293
+
height: 100px;
294
+
}}
295
+
}}
296
+
261
297
.identity-label {{
262
298
font-size: 0.5rem;
263
299
color: var(--text-light);
···
335
371
transform: translateX(0);
336
372
}}
337
373
374
+
@media (max-width: 768px) {{
375
+
.detail-panel {{
376
+
width: 100%;
377
+
padding: 4rem 1.5rem 2rem;
378
+
border-right: none;
379
+
border-bottom: 2px solid var(--border);
380
+
}}
381
+
}}
382
+
338
383
.detail-panel h3 {{
339
384
margin-bottom: 0.75rem;
340
385
font-size: 0.85rem;
···
358
403
margin-bottom: 0.5rem;
359
404
transition: all 0.15s ease;
360
405
cursor: pointer;
406
+
-webkit-tap-highlight-color: transparent;
361
407
}}
362
408
363
-
.tree-item:hover {{
409
+
.tree-item:hover, .tree-item:active {{
364
410
background: var(--surface-hover);
365
411
border-color: var(--text-light);
366
412
}}
367
413
414
+
@media (max-width: 768px) {{
415
+
.tree-item {{
416
+
padding: 0.8rem 0.9rem;
417
+
font-size: 0.8rem;
418
+
}}
419
+
}}
420
+
368
421
.tree-item:last-child {{
369
422
margin-bottom: 0;
370
423
}}
···
419
472
background: var(--bg);
420
473
border: 1px solid var(--border);
421
474
color: var(--text);
422
-
font-family: 'Courier New', monospace;
475
+
font-family: inherit;
423
476
font-size: 0.65rem;
424
477
cursor: pointer;
425
478
width: 100%;
426
479
transition: all 0.15s ease;
480
+
-webkit-tap-highlight-color: transparent;
481
+
border-radius: 2px;
427
482
}}
428
483
429
-
.load-more:hover {{
484
+
.load-more:hover, .load-more:active {{
430
485
background: var(--surface-hover);
486
+
border-color: var(--text-light);
487
+
}}
488
+
489
+
@media (max-width: 768px) {{
490
+
.load-more {{
491
+
padding: 0.6rem 0.8rem;
492
+
font-size: 0.7rem;
493
+
}}
431
494
}}
432
495
433
496
.footer {{