.

package.json

@@ -54,6 +54,7 @@
 		"@fontsource-variable/work-sans": "^5.0.9",
 		"@fontsource/ibm-plex-mono": "^5.0.8",
 		"clsx": "^2.0.0",
+		"critical": "^5.1.1",
 		"interactjs": "^1.10.18",
 		"prettier-plugin-tailwindcss": "^0.5.4",
 		"remeda": "^1.26.0",

scripts/critical.mjs

@@ -0,0 +1,27 @@
+import { generate } from 'critical'
+
+generate({
+	inline: true,
+	base: 'build/',
+	src: 'index.html',
+	target: 'index-critical.html',
+	width: 1300,
+	height: 900
+})
+// generate({
+// 	inline: true,
+// 	base: 'build/',
+// 	src: 'index.html',
+// 	target: 'index.c.html',
+
+// 	dimensions: [
+// 		{
+// 			width: 1200,
+// 			height: 900
+// 		},
+// 		{
+// 			width: 480,
+// 			height: 900
+// 		}
+// 	]
+// })

scripts/generate-smaller-image-sizes.sh

@@ -0,0 +1,22 @@
+parent_path=$( cd "$(dirname "${BASH_SOURCE[0]}")" ; pwd -P )
+
+cd "$parent_path"
+
+find "../static/imgs/profile_pictures/" -type f \
+   \( -iname "*.jpg" -o -iname "*.png" -o -iname "*.gif" -o -iname "*.bmp" -o -iname "*.jpeg" -o -iname "*.webp" \) -not -name "generated_*" -print0 |
+   
+while IFS= read -r -d '' filepath; do
+    echo "$filepath" gets blurred
+    
+    directory=$(dirname "$filepath")
+    filename=$(basename "$filepath")
+    
+    
+    for SIZE in 100x100 64x64 48x48 32x32 
+    do
+       generated_filename="${directory}/generated_${SIZE}-${filename}"
+
+      magick  "$filepath" --resize "${SIZE}" "${generated_filename}" 
+    done
+
+done

src/lib/components/Button.svelte

@@ -11,9 +11,9 @@
 		'primary' == type && 'bg-slate-200 text-black',
 		'outline' == type && 'bg-transparent text-white outline outline-2 outline-slate-200',
 		'fancyOutline' == type && 'fancy',
-		'md' == size && 'min-w-[5rem] px-4 py-2',
+		'md' == size && 'min-w-[5.5rem] px-4 py-2.5',
-		'lg' == size && 'min-w-[5rem] px-6 py-2.5 ',
+		'lg' == size && 'min-w-[5.5rem] px-6 py-3 ',
-		'xl' == size && 'min-w-[5rem] px-8 py-4 ',
+		'xl' == size && 'min-w-[5.5rem] px-8 py-4 ',
 		$$restProps.class
 	)
 </script>

src/lib/components/Footer.svelte

@@ -24,7 +24,7 @@
 			<div class="pretitle">Developers</div>
 			<ul class="flex flex-col gap-3 font-medium">
 				<li>
-					<a href="https://github.com/vaxerski">
+					<a href="https://github.com/vaxerski" target="_blank">
 						Vaxerski <span
 							class="bg-gradient-to-r from-primary to-blue-500 bg-clip-text text-transparent"
 							>[ Lead Developer ]</span
@@ -47,9 +47,11 @@
 		<div class="flex flex-col gap-4">
 			<div class="pretitle">Links</div>
 			<ul class="flex flex-col gap-3 font-medium">
-				<li><a href="https://wiki.hyprland.org/">Wiki</a></li>
+				<li><a href="https://wiki.hyprland.org/" target="_blank">Wiki</a></li>
 				<li>
-					<a href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get started</a>
+					<a href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/" target="_blank"
+						>Get started</a
+					>
 				</li>
 				<li><a href="/wall_of_fame">Hall of fame</a></li>
 			</ul>
@@ -61,12 +63,17 @@
 				<li class="">
 					<a
 						href="https://discord.com/invite/hQ9XvMUjjr"
-						class="text-slate-400 hover:text-slate-200"><DiscordIcon class="h-12 w-12 " /></a
+						class="text-slate-400 hover:text-slate-200"
+						aria-label="Join us on Discord"
+						target="_blank"><DiscordIcon class="h-12 w-12 " /></a
 					>
 				</li>
 				<li class="">
