work

postcss.config.js

@@ -4,4 +4,4 @@ export default {
 		tailwindcss: {},
 		autoprefixer: {}
 	}
-};
+}

src/lib/components/Title.svelte

@@ -2,16 +2,16 @@
 	import { animateIn } from '$lib/Helper.mjs'
 </script>
 
-<div use:animateIn={{ slide: 24, fade: 0 }} class="text-center {$$restProps.class}">
-	<div class="font-extrabold mb-3 text-slate-300">
+<div use:animateIn={{ slide: 24, fade: 0 }} class="px-3 text-center {$$restProps.class}">
+	<div class="mb-3 font-extrabold text-slate-300">
 		<slot name="pre" />
 	</div>
 
-	<h1 class="text-6xl md:text-8xl font-bold text-center mb-8">
+	<h1 class="mb-8 text-center text-5xl font-bold md:text-8xl">
 		<slot name="title">No title given!!!</slot>
 	</h1>
 
-	<div class="text-center text-lg font-extrabold text-slate-300"><slot name="subtitle" /></div>
+	<div class="text-center font-extrabold text-slate-300 sm:text-lg"><slot name="subtitle" /></div>
 
 	<slot />
 </div>

src/routes/FameRicePreview.svelte

@@ -16,7 +16,7 @@
 		<img
 			src={image}
 			alt="Rice desktop"
-			class="nice-hover w-full rounded-xl object-cover object-top shadow-2xl hover:scale-[1.01] max-sm:[xmask-image:none] {imageClass}"
+			class="nice-hover w-full rounded-xl object-cover object-top shadow-2xl hover:scale-[1.01] {imageClass}"
 		/>
 		<div class="rice-blurred">
 			<img
@@ -49,11 +49,13 @@
 		z-index: -10;
 		background-color: red;
 		mask-image: radial-gradient(50% 50% at 50% 50%, black, transparent);
+		contain: content layout size style;
 
 		@apply -z-10 transition-[filter] duration-500;
 
-		.rice:hover & {
+		/* Too laggy on firefox */
+		/* .rice:hover & {
 			filter: brightness(4);
-		}
+		} */
 	}
 </style>

src/routes/FeatureCard.svelte

@@ -100,7 +100,7 @@
 
 <style lang="postcss">
 	.card {
-		@apply relative flex h-full w-full items-end justify-end rounded-3xl bg-slate-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 bg-neutral-950	 transition-colors  duration-300 md:bg-slate-900 md:hover:bg-blue-900;
 		z-index: 2;
 		contain: paint style layout;
 	}

src/routes/FeaturesSlice.svelte

@@ -46,14 +46,14 @@
 	}
 </script>
 
-<section class="px-3 md:px-8 flex flex-col items-center">
+<section class="flex flex-col items-center px-3 md:px-8">
 	<Title>
 		<span slot="pre">TLDR</span>
 		<span slot="title">Features</span>
 	</Title>
 
 	<div
-		class="grid lg:grid-cols-2 lg:grid-rows-2 w-full gap-6 text-lg text-white/70 font-medium flex-wrap group"
+		class="group grid w-full flex-wrap gap-6 text-lg font-medium text-white/70 lg:grid-cols-2 lg:grid-rows-2"
 		role="contentinfo"
 		on:mouseenter={!isMobile && onMouseEnter}
 		on:mouseleave={!isMobile && onMouseLeave}
@@ -70,7 +70,7 @@
 				Live reloading config. Easy plain-text format. Sensible defaults. Great documentation.
 			</p>
 
-			<div class="absolute _wrapper inset-0 select-none" aria-hidden>
+			<div class="_wrapper absolute inset-0 select-none" aria-hidden>
 				<div class="feature-image">
 					<img src={configDefaultImage} class="feature-image_inner" alt="" aria-hidden="true" />
 					<img src={configHoverImage} class="feature-image_inner-hover" alt="" aria-hidden="true" />
@@ -81,7 +81,7 @@
 			<p class="max-w-[60ch]">
 				Automatic tiling which just works. Supports multiple fine-tuneable layouts.
 			</p>
-			<div class="absolute _wrapper inset-0 select-none" aria-hidden>
+			<div class="_wrapper absolute inset-0 select-none" aria-hidden>
 				<div class="feature-image">
 					<img src={tileDefaultImage} class="feature-image_inner" alt="" aria-hidden="true" />
 					<img src={tileHoverImage} class="feature-image_inner-hover" alt="" aria-hidden="true" />
@@ -90,7 +90,7 @@
 		</FeatureCard>
 	</div>
 
-	<div class="mt-14 z-10 flex-wrap justify-center flex sm:flex-row flex-col gap-8">
+	<div class="z-10 mt-14 flex flex-col flex-wrap justify-center gap-8 sm:flex-row">
 		<a
 			href="https://github.com/hyprland-community/awesome-hyprland#plugins"
 			target="_blank"
