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
Showing only changes of commit 70506b1f13 - Show all commits

2
components/Layout.js
View file

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

48
styles/globals.css
View file

@ -202,21 +202,34 @@ body {
body { body {
background-color: var(--bg-primary-light); background-color: var(--bg-primary-light);
background-image: background-image:
/* Bright ember pool, bottom-left — the "seat of the fire". */
radial-gradient( radial-gradient(
ellipse 80% 60% at 15% 100%, ellipse 70% 50% at 12% 105%,
rgba(255, 128, 0, 0.08) 0%, rgba(255, 100, 0, 0.28) 0%,
rgba(255, 128, 0, 0.02) 40%, rgba(255, 128, 0, 0.14) 30%,
transparent 70% rgba(255, 171, 64, 0.04) 60%,
transparent 80%
), ),
/* Secondary ember, bottom-right — keeps the warmth from feeling
lopsided on wide displays. */
radial-gradient( radial-gradient(
ellipse 60% 50% at 85% 0%, ellipse 55% 45% at 95% 100%,
rgba(255, 171, 64, 0.06) 0%, rgba(255, 140, 30, 0.18) 0%,
transparent 60% 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( linear-gradient(
180deg, 180deg,
rgba(254, 252, 248, 1) 0%, 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; background-attachment: fixed;
color: var(--text-primary-light); color: var(--text-primary-light);
@ -226,20 +239,25 @@ body {
background-color: var(--bg-primary-dark); background-color: var(--bg-primary-dark);
background-image: background-image:
radial-gradient( radial-gradient(
ellipse 80% 60% at 15% 100%, ellipse 70% 50% at 12% 105%,
rgba(255, 128, 0, 0.16) 0%, rgba(255, 100, 0, 0.32) 0%,
rgba(255, 128, 0, 0.04) 40%, rgba(255, 128, 0, 0.16) 30%,
transparent 70% transparent 70%
), ),
radial-gradient( radial-gradient(
ellipse 60% 50% at 85% 0%, ellipse 55% 45% at 95% 100%,
rgba(124, 58, 237, 0.08) 0%, rgba(255, 140, 30, 0.18) 0%,
transparent 60% transparent 70%
),
radial-gradient(
ellipse 55% 45% at 90% -5%,
rgba(124, 58, 237, 0.14) 0%,
transparent 65%
), ),
linear-gradient( linear-gradient(
180deg, 180deg,
rgba(26, 15, 10, 1) 0%, rgba(26, 15, 10, 1) 0%,
rgba(38, 22, 14, 1) 100% rgba(42, 24, 16, 1) 100%
); );
background-attachment: fixed; background-attachment: fixed;
color: var(--text-primary-dark); color: var(--text-primary-dark);