feat(web): give album-fallback SVG a card-shaped frame

The placeholder was a bare beamed-pair glyph in solid black on a
transparent ground — invisible against the dark Minstrel surface and
without any visual edge to anchor the card layout. Real album covers
have content that defines their boundary; the placeholder needs the
same affordance to keep the layout grid feeling intentional.

Wraps the user-supplied glyph in:
- iron-tone (#1E2228) fill matching the card surface so the placeholder
  reads as a card without artwork rather than a hole in the page;
- pewter (#3F4651) border on the inside edge, consistent with how real
  cards feel framed;
- ash-tone (#9C9A92) recolor + 0.7x downscale + recenter so the glyph
  sits comfortably inside the border without clipping.

Hex hard-coded because static SVGs can't resolve CSS variables;
matches the FabledSword tokens exactly.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-02 00:25:27 -04:00
parent c265b871c3
commit 1c39001482
+20 -9
View File
@@ -1,9 +1,20 @@
<?xml version="1.0" encoding="windows-1252"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve">
<g>
<g>
<path d="M503.319,5.939c-5.506-4.705-12.783-6.767-19.958-5.635L169.555,49.852c-12.04,1.901-20.909,12.28-20.909,24.47v99.097 v156.903H99.097C44.455,330.323,0,371.073,0,421.161C0,471.25,44.455,512,99.097,512c54.642,0,99.097-40.75,99.097-90.839v-66.065 V194.588l264.258-41.725v136.169h-49.548c-54.642,0-99.097,40.75-99.097,90.839s44.455,90.839,99.097,90.839 S512,429.959,512,379.871v-66.065V123.871V24.774C512,17.529,508.827,10.646,503.319,5.939z"/>
</g>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<!--
Album cover fallback. Used by AlbumCard, CompactTrackCard, and the
PlayerBar's onerror handler when an album has no cover_art_path. Colors
are FabledSword tokens hard-coded as hex (data-URL / static SVGs can't
resolve CSS variables): iron background to match the card surface, a
pewter border to give the placeholder a visible edge consistent with
real album art, and an ash-tone beamed-pair glyph centered inside.
Beamed-pair path is from SVG Repo (svgrepo.com), CC0; rescaled and
recolored from the original solid-black 800px source.
-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<rect width="512" height="512" fill="#1E2228"/>
<rect x="6" y="6" width="500" height="500"
fill="none" stroke="#3F4651" stroke-width="10"/>
<g fill="#9C9A92" transform="translate(76.8 76.8) scale(0.7)">
<path d="M503.319,5.939c-5.506-4.705-12.783-6.767-19.958-5.635L169.555,49.852c-12.04,1.901-20.909,12.28-20.909,24.47v99.097 v156.903H99.097C44.455,330.323,0,371.073,0,421.161C0,471.25,44.455,512,99.097,512c54.642,0,99.097-40.75,99.097-90.839v-66.065 V194.588l264.258-41.725v136.169h-49.548c-54.642,0-99.097,40.75-99.097,90.839s44.455,90.839,99.097,90.839 S512,429.959,512,379.871v-66.065V123.871V24.774C512,17.529,508.827,10.646,503.319,5.939z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 809 B

After

Width:  |  Height:  |  Size: 1.3 KiB