mirror of
https://github.com/LucasKalil-Programador/world-2026-hub.git
synced 2026-07-04 17:41:28 -03:00
refactor(stadiums): clean up SVG illustrations and fix image aspect ratio
- 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:
parent
da8a8838c6
commit
e94aa09ce5
17 changed files with 615 additions and 193 deletions
|
|
@ -1,15 +1,47 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 225" role="img" aria-label="Mercedes-Benz Stadium">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="44 136 212 172" role="img" aria-label="Mercedes-Benz Stadium, Atlanta, 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">Mercedes-Benz Stadium</text>
|
||||
<text x="200" y="211" font-family="Arial, sans-serif" font-size="12" fill="#cfd8dc" text-anchor="middle">Atlanta</text>
|
||||
<g>
|
||||
<ellipse cx="150" cy="222" rx="96" ry="76" class="struct"/>
|
||||
<path d="M238.4,192.3 L238.4,251.7 L177.1,229.8 Z" class="canopy"/>
|
||||
<path d="M238.4,192.3 L238.4,251.7 L177.1,229.8 Z" class="thin"/>
|
||||
<path d="M239.0,250.5 L186.0,292.5 L162.2,242.7 Z" class="canopy"/>
|
||||
<path d="M239.0,250.5 L186.0,292.5 L162.2,242.7 Z" class="thin"/>
|
||||
<path d="M187.5,292.0 L112.5,292.0 L140.1,243.4 Z" class="canopy"/>
|
||||
<path d="M187.5,292.0 L112.5,292.0 L140.1,243.4 Z" class="thin"/>
|
||||
<path d="M114.0,292.5 L61.0,250.5 L123.9,231.6 Z" class="canopy"/>
|
||||
<path d="M114.0,292.5 L61.0,250.5 L123.9,231.6 Z" class="thin"/>
|
||||
<path d="M61.6,251.7 L61.6,192.3 L122.9,214.2 Z" class="canopy"/>
|
||||
<path d="M61.6,251.7 L61.6,192.3 L122.9,214.2 Z" class="thin"/>
|
||||
<path d="M61.0,193.5 L114.0,151.5 L137.8,201.3 Z" class="canopy"/>
|
||||
<path d="M61.0,193.5 L114.0,151.5 L137.8,201.3 Z" class="thin"/>
|
||||
<path d="M112.5,152.0 L187.5,152.0 L159.9,200.6 Z" class="canopy"/>
|
||||
<path d="M112.5,152.0 L187.5,152.0 L159.9,200.6 Z" class="thin"/>
|
||||
<path d="M186.0,151.5 L239.0,193.5 L176.1,212.4 Z" class="canopy"/>
|
||||
<path d="M186.0,151.5 L239.0,193.5 L176.1,212.4 Z" class="thin"/>
|
||||
<ellipse cx="150" cy="222" rx="30" ry="22" class="void"/>
|
||||
<rect x="125" y="208" width="50" height="28" rx="7" class="pitch"/>
|
||||
<line x1="150" y1="208" x2="150" y2="236" class="pline"/>
|
||||
<ellipse cx="150" cy="222" rx="32" ry="22" class="accs"/>
|
||||
<ellipse cx="150" cy="222" rx="25" ry="16" class="thin"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1 KiB After Width: | Height: | Size: 2.5 KiB |
Loading…
Add table
Add a link
Reference in a new issue