8e0830f046
Replaces the emoji glyphs (💬🛡️💸🎮🧰🎧⚙️✨) in the category grid with dedicated SVG icons under /static/icons/cat-<slug>.svg, following the same visual family as the sibling .x marks (theseus, sirius, ariadne, pithos, aegis): 12-radius dark square + acid-green mark, legible at 16 px tab-icon size and 40 px grid size. Designs chosen to not blur with the Silent Mode product icons also rendered on the site: cat-communication speech bubble + three dots (not an envelope — too close to the Hephaestus letter imagery elsewhere) cat-privacy shield + checkmark (DISTINCT from aegis.svg's shield+chevron, so category + listing don't collide) cat-wallets stacked coins + B serif (hints at the BCH coin) cat-games stylised controller (d-pad + two action buttons) cat-devtools code brackets < / > (reads as "code" at 16 px where a wrench/hammer blurs with the Utilities gear) cat-media play triangle in a circle (equally "player" and "publish/broadcast") cat-utilities gear with hollow centre (less visual weight than the Media circle; the two side-by-side don't crowd each other) cat-other sparkle burst + two smaller sparkles (sibling of sirius.svg's 4-point mark, extras so the two don't look identical) pages-browse.js: CATEGORIES[].icon is now the path to the SVG, not an emoji string. The three places the icon rendered — grid card, category hero, and the inline chip on listing detail — all now use <img> at the size they need (40, 56, 14 respectively). The CSS entry `.cat .ico` loses the font-size + grayscale (text styling) and gains width/height for the image plus a tiny hover rotation that matches the existing lift transform. Also: when a listing has no `icon` of its own, the detail page's icon slot now falls back to the category's SVG (centered + padded) instead of a plain 📦 emoji, so the detail hero always has a vector icon.
9 lines
712 B
XML
9 lines
712 B
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
|
<!-- Wallets & payments — stacked coins with a small notch to hint at the BCH 'B'. -->
|
|
<rect width="64" height="64" rx="12" fill="#0b0e14"/>
|
|
<ellipse cx="32" cy="20" rx="18" ry="6" fill="#d6ff3d"/>
|
|
<path d="M14 20 L14 44 Q 14 50 32 50 Q 50 50 50 44 L 50 20 Q 50 26 32 26 Q 14 26 14 20 Z" fill="#d6ff3d" opacity="0.5"/>
|
|
<ellipse cx="32" cy="32" rx="18" ry="6" fill="#d6ff3d"/>
|
|
<path d="M14 32 L14 44 Q 14 50 32 50 Q 50 50 50 44 L 50 32" fill="none" stroke="#d6ff3d" stroke-width="2.5" stroke-linejoin="round"/>
|
|
<text x="32" y="36" text-anchor="middle" font-family="serif" font-weight="700" font-size="10" fill="#0b0e14">B</text>
|
|
</svg>
|