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
@@ -96,7 +96,7 @@ export default function BlogDetail() {
|
||||
if (!article) {
|
||||
return (
|
||||
<div style={{ minHeight: '60vh', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 24, padding: '80px 24px', background: PAGE_BG }}>
|
||||
<h2 style={{ fontFamily: FF, fontSize: '2rem', fontWeight: 900, color: NAVY }}>{fallbackText(notFound.title, blogDetailContent.notFound.title)}</h2>
|
||||
<h2 className="type-section-title text-role-heading">{fallbackText(notFound.title, blogDetailContent.notFound.title)}</h2>
|
||||
<Link to={fallbackText(notFound.backUrl, blogDetailContent.notFound.backUrl)} style={{ fontFamily: FF, fontSize: 16, fontWeight: 700, color: NAVY, textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||
<ArrowLeft size={14} /> {fallbackText(notFound.backLabel, blogDetailContent.notFound.backLabel)}
|
||||
</Link>
|
||||
@@ -155,16 +155,11 @@ export default function BlogDetail() {
|
||||
</div>
|
||||
|
||||
<motion.h1
|
||||
className="type-page-title text-role-inverse"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
style={{
|
||||
fontFamily: FF,
|
||||
fontSize: isMobile ? 'clamp(1.6rem, 6vw, 2.4rem)' : 'clamp(2rem, 5vw, 3.8rem)',
|
||||
fontWeight: 900,
|
||||
color: '#fff',
|
||||
lineHeight: 1.05,
|
||||
letterSpacing: '-0.03em',
|
||||
textTransform: 'uppercase',
|
||||
margin: '0 0 28px',
|
||||
maxWidth: 760,
|
||||
@@ -189,14 +184,12 @@ export default function BlogDetail() {
|
||||
|
||||
{/* ── ARTICLE BODY ─────────────────────────────────────────────────── */}
|
||||
<section style={{ background: PAGE_BG, padding: isMobile ? '48px 0 0' : '80px 0 0' }}>
|
||||
<div style={{ maxWidth: 1100, margin: '0 auto', padding: isMobile ? '0 24px' : '0 80px', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 320px', gap: isMobile ? 40 : 80 }}>
|
||||
<div style={{ maxWidth: 1100, margin: '0 auto', padding: isMobile ? '0 24px' : '0 80px', display: 'grid', gridTemplateColumns: isMobile ? 'minmax(0, 1fr)' : 'minmax(0, 1fr) 320px', gap: isMobile ? 40 : 80 }}>
|
||||
|
||||
{/* LEFT – article text */}
|
||||
<article>
|
||||
<article style={{ minWidth: 0 }}>
|
||||
{/* Lead */}
|
||||
<p style={{
|
||||
fontFamily: FB, fontSize: 19, fontWeight: 300,
|
||||
color: INK, lineHeight: 1.75,
|
||||
<p className="type-lead text-role-body" style={{
|
||||
borderLeft: `4px solid ${GOLD}`, paddingLeft: 28,
|
||||
marginBottom: 56,
|
||||
}}>
|
||||
@@ -214,18 +207,15 @@ export default function BlogDetail() {
|
||||
style={{ marginBottom: 48 }}
|
||||
>
|
||||
{section.heading && (
|
||||
<h2 style={{
|
||||
fontFamily: FF, fontSize: 'clamp(1.1rem, 1.8vw, 1.35rem)',
|
||||
fontWeight: 900, color: NAVY,
|
||||
textTransform: 'uppercase', letterSpacing: '-0.01em',
|
||||
<h2 className="type-subtitle text-role-heading" style={{
|
||||
textTransform: 'uppercase',
|
||||
marginBottom: 16,
|
||||
}}>
|
||||
{section.heading}
|
||||
</h2>
|
||||
)}
|
||||
<p style={{
|
||||
fontFamily: FB, fontSize: 18,
|
||||
color: 'rgba(58,58,58,0.8)', lineHeight: 1.8, margin: 0,
|
||||
<p className="type-body text-role-body" style={{
|
||||
margin: 0,
|
||||
}}>
|
||||
{section.body}
|
||||
</p>
|
||||
@@ -249,7 +239,7 @@ export default function BlogDetail() {
|
||||
</article>
|
||||
|
||||
{/* RIGHT – sticky sidebar */}
|
||||
<aside>
|
||||
<aside style={{ minWidth: 0 }}>
|
||||
<div style={{ position: isMobile ? 'static' : 'sticky', top: isMobile ? undefined : 100 }}>
|
||||
|
||||
{/* Author card */}
|
||||
@@ -268,10 +258,10 @@ export default function BlogDetail() {
|
||||
{/* CTA */}
|
||||
<div style={{ background: '#fff', border: '1px solid rgba(3,9,58,0.1)', padding: '28px' }}>
|
||||
<div style={{ width: 32, height: 2, background: GOLD, marginBottom: 16 }} />
|
||||
<h4 style={{ fontFamily: FF, fontSize: 15, fontWeight: 900, color: NAVY, textTransform: 'uppercase', letterSpacing: '-0.01em', marginBottom: 12 }}>
|
||||
<h4 className="type-card-title text-role-heading" style={{ textTransform: 'uppercase', marginBottom: 12 }}>
|
||||
{fallbackText(sidebarCta.heading, blogDetailContent.sidebarCta.heading)}
|
||||
</h4>
|
||||
<p style={{ fontFamily: FB, fontSize: 16, color: 'rgba(58,58,58,0.55)', lineHeight: 1.7, marginBottom: 20 }}>
|
||||
<p className="type-small text-role-secondary" style={{ marginBottom: 20 }}>
|
||||
{fallbackText(sidebarCta.text, blogDetailContent.sidebarCta.text)}
|
||||
</p>
|
||||
{sidebarCtaIsExternal ? (
|
||||
@@ -358,11 +348,11 @@ function RelatedCard({ article, bordered, isMobile, readMoreLabel }: { article:
|
||||
<span style={{ fontFamily: FF, fontSize: 9, color: GOLD, textTransform: 'uppercase', letterSpacing: '0.22em', fontWeight: 700, marginBottom: 10 }}>
|
||||
{article.cat}
|
||||
</span>
|
||||
<h3 style={{ fontFamily: FF, fontSize: 'clamp(1rem, 1.4vw, 1.15rem)', fontWeight: 700, color: '#fff', textTransform: 'uppercase', letterSpacing: '-0.01em', lineHeight: 1.25, marginBottom: 12 }}>
|
||||
<h3 className="type-card-title text-role-inverse" style={{ textTransform: 'uppercase', marginBottom: 12 }}>
|
||||
{article.title}
|
||||
</h3>
|
||||
<div style={{ width: hovered ? 64 : 24, height: 1, background: 'rgba(239,191,4,0.5)', transition: 'width 0.35s', marginBottom: 14 }} />
|
||||
<p style={{ fontFamily: FB, fontSize: 16, color: 'rgba(255,255,255,0.38)', lineHeight: 1.7, flex: 1, marginBottom: 16 }}>
|
||||
<p className="type-small text-role-inverse-muted" style={{ flex: 1, marginBottom: 16 }}>
|
||||
{article.excerpt}
|
||||
</p>
|
||||
<span style={{ fontFamily: FF, fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.12em', color: GOLD, display: 'inline-flex', alignItems: 'center', gap: 5 }}>
|
||||
|
||||
Reference in New Issue
Block a user