hyprwm
/
hyprland-website
mirror of https://github.com/hyprwm/hyprland-website.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

update Hero

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" loading="eager"
decoding="async" decoding="async"
/> />
<div class="ani-in relative fill-mode-backwards [animation-delay:384ms]">
<h1 class="hyprgradient title">Hyprland</h1>
</div>
</div> </div>
<h2 <h1
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" 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 Tiling compositor <br /><span class="hyprgradient title-gradient">with the looks</span>
</h2> </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 <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]" 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"> <div class="absolute inset-0">
<HeroBackground {backgroundData} /> <HeroBackground {backgroundData} />
</div> </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> </section>
<style lang="postcss"> <style lang="postcss">
.title { .title {
background-clip: text;
padding: 0.5rem; padding: 0.5rem;
pointer-events: auto; 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 { @keyframes slidein {