Lucas-Kalil/world-2026-hub
1
0
Fork 0
mirror of https://github.com/LucasKalil-Programador/world-2026-hub.git synced 2026-07-04 17:41:28 -03:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(stadiums): clean up SVG illustrations and fix image aspect ratio

Browse source 
- Remove card chrome (background rect, text duplicates, accent bars) from all 17 stadium SVGs
- Crop viewBox tightly to illustration (~10px padding) and remove fixed width/height attributes
- Update .stadium-img aspect ratio from 16/9 to 4/3 to match cropped SVG ratios and prevent aggressive object-fit clipping
This commit is contained in:
Lucas Kalil 2026-06-14 01:06:14 -03:00
parent da8a8838c6
commit e94aa09ce5
17 changed files with 615 additions and 193 deletions
Download patch file Download diff file Expand all files Collapse all files

47
assets/images/stadiums/levis.svg
View file

@ -1,15 +1,38 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 225" role="img" aria-label="Levi's Stadium">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="28 132 236 180" role="img" aria-label="Levi's Stadium, San Francisco Bay Area, USA">
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#10243b"/>
<stop offset="1" stop-color="#081421"/>
</linearGradient>
<style>
.struct{fill:none;stroke:#1E2A38;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.thin{fill:none;stroke:#1E2A38;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.hair{fill:none;stroke:#1E2A38;stroke-width:1;stroke-linecap:round;opacity:.55}
.concrete{fill:#E7EBF0}
.stands{fill:#CDD6E0}
.canopy{fill:#EDF0F4}
.void{fill:#FFFFFF}
.pitch{fill:#3D9A6A}
.pline{fill:none;stroke:#FFFFFF;stroke-width:1.5;opacity:.9}
.acc{fill:#E1593A}
.accs{fill:none;stroke:#E1593A;stroke-width:2}
.green{fill:#6FB98F}
.ribs{fill:none;stroke:#B7C0CC;stroke-width:16;stroke-dasharray:3 9}
.louver{fill:none;stroke:#B7C0CC;stroke-width:13;stroke-dasharray:2 5}
</style>
<pattern id="frit" width="9" height="9" patternUnits="userSpaceOnUse">
<circle cx="2" cy="2" r="0.9" fill="#C7D0DA"/>
</pattern>
</defs>
<rect width="400" height="225" fill="url(#bg)"/>
<ellipse cx="200" cy="100" rx="155" ry="68" fill="#0e3a24" stroke="#d4af37" stroke-width="2"/>
<rect x="135" y="62" width="130" height="76" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
<line x1="200" y1="62" x2="200" y2="138" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
<circle cx="200" cy="100" r="16" fill="none" stroke="#ffffff" stroke-opacity="0.5" stroke-width="2"/>
<text x="200" y="192" font-family="Arial, sans-serif" font-size="16" font-weight="700" fill="#ffffff" text-anchor="middle">Levi's Stadium</text>
<text x="200" y="211" font-family="Arial, sans-serif" font-size="12" fill="#cfd8dc" text-anchor="middle">San Francisco</text>
<g>
<ellipse cx="150" cy="222" rx="104" ry="80" class="stands"/>
<ellipse cx="150" cy="222" rx="104" ry="80" class="struct"/>
<ellipse cx="150" cy="222" rx="84" ry="61" class="concrete"/>
<ellipse cx="150" cy="222" rx="84" ry="61" class="thin"/>
<rect x="101" y="194" width="98" height="56" rx="10" class="pitch"/>
<line x1="150" y1="194" x2="150" y2="250" class="pline"/>
<rect x="101" y="212" width="12" height="20" class="pline"/>
<rect x="187" y="212" width="12" height="20" class="pline"/>
<circle cx="150" cy="222" r="9" class="accs"/>
<rect x="38" y="168" width="34" height="108" rx="8" class="concrete"/>
<rect x="38" y="168" width="34" height="108" rx="8" class="struct"/>
<rect x="44" y="176" width="22" height="92" rx="5" class="green"/>
<rect x="44" y="176" width="22" height="92" rx="5" class="thin"/>
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

Before After
Before After