hyprwm/hyprland-website
1
0
Fork 0
mirror of https://github.com/hyprwm/hyprland-website.git synced 2024-11-17 02:45:59 +01:00
Code Issues Projects Releases Packages Wiki Activity

update Hero

Browse source
This commit is contained in:
VDawg 2023-11-08 15:52:12 +02:00
parent 0a668ef6fe
commit a5be9f25c5
1 changed files with 23 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/routes/Hero.svelte
View file

@ -36,15 +36,18 @@
loading="eager"
decoding="async"
/>
<div class="ani-in relative fill-mode-backwards [animation-delay:384ms]">
<h1 class="hyprgradient title">Hyprland</h1>
</div>
</div>
<h2
class="ani-in pointer-events-auto mb-10 max-w-[30ch] text-center text-lg font-medium leading-9 text-blue-200/80 fill-mode-backwards [animation-delay:944ms] sm:text-2xl"
<h1
class="ani-in title pointer-events-auto mb-4 max-w-[20ch] text-center text-lg font-medium fill-mode-backwards [animation-delay:384ms] sm:text-2xl"
>
Dynamic tiling Wayland compositor with the looks
</h2>
Tiling compositor <br /><span class="hyprgradient title-gradient">with the looks</span>
</h1>
<p
class="ani-in mb-8 text-center text-xl font-medium text-slate-300 fill-mode-backwards [animation-delay:794ms] sm:max-w-md sm:px-0 md:max-w-lg"
>
Hyprland provides the latest Wayland features, dynamic tiling, all the eyecandy, powerful
plugins<br /> and much more.
</p>
<div
class="pointer-events-auto flex items-center gap-7 duration-500 animate-in fade-in-0 slide-in-from-bottom-4 fill-mode-backwards [animation-delay:1390ms]"
@ -61,27 +64,25 @@
<div class="absolute inset-0">
<HeroBackground {backgroundData} />
</div>
<!-- Fireflies -->
<!-- {#if isVisible}
<div
class="max-w-screen pointer-events-none absolute inset-0 -z-10 overflow-hidden animate-in fade-in-0 fill-mode-backwards [animation-delay:900ms] [animation-duration:4500ms]"
>
<div class="absolute bottom-0 z-10 h-52 w-full bg-gradient-to-t from-black" />
{#each { length: 40 } as _}
<Firefly />
{/each}
</div>
{/if} -->
</section>
<style lang="postcss">
.title {
background-clip: text;
padding: 0.5rem;
pointer-events: auto;
@apply font-london text-6xl font-bold tracking-wider text-transparent md:text-7xl md:tracking-widest;
color: transparent;
background: linear-gradient(
to bottom right,
theme(colors.white) 40%,
theme(colors.cyan.500 / 0%)
);
background-clip: text;
@apply text-6xl font-bold tracking-tight md:text-7xl;
}
.title-gradient {
background-clip: text;
@apply text-transparent;
}
@keyframes slidein {