pushes on tangled
sites.wisp.place/zzstoatzz.io/punch
fun
tangled
mobile: keep badges on one line + stop iOS zooming the search input
- .built-with hides the "built with" label and shrinks badges on
≤520px so wisp.place / relay.waow.tech / typeahead.waow.tech fit
in a single no-wrap row across every phone size.
- search input bumped to 16px (iOS Safari auto-zooms any input with
font-size < 16px on focus).
Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com>
+16
-9
+16
-9
public/style.css
+16
-9
public/style.css
···
427
427
inset 4px 4px 0 var(--bg-deep),
428
428
inset -3px -3px 0 var(--surface-hi);
429
429
font-family: "Silkscreen", monospace;
430
-
font-size: 11px;
430
+
/* 16px prevents iOS Safari auto-zooming on focus; anything smaller triggers it. */
431
+
font-size: 16px;
431
432
text-transform: uppercase;
432
433
letter-spacing: 0.08em;
433
434
min-height: 44px;
···
436
437
.search input::placeholder {
437
438
color: var(--text-fade);
438
439
font-family: "Silkscreen", monospace;
439
-
font-size: 11px;
440
+
font-size: 16px;
440
441
letter-spacing: 0.08em;
441
442
}
442
443
···
668
669
line-height: 1;
669
670
}
670
671
671
-
/* on the narrowest screens (~iPhone SE 1st-gen, older Androids), scale down
672
-
slightly so `typeahead.waow.tech` always has room without spilling past the
673
-
container edge. */
674
-
@media (max-width: 380px) {
672
+
/* keep all three badges on one line on mobile. two moves:
673
+
- drop the "built with" label (the badges themselves say what's in play)
674
+
- shrink badge font so the three fit across ~320-430px viewports. */
675
+
@media (max-width: 520px) {
676
+
.built-lbl { display: none; }
675
677
.stack-badge {
676
-
font-size: 8px;
677
-
padding: 3px 6px 2px;
678
+
font-size: 7px;
679
+
padding: 3px 5px 2px;
678
680
letter-spacing: 0.02em;
681
+
border-width: 1px;
682
+
box-shadow:
683
+
2px 2px 0 var(--btn-shadow),
684
+
inset 1px 1px 0 color-mix(in srgb, var(--surface-hi) 60%, transparent),
685
+
inset -1px -1px 0 color-mix(in srgb, var(--bg-deep) 60%, transparent);
679
686
}
680
-
.built-lbl { font-size: 8px; }
687
+
.built-with { gap: 5px; flex-wrap: nowrap; }
681
688
}
682
689
683
690
.stack-badge:hover {