Local Administrator
d8ca8ff3ec
Two pointed bugs on the article detail page: 1) Width alignment. The right-rail Related Articles and Related Forum Posts boxes were free-stretching to the lg:col-span-4 width while the SidebarAdStack below them rendered ads at their natural 300px (items- end, right-aligned). The visual result: boxes overhung the ad column on both edges. Wrapped each sidebar in an inner `w-full lg:w-[300px] lg:ml-auto` div so every block (ads + boxes + newsletter) shares one 300px column on lg+ and stays full-width on mobile. Applied to both article templates (/articles/[slug] and /news/[slug]). 2) Placeholder rendered the old "AV BEAT" wordmark when an article had no featured image. Rebuilt article-placeholder.svg around the new brand mark — the A-monogram tile with the blue gradient (#2563EB→#1E3A8A) that matches AnimatedLogo + the rest of the brand-gradient system. Same 1200×630 dimensions so OG/feed embeds aren't affected. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
43 lines
2.1 KiB
XML
43 lines
2.1 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" preserveAspectRatio="xMidYMid slice">
|
|
<defs>
|
|
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stop-color="#0F172A"/>
|
|
<stop offset="50%" stop-color="#1E3A8A"/>
|
|
<stop offset="100%" stop-color="#0F172A"/>
|
|
</linearGradient>
|
|
<radialGradient id="glow" cx="50%" cy="50%" r="60%">
|
|
<stop offset="0%" stop-color="#1D4ED8" stop-opacity="0.18"/>
|
|
<stop offset="100%" stop-color="#1D4ED8" stop-opacity="0"/>
|
|
</radialGradient>
|
|
<linearGradient id="tile" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0%" stop-color="#2563EB"/>
|
|
<stop offset="100%" stop-color="#1E3A8A"/>
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<!-- Background gradient -->
|
|
<rect width="1200" height="630" fill="url(#bg)"/>
|
|
<rect width="1200" height="630" fill="url(#glow)"/>
|
|
|
|
<!-- Brand-mark tile + A monogram, centered. Same geometry as AnimatedLogo. -->
|
|
<g transform="translate(420 175)">
|
|
<!-- Rounded tile (280x280, rx 62) with the brand gradient -->
|
|
<rect x="0" y="0" width="280" height="280" rx="62" ry="62" fill="url(#tile)"/>
|
|
<!-- Faint inner ring so the tile reads on dark bg -->
|
|
<rect x="3" y="3" width="274" height="274" rx="59" ry="59" fill="none" stroke="rgba(255,255,255,0.20)" stroke-width="3"/>
|
|
<!-- A — two strokes: left+right legs and crossbar. Same path as AnimatedLogo at 4.4x scale. -->
|
|
<path d="M 62 220 L 140 60 L 218 220"
|
|
fill="none" stroke="#FFFFFF" stroke-width="22"
|
|
stroke-linecap="round" stroke-linejoin="round"/>
|
|
<path d="M 92 158 L 188 158"
|
|
fill="none" stroke="#FFFFFF" stroke-width="18"
|
|
stroke-linecap="round"/>
|
|
</g>
|
|
|
|
<!-- Wordmark + tagline -->
|
|
<g transform="translate(600 525)" text-anchor="middle" font-family="system-ui, -apple-system, 'Segoe UI', sans-serif">
|
|
<text y="0" font-size="56" font-weight="700" fill="#FFFFFF" letter-spacing="-0.012em">AV BEAT</text>
|
|
<text y="34" font-size="14" font-weight="500" fill="#CBD5E1" letter-spacing="0.22em">INSIDE THE FUTURE OF PRO AV</text>
|
|
</g>
|
|
</svg>
|