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

.

Browse source
This commit is contained in:
Christofer 2023-09-05 23:09:18 +04:00
parent c99abd6823
commit 620e61842a
5 changed files with 89 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/routes/DiscordProfilePicture.svelte
View file

@ -75,22 +75,22 @@
</script> </script>
<div <div
class={clsx('absolute top-0 left-0 select-none touch-none ', containerClass)} class={clsx('absolute left-0 top-0 touch-none select-none ', containerClass)}
style:translate={coordinates.map((xy) => xy + 'px').join(' ')} style:translate={coordinates.map((xy) => xy + 'px').join(' ')}
style="width: {size}px; height: {size}px;--delay: {delay}ms;" style="width: {size}px; height: {size}px;--delay: {delay}ms;"
> >
<div <div
class={clsx( class={clsx(
'absolute inset-0 w-full h-full group select-none touch-none', 'group absolute inset-0 h-full w-full touch-none select-none',
isAnimating && 'opacity-0' isAnimating && 'opacity-0'
)} )}
style:translate={`calc( ${$dragCoordinates[0]}px ) ${$dragCoordinates[1]}px`} style:translate={`calc( ${$dragCoordinates[0]}px ) ${$dragCoordinates[1]}px`}
use:inview={{ unobserveOnEnter: true, threshold: 0.4 }} use:inview={{ unobserveOnEnter: true, threshold: 0.4 }}
class:_animate={isAnimating && hasEnteredView} class:_animate={isAnimating && hasEnteredView}
on:inview_enter={() => setTimeout(() => (hasEnteredView = true), 750)} on:inview_enter={() => setTimeout(() => (hasEnteredView = true), 550)}
> >
<img <img
class="w-full h-full group select-none touch-none outline-4 outline rounded-[50%] {$$restProps.class}" class="group h-full w-full touch-none select-none rounded-[50%] outline outline-4 {$$restProps.class}"
bind:this={imageElement} bind:this={imageElement}
src={image} src={image}
alt={'community profile picture'} alt={'community profile picture'}
@ -101,7 +101,7 @@
{#if quote} {#if quote}
<div <div
class="absolute tracking-wide opacity-0 -top-6 px-2 py-1 rounded left-1/2 -translate-x-1/2 bg-slate-800/50 pointer-events-none font-medium text-sm group-hover:opacity-100 select-none duration-150" class="pointer-events-none absolute -top-6 left-1/2 -translate-x-1/2 select-none rounded bg-slate-800/50 px-2 py-1 text-sm font-medium tracking-wide opacity-0 duration-150 group-hover:opacity-100"
> >
{quote} {quote}
</div> </div>

32
src/routes/Hero.svelte
View file

@ -23,25 +23,27 @@
}} }}
> >
<!-- Hero text and logo --> <!-- Hero text and logo -->
<div class="x z-10 flex h-screen min-h-max flex-col items-center justify-center"> <div
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"> <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-48 fill-mode-backwards" />
<div class="ani-in relative fill-mode-backwards [animation-delay:384ms]"> <div class="ani-in relative fill-mode-backwards [animation-delay:384ms]">
<h1 <h1
class="hyprgradient bg-clip-text p-2 font-london text-6xl font-bold tracking-wider text-transparent md:text-7xl md:tracking-widest" 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"
> >
Hyprland Hyprland
</h1> </h1>
</div> </div>
</div> </div>
<h2 <h2
class="ani-in 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 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<br />with the looks
</h2> </h2>
<div <div
class="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-6 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/"> <a href="https://wiki.hyprland.org/Getting-Started/Installation/">
<Button size="lg">Install</Button> <Button size="lg">Install</Button>
@ -68,31 +70,9 @@
{/each} {/each}
</div> </div>
{/if} --> {/if} -->
<!-- Gradient background -->
<div
class="max-w-screen absolute right-0 top-0 -z-50 h-full min-h-screen w-screen overflow-hidden"
>
<div class="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2">
<div
class="bg bg-gradient-radial from-sky-400/20 via-emerald-300/0 to-emerald-200/0"
style="--seed: 20;"
/>
</div>
<div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
<div
class="bg bg-gradient-radial from-blue-500/10 to-cyan-400/0"
style="--offset: -3s; --seed: 4; --duration:102s"
/>
</div>
</div>
</section> </section>
<style lang="postcss"> <style lang="postcss">
.bg {
width: calc(120vw + 500px);
height: calc(120vh + 500px);
}
@keyframes slidein { @keyframes slidein {
from { from {

121
src/routes/HeroBackground.svelte
View file

@ -1,15 +1,16 @@
<script> <script>
import baseColors from 'tailwindcss/colors' import baseColors from 'tailwindcss/colors'
const amountTiles = 4 // Has to be an even number as the tiles get "mirrored" const workspacesPerRow = 4
const workspaceHeight = 150 const workspaceHeight = 240
const gapLength = 24 const gapLength = 32
const colors = [baseColors.blue[500], baseColors.cyan[400], baseColors.sky[500]] const colors = [baseColors.blue[500], baseColors.cyan[400], baseColors.sky[500]]
const leftColumns = Array.from({ length: 3 }, () => generateRow(amountTiles)) const leftColumns = Array.from({ length: 3 }, () => generateRow(workspacesPerRow))
const rightColumns = Array.from({ length: 3 }, () => generateRow(amountTiles)) const rightColumns = Array.from({ length: 3 }, () => generateRow(workspacesPerRow))
const leftTotalLength = leftColumns /** Used to transform the rows by their own lenght*/
.slice(0, leftColumns.length / 2) const height = workspacesPerRow * (workspaceHeight + gapLength)
.reduce((total, current, index, array) => total + workspaceHeight + gapLength, 0)
let wrapperElement, mouseX, mouseY
function generateRow(amount) { function generateRow(amount) {
const base = Array.from({ length: amount }).map(generateWorkspace) const base = Array.from({ length: amount }).map(generateWorkspace)
@ -36,12 +37,15 @@
} }
</script> </script>
<div class="wrapper" aria-hidden="true"> <div class="wrapper" aria-hidden="true" bind:this={wrapperElement}>
<div <div
class="inner-wrapper" class="inner-wrapper"
style={`--amount: ${amountTiles}; --workspace-gap: ${gapLength}px;--workspace-height: ${workspaceHeight}px;`} style={`--amount: ${workspacesPerRow}; --workspace-gap: ${gapLength}px;--workspace-height: ${workspaceHeight}px; --length: ${height}px;`}
> >
<div class="columns left" style={`--length: ${leftTotalLength}; `}> <!-- Gradient background -->
<div class="top-light" />
<div class="columns left" aria-hidden="true">
{#each leftColumns as column} {#each leftColumns as column}
<div class="column"> <div class="column">
{#each column as workspace} {#each column as workspace}
@ -59,7 +63,7 @@
{/each} {/each}
</div> </div>
<div class="columns right" style={`--length: ${leftTotalLength}; `}> <div class="columns right" aria-hidden="true">
{#each rightColumns as column} {#each rightColumns as column}
<div class="column"> <div class="column">
{#each column as workspace} {#each column as workspace}
@ -81,13 +85,10 @@
<style lang="postcss"> <style lang="postcss">
.left { .left {
transform: rotateY(10deg); transform: rotateY(10deg) rotateZ(90deg);
mask-image: linear-gradient(to right, black, transparent);
/* margin-left: -2200px; */
} }
.right { .right {
transform: rotateY(-10deg); transform: rotateY(-10deg) rotateZ(-90deg);
/* margin-left: -2200px; */
} }
.wrapper { .wrapper {
@ -95,47 +96,66 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: calc(100vh - 48px);
/* margin-top: -200px; */ contain: strict;
@apply max-sm:hidden;
} }
.inner-wrapper { .inner-wrapper {
position: absolute; position: absolute;
perspective: 100px; perspective: 100px;
height: 100%; height: 100%;
width: max(100vw, 1100px); width: max(100vw, 2200px);
/* translate: -50% 0px; */
/* overflow: visible; */
contain: strict; contain: strict;
display: flex; display: flex;
border: red solid 1px; mask-image: linear-gradient(to top, transparent 0%, black 20%);
mask-image: radial-gradient(circle, transparent 10%, black 50%);
&::after {
content: ' ';
background: radial-gradient(80% 250%, theme(colors.black) 10%, transparent 50%);
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
width: 100%;
height: 100%;
z-index: -10;
pointer-events: none;
}
} }
.columns { .columns {
display: flex; display: flex;
gap: 2rem; gap: 2rem;
flex-grow: 1; flex-grow: 1;
mask-image: linear-gradient(to top, transparent 10%, black); mask-image: linear-gradient(to top, transparent 0%, black 30%);
/* border: cyan solid 1px; */ z-index: -10;
height: var(--length);
min-height: var(--length);
max-height: var(--length);
} }
.column { .column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 200%;
width: 100%; width: 100%;
animation: loop 20s infinite linear;
gap: var(--workspace-gap); gap: var(--workspace-gap);
/* width: 400px; */ z-index: -50;
animation: loop 98s infinite linear;
@media (prefers-reduced-motion) {
animation: none;
}
} }
.workspace { .workspace {
display: flex; display: flex;
gap: 8px; gap: 8px;
height: var(--workspace-height); min-height: var(--workspace-height);
max-height: var(--workspace-height);
width: 100%; width: 100%;
/* border: red solid 1px; */
} }
.tiles { .tiles {
@ -143,35 +163,44 @@
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
flex-grow: 1; flex-grow: 1;
/* border: blue 1px solid; */
} }
.tile { .tile {
border: var(--color) 1px solid; border: var(--color) 2px solid;
flex-grow: 1; flex-grow: 1;
height: var(--height); height: var(--height);
border-radius: 12px; border-radius: 12px;
pointer-events: auto; pointer-events: auto;
transition: all 140ms ease-in-out; transition: all 280ms ease-in-out;
&:hover { &:hover {
animation: flicker infinite 800ms; background: color-mix(in hsl, var(--color), transparent 20%);
box-shadow:
0px 0px 10px var(--color),
0px 0px 40px var(--color);
} }
} }
.top-light {
background: radial-gradient(
100% 80% at top,
theme(colors.cyan.500 / 60%) 0%,
theme(colors.sky.500 / 20%),
transparent
);
width: 100%;
height: 100%;
position: absolute;
z-index: 10;
top: 0;
left: 0;
pointer-events: none;
}
@keyframes loop { @keyframes loop {
100% { 100% {
translate: 0px calc(-1px * var(--length)); translate: 0px calc(-1 * var(--length));
} /* translate: 0px -50%; */
}
@keyframes flicker {
0% {
background: mix-color(var(--color), transparent 0%);
}
100% {
background: var(--color);
box-shadow: 0px 0px 10px var(--color);
} }
} }
</style> </style>

2
src/routes/Navbar.svelte
View file

@ -25,7 +25,7 @@
class="flex items-center gap-4 rounded-full py-1 font-london text-sm font-bold tracking-wider text-white lg:bg-black/50 lg:px-4 lg:py-2 lg:backdrop-blur" class="flex items-center gap-4 rounded-full py-1 font-london text-sm font-bold tracking-wider text-white lg:bg-black/50 lg:px-4 lg:py-2 lg:backdrop-blur"
> >
<img src={logo} alt="Hyprland Logo" class="w-6" /><span <img src={logo} alt="Hyprland Logo" class="w-6" /><span
class="hidden text-xl tracking-widest lg:mt-1 lg:block">Hyprland</span class="hidden text-lg tracking-widest lg:mt-1 lg:block">Hyprland</span
></a ></a
> >

3
src/routes/PreviewRiceSlice.svelte
View file

@ -40,7 +40,7 @@
</script> </script>
<section <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 {$$restProps.class}" 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 class:isVisible
> >
<div <div
@ -78,6 +78,7 @@
isShowingControls ? 'opacity-100' : 'pointer-events-none' isShowingControls ? 'opacity-100' : 'pointer-events-none'
)} )}
> >
<!-- Currently there is no audio. Component might get refractored into a stand-alone player, so lets leave that here -->
<!-- <button <!-- <button
class="absolute bottom-4 right-4 h-10 w-10 rounded-full bg-black/5 p-2 opacity-70 hover:opacity-100" class="absolute bottom-4 right-4 h-10 w-10 rounded-full bg-black/5 p-2 opacity-70 hover:opacity-100"
on:click|stopPropagation={toggleMute} on:click|stopPropagation={toggleMute}