hyprwm/hyprland-website
1
0
Fork 0
mirror of https://github.com/hyprwm/hyprland-website.git synced 2024-12-22 18:29:48 +01:00
Code Issues Projects Releases Packages Wiki Activity

work

Browse source
This commit is contained in:
Christofer 2023-09-07 23:03:47 +04:00
parent 620e61842a
commit e4354a407c
13 changed files with 211 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
postcss.config.js
View file

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

8
src/lib/components/Title.svelte
View file

@ -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>

8
src/routes/FameRicePreview.svelte
View file

@ -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>

2
src/routes/FeatureCard.svelte
View file

@ -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;
}

26
src/routes/FeaturesSlice.svelte
View file

@ -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 {

5
src/routes/Hero.svelte
View file

@ -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%);

32
src/routes/HeroBackground.svelte
View file

@ -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>

9
src/routes/Navbar.svelte
View file

@ -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;

15
src/routes/PreviewRiceSlice.svelte
View file

@ -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;

9
src/routes/WallOfFameSlice.svelte
View file

@ -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;

121
src/routes/wall_of_fame/+page.svelte
View file

@ -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>

29
src/routes/wall_of_fame/Contest.svelte
View file

@ -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;
}
}

13
src/routes/wall_of_fame/FamedRice.svelte
View file

@ -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);
}