U+25AF renders inconsistently across mobile font stacks (missing-glyph boxes, emoji substitution); an inline outline keeps the mark identical everywhere and still follows --mint via currentColor.
- commit
- 49476aec743e175e38a7280dfebcba6dab20d915
- parent
- 65e8bfd6ee7c4e4bebac010c6d9d85ab4671e684
- author
- Dami <dami.etoile@gmail.com>
| M | website/ | 13 | ++++++++++++- |
| M | website/ | 6 | ++++-- |
@@ -89,7 +89,18 @@ export default function NodePlayground(): ReactNode {
8989 >9090 <div className="np-scene" aria-hidden="true">9191 <div className={`np-device ${stage === "enrolled" ? "is-on" : ""}`}>92- <span className="np-device-glyph">▯</span>92+ <svg className="np-device-glyph" viewBox="0 0 32 52">93+ <rect94+ x="2.5"95+ y="2.5"96+ width="27"97+ height="47"98+ rx="5"99+ fill="none"100+ stroke="currentColor"101+ strokeWidth="3"102+ />103+ </svg>93104 <span className="np-device-label">phone</span>94105 {stage === "enrolled" && (95106 <span className={`np-chip ${revoked ? "np-chip--dead" : ""}`}>@@ -98,9 +98,11 @@
9898 .landing .np-device.is-on {9999 opacity: 1;100100 }101+/* An SVG outline, not U+25AF — mobile fonts substitute that codepoint102+ inconsistently (missing-glyph boxes or emoji fallbacks). */101103 .landing .np-device-glyph {102- font-size: 4rem;103- line-height: 1;104+ width: 2rem;105+ height: 3.25rem;104106 color: var(--mint);105107 }106108 .landing .np-device-label,