pushes on tangled
sites.wisp.place/zzstoatzz.io/punch
fun
tangled
credits: drop source-code text link; harden badge wrap on narrow screens
dolly icon top-right is the source link now. stack badges get
white-space:nowrap + flex:0 0 auto so they never break mid-domain,
and a sub-380px media query shrinks the font slightly so `typeahead.waow.tech`
fits without spilling past the cabinet edge.
Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com>
+14
-3
-3
public/index.html
-3
public/index.html
···
51
51
<span class="blink">▸</span>
52
52
git pushes per account, across all of tangled.
53
53
</p>
54
-
<p class="credits">
55
-
<a href="https://tangled.org/zzstoatzz.io/punch" target="_blank" rel="noopener">source code →</a>
56
-
</p>
57
54
<p class="credits built-with">
58
55
<span class="built-lbl">built with</span>
59
56
<a class="stack-badge badge-teal" href="https://wisp.place" target="_blank" rel="noopener">wisp.place</a>
+14
public/style.css
+14
public/style.css
···
658
658
text-transform: lowercase;
659
659
text-decoration: none !important;
660
660
border-bottom: none !important;
661
+
white-space: nowrap; /* keep the domain intact — never break inside */
662
+
flex: 0 0 auto; /* badge stays its natural width; parent wraps it to next line */
661
663
box-shadow:
662
664
3px 3px 0 var(--btn-shadow),
663
665
inset 2px 2px 0 color-mix(in srgb, var(--surface-hi) 60%, transparent),
664
666
inset -2px -2px 0 color-mix(in srgb, var(--bg-deep) 60%, transparent);
665
667
transition: transform 0.08s, box-shadow 0.08s;
666
668
line-height: 1;
669
+
}
670
+
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) {
675
+
.stack-badge {
676
+
font-size: 8px;
677
+
padding: 3px 6px 2px;
678
+
letter-spacing: 0.02em;
679
+
}
680
+
.built-lbl { font-size: 8px; }
667
681
}
668
682
669
683
.stack-badge:hover {