Claude
526160721a
Address review: the SVG footer badge rendered too small, and the default hero should feature the Runic Gateway emblem rather than the moon. - Footer: drop powered-by.svg; render the emblem PNG beside a "Powered by Runic Gateway" label (left-justified, info text stays centered). - Default hero: brand.hero (and the client fallbacks) now default to the emblem PNG. The untouched default hero centers the square emblem behind the text as a medallion with a symmetric legibility overlay (per-layer background-size so the overlay stays full-bleed). BRAND_HERO still overrides. - Admin login / player shell / maintenance backgrounds center the emblem as a capped medallion instead of a cropped full-bleed cover. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XmHdsbnLzDMAVQkAoTQSBe
61 lines
2.3 KiB
JavaScript
61 lines
2.3 KiB
JavaScript
import { Link } from 'react-router-dom'
|
|
import MoonDot from '../../components/MoonDot.jsx'
|
|
import { useSite } from '../../contexts/SiteContext.jsx'
|
|
|
|
export default function Maintenance() {
|
|
const { settings, contactEmail, siteShortName, heroImage } = useSite()
|
|
const heroBg = `linear-gradient(180deg,rgba(11,15,20,0.55) 0%,rgba(11,15,20,0.74) 60%,rgba(11,15,20,0.92) 100%),url('${heroImage}')`
|
|
const message =
|
|
settings.maintenance_message ||
|
|
`${siteShortName} is in maintenance while we shape its towns, roads, and dungeons. The gates will open soon. Until then, follow along as the world wakes.`
|
|
|
|
return (
|
|
<main
|
|
style={{
|
|
minHeight: '100vh',
|
|
display: 'grid',
|
|
alignContent: 'center',
|
|
justifyItems: 'center',
|
|
textAlign: 'center',
|
|
padding: '80px max(18px,calc((100% - 760px)/2))',
|
|
overflow: 'hidden',
|
|
backgroundColor: 'var(--bg-deep)',
|
|
backgroundImage: heroBg,
|
|
backgroundPosition: 'center',
|
|
backgroundRepeat: 'no-repeat',
|
|
backgroundSize: 'min(60vh, 520px)',
|
|
}}
|
|
>
|
|
<div style={{ maxWidth: 640, textShadow: '0 2px 22px rgba(0,0,0,0.85)' }}>
|
|
<div style={{ marginBottom: 26 }}>
|
|
<MoonDot size={18} glow={0.6} />
|
|
</div>
|
|
<p className="eyebrow" style={{ color: '#c2d2e6', letterSpacing: '0.24em' }}>
|
|
Building beneath the moon
|
|
</p>
|
|
<h1
|
|
className="display"
|
|
style={{ margin: 0, fontSize: 'clamp(2.6rem,7vw,4.6rem)', lineHeight: 1.05, letterSpacing: '0.02em' }}
|
|
>
|
|
The world is not yet open
|
|
</h1>
|
|
<p style={{ maxWidth: 520, margin: '24px auto 0', color: '#cdd6e0', fontSize: '1.14rem' }}>{message}</p>
|
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'center', marginTop: 34 }}>
|
|
<Link to="/site/news" className="btn btn-primary">
|
|
Read the news
|
|
</Link>
|
|
<a href={`mailto:${contactEmail}`} className="btn btn-ghost">
|
|
Contact us
|
|
</a>
|
|
</div>
|
|
<p className="sans" style={{ margin: '40px 0 0', color: '#7a8696', fontSize: '0.82rem' }}>
|
|
{contactEmail} · {' '}
|
|
<Link to="/admin/login" style={{ color: 'var(--accent)', textDecoration: 'none' }}>
|
|
Admin
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|