rstillwell/deckhearth
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

fix(design-system): unblock body hearth gradient + boost intensity #101

Merged
varutasu merged 1 commit from layout-transparent-and-bolder-hearth into main 2026-06-04 10:39:29 -04:00
Conversation 3 Commits 1 Files changed 2 +34 -16
2 changed files with 34 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/Layout.js
View file

@ -607,7 +607,7 @@ export default function Layout({ children, user = null, showSearch = false }) {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
return (
<div className="flex h-screen" style={{ backgroundColor: 'var(--bg-primary)' }}>
<div className="flex h-screen">
{/* Mobile Navigation - Bottom bar for mobile */}
<MobileNavigation
onMenuOpen={() => setIsMobileMenuOpen(true)}

48
styles/globals.css
View file

@ -202,21 +202,34 @@ body {
body {
background-color: var(--bg-primary-light);
background-image:
/* Bright ember pool, bottom-left — the "seat of the fire". */
radial-gradient(
ellipse 80% 60% at 15% 100%,
rgba(255, 128, 0, 0.08) 0%,
rgba(255, 128, 0, 0.02) 40%,
transparent 70%
ellipse 70% 50% at 12% 105%,
rgba(255, 100, 0, 0.28) 0%,
rgba(255, 128, 0, 0.14) 30%,
rgba(255, 171, 64, 0.04) 60%,
transparent 80%
),
/* Secondary ember, bottom-right — keeps the warmth from feeling
lopsided on wide displays. */
radial-gradient(
ellipse 60% 50% at 85% 0%,
rgba(255, 171, 64, 0.06) 0%,
transparent 60%
ellipse 55% 45% at 95% 100%,
rgba(255, 140, 30, 0.18) 0%,
rgba(255, 171, 64, 0.05) 50%,
transparent 75%
),
/* Soft gold glow, top-right — the "smoke catching last light". */
radial-gradient(
ellipse 55% 45% at 90% -5%,
rgba(255, 171, 64, 0.16) 0%,
transparent 65%
),
/* Base wash: cooler at top, warmer at bottom for fireplace ambient. */
linear-gradient(
180deg,
rgba(254, 252, 248, 1) 0%,
rgba(252, 246, 235, 1) 100%
rgba(252, 244, 230, 1) 60%,
rgba(250, 238, 220, 1) 100%
);
background-attachment: fixed;
color: var(--text-primary-light);
@ -226,20 +239,25 @@ body {
background-color: var(--bg-primary-dark);
background-image:
radial-gradient(
ellipse 80% 60% at 15% 100%,
rgba(255, 128, 0, 0.16) 0%,
rgba(255, 128, 0, 0.04) 40%,
ellipse 70% 50% at 12% 105%,
rgba(255, 100, 0, 0.32) 0%,
rgba(255, 128, 0, 0.16) 30%,
transparent 70%
),
radial-gradient(
ellipse 60% 50% at 85% 0%,
rgba(124, 58, 237, 0.08) 0%,
transparent 60%
ellipse 55% 45% at 95% 100%,
rgba(255, 140, 30, 0.18) 0%,
transparent 70%
),
radial-gradient(
ellipse 55% 45% at 90% -5%,
rgba(124, 58, 237, 0.14) 0%,
transparent 65%
),
linear-gradient(
180deg,
rgba(26, 15, 10, 1) 0%,
rgba(38, 22, 14, 1) 100%
rgba(42, 24, 16, 1) 100%
);
background-attachment: fixed;
color: var(--text-primary-dark);