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:
@@ -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 |
Reference in New Issue
Block a user