@@ -133,13 +133,21 @@
 		}
 
 		& img {
-			width: 800px;
-			height: 800px;
 			position: absolute;
-			right: -200px;
-			top: -209px;
 			transition: opacity 1500ms ease-in-out;
 			pointer-events: none;
+
+			width: 500px;
+			height: 500px;
+			right: -80px;
+			top: -140px;
+
+			@media screen(sm) {
+				width: 800px;
+				height: 800px;
+				right: -200px;
+				top: -209px;
+			}
 		}
 	}
 	.feature-image_inner-hover {

src/routes/Hero.svelte

@@ -27,7 +27,7 @@
 		class="pointer-events-none z-10 flex h-screen min-h-max flex-col items-center justify-center"
 	>
 		<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-48 fill-mode-backwards" />
+			<img src={Logo} alt="Hyprland Logo" class="ani-in mb-6 h-40 fill-mode-backwards sm:h-48" />
 			<div class="ani-in relative fill-mode-backwards [animation-delay:384ms]">
 				<h1
 					class="hyprgradient pointer-events-auto bg-clip-text p-2 font-london text-6xl font-bold tracking-wider text-transparent md:text-7xl md:tracking-widest"
@@ -39,7 +39,7 @@
 		<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]"
 		>
-			Dynamic tiling Wayland compositor<br />with the looks
+			Dynamic tiling Wayland compositor with the looks
 		</h2>
 
 		<div
@@ -73,7 +73,6 @@
 </section>
 
 <style lang="postcss">
-
 	@keyframes slidein {
 		from {
 			transform: translateX(0%);

src/routes/HeroBackground.svelte

@@ -10,8 +10,6 @@
 	/** Used to transform the rows by their own lenght*/
 	const height = workspacesPerRow * (workspaceHeight + gapLength)
 
-	let wrapperElement, mouseX, mouseY
-
 	function generateRow(amount) {
 		const base = Array.from({ length: amount }).map(generateWorkspace)
 		// For the effect to work, the items need to be duplicated
@@ -37,7 +35,7 @@
 	}
 </script>
 
-<div class="wrapper" aria-hidden="true" bind:this={wrapperElement}>
+<div class="wrapper" aria-hidden="true">
 	<div
 		class="inner-wrapper"
 		style={`--amount: ${workspacesPerRow}; --workspace-gap: ${gapLength}px;--workspace-height: ${workspaceHeight}px; --length: ${height}px;`}
@@ -110,6 +108,7 @@
 		contain: strict;
 		display: flex;
 		mask-image: linear-gradient(to top, transparent 0%, black 20%);
+		contain: layout style content;
 
 		&::after {
 			content: ' ';
@@ -122,6 +121,7 @@
 			height: 100%;
 			z-index: -10;
 			pointer-events: none;
+			contain: strict;
 		}
 	}
 
@@ -134,6 +134,8 @@
 		height: var(--length);
 		min-height: var(--length);
 		max-height: var(--length);
+		animation: backwards animate-in ease-in 2000ms 300ms;
+		contain: layout style content;
 	}
 
 	.column {
@@ -143,7 +145,8 @@
 		width: 100%;
 		gap: var(--workspace-gap);
 		z-index: -50;
-		animation: loop 98s infinite linear;
+		/* animation: loop 98s infinite linear; */
+		contain: layout style content;
 
 		@media (prefers-reduced-motion) {
 			animation: none;
@@ -156,6 +159,7 @@
 		min-height: var(--workspace-height);
 		max-height: var(--workspace-height);
 		width: 100%;
+		contain: layout style content;
 	}
 
 	.tiles {
@@ -163,6 +167,7 @@
 		flex-direction: column;
 		gap: 8px;
 		flex-grow: 1;
+		contain: layout style content;
 	}
 
 	.tile {
@@ -171,9 +176,14 @@
 		height: var(--height);
 		border-radius: 12px;
 		pointer-events: auto;
-		transition: all 280ms ease-in-out;
+		transition: 380ms ease-in-out;
+		transition-property: background opacity scale box-shadow;
+		opacity: 0.5;
+		contain: strict;
 
 		&:hover {
+			opacity: 1;
+			scale: 1.02;
 			background: color-mix(in hsl, var(--color), transparent 20%);
 			box-shadow:
 				0px 0px 10px var(--color),
@@ -184,7 +194,7 @@
 	.top-light {
 		background: radial-gradient(
 			100% 80% at top,
-			theme(colors.cyan.500 / 60%) 0%,
+			theme(colors.cyan.500 / 50%) 0%,
 			theme(colors.sky.500 / 20%),
 			transparent
 		);
@@ -195,6 +205,7 @@
 		top: 0;
 		left: 0;
 		pointer-events: none;
+		contain: strict;
 	}
 
 	@keyframes loop {
@@ -203,4 +214,13 @@
 			/* translate: 0px -50%; */
 		}
 	}
+
+	@keyframes animate-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
 </style>

src/routes/Navbar.svelte

@@ -79,6 +79,7 @@
 	.nav {
 		/* Base classes */
 		font-weight: 600;
+		font-size: 1.5rem;
 
 		/* Mobile classes */
 		position: absolute;
@@ -90,18 +91,18 @@
 		align-items: center;
 		gap: 1rem;
 		backdrop-filter: blur(8px);
-		padding: 3rem 1rem;
+		padding: 5rem 2rem;
 		display: none;
 
 		/* Desktop classes */
 		@media screen(lg) {
-			@apply relative flex h-min w-max flex-row rounded-full bg-black/40 p-2 pl-5 outline outline-primary/10;
+			@apply relative flex h-min w-max flex-row rounded-full bg-black/40 p-2 pl-5 text-base outline outline-primary/10;
 		}
 	}
 
 	.social-icon {
-		width: 2.5rem;
-		height: 2.5rem;
+		width: 4rem;
+		height: 4rem;
 		display: block;
 
 		@apply rounded-full p-1 hover:bg-purple-500 hover:text-white;

src/routes/PreviewRiceSlice.svelte

@@ -13,7 +13,6 @@
 	let videoElement
 
 	let isVisible = false
-	let isShowingControls = false
 	let isMuted = true
 	let isPaused = false
 
@@ -39,10 +38,7 @@
 	})
 </script>
 
-<section
-	class="relative -mb-4 -mt-8 w-full max-w-[1400px] px-1 animate-in fade-in-0 slide-in-from-bottom-10 fill-mode-backwards [animation-delay:1700ms] [animation-duration:2000ms] lg:px-8 z-10{$$restProps.class}"
-	class:isVisible
->
+<section class={$$restProps.class} class:isVisible>
 	<div
 		class="rice-video"
 		role="banner"
@@ -56,8 +52,6 @@
 			videoElement.pause()
 		}}
 		on:inview_leave={() => (isVisible = false)}
