feat(brand): default favicon emblem + Powered By footer badge
Ship the Runic Gateway emblem as the baked-in default favicon so an instance renders a tab icon with no BRAND_FAVICON set, and place a left-justified "Powered By" badge in the site footer. - brand.favicon now defaults to /assets/img/favicon.ico (was empty). BRAND_FAVICON still overrides per-instance. - Add favicon.ico + powered-by.svg under client/public/assets/img. - SiteFooter: badge pinned to the left of the centered content column (absolute on >=641px, stacked on mobile); info text stays centered. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XmHdsbnLzDMAVQkAoTQSBe
This commit is contained in:
BIN
client/public/assets/img/favicon.ico
Normal file
BIN
client/public/assets/img/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
1
client/public/assets/img/powered-by.svg
Normal file
1
client/public/assets/img/powered-by.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.6 MiB |
@@ -5,31 +5,37 @@ export default function SiteFooter() {
|
|||||||
const { contactEmail, siteTitle } = useSite()
|
const { contactEmail, siteTitle } = useSite()
|
||||||
return (
|
return (
|
||||||
<footer
|
<footer
|
||||||
className="sans"
|
className="sans site-footer"
|
||||||
style={{
|
style={{
|
||||||
borderTop: '1px solid var(--line)',
|
borderTop: '1px solid var(--line)',
|
||||||
padding: '28px 16px',
|
padding: '28px 16px',
|
||||||
color: 'var(--muted)',
|
color: 'var(--muted)',
|
||||||
textAlign: 'center',
|
|
||||||
fontSize: '0.9rem',
|
fontSize: '0.9rem',
|
||||||
background: 'rgba(9,13,18,0.6)',
|
background: 'rgba(9,13,18,0.6)',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
|
<div className="site-footer-inner">
|
||||||
<span>{siteTitle} is an independent private shard project.</span>
|
<img
|
||||||
<span style={{ color: 'var(--dim)', fontSize: '0.84rem' }}>
|
className="site-footer-badge"
|
||||||
<a href={`mailto:${contactEmail}`} style={{ color: 'var(--accent)', textDecoration: 'none' }}>
|
src="/assets/img/powered-by.svg"
|
||||||
{contactEmail}
|
alt="Powered by Runic Gateway"
|
||||||
</a>
|
/>
|
||||||
·
|
<div className="site-footer-info">
|
||||||
<Link to="/site/status" style={{ color: 'var(--accent)', textDecoration: 'none' }}>
|
<span>{siteTitle} is an independent private shard project.</span>
|
||||||
Shard Status
|
<span style={{ color: 'var(--dim)', fontSize: '0.84rem' }}>
|
||||||
</Link>
|
<a href={`mailto:${contactEmail}`} style={{ color: 'var(--accent)', textDecoration: 'none' }}>
|
||||||
·
|
{contactEmail}
|
||||||
<Link to="/admin/login" style={{ color: '#5d6b7d', textDecoration: 'none' }}>
|
</a>
|
||||||
Admin
|
·
|
||||||
</Link>
|
<Link to="/site/status" style={{ color: 'var(--accent)', textDecoration: 'none' }}>
|
||||||
</span>
|
Shard Status
|
||||||
|
</Link>
|
||||||
|
·
|
||||||
|
<Link to="/admin/login" style={{ color: '#5d6b7d', textDecoration: 'none' }}>
|
||||||
|
Admin
|
||||||
|
</Link>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1009,6 +1009,47 @@ button[disabled] {
|
|||||||
border-color: #8a4b47;
|
border-color: #8a4b47;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Site footer: powered-by badge left-justified, info centered. */
|
||||||
|
.site-footer-inner {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 16px;
|
||||||
|
max-width: 1100px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.site-footer-badge {
|
||||||
|
height: 56px;
|
||||||
|
width: auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
.site-footer-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
/* Pin the badge to the left while the info column stays visually centered. */
|
||||||
|
@media (min-width: 641px) {
|
||||||
|
.site-footer-badge {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.site-footer-inner {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.site-footer-badge {
|
||||||
|
height: 44px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* Draft-preview banner on the public renderer. */
|
/* Draft-preview banner on the public renderer. */
|
||||||
.page-preview-banner {
|
.page-preview-banner {
|
||||||
border: 1px solid var(--accent);
|
border: 1px solid var(--accent);
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ const brand = {
|
|||||||
accent: process.env.BRAND_ACCENT_COLOR || '#7f99bd',
|
accent: process.env.BRAND_ACCENT_COLOR || '#7f99bd',
|
||||||
logo: process.env.BRAND_LOGO || '', // empty → no logo image rendered
|
logo: process.env.BRAND_LOGO || '', // empty → no logo image rendered
|
||||||
hero: process.env.BRAND_HERO || '/assets/img/hero-moon.png',
|
hero: process.env.BRAND_HERO || '/assets/img/hero-moon.png',
|
||||||
favicon: process.env.BRAND_FAVICON || '', // empty → no favicon link injected
|
favicon: process.env.BRAND_FAVICON || '/assets/img/favicon.ico', // Runic Gateway default emblem
|
||||||
}
|
}
|
||||||
|
|
||||||
// Discord embeds want an int (0xRRGGBB). Parse the accent hex once; fall back to
|
// Discord embeds want an int (0xRRGGBB). Parse the accent hex once; fall back to
|
||||||
|
|||||||
Reference in New Issue
Block a user