Refactor typography styles across multiple pages to use CSS classes for consistency and maintainability
- Updated Participation.tsx to replace inline styles with class names for headings and paragraphs. - Refactored Preistraeger.tsx to utilize CSS classes for typography instead of inline styles. - Modified PreistraegerDetail.tsx to implement class-based styling for headings and text elements. - Adjusted Press.tsx to standardize typography using CSS classes, enhancing readability and maintainability.
This commit is contained in:
syntaxbullet
@@ -200,9 +200,11 @@ export default function Preistraeger() {
|
||||
<div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 2, background: 'linear-gradient(to right, #EFBF04, rgba(239,191,4,0.3), transparent)' }} />
|
||||
</div>
|
||||
|
||||
{/* Breadcrumb */}
|
||||
{/* Page title */}
|
||||
<div style={{ background: '#fff', borderBottom: `1px solid ${BORDER}`, padding: isMobile ? '18px 24px' : '18px 80px' }}>
|
||||
<span style={{ fontFamily: FF, fontSize: 16, color: GOLD, fontWeight: 600, letterSpacing: '0.04em' }}>{fallbackText(breadcrumb.label, preistraegerIndexContent.breadcrumb.label)}</span>
|
||||
<h1 className="type-card-title text-role-brand-light" style={{ margin: 0 }}>
|
||||
{fallbackText(breadcrumb.label, preistraegerIndexContent.breadcrumb.label)}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Year Filter Section */}
|
||||
@@ -284,7 +286,7 @@ export default function Preistraeger() {
|
||||
|
||||
{/* Bottom CTA */}
|
||||
<div style={{ padding: isMobile ? '48px 24px' : '64px 80px', borderTop: `1px solid ${BORDER}`, textAlign: 'center' }}>
|
||||
<p style={{ fontFamily: FF, fontSize: 17, color: GRAY, marginBottom: 20 }}>{fallbackText(cta.text, preistraegerIndexContent.cta.text)}</p>
|
||||
<p className="type-body text-role-secondary" style={{ marginBottom: 20 }}>{fallbackText(cta.text, preistraegerIndexContent.cta.text)}</p>
|
||||
<Link
|
||||
to={fallbackText(cta.primaryCta?.url, preistraegerIndexContent.cta.primaryCta.url)}
|
||||
style={{
|
||||
@@ -306,13 +308,13 @@ export default function Preistraeger() {
|
||||
function SectionIntro({ copy, isMobile }: { copy: typeof preistraegerIndexContent.winners; isMobile: boolean }) {
|
||||
return (
|
||||
<div style={{ padding: isMobile ? '40px 24px 22px' : '56px 80px 28px', maxWidth: 900 }}>
|
||||
<span style={{ color: GOLD, fontFamily: FF, fontSize: 12, fontWeight: 800, textTransform: 'uppercase', letterSpacing: 0 }}>
|
||||
<span className="type-eyebrow text-role-brand-light" style={{ textTransform: 'uppercase' }}>
|
||||
{fallbackText(copy.eyebrow, preistraegerIndexContent.winners.eyebrow)}
|
||||
</span>
|
||||
<h2 style={{ color: NAVY, fontFamily: FF, fontSize: isMobile ? 28 : 42, fontWeight: 900, lineHeight: 1.05, margin: '10px 0 12px', textTransform: 'uppercase', letterSpacing: 0 }}>
|
||||
<h2 className="type-section-title text-role-heading" style={{ margin: '10px 0 12px', textTransform: 'uppercase' }}>
|
||||
{fallbackText(copy.heading, preistraegerIndexContent.winners.heading)}
|
||||
</h2>
|
||||
<p style={{ color: GRAY, fontFamily: FF, fontSize: 17, lineHeight: 1.6, margin: 0, maxWidth: 680 }}>
|
||||
<p className="type-body text-role-secondary" style={{ margin: 0, maxWidth: 680 }}>
|
||||
{fallbackText(copy.description, preistraegerIndexContent.winners.description)}
|
||||
</p>
|
||||
</div>
|
||||
@@ -333,13 +335,13 @@ function GoldeneBavariaSection({
|
||||
return (
|
||||
<section style={{ background: NAVY, color: '#fff', borderTop: `1px solid ${BORDER}` }}>
|
||||
<div style={{ padding: isMobile ? '44px 24px 26px' : '64px 80px 34px', maxWidth: 980 }}>
|
||||
<span style={{ color: GOLD, fontFamily: FF, fontSize: 12, fontWeight: 800, textTransform: 'uppercase', letterSpacing: 0 }}>
|
||||
<span className="type-eyebrow text-role-inverse" style={{ color: GOLD, textTransform: 'uppercase' }}>
|
||||
{fallbackText(copy.eyebrow, preistraegerIndexContent.goldeneBavaria.eyebrow)}
|
||||
</span>
|
||||
<h2 style={{ color: '#fff', fontFamily: FF, fontSize: isMobile ? 30 : 48, fontWeight: 900, lineHeight: 1.02, margin: '10px 0 14px', textTransform: 'uppercase', letterSpacing: 0 }}>
|
||||
<h2 className="type-section-title text-role-inverse" style={{ margin: '10px 0 14px', textTransform: 'uppercase' }}>
|
||||
{fallbackText(copy.heading, preistraegerIndexContent.goldeneBavaria.heading)}
|
||||
</h2>
|
||||
<p style={{ color: 'rgba(255,255,255,0.74)', fontFamily: FF, fontSize: 18, lineHeight: 1.6, margin: 0, maxWidth: 760 }}>
|
||||
<p className="type-body text-role-inverse-secondary" style={{ margin: 0, maxWidth: 760 }}>
|
||||
{fallbackText(copy.description, preistraegerIndexContent.goldeneBavaria.description)}
|
||||
</p>
|
||||
</div>
|
||||
@@ -381,13 +383,13 @@ function GoldeneBavariaCard({ winner, rank, hoverLabel }: { winner: Winner; rank
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ padding: isMobile ? '20px' : '24px' }}>
|
||||
<span style={{ color: GOLD, fontFamily: FF, fontSize: 12, fontWeight: 800, textTransform: 'uppercase', letterSpacing: 0 }}>
|
||||
<span className="type-eyebrow text-role-brand-light" style={{ textTransform: 'uppercase' }}>
|
||||
{winner.year} · {winner.category}
|
||||
</span>
|
||||
<h3 style={{ color: NAVY, fontFamily: FF, fontSize: isMobile ? 23 : 26, fontWeight: 900, lineHeight: 1.12, margin: '10px 0 10px', overflowWrap: 'anywhere' }}>
|
||||
<h3 className="type-card-title text-role-heading" style={{ margin: '10px 0 10px', overflowWrap: 'anywhere' }}>
|
||||
{winner.name}
|
||||
</h3>
|
||||
<p style={{ color: GRAY, fontFamily: FF, fontSize: 15, lineHeight: 1.55, margin: 0, overflowWrap: 'anywhere' }}>
|
||||
<p className="type-small text-role-secondary" style={{ margin: 0, overflowWrap: 'anywhere' }}>
|
||||
{winner.shortDesc}
|
||||
</p>
|
||||
<span style={{ marginTop: 18, display: 'inline-flex', alignItems: 'center', gap: 7, color: NAVY, fontFamily: FF, fontSize: 14, fontWeight: 800, textTransform: 'uppercase', letterSpacing: 0 }}>
|
||||
@@ -428,10 +430,10 @@ function WinnerCard({ winner, hoverLabel }: { winner: Winner; hoverLabel: string
|
||||
{winner.year} · {winner.type}
|
||||
</span>
|
||||
</div>
|
||||
<h3 style={{ fontFamily: FF, fontSize: 18, fontWeight: 700, color: '#fff', margin: 0, lineHeight: 1.3, textShadow: '0 1px 4px rgba(0,0,0,0.5)' }}>
|
||||
<h3 className="type-card-title text-role-inverse" style={{ margin: 0, textShadow: '0 1px 4px rgba(0,0,0,0.5)' }}>
|
||||
{winner.name}
|
||||
</h3>
|
||||
<p style={{ fontFamily: FF, fontSize: 16, color: 'rgba(255,255,255,0.82)', margin: '4px 0 0', lineHeight: 1.3 }}>
|
||||
<p className="type-small text-role-inverse-secondary" style={{ margin: '4px 0 0' }}>
|
||||
{winner.category}
|
||||
</p>
|
||||
|
||||
@@ -491,14 +493,7 @@ function SimpleWinnerCard({ winner }: { winner: Winner }) {
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', marginBottom: 18 }}>
|
||||
{winnerMeta ? (
|
||||
<span style={{
|
||||
color: GOLD,
|
||||
fontFamily: FF,
|
||||
fontSize: 12,
|
||||
fontWeight: 700,
|
||||
letterSpacing: '0.12em',
|
||||
textTransform: 'uppercase',
|
||||
}}>
|
||||
<span className="type-eyebrow text-role-brand-light" style={{ textTransform: 'uppercase' }}>
|
||||
{winnerMeta}
|
||||
</span>
|
||||
) : null}
|
||||
@@ -517,12 +512,7 @@ function SimpleWinnerCard({ winner }: { winner: Winner }) {
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<h3 style={{
|
||||
color: NAVY,
|
||||
fontFamily: FF,
|
||||
fontSize: isMobile ? 20 : 22,
|
||||
fontWeight: 700,
|
||||
lineHeight: 1.18,
|
||||
<h3 className="type-card-title text-role-heading" style={{
|
||||
margin: 0,
|
||||
overflowWrap: 'anywhere',
|
||||
}}>
|
||||
@@ -530,11 +520,7 @@ function SimpleWinnerCard({ winner }: { winner: Winner }) {
|
||||
</h3>
|
||||
|
||||
{hasDescription ? (
|
||||
<p style={{
|
||||
color: GRAY,
|
||||
fontFamily: FF,
|
||||
fontSize: 15,
|
||||
lineHeight: 1.55,
|
||||
<p className="type-small text-role-secondary" style={{
|
||||
margin: '16px 0 0',
|
||||
overflowWrap: 'anywhere',
|
||||
}}>
|
||||
|
||||
Reference in New Issue
Block a user