This commit is contained in:
Christofer
parent
c99abd6823
commit
620e61842a
|
|
@ -75,22 +75,22 @@
|
|||
</script>
|
||||
|
||||
<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="width: {size}px; height: {size}px;--delay: {delay}ms;"
|
||||
>
|
||||
<div
|
||||
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'
|
||||
)}
|
||||
style:translate={`calc( ${$dragCoordinates[0]}px ) ${$dragCoordinates[1]}px`}
|
||||
use:inview={{ unobserveOnEnter: true, threshold: 0.4 }}
|
||||
class:_animate={isAnimating && hasEnteredView}
|
||||
on:inview_enter={() => setTimeout(() => (hasEnteredView = true), 750)}
|
||||
on:inview_enter={() => setTimeout(() => (hasEnteredView = true), 550)}
|
||||
>
|
||||
<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}
|
||||
src={image}
|
||||
alt={'community profile picture'}
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
|
||||
{#if quote}
|
||||
<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}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,25 +23,27 @@
|
|||
}}
|
||||
>
|
||||
<!-- 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">
|
||||
<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]">
|
||||
<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
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
<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
|
||||
</h2>
|
||||
|
||||
<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/">
|
||||
<Button size="lg">Install</Button>
|
||||
|
|
@ -68,31 +70,9 @@
|
|||
{/each}
|
||||
</div>
|
||||
{/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>
|
||||
|
||||
<style lang="postcss">
|
||||
.bg {
|
||||
width: calc(120vw + 500px);
|
||||
height: calc(120vh + 500px);
|
||||
}
|
||||
|
||||
@keyframes slidein {
|
||||
from {
|
||||
|
|
|
|||
|
|
@ -1,15 +1,16 @@
|
|||
<script>
|
||||
import baseColors from 'tailwindcss/colors'
|
||||
|
||||
const amountTiles = 4 // Has to be an even number as the tiles get "mirrored"
|
||||
const workspaceHeight = 150
|
||||
const gapLength = 24
|
||||
const workspacesPerRow = 4
|
||||
const workspaceHeight = 240
|
||||
const gapLength = 32
|
||||
const colors = [baseColors.blue[500], baseColors.cyan[400], baseColors.sky[500]]
|
||||
const leftColumns = Array.from({ length: 3 }, () => generateRow(amountTiles))
|
||||
const rightColumns = Array.from({ length: 3 }, () => generateRow(amountTiles))
|
||||
const leftTotalLength = leftColumns
|
||||
.slice(0, leftColumns.length / 2)
|
||||
.reduce((total, current, index, array) => total + workspaceHeight + gapLength, 0)
|
||||
const leftColumns = Array.from({ length: 3 }, () => generateRow(workspacesPerRow))
|
||||
const rightColumns = Array.from({ length: 3 }, () => generateRow(workspacesPerRow))
|
||||
/** 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)
|
||||
|
|
@ -36,12 +37,15 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="wrapper" aria-hidden="true">
|
||||
<div class="wrapper" aria-hidden="true" bind:this={wrapperElement}>
|
||||
<div
|
||||
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}
|
||||
<div class="column">
|
||||
{#each column as workspace}
|
||||
|
|
@ -59,7 +63,7 @@
|
|||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="columns right" style={`--length: ${leftTotalLength}; `}>
|
||||
<div class="columns right" aria-hidden="true">
|
||||
{#each rightColumns as column}
|
||||
<div class="column">
|
||||
{#each column as workspace}
|
||||
|
|
@ -81,13 +85,10 @@
|
|||
|
||||
<style lang="postcss">
|
||||
.left {
|
||||
transform: rotateY(10deg);
|
||||
mask-image: linear-gradient(to right, black, transparent);
|
||||
/* margin-left: -2200px; */
|
||||
transform: rotateY(10deg) rotateZ(90deg);
|
||||
}
|
||||
.right {
|
||||
transform: rotateY(-10deg);
|
||||
/* margin-left: -2200px; */
|
||||
transform: rotateY(-10deg) rotateZ(-90deg);
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
|
|
@ -95,47 +96,66 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
/* margin-top: -200px; */
|
||||
height: calc(100vh - 48px);
|
||||
contain: strict;
|
||||
|
||||
@apply max-sm:hidden;
|
||||
}
|
||||
|
||||
.inner-wrapper {
|
||||
position: absolute;
|
||||
perspective: 100px;
|
||||
height: 100%;
|
||||
width: max(100vw, 1100px);
|
||||
/* translate: -50% 0px; */
|
||||
/* overflow: visible; */
|
||||
width: max(100vw, 2200px);
|
||||
contain: strict;
|
||||
display: flex;
|
||||
border: red solid 1px;
|
||||
mask-image: radial-gradient(circle, transparent 10%, black 50%);
|
||||
mask-image: linear-gradient(to top, transparent 0%, black 20%);
|
||||
|
||||
&::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 {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
flex-grow: 1;
|
||||
mask-image: linear-gradient(to top, transparent 10%, black);
|
||||
/* border: cyan solid 1px; */
|
||||
mask-image: linear-gradient(to top, transparent 0%, black 30%);
|
||||
z-index: -10;
|
||||
height: var(--length);
|
||||
min-height: var(--length);
|
||||
max-height: var(--length);
|
||||
}
|
||||
|
||||
.column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
height: 200%;
|
||||
width: 100%;
|
||||
animation: loop 20s infinite linear;
|
||||
gap: var(--workspace-gap);
|
||||
/* width: 400px; */
|
||||
z-index: -50;
|
||||
animation: loop 98s infinite linear;
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.workspace {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
height: var(--workspace-height);
|
||||
min-height: var(--workspace-height);
|
||||
max-height: var(--workspace-height);
|
||||
width: 100%;
|
||||
/* border: red solid 1px; */
|
||||
}
|
||||
|
||||
.tiles {
|
||||
|
|
@ -143,35 +163,44 @@
|
|||
flex-direction: column;
|
||||
gap: 8px;
|
||||
flex-grow: 1;
|
||||
/* border: blue 1px solid; */
|
||||
}
|
||||
|
||||
.tile {
|
||||
border: var(--color) 1px solid;
|
||||
border: var(--color) 2px solid;
|
||||
flex-grow: 1;
|
||||
height: var(--height);
|
||||
border-radius: 12px;
|
||||
pointer-events: auto;
|
||||
transition: all 140ms ease-in-out;
|
||||
transition: all 280ms ease-in-out;
|
||||
|
||||
&: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 {
|
||||
100% {
|
||||
translate: 0px calc(-1px * var(--length));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flicker {
|
||||
0% {
|
||||
background: mix-color(var(--color), transparent 0%);
|
||||
}
|
||||
100% {
|
||||
background: var(--color);
|
||||
box-shadow: 0px 0px 10px var(--color);
|
||||
translate: 0px calc(-1 * var(--length));
|
||||
/* translate: 0px -50%; */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
>
|
||||
<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
|
||||
>
|
||||
|
||||
|
|
|
|||
|
|
@ -40,7 +40,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 {$$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
|
||||
>
|
||||
<div
|
||||
|
|
@ -78,6 +78,7 @@
|
|||
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
|
||||
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}
|
||||
|
|
|
|||
Loading…
Reference in New Issue