prometheus: SVG icons for the 8 categories
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.
2026-10-22 21:30:13 +03:00
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
|
|
|
|
<!-- Developer tools — code brackets < / >. Reads at 16 px as "code" rather
|
|
|
|
|
than hammer/wrench shapes which blur with the Utilities gear. -->
|
|
|
|
|
<rect width="64" height="64" rx="12" fill="#0b0e14"/>
|
|
|
|
|
<path d="M22 20 L10 32 L22 44" fill="none" stroke="#d6ff3d" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
|
|
|
<path d="M42 20 L54 32 L42 44" fill="none" stroke="#d6ff3d" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
|
|
|
<path d="M37 16 L27 48" stroke="#d6ff3d" stroke-width="4" stroke-linecap="round"/>
|
|
|
|
|
</svg>
|
