-
@@ -47,7 +64,9 @@
alt={creator + ' profile picture'}
loading="lazy"
/>
-
+
{creator}
@@ -57,24 +76,37 @@
{#if toShow === 'thumbnail'}
{#if video}
-
(toShow = 'video')}
+ >
{:else}
-
+
{/if}
{:else if toShow === 'video'}
-
-
+
+
{/if}
@@ -85,7 +117,7 @@
alt={`${name} by ${creator} thumbnail`}
loading="lazy"
/>
-
+
@@ -155,14 +187,19 @@
contain: layout size style paint;
background-blend-mode: hard-light;
- mask-image: radial-gradient(farthest-side, black 80%, transparent);
+ mask-image: radial-gradient(
+ farthest-side,
+ black 80%,
+ transparent
+ );
background-image: url('/imgs/grain.webp');
}
.title_ {
filter: saturate(1.5) brightness(1);
@apply relative -mt-1 mb-5 py-1 text-4xl font-bold text-transparent sm:text-6xl;
- background-image: linear-gradient(
+ background-image:
+ linear-gradient(
-195deg,
theme(colors.white / 80%) 50%,
rgba(255, 255, 255, 0.4)
diff --git a/src/routes/hall_of_fame/rices.ts b/src/routes/hall_of_fame/rices.ts
index ee4afd8..84fb1c6 100644
--- a/src/routes/hall_of_fame/rices.ts
+++ b/src/routes/hall_of_fame/rices.ts
@@ -34,29 +34,35 @@ export const contests: Contest[] = [
name: '𝕽𝖎𝖛𝖊𝖓𝖉𝖊𝖑𝖑',
creator: 'zacoons',
pretitel: '#1',
- dotfilesLink: 'https://codeberg.org/zacoons/rivendell-hyprdots',
+ dotfilesLink:
+ 'https://codeberg.org/zacoons/rivendell-hyprdots',
creatorProfilePicture:
'https://codeberg.org/avatars/c4669a53a4de58a5f700fa461405b1fd151d90da48cf927639e3855570e0ca49?size=24',
thumbnail: '/ricing_competitions/4/zacoons.webp',
- video: 'https://dl.hypr.land/contest-videos/hyprrice_zacoons.mp4'
+ video:
+ 'https://dl.hypr.land/contest-videos/hyprrice_zacoons.mp4'
},
{
name: '𝕯𝖎𝖘𝖓𝖆𝖞 𝖙𝖞𝖕𝖊 𝖘𝖍𝖎',
creator: 'VDawg',
pretitel: '#2',
dotfilesLink: 'https://github.com/vdawg-git/fantasy-rice',
- creatorProfilePicture: 'https://avatars.githubusercontent.com/u/28539403?s=24&v=4',
+ creatorProfilePicture:
+ 'https://avatars.githubusercontent.com/u/28539403?s=24&v=4',
thumbnail: '/ricing_competitions/4/vdawg.webp',
- video: 'https://dl.hypr.land/contest-videos/disnay_type_shit_vdawg.mp4'
+ video:
+ 'https://dl.hypr.land/contest-videos/disnay_type_shit_vdawg.mp4'
},
{
name: 'Duskhide',
creator: 'Flafy',
pretitel: '#3',
dotfilesLink: 'https://github.com/flafydev/fantasy_rice',
- creatorProfilePicture: 'https://avatars.githubusercontent.com/u/44374434?s=24&v=4',
+ creatorProfilePicture:
+ 'https://avatars.githubusercontent.com/u/44374434?s=24&v=4',
thumbnail: '/ricing_competitions/4/flafy.webp',
- video: 'https://dl.hypr.land/contest-videos/fantasy_flafy.webm'
+ video:
+ 'https://dl.hypr.land/contest-videos/fantasy_flafy.webm'
}
]
},
@@ -71,7 +77,8 @@ export const contests: Contest[] = [
creator: 'Flafy',
pretitel: '#1',
dotfilesLink: 'https://github.com/flafydev/nixos-config/',
- creatorProfilePicture: 'https://avatars.githubusercontent.com/u/44374434?s=24&v=4',
+ creatorProfilePicture:
+ 'https://avatars.githubusercontent.com/u/44374434?s=24&v=4',
thumbnail: '/ricing_competitions/3/flafy.webp',
video: 'https://dl.hypr.land/videos/flafy-3-space.mp4'
},
@@ -79,8 +86,10 @@ export const contests: Contest[] = [
name: 'Globes',
creator: 'Aylur',
pretitel: '#2',
- dotfilesLink: 'https://github.com/Aylur/dotfiles/tree/ags-pre-ts',
- creatorProfilePicture: 'https://avatars.githubusercontent.com/u/104676705?s=24&v=4',
+ dotfilesLink:
+ 'https://github.com/Aylur/dotfiles/tree/ags-pre-ts',
+ creatorProfilePicture:
+ 'https://avatars.githubusercontent.com/u/104676705?s=24&v=4',
thumbnail: '/ricing_competitions/3/aylur.webp',
video: 'https://dl.hypr.land/videos/aylur-3-space.mp4'
},
@@ -89,9 +98,11 @@ export const contests: Contest[] = [
creator: 'VDawg',
pretitel: '#3',
dotfilesLink: 'https://github.com/vdawg-git/space_dots',
- creatorProfilePicture: 'https://avatars.githubusercontent.com/u/28539403?s=24&v=4',
+ creatorProfilePicture:
+ 'https://avatars.githubusercontent.com/u/28539403?s=24&v=4',
thumbnail: '/ricing_competitions/3/vdawg.webp',
- video: 'https://dl.hypr.land/contest-videos/golden_era_vdawg.mp4'
+ video:
+ 'https://dl.hypr.land/contest-videos/golden_era_vdawg.mp4'
}
]
},
@@ -106,8 +117,10 @@ export const contests: Contest[] = [
name: 'Hybrid Summer',
creator: 'end_4',
pretitel: '#1',
- dotfilesLink: 'https://github.com/end-4/dots-hyprland/tree/archive/hybrid-summer',
- creatorProfilePicture: 'https://avatars.githubusercontent.com/u/97237370?s=24&v=4',
+ dotfilesLink:
+ 'https://github.com/end-4/dots-hyprland/tree/archive/hybrid-summer',
+ creatorProfilePicture:
+ 'https://avatars.githubusercontent.com/u/97237370?s=24&v=4',
thumbnail: '/ricing_competitions/2/end_4.webp',
video: 'https://dl.hypr.land/videos/end4-2-summer.mp4'
},
@@ -115,8 +128,10 @@ export const contests: Contest[] = [
name: 'Unnamed',
creator: 'Flafy',
pretitel: '#2',
- dotfilesLink: 'https://github.com/FlafyDev/flutter_background_bar',
- creatorProfilePicture: 'https://avatars.githubusercontent.com/u/44374434?s=24&v=4',
+ dotfilesLink:
+ 'https://github.com/FlafyDev/flutter_background_bar',
+ creatorProfilePicture:
+ 'https://avatars.githubusercontent.com/u/44374434?s=24&v=4',
thumbnail: '/ricing_competitions/2/flafy.webp',
video: 'https://dl.hypr.land/videos/flafy-2-summer.mp4'
},
@@ -124,8 +139,10 @@ export const contests: Contest[] = [
name: 'Day and Night',
creator: 'Mathisbuilder',
pretitel: '#3',
- dotfilesLink: 'https://github.com/MathisP75/summer-day-and-night',
- creatorProfilePicture: 'https://avatars.githubusercontent.com/u/98901170?s=24&v=4',
+ dotfilesLink:
+ 'https://github.com/MathisP75/summer-day-and-night',
+ creatorProfilePicture:
+ 'https://avatars.githubusercontent.com/u/98901170?s=24&v=4',
thumbnail: '/ricing_competitions/2/day-night.webp'
}
]
@@ -141,8 +158,10 @@ export const contests: Contest[] = [
name: 'Unnamed',
creator: 'Flafy',
pretitel: '#1',
- dotfilesLink: 'https://github.com/FlafyDev/flutter_workspaces_2',
- creatorProfilePicture: 'https://avatars.githubusercontent.com/u/25975326?s=24&v=4',
+ dotfilesLink:
+ 'https://github.com/FlafyDev/flutter_workspaces_2',
+ creatorProfilePicture:
+ 'https://avatars.githubusercontent.com/u/25975326?s=24&v=4',
thumbnail: '/ricing_competitions/1/flafy.webp',
video: 'https://dl.hypr.land/videos/flafy-1-winter.mp4'
},
@@ -150,8 +169,10 @@ export const contests: Contest[] = [
name: 'Aurora',
creator: 'flick0',
pretitel: '#2 (ex aequo)',
- dotfilesLink: 'https://github.com/flick0/dotfiles/tree/aurora',
- creatorProfilePicture: 'https://avatars.githubusercontent.com/u/77581181?s=24&v=4',
+ dotfilesLink:
+ 'https://github.com/flick0/dotfiles/tree/aurora',
+ creatorProfilePicture:
+ 'https://avatars.githubusercontent.com/u/77581181?s=24&v=4',
thumbnail: '/ricing_competitions/1/flicko.webp',
video: 'https://dl.hypr.land/videos/flicko-1-winter.mp4'
},
@@ -160,7 +181,8 @@ export const contests: Contest[] = [
creator: 'amadeus',
pretitel: '#2 (ex aequo)',
dotfilesLink: 'https://github.com/AmadeusWM/hyprland-winter',
- creatorProfilePicture: 'https://avatars.githubusercontent.com/u/63149896?s=24&v=4',
+ creatorProfilePicture:
+ 'https://avatars.githubusercontent.com/u/63149896?s=24&v=4',
thumbnail: '/ricing_competitions/1/amadeus.webp'
},
{
@@ -168,7 +190,8 @@ export const contests: Contest[] = [
creator: 'Lyasm',
pretitel: '#3 (ex aequo)',
dotfilesLink: '#',
- creatorProfilePicture: 'https://avatars.githubusercontent.com/u/111616244?s=24&v=4',
+ creatorProfilePicture:
+ 'https://avatars.githubusercontent.com/u/111616244?s=24&v=4',
thumbnail: '/ricing_competitions/1/lyasm.webp'
},
{
@@ -176,7 +199,8 @@ export const contests: Contest[] = [
creator: 'lauroro',
pretitel: '#3 (ex aequo)',
dotfilesLink: 'https://github.com/lauroro/hyprland-dotfiles',
- creatorProfilePicture: 'https://avatars.githubusercontent.com/u/88981092?s=24&v=4',
+ creatorProfilePicture:
+ 'https://avatars.githubusercontent.com/u/88981092?s=24&v=4',
thumbnail: '/ricing_competitions/1/lauroro.webp'
}
]
diff --git a/src/routes/home-slices/CommunitySlice.svelte b/src/routes/home-slices/CommunitySlice.svelte
index 841df2b..276d075 100644
--- a/src/routes/home-slices/CommunitySlice.svelte
+++ b/src/routes/home-slices/CommunitySlice.svelte
@@ -10,14 +10,19 @@
import Chan from './community/Chan.svelte'
import type { CommunityProfile } from '$lib/Types'
- export let communityProfiles: readonly CommunityProfile[]
+ interface Props {
+ communityProfiles: readonly CommunityProfile[]
+ }
+
+ let { communityProfiles }: Props = $props()
const biggestSize = communityProfiles.reduce(
- (previousSize, { size }) => (size > previousSize ? size : previousSize),
+ (previousSize, { size }) =>
+ size > previousSize ? size : previousSize,
0
)
- let restrictionElement: HTMLElement
+ let restrictionElement: HTMLElement | undefined = $state()
- <TitleHeading slot="title" class="">Join a great<br />community</TitleHeading>
- <TitleSubtile slot="subtitle" class="class-w-[40ch]">
- Get help from Distro Hoppers, Haiku writers,<br />Hydrohomies, and human_(probably)
- </TitleSubtile>
+ {#snippet title()}
+ <TitleHeading class="">Join a great<br />community</TitleHeading
+ >
+ {/snippet}
+ {#snippet subtitle()}
+ <TitleSubtile class="class-w-[40ch]">
+ Get help from Distro Hoppers, Haiku writers,<br />Hydrohomies,
+ and human_(probably)
+ </TitleSubtile>
+ {/snippet}
@@ -48,18 +59,24 @@
-
+
{#each communityProfiles as props}
{@const relativeSize = props.size / biggestSize}
restrictionElement}
+ spawnDelay={Math.pow(1 - props.size / biggestSize, 4) *
+ 4654}
+ getRestrictionElement={() => restrictionElement!}
/>
{/each}
- restrictionElement} />
+ restrictionElement!}
+ />
@@ -82,13 +99,15 @@
filter 840ms;
transition-delay: 240ms, 180ms, 20ms;
transform: translateY(-25%);
- filter: drop-shadow(0px 0px 0px cyan) drop-shadow(0px 0px 0px blue);
+ filter: drop-shadow(0px 0px 0px cyan)
+ drop-shadow(0px 0px 0px blue);
&:hover,
.group:hover & {
scale: 1.2 1.2;
rotate: 360deg;
- filter: drop-shadow(4px 4px 14px #0fffef7a) drop-shadow(-4px -4px 12px purple);
+ filter: drop-shadow(4px 4px 14px #0fffef7a)
+ drop-shadow(-4px -4px 12px purple);
animation: bounce 0.7s infinite 180ms both;
}
&:active {
diff --git a/src/routes/home-slices/DistroOption.svelte b/src/routes/home-slices/DistroOption.svelte
index e0259e4..16b60b3 100644
--- a/src/routes/home-slices/DistroOption.svelte
+++ b/src/routes/home-slices/DistroOption.svelte
@@ -1,27 +1,41 @@
-
+
{#if image && name}
-
{name}
+
{name}
-
+ {@render imageExtra?.()}
{/if}
-
+ {@render children?.()}
diff --git a/src/routes/home-slices/FameRicePreview.svelte b/src/routes/home-slices/FameRicePreview.svelte
index f4dd5ee..a113426 100644
--- a/src/routes/home-slices/FameRicePreview.svelte
+++ b/src/routes/home-slices/FameRicePreview.svelte
@@ -1,22 +1,28 @@
-
+
+
-
+
- <TitlePre slot="pre">TLDR</TitlePre>
- <TitleHeading slot="title" class="">Features</TitleHeading>
+ {#snippet pre()}
+ <TitlePre>TLDR</TitlePre>
+ {/snippet}
+ {#snippet title()}
+ <TitleHeading class="">Features</TitleHeading>
+ {/snippet}
-
Smooth
+
+ Smooth
+
- Smooth transitions. Eye-pleasing animations. Great performance. Highly responsive.
+ Smooth transitions. Eye-pleasing animations. Great
+ performance. Highly responsive.
-
+
-
Easy to configure
+
+ Easy to configure
+
- Live reloading config. Easy configuration format. Sensible defaults. Great documentation.
+ Live reloading config. Easy configuration format. Sensible
+ defaults. Great documentation.
-
+
-
Dynamic tiling
+
+ Dynamic tiling
+
- Automatic tiling that just works. Supports multiple fine-tuneable layouts, with even more
- as plugins.
+ Automatic tiling that just works. Supports multiple
+ fine-tuneable layouts, with even more as plugins.
-
+
Tearing support
-
+
Socket-based IPC
diff --git a/src/routes/home-slices/HallOfFameSlice.svelte b/src/routes/home-slices/HallOfFameSlice.svelte
index cc41cd9..62b0e6f 100644
--- a/src/routes/home-slices/HallOfFameSlice.svelte
+++ b/src/routes/home-slices/HallOfFameSlice.svelte
@@ -7,22 +7,38 @@
import FameRicePreview from './FameRicePreview.svelte'
-
+
- <TitlePre slot="pre">Memorials of the ricing legends</TitlePre>
- <TitleHeading slot="title" class="">Hall of Fame</TitleHeading>
+ {#snippet pre()}
+ <TitlePre>Memorials of the ricing legends</TitlePre>
+ {/snippet}
+ {#snippet title()}
+ <TitleHeading class="">Hall of Fame</TitleHeading>
+ {/snippet}
-
+
-
+
diff --git a/src/routes/home-slices/Hero.svelte b/src/routes/home-slices/Hero.svelte
index a9779bc..fb2c1a2 100644
--- a/src/routes/home-slices/Hero.svelte
+++ b/src/routes/home-slices/Hero.svelte
@@ -6,9 +6,9 @@
import HeroBackground from './HeroBackground.svelte'
import HyprlandLogo from '$lib/images/logos/HyprlandLogo.svelte'
- export let backgroundData
+ let { backgroundData } = $props()
- let isVisible = true
+ let isVisible = $state(true)
let isMobile = false
onMount(() => {
@@ -19,7 +19,7 @@
{
+ oninview_change={({ detail: { inView } }) => {
isVisible = inView
}}
>
@@ -30,13 +30,16 @@
- Modern compositor
with the looks
+ Modern compositor
with the looks
- Hyprland provides the latest Wayland features, dynamic tiling, all the eyecandy, powerful
- plugins and much more, while still being lightweight and responsive
+ Hyprland provides the latest Wayland features, dynamic tiling,
+ all the eyecandy, powerful plugins and much more, while still
+ being lightweight and responsive
- export let backgroundData
+ let { backgroundData } = $props()
- const { workspacesPerRow, gapLength, workspaceHeight, height, leftColumns, rightColumns } =
- backgroundData
+ const {
+ workspacesPerRow,
+ gapLength,
+ workspaceHeight,
+ height,
+ leftColumns,
+ rightColumns
+ } = backgroundData
const REVEAL_DURATION = 800 // in ms
-
+
-
+
{#each leftColumns as column}
@@ -23,9 +33,17 @@
{#each workspace as tiles}
{#each tiles as { color, image }}
-
+
{#if image}
-
+
{/if}
{/each}
@@ -45,9 +63,17 @@
{#each workspace as tiles}
{#each tiles as { color, image }}
-
+
{#if image}
-
+
{/if}
{/each}
@@ -94,7 +120,11 @@
&::after {
content: ' ';
- background: radial-gradient(80% 250%, theme(colors.black) 10%, transparent 50%);
+ background: radial-gradient(
+ 80% 250%,
+ theme(colors.black) 10%,
+ transparent 50%
+ );
position: absolute;
top: 50%;
left: 50%;
@@ -161,7 +191,11 @@
&:hover {
opacity: 1;
scale: 1.02;
- background-color: color-mix(in hsl, var(--color), transparent 20%);
+ background-color: color-mix(
+ in hsl,
+ var(--color),
+ transparent 20%
+ );
box-shadow:
0px 0px 10px var(--color),
0px 0px 40px var(--color);
@@ -181,7 +215,8 @@
& img {
opacity: 0;
- transition: opacity var(--reveal-duration) cubic-bezier(1, -0.4, 0.165, 1);
+ transition: opacity var(--reveal-duration)
+ cubic-bezier(1, -0.4, 0.165, 1);
pointer-events: none;
}
&:hover img {
@@ -191,7 +226,8 @@
}
.top-light {
- background: url('/imgs/grain.webp'),
+ background:
+ url('/imgs/grain.webp'),
radial-gradient(
100% 80% at top,
theme(colors.cyan.500 / 50%) 0%,
diff --git a/src/routes/home-slices/HyprPerksSlice.svelte b/src/routes/home-slices/HyprPerksSlice.svelte
index eff256c..33e79ff 100644
--- a/src/routes/home-slices/HyprPerksSlice.svelte
+++ b/src/routes/home-slices/HyprPerksSlice.svelte
@@ -17,27 +17,41 @@
- <TitleHeading slot="title" class="">Hyprperks</TitleHeading>
+ {#snippet title()}
+ <TitleHeading class="">Hyprperks</TitleHeading>
+ {/snippet}
<TitleSubtile class="max-w-[55ch]">
- <a href={hyprperksLink} class=" text-primary hover:underline" target="_blank"
+ <a
+ href={hyprperksLink}
+ class=" text-primary hover:underline"
+ target="_blank"
>Subscribe for first-party configurations, priority support</a
>
- and to support the development. Fully optional, but crafted with love
+ and to support the development. Fully optional, but crafted with
+ love
</TitleSubtile>
-
+
-
+
-
+