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} +
<span slot="title" class="title">Wall of fame</span> <div slot="subtitle" class="max-w-[40ch]"> @@ -143,7 +144,15 @@ max-height: 900px; width: 100%; margin-bottom: min(-10vh, -6rem); - background: radial-gradient(70% 50% at 50% 0%, theme(colors.cyan.500 / 50%), transparent); + } + + .gradient_ { + position: absolute; + inset: 0; + z-index: -1000; + mask-image: radial-gradient(70% 50% at 50% 0%, white 70%, transparent); + background: url('imgs/grain.webp'), + radial-gradient(70% 50% at 50% 0%, theme(colors.cyan.500 / 40%), transparent); } .japanese { diff --git a/src/routes/wall_of_fame/Contest.svelte b/src/routes/wall_of_fame/Contest.svelte index 57b5f80..d9cb91a 100755 --- a/src/routes/wall_of_fame/Contest.svelte +++ b/src/routes/wall_of_fame/Contest.svelte @@ -101,7 +101,8 @@ width: 100%; height: 1000px; z-index: -10; - background: radial-gradient(140px 100px at 50% 45%, var(--color), transparent), + background: url('imgs/grain.webp'), + radial-gradient(140px 100px at 50% 45%, var(--color), transparent), radial-gradient(145px 110px at 50% 45%, var(--c1), transparent), radial-gradient(210px 140px, var(--c2, theme(colors.blue.600)), transparent), radial-gradient(300px 200px, var(--c2, theme(colors.sky.600)), transparent), diff --git a/src/routes/wall_of_fame/FamedRice.svelte b/src/routes/wall_of_fame/FamedRice.svelte index 03f4471..56d7247 100755 --- a/src/routes/wall_of_fame/FamedRice.svelte +++ b/src/routes/wall_of_fame/FamedRice.svelte @@ -54,6 +54,7 @@ alt={`${name} by ${creator} thumbnail`} loading="lazy" /> + <div class="grain_" /> </div> </div> @@ -110,4 +111,18 @@ mask-image: radial-gradient(farthest-side, black, transparent); } + .grain_ { + position: absolute; + min-width: calc(120% + 200px); + height: calc(120% + 200px); + top: -45%; + left: 50%; + translate: -50%; + z-index: -5; + contain: layout size style paint; + + background-blend-mode: hard-light; + mask-image: radial-gradient(farthest-side, black 50%, transparent); + background-image: url('imgs/grain.webp'); + } </style> diff --git a/static/imgs/grain.webp b/static/imgs/grain.webp new file mode 100644 index 0000000..71a6616 Binary files /dev/null and b/static/imgs/grain.webp differ