-					<a href="https://github.com/hyprwm/Hyprland" class="text-slate-400 hover:text-slate-200"
+					<a
-						><GithubIcon class="h-12 w-12 " /></a
+						href="https://github.com/hyprwm/Hyprland"
+						class="text-slate-400 hover:text-slate-200"
+						target="_blank"
+						aria-label="Go to our Github"><GithubIcon class="h-12 w-12 " /></a
 					>
 				</li>
 			</ul>
@@ -79,7 +86,7 @@
 		</div>
 	</div>
 
-	<div class="gradient"></div>
+	<div class="gradient" aria-hidden="true" />
 </footer>
 
 <style lang="postcss">

src/routes/CommunitySlice.svelte

@@ -17,7 +17,7 @@
 	/** @type {{image: string coordinates: [number, number] containerClass: string}[], size: number, quote?: string } */
 	const profiles = [
 		{
-			image: '/imgs/profile_pictures/vaxry.gif',
+			image: '/imgs/profile_pictures/vaxry.webp',
 			coordinates: [187, 296],
 			size: 172,
 			class: 'outline-red-500'
@@ -35,7 +35,7 @@
 			class: 'outline-orange-500'
 		},
 		{
-			image: '/imgs/profile_pictures/Mathisbuilder.png',
+			image: '/imgs/profile_pictures/Mathisbuilder.webp',
 			coordinates: [568, 568],
 			size: 120,
 			class: 'outline-amber-500'
@@ -65,7 +65,7 @@
 			class: 'outline-sky-500'
 		},
 		{
-			image: '/imgs/profile_pictures/loseardes77.gif',
+			image: '/imgs/profile_pictures/loseardes77.webp',
 			coordinates: [24, 341],
 			size: 49,
 			class: 'outline-green-500'
@@ -175,7 +175,7 @@
 </script>
 
 <section
-	class="relative flex flex-col items-center w-screen min-h-max h-[1100px] -mb-[200px]"
+	class="relative -mb-[200px] flex h-[1100px] min-h-max w-screen flex-col items-center"
 	bind:this={sectionElement}
 >
 	<Title>
@@ -186,14 +186,15 @@
 		</span>
 	</Title>
 
-	<div class="flex flex-col items-center gap-2 group mt-16">
+	<div class="group mt-16 flex flex-col items-center gap-2">
 		<a
 			class="discord p-4"
 			href="https://discord.com/invite/hQ9XvMUjjr"
 			target="_blank"
 			rel="noopener"
+			aria-label="Join us on Discord"
 		>
-			<DiscordIcon class="w-full h-full  " />
+			<DiscordIcon class="h-full w-full  " />
 		</a>
 
 		<a href="https://discord.com/invite/hQ9XvMUjjr">
@@ -202,7 +203,7 @@
 	</div>
 
 	<div class="absolute w-[1024px]">
-		<div class="flex flex-wrap gap-4 origin-bottom-right h-full">
+		<div class="flex h-full origin-bottom-right flex-wrap gap-4">
 			{#each profiles as { onDragEnd, onDragStart, onHover, ...props }}
 				<DiscordProfilePicture
 					{...props}
@@ -213,7 +214,7 @@
 			{/each}
 		</div>
 	</div>
-	<img src={background} class="absolute top-0 min-w-[1400px] -z-10" alt="" aria-hidden="true" />
+	<img src={background} class="absolute top-0 -z-10 min-w-[1400px]" alt="" aria-hidden="true" />
 </section>
 
 <style lang="postcss">

src/routes/FeatureCard.svelte

@@ -100,9 +100,23 @@
 
 <style lang="postcss">
 	.card {
-		@apply relative flex h-full w-full items-end justify-end rounded-3xl bg-neutral-950	 transition-colors  duration-300 md:bg-slate-900 md:hover:bg-blue-900;
+		@apply relative flex h-full w-full items-end justify-end rounded-3xl transition-colors  duration-300;
 		z-index: 2;
 		contain: paint style layout;
+
+		background: radial-gradient(
+			100% 100% at 100% 0%,
+			theme(colors.blue.950),
+			theme(colors.neutral.950)
+		);
+
+		@media screen(sm) {
+			background: theme(colors.slate.900);
+
+			&:hover {
+				background: theme(colors.blue.900);
+			}
+		}
 	}
 
 	.gradient_black {

src/routes/FeaturesSlice.svelte

@@ -16,9 +16,13 @@
 	import tileDefaultImage from '$lib/images/features/tiling_default.png'
 	import configHoverImage from '$lib/images/features/config_hover.png'
 	import tileHoverImage from '$lib/images/features/tiling_hover.png'
+	import SmoothCircle from './SmoothCircle.svelte'
 
 	let isMobile = false
 
+	/** @type {HTMLElement}*/
+	let smoothCircleElement
+
 	const context = setContext(mouseContext, {
 		x: writable(0),
 		y: writable(0),
@@ -59,12 +63,14 @@
 		on:mouseleave={!isMobile && onMouseLeave}
 		bind:this={featuresContainer}
 	>
-		<FeatureCard title="Smooth" class="row-span-2">
+		<FeatureCard title="Smooth" class="row-span-2" color="purple">
 			<p class="max-w-[60ch]">
 				Transition from windows and workspaces smoothly, with great animations. High performance.
 				Instant input.
-			</p></FeatureCard
+			</p>
-		>
+
+			<SmoothCircle />
+		</FeatureCard>
 		<FeatureCard title="Easy to configure" color="purple">
 			<p class="max-w-[60ch]">
 				Live reloading config. Easy plain-text format. Sensible defaults. Great documentation.
@@ -77,7 +83,7 @@
 				</div>
 			</div>
 		</FeatureCard>
-		<FeatureCard class="" title="Dynamic tiling">
+		<FeatureCard class="" title="Dynamic tiling" color="purple">
 			<p class="max-w-[60ch]">
 				Automatic tiling which just works. Supports multiple fine-tuneable layouts.
 			</p>
@@ -138,9 +144,8 @@
 			pointer-events: none;
 
 			width: 500px;
-			height: 500px;
 			right: -80px;
-			top: -140px;
+			top: -80px;
 
 			@media screen(sm) {
 				width: 800px;

src/routes/Hero.svelte

@@ -24,7 +24,7 @@
 >
 	<!-- Hero text and logo -->
 	<div
-		class="pointer-events-none z-10 flex h-screen min-h-max flex-col items-center justify-center"
+		class="pointer-events-none z-10 flex h-screen min-h-max flex-col items-center justify-center px-5"
 	>
 		<div class="-mt-20 mb-8 flex flex-col items-center gap-6 text-center">
 			<img src={Logo} alt="Hyprland Logo" class="ani-in mb-6 h-40 fill-mode-backwards sm:h-48" />
@@ -37,18 +37,18 @@
 			</div>
 		</div>
 		<h2
-			class="ani-in pointer-events-auto mb-10 text-center text-2xl font-medium leading-9 text-blue-200/80 fill-mode-backwards [animation-delay:944ms]"
+			class="ani-in pointer-events-auto mb-10 max-w-[30ch] text-center text-lg font-medium leading-9 text-blue-200/80 fill-mode-backwards [animation-delay:944ms] sm:text-2xl"
 		>
 			Dynamic tiling Wayland compositor with the looks
 		</h2>
 
 		<div
-			class="pointer-events-auto flex items-center gap-6 duration-500 animate-in fade-in-0 slide-in-from-bottom-4 fill-mode-backwards [animation-delay:1390ms]"
+			class="pointer-events-auto flex items-center gap-7 duration-500 animate-in fade-in-0 slide-in-from-bottom-4 fill-mode-backwards [animation-delay:1390ms]"
 		>
 			<a href="https://wiki.hyprland.org/Getting-Started/Installation/">
 				<Button size="lg">Install</Button>
 			</a>
-			<a href="https://wiki.hyprland.org/Getting-Started/">
+			<a href="https://wiki.hyprland.org/">
 				<Button type="fancyOutline" size="lg">Wiki</Button>
 			</a>
 		</div>

src/routes/HeroBackground.svelte

@@ -134,7 +134,7 @@
 		height: var(--length);
 		min-height: var(--length);
 		max-height: var(--length);
-		animation: backwards animate-in ease-in 2000ms 300ms;
+		/* animation: backwards animate-in ease-in 2000ms 300ms; */
 		contain: layout style content;
 	}
 
@@ -207,20 +207,4 @@
 		pointer-events: none;
 		contain: strict;
 	}
-
-	@keyframes loop {
-		100% {
-			translate: 0px calc(-1 * var(--length));
-			/* translate: 0px -50%; */
-		}
-	}
-
-	@keyframes animate-in {
-		from {
-			opacity: 0;
-		}
-		to {
-			opacity: 1;
-		}
-	}
 </style>

src/routes/Navbar.svelte

@@ -32,6 +32,7 @@
 	<button
 		class="z-50 rounded-full bg-black/10 p-2 md:backdrop-blur lg:hidden"
 		on:click={toggleExpanded}
+		aria-label="Open Navigation"
 	>
 		{#if isExpanded}
 			<CloseIcon class="h-6 w-6 text-slate-200" />
@@ -45,7 +46,11 @@
 			class="flex flex-col items-center gap-5 rounded-full lg:h-full lg:max-h-full lg:flex-row hover:[&_li]:text-cyan-300"
 		>
 			<li>
-				<a href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get started</a>
+				<a
+					href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/"
+					rel="noopener"
+					target="_blank">Get started</a
+				>
 			</li>
 			<li>
 				<a href="https://wiki.hyprland.org">Wiki</a>
@@ -58,19 +63,31 @@
 			class="flex flex-row items-center gap-3 px-4 lg:ml-4 lg:mr-2 lg:rounded-full lg:border lg:border-purple-400"
 		>
 			<li>
-				<a href="https://discord.com/invite/hQ9XvMUjjr" class="social-icon">
+				<a
+					href="https://discord.com/invite/hQ9XvMUjjr"
+					class="social-icon"
+					aria-label="Join us on Discord"
+					target="_blank"
+				>
 					<DiscordIcon class="h-full w-full" />
 				</a>
 			</li>
 			<li>
-				<a href="https://github.com/hyprwm/Hyprland" class="social-icon">
+				<a
+					href="https://github.com/hyprwm/Hyprland"
+					class="social-icon"
+					aria-label="Go to Hyprlands Github"
+					target="_blank"
+				>
 					<GithubIcon class="h-full w-full" />
 				</a>
 			</li>
 		</ul>
 		<a
 			class="rounded-full bg-primary px-4 py-1 uppercase tracking-wide text-black hover:bg-cyan-200"
-			href="https://wiki.hyprland.org/Getting-Started/Installation/">Install</a
+			href="https://wiki.hyprland.org/Getting-Started/Installation/"
+			target="_blank"
+			aria-label="Install Hyprland">Install</a
 		>
 	</nav>
 </header>
@@ -79,7 +96,7 @@
 	.nav {
 		/* Base classes */
 		font-weight: 600;
-		font-size: 1.5rem;
+		@apply text-lg;
 
 		/* Mobile classes */
 		position: absolute;
@@ -90,7 +107,7 @@
 		flex-direction: column;
 		align-items: center;
 		gap: 1rem;
-		backdrop-filter: blur(8px);
+		backdrop-filter: blur(12px);
 		padding: 5rem 2rem;
 		display: none;
 

src/routes/PreviewRiceSlice.svelte

@@ -1,9 +1,7 @@
 <script>
 	import { inview } from 'svelte-inview'
 	import previewRice from '$lib/videos/end_4_rice_intro.mp4'
-	import previewRiceThumbnail from '$lib/videos/end_4_thumbnail.png'
+	import previewRiceThumbnail from '$lib/videos/end_4_thumbnail.webp'
-	import AudioIcon from '~icons/mingcute/volume-line'
-	import MuteIcon from '~icons/mingcute/volume-mute-line'
 	import PauseIcon from '~icons/mingcute/pause-circle-line'
 	import clsx from 'clsx'
 	import { onMount } from 'svelte'
@@ -136,6 +134,7 @@
 	.preview-rice-bg {
 		position: absolute;
 		z-index: -10;
+		pointer-events: none;
 		opacity: 0.4;
 		min-width: 2800px;
 		overflow-x: hidden;

src/routes/SmoothCircle.svelte

@@ -0,0 +1,112 @@
+<script>
+	import SmoothCircle from '$lib/images/features/smooth_default.png'
+	import SmoothHover from '$lib/images/features/smooth_hover.png'
+
+	const circlesAmount = 10
+	/** In millisseconds */
+	const animationDuration = 8000
+
+	const circles = Array.from({ length: circlesAmount }, () => 1)
+
+	/**
+	 *
+	 * @param node {HTMLElement}
+	 * @param param1
+	 */
+	function animateElement(node, { delay, index, amount }) {
+		const delayFrames = Array.from({ length: index }).map(() => ({
+			scale: 0
+		}))
+		node.animate([{ scale: CSS.number(0) }, { scale: CSS.number(3), opacity: 0 }], {
+			iterations: Infinity,
+			duration: animationDuration,
+			delay: animationDuration / (amount - index + 1) + animationDuration / (amount - index + 1),
+			easing: 'cubic-bezier(1, 0.1 , 0.9, 1)',
+			fill: 'backwards'
+		})
+	}
+</script>
+
+<div class="wrapper">
+	<div class="yin">
+		<img src={SmoothCircle} alt="Ying yang smooth icon" />
+		<img src={SmoothHover} alt="Ying yang smooth icon" class="yin-hover" />
+	</div>
+	{#each circles as _, index}
+		<div
+			class="circle"
+			style:--percent={((index + 1) / circles.length) * 100 + '%'}
+			style:--index={index}
+			style:--amount={circles.length}
+		/>
+	{/each}
+	<!-- use:animateElement={{  index, amount: circles.length }} -->
+</div>
+
+<style lang="postcss">
+	.wrapper {
+		position: absolute;
+		top: 40px;
+		right: 40px;
+		width: 400px;
+		aspect-ratio: 1;
+		filter: drop-shadow(0 0 44px blue);
+		/* background: red; */
+	}
+
+	.circle {
+		position: absolute;
+		inset: 0;
+		height: 100%;
+		width: 100%;
+		opacity: 0.05;
+		background: radial-gradient(
+			closest-side,
+			transparent,
+			color-mix(in hsl, theme(colors.blue.500), theme(colors.pink.500) var(--percent)),
+			transparent 90%
+		);
+		transition: all 2200ms;
+
+		.wrapper:hover & {
+			opacity: 1;
+			transition: all 1200ms ease-in;
+		}
+
+		animation: loop infinite backwards;
+	}
+
+	.yin {
+		z-index: 100;
+		position: absolute;
+		left: -25%;
+		top: -25%;
+		/* mix-blend-mode: color-burn; */
+		opacity: 0.7;
+		height: 150%;
+		width: 150%;
+
+		/* aspect-ratio: 1; */
+		& img {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.yin-hover {
+		display: none;
+
+		.wrapper:hover & {
+			display: flex;
+		}
+	}
+
+	@keyframes loop {
+		from {
+			scale: 0;
+		}
+		to {
+			scale: 1;
+		}
+	}
+</style>

src/routes/wall_of_fame/+page.svelte

@@ -3,84 +3,16 @@
 	import Contest from './Contest.svelte'
 	import FamedRice from './FamedRice.svelte'
 	import colors from 'tailwindcss/colors'
-	import { onMount } from 'svelte'
-
-	/** Maximum rotation in degrees */
-	const maxDegress = 45
-	const tiles = [
-		{ top: '40px', left: '20px', z: -40 },
-		{ top: '10px', left: '40px', z: -80 },
-		{ top: '-120px', left: '70px', z: -80 },
-		{ top: '30px', left: '5px', z: -80 },
-		{ top: '80px', left: '4px', z: -80 },
-		{ top: '20px', left: '4px', z: -80 },
-		{ top: '80px', left: '20px' }
-	]
-
-	/** @type {HTMLElement} */
-	let titleWrapper
-	/** @type {DOMRect} */
-	let container
-
-	/**
-	 * Bind the generated tiles here and iterate over them later
-	 * @type {HTMLElement[]}*/
-	const boundTiles = []
-
-	onMount(() => {
-		container = titleWrapper.getBoundingClientRect()
-	})
-
-	function rotateTiles({ clientX, clientY }) {
-		boundTiles.forEach((tile) => {
-			const { x, y, width, height } = tile.getBoundingClientRect()
-			const middleX = x + width / 2
-			const middleY = y + height / 2
-
-			console.log({ middleX, middleY, clientX, clientY })
-
-			const offsetX = minMax(((clientX - middleX) / clientX) * maxDegress, 95)
-			const offsetY = minMax(((clientY - middleY) / clientY) * maxDegress, 95)
-
-			tile.style.setProperty('--rotateX', offsetX)
-			tile.style.setProperty('--rotateY', -offsetY)
-		})
-	}
-
-	function minMax(value, minMax) {
-		return value
-		// return Math.max(Math.min(value, minMax), minMax * -1)
-	}
 </script>
 
-<section
+<section>
-	class="relative flex min-h-screen flex-col items-center justify-center gap-14 overflow-x-hidden"
+	<div class="hero-wrapper" role="heading" aria-level={0}>
->
-	<div
-		class="relative -mb-14 flex h-[90vh] min-h-min w-full flex-col items-center justify-center bg-white/10"
-		bind:this={titleWrapper}
-		on:mousemove={rotateTiles}
-		role="heading"
-		aria-level={0}
-	>
 		<Title>
 			<span slot="title">Wall of fame</span>
 			<div slot="subtitle">
 				The chronicles of the triumphant<br /> from bygone rice contests held within our Discord
 			</div>
 		</Title>
-
-		<div class="floating-wrapper">
-			{#each tiles as { left, top, z }, index}
-				<div
-					class="floating-panel"
-					style:--left={left}
-					style:--top={top}
-					style:--z={z}
-					bind:this={boundTiles[index]}
-				/>
-			{/each}
-		</div>
 	</div>
 
 	<Contest name="Summer" number={2} date="May 2023" --color="orange">
@@ -156,45 +88,20 @@
 </section>
 
 <style lang="postcss">
-	.floating-wrapper {
+	section {
-		perspective: 1000px;
+		@apply relative flex min-h-screen flex-col items-center justify-center gap-14 overflow-hidden;
-		transform-style: preserve-3d;
+	}
-
-		width: 20px;
-		height: 20px;
-		border: red solid 1px;
-		position: absolute;
-		/* contain: strict; */
 
+	.hero-wrapper {
 		display: flex;
+		position: relative;
+		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-	}
+		height: 800px;
-
+		width: 100%;
-	.floating-panel {
+		min-height: max-content;
-		position: absolute;
+		margin-bottom: min(-10vh, -12rem);
-		/* margin-left: var(--left);
+		background: radial-gradient(100% 50% at 50% 0%, theme(colors.cyan.500 / 50%), transparent);
-		margin-top: var(--top); */
-		left: var(--left);
-		top: var(--top);
-
-		min-height: 100px;
-		min-width: 200px;
-
-		transform-style: preserve-3d;
-		translate: 0px 0px calc(var(--z) * 1px);
-
-		/* contain: layout; */
-
-		&::after {
-			content: ' ';
-			border: solid white 2px;
-			border-radius: 24px;
-			background: rgba(255, 255, 255, 0.5);
-			inset: 0px;
-			position: absolute;
-			transform: rotateY(calc(var(--rotateX) * 1deg)) rotateX(calc(var(--rotateY) * 1deg));
-			/* transition: transform 40ms; */
-		}
 	}
 </style>

src/routes/wall_of_fame/Contest.svelte

@@ -25,7 +25,7 @@
 	}
 </script>
 
-<section class="relative flex flex-col">
+<section class="">
 	<div class="relative py-24 sm:py-40">
 		<div
 			class="flex flex-col items-center p-6 mix-blend-color-dodge"
@@ -48,6 +48,28 @@
 </section>
 
 <style lang="postcss">
+	section {
+		border-top: rgba(255, 255, 255, 0.1) 1px solid;
+		padding-top: 5rem;
+		position: relative;
+		display: flex;
+		width: 100%;
+		flex-direction: column;
+		border-radius: 4rem 4rem 0rem 0rem;
+
+		&::after {
+			content: ' ';
+			position: absolute;
+			top: 0;
+			left: 0;
+			height: 300px;
+			width: 100%;
+			z-index: -10;
+			background: linear-gradient(theme(colors.black / 40%), transparent);
+			mix-blend-mode: color-burn;
+			border-radius: inherit;
+		}
+	}
 	.mask {
 		/* overflow: hidden; */
 		top: 0px;
@@ -95,7 +117,7 @@
 		}
 
 		.enabled & {
-			opacity: 0.9;
+			opacity: 0.7;
 			scale: 1;
 		}
 	}

src/routes/wall_of_fame/FamedRice.svelte

@@ -23,7 +23,7 @@
 	let background = blurredThumbnail ?? getBlurredPath(thumbnail)
 </script>
 
-<div class="flex flex-col gap-12 px-4 {$$restProps.class}">
+<div class="flex flex-col items-center gap-12 px-4 {$$restProps.class}">
 	<div class="flex flex-col items-center justify-center">
 		<div class="mb-2 text-lg font-bold">{pretitel}</div>
 		<h3 class="mb-6 text-4xl font-bold hover:text-slate-200 sm:text-6xl">
@@ -41,7 +41,7 @@
 		</a>
 	</div>
 
-	<div class="relative w-full max-w-[1100px] px-6 sm:px-8">
+	<div class="image-wrapper">
 		<a class="rice" href={dotfilesLink} target="_blank">
 			<img src={thumbnail} alt={`${name} by ${creator} thumbnail`} class="" />
 		</a>
@@ -56,6 +56,12 @@
 </div>
 
 <style lang="postcss">
+	.image-wrapper {
+		@apply relative w-full max-w-[1100px] px-6 sm:px-8;
+		position: relative;
+		width: 100%;
+	}
+
 	.rice {
 		position: relative;
 		display: block;