-		on:mouseenter={() => (isShowingControls = true)}
-		on:mouseleave={() => (isShowingControls = false)}
 	>
 		<video
 			bind:this={videoElement}
@@ -75,7 +69,7 @@
 		<div
 			class={clsx(
 				'z-20 opacity-0 transition-opacity  ',
-				isShowingControls ? 'opacity-100' : 'pointer-events-none'
+				isPaused ? 'opacity-100' : 'pointer-events-none'
 			)}
 		>
 			<!-- Currently there is no audio. Component might get refractored into a stand-alone player, so lets leave that here -->
@@ -108,6 +102,11 @@
 </section>
 
 <style lang="postcss">
+	section {
+		@apply relative z-10 -mb-4 -mt-8 w-full max-w-[1400px] px-1 animate-in fade-in-0 slide-in-from-bottom-10 fill-mode-backwards [animation-delay:1700ms] [animation-duration:2000ms] lg:px-8;
+
+		contain: layout style content;
+	}
 	.rice-video {
 		@apply mx-3  rounded-xl      transition-all;
 		transition-duration: 1460ms;

src/routes/WallOfFameSlice.svelte

@@ -5,10 +5,7 @@
 	import FameRicePreview from './FameRicePreview.svelte'
 </script>
 
-<section
-	class="relative flex w-full flex-col items-center"
-	use:animateIn={{ fade: 0, slide: 24, duration: 3000, threshold: 0.1 }}
->
+<section class="" use:animateIn={{ fade: 0, slide: 24, duration: 3000, threshold: 0.1 }}>
 	<div class="z-20 -mb-40 px-4">
 		<Title>
 			<span slot="pre"> Memorials of the ricing legends </span>
@@ -46,6 +43,10 @@
 </section>
 
 <style lang="postcss">
+	section {
+		@apply relative flex w-full flex-col items-center;
+		contain: layout style content size;
+	}
 	/* The blue gradient in the background */
 	.atmosphere {
 		position: absolute;

src/routes/wall_of_fame/+page.svelte

@@ -1,18 +1,86 @@
-<script lang="ts">
+<script>
 	import Title from '$lib/components/Title.svelte'
 	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 class="flex min-h-screen flex-col items-center justify-center gap-14 overflow-hidden">
-	<div class="flex h-[50vh] min-h-min flex-col items-center justify-center">
+<section
+	class="relative flex min-h-screen flex-col items-center justify-center gap-14 overflow-x-hidden"
+>
+	<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>
-			<h1 slot="title">Wall of fame</h1>
+			<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">
@@ -82,6 +150,51 @@
 			dotfilesLink="https://github.com/lauroro/hyprland-dotfiles"
 			creatorProfilePicture="https://avatars.githubusercontent.com/u/88981092?s=48&v=4"
 			thumbnail="/imgs/ricing_competitions/1/lauroro.webp"
+			class="pb-16"
 		/>
 	</Contest>
 </section>
+
+<style lang="postcss">
+	.floating-wrapper {
+		perspective: 1000px;
+		transform-style: preserve-3d;
+
+		width: 20px;
+		height: 20px;
+		border: red solid 1px;
+		position: absolute;
+		/* contain: strict; */
+
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.floating-panel {
+		position: absolute;
+		/* margin-left: var(--left);
+		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

@@ -12,7 +12,6 @@
 	let enabled = false
 
 	function setEnabled({ detail }) {
-		console.log({ detail })
 		const { inView, scrollDirection } = detail
 		const isScrollingUp = scrollDirection.vertical === 'up'
 
@@ -26,15 +25,15 @@
 	}
 </script>
 
-<section class="relative flex flex-col py-24">
-	<div class="relative py-56">
+<section class="relative flex flex-col">
+	<div class="relative py-24 sm:py-40">
 		<div
 			class="flex flex-col items-center p-6 mix-blend-color-dodge"
-			use:inview={{ threshold: 0.25 }}
+			use:inview={{ threshold: 0.45 }}
 			on:inview_change={setEnabled}
 		>
-			<div class="text-2xl font-bold text-neutral-300/80">Contest #{number}</div>
-			<h2 class="text-center text-9xl font-bold text-neutral-200/80">{name}</h2>
+			<div class="text-xl font-bold text-neutral-300/80 sm:text-2xl">Contest #{number}</div>
+			<h2 class="text-center text-6xl font-bold text-neutral-200/80 sm:text-9xl">{name}</h2>
 			<h2 class="mt-2 text-center text-xl font-bold text-slate-200/80">{date}</h2>
 		</div>
 
@@ -50,7 +49,7 @@
 
 <style lang="postcss">
 	.mask {
-		overflow: hidden;
+		/* overflow: hidden; */
 		top: 0px;
 		left: 50%;
 		width: 400%;
@@ -70,14 +69,12 @@
 		--c4: color-mix(in hsl shorter hue, var(--color), hsl(0, 100%, 0%) 30%);
 
 		position: absolute;
-		top: 500px;
-		left: 50%;
 		translate: -50% -50%;
 		width: 100%;
 		height: 1000px;
 		z-index: -10;
 		background: radial-gradient(140px 100px at 50% 45%, var(--color), transparent),
-			radial-gradient(145px 110px at 50% 45%, var(--c1) 80%, 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),
 			radial-gradient(600px 220px, var(--c3, theme(colors.blue.700)), transparent),
@@ -85,12 +82,20 @@
 
 		mask-image: radial-gradient(100% 100% at 50% 50%, black 20%, transparent 50%);
 
-		opacity: 0.1;
+		opacity: 0.25;
 		scale: 0.95 1;
 		transition: all 1200ms ease-in-out 120ms;
 
+		top: 200px;
+		left: 50%;
+
+		@media screen(sm) {
+			top: 200px;
+			left: 50%;
+		}
+
 		.enabled & {
-			opacity: 1;
+			opacity: 0.9;
 			scale: 1;
 		}
 	}

src/routes/wall_of_fame/FamedRice.svelte

@@ -23,10 +23,10 @@
 	let background = blurredThumbnail ?? getBlurredPath(thumbnail)
 </script>
 
-<div class="flex flex-col gap-12 px-4">
+<div class="flex flex-col 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-6xl font-bold hover:text-slate-200">
+		<h3 class="mb-6 text-4xl font-bold hover:text-slate-200 sm:text-6xl">
 			<a href={dotfilesLink} target="_blank">{name}</a>
 		</h3>
 		<a class="group flex gap-3" href={dotfilesLink} target="_blank">
@@ -45,13 +45,6 @@
 		<a class="rice" href={dotfilesLink} target="_blank">
 			<img src={thumbnail} alt={`${name} by ${creator} thumbnail`} class="" />
 		</a>
-		<!-- wide background -->
-		<!-- <img
-			src={background}
-			aria-hidden="true"
-			class="background"
-			alt={`${name} by ${creator} thumbnail`}
-		/> -->
 		<!-- blur background -->
 		<img
 			src={background}
@@ -66,6 +59,7 @@
 	.rice {
 		position: relative;
 		display: block;
+		contain: layout style;
 		@apply w-full rounded-lg transition-transform;
 		box-shadow: 0px 0px 8px theme(colors.black / 40%);
 
@@ -104,6 +98,7 @@
 		translate: -50%;
 		z-index: -10;
 		filter: contrast(2.5);
+		contain: layout size style paint;
 
 		mask-image: radial-gradient(farthest-side, black, transparent);
 	}