diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte index 99e4eb4..fa378f2 100755 --- a/src/lib/components/Footer.svelte +++ b/src/lib/components/Footer.svelte @@ -106,6 +106,8 @@ width: 100%; height: 900px; z-index: -10; - background: radial-gradient(105vw 450px at 50% 50%, theme(colors.blue.600 / 80%), transparent); + mask-image: radial-gradient(105vw 450px at 50% 50%, rgba(0, 0, 0, 1) 50%, transparent); + background: url('imgs/grain.webp'), + radial-gradient(105vw 450px at 50% 50%, theme(colors.blue.600 / 80%), transparent); } diff --git a/src/routes/HeroBackground.svelte b/src/routes/HeroBackground.svelte index ebcb522..7f2a154 100755 --- a/src/routes/HeroBackground.svelte +++ b/src/routes/HeroBackground.svelte @@ -199,12 +199,22 @@ } .top-light { - background: radial-gradient( + background: url('imgs/grain.webp'), + radial-gradient( + 100% 80% at top, + theme(colors.cyan.500 / 50%) 0%, + theme(colors.sky.500 / 20%), + transparent + ); + + mask-image: radial-gradient( 100% 80% at top, - theme(colors.cyan.500 / 50%) 0%, - theme(colors.sky.500 / 20%), + white, + rgba(0, 0, 0, 1), + rgba(0, 0, 0, 1), transparent ); + width: 100%; height: 100%; position: absolute; diff --git a/src/routes/PreviewRiceSlice.svelte b/src/routes/PreviewRiceSlice.svelte index 8e5e719..3e6b78c 100755 --- a/src/routes/PreviewRiceSlice.svelte +++ b/src/routes/PreviewRiceSlice.svelte @@ -140,10 +140,15 @@ width: 1100px; height: 200%; - background-image: radial-gradient( + background-image: url('imgs/grain.webp'), + radial-gradient(closest-side, theme(colors.sky.500), theme(colors.indigo.500 / 0%)); + + mask-image: radial-gradient( closest-side, - theme(colors.sky.500), - theme(colors.indigo.500 / 0%) + white, + rgba(0, 0, 0, 1), + rgba(0, 0, 0, 1) 90%, + transparent ); } diff --git a/src/routes/WallOfFameSlice.svelte b/src/routes/WallOfFameSlice.svelte index 0f8a74a..4e1c6db 100755 --- a/src/routes/WallOfFameSlice.svelte +++ b/src/routes/WallOfFameSlice.svelte @@ -58,8 +58,10 @@ width: 200vw; max-width: 2400px; max-height: 1000px; - background: radial-gradient(closest-side, theme(colors.blue.500 / 30%), transparent), + background: url('imgs/grain.webp'), + radial-gradient(closest-side, theme(colors.blue.500 / 30%), transparent), radial-gradient(15% 20%, theme(colors.cyan.500 / 70%), transparent); + mask-image: radial-gradient(closest-side, white, rgba(0, 0, 0, 0.8) 70%, transparent); } .glow { @@ -72,11 +74,13 @@ left: 0; right: 0; pointer-events: none; - background-image: radial-gradient( - ellipse at bottom, - theme(colors.pink.400), - theme(colors.indigo.700 / 50%) 50%, - theme(colors.indigo.950 / 0%) 80% - ); + background-image: url('imgs/grain.webp'), + radial-gradient( + ellipse at bottom, + theme(colors.pink.400), + theme(colors.indigo.700 / 50%) 50%, + theme(colors.indigo.950 / 0%) 80% + ); + mask-image: radial-gradient(ellipse at bottom, white, rgba(0, 0, 0, 1) 90%, transparent); } diff --git a/src/routes/wall_of_fame/+page.svelte b/src/routes/wall_of_fame/+page.svelte index 101a5e8..741bc32 100755 --- a/src/routes/wall_of_fame/+page.svelte +++ b/src/routes/wall_of_fame/+page.svelte @@ -37,6 +37,7 @@ {/each} +