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

improve hero

Browse source
This commit is contained in:
VDawg 2023-11-13 19:49:59 +01:00
parent a8fdbeed56
commit 6417ed647e
1 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/routes/Hero.svelte
View file

@ -18,7 +18,7 @@
</script> </script>
<section <section
class="relative flex h-max min-h-[100svh] w-full flex-col items-center justify-center overflow-x-hidden" class="relative flex h-[100svh] min-h-[52rem] w-full flex-col items-center justify-center overflow-x-hidden"
use:inview use:inview
on:inview_change={({ detail: { inView } }) => { on:inview_change={({ detail: { inView } }) => {
isVisible = inView isVisible = inView
@ -26,9 +26,9 @@
> >
<!-- Hero text and logo --> <!-- Hero text and logo -->
<div <div
class="pointer-events-none z-10 flex h-screen min-h-max flex-col items-center justify-center px-5" class="pointer-events-none z-10 flex h-full min-h-max flex-col items-center justify-center px-5"
> >
<div class="mb-8 flex flex-col items-center gap-6 text-center sm:-mt-20"> <div class="-mt-10 mb-8 flex flex-col items-center gap-6 text-center sm:-mt-20">
<img <img
src={Logo} src={Logo}
alt="Hyprland Logo" alt="Hyprland Logo"
@ -38,15 +38,15 @@
/> />
</div> </div>
<h1 <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" class="ani-in title pointer-events-auto mb-4 max-w-[20ch] text-center !leading-[1.25] fill-mode-backwards [animation-delay:384ms]"
> >
Tiling compositor <br /><span class="hyprgradient title-gradient">with the looks</span> Tiling compositor <br /><span class="hyprgradient title-gradient">with the looks</span>
</h1> </h1>
<p <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" class="ani-in mb-8 text-center text-xl font-medium text-slate-300 fill-mode-backwards [animation-delay:794ms] sm:max-w-lg sm:px-0 md:max-w-lg"
> >
Hyprland provides the latest Wayland features, dynamic tiling, all the eyecandy, powerful Hyprland provides the latest Wayland features, dynamic tiling, all the eyecandy, powerful
plugins<br /> and much more. plugins and much more.
</p> </p>
<div <div
@ -77,7 +77,7 @@
theme(colors.cyan.500 / 0%) theme(colors.cyan.500 / 0%)
); );
background-clip: text; background-clip: text;
@apply text-6xl font-bold tracking-tight md:text-7xl; @apply text-4xl font-bold sm:text-5xl md:text-7xl;
} }
.title-gradient { .title-gradient {