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

Improve hero design (#66)

Browse source 
* improve hero design

* navbar: smaller font
Looks better
This commit is contained in:
Visual-Dawg 2024-08-02 01:10:58 +03:00 committed by GitHub
parent c67e70e476
commit 833bb2805e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 19 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/lib/components/Button.svelte
View file

@ -7,13 +7,13 @@
export let type = 'primary'
$: classes = clsx(
'animate rounded text-sm font-bold hover:scale-[1.01] active:scale-100',
'animate rounded text-sm font-bold hover:scale-[1.01] active:scale-100',
'primary' == type && 'bg-slate-200 text-black',
'outline' == type && 'bg-transparent text-white outline outline-2 outline-slate-200',
'fancyOutline' == type && 'fancy',
'md' == size && 'min-w-[5.5rem] px-4 py-2.5',
'lg' == size && 'min-w-[5.5rem] px-6 py-3 ',
'xl' == size && 'min-w-[5.5rem] px-8 py-4 ',
'lg' == size && 'min-w-[5.5rem] px-6 py-3',
'xl' == size && 'min-w-[5.5rem] px-8 py-3.5',
$$restProps.class
)
</script>

16
src/routes/Navbar.svelte
View file

@ -19,14 +19,14 @@
</script>
<header
class="fixed inset-x-0 top-0 z-50 flex items-center justify-between rounded-full px-6 pt-2 duration-1000 animate-in fade-in-0 slide-in-from-top-1 fill-mode-backwards [animation-delay:0ms]"
class="fixed inset-x-0 top-0 z-50 flex items-center justify-between rounded-full px-6 pt-2 text-sm duration-1000 animate-in fade-in-0 slide-in-from-top-1 fill-mode-backwards [animation-delay:0ms]"
>
<a
href="/"
class="flex items-center gap-4 rounded-full bg-black/50 px-4 py-2 font-london text-sm font-bold tracking-wider text-white backdrop-blur"
class="flex items-center gap-4 rounded-full bg-black/50 px-4 py-2 font-london font-bold tracking-wider text-white backdrop-blur"
>
<HyprlandLogo class="h-8 w-6 object-contain" />
<span class="mt-1 text-lg tracking-widest">Hyprland</span></a
<span class="mt-1 tracking-widest">Hyprland</span></a
>
<button
@ -82,7 +82,12 @@
</a>
</li>
<li>
<a href={forgejoLink} class="social-icon" aria-label="Hyprland git instance" target="_blank">
<a
href={forgejoLink}
class="social-icon"
aria-label="Hyprland git instance"
target="_blank"
>
<ForgejoIcon class="h-full w-full" />
</a>
</li>
@ -100,7 +105,6 @@
.nav {
/* Base classes */
font-weight: 600;
@apply text-lg;
/* Mobile classes */
position: absolute;
@ -117,7 +121,7 @@
/* Desktop classes */
@media screen(lg) {
@apply relative flex h-min w-max flex-row rounded-full bg-black/40 p-2 pl-5 text-base outline outline-primary/10;
@apply relative flex h-min w-max flex-row rounded-full bg-black/40 p-2 pl-5 outline outline-primary/10;
}
}

18
src/routes/home-slices/Hero.svelte
View file

@ -17,7 +17,7 @@
</script>
<section
class="relative flex h-[100svh] min-h-[52rem] w-full flex-col items-center justify-center overflow-x-hidden"
class="relative flex h-[100svh] min-h-[36rem] w-full flex-col items-center justify-center overflow-x-hidden"
use:inview
on:inview_change={({ detail: { inView } }) => {
isVisible = inView
@ -27,31 +27,26 @@
<div
class="pointer-events-none z-10 flex h-full min-h-max flex-col items-center justify-center px-5"
>
<div
class="ani-in -mt-10 mb-8 flex flex-col items-center gap-6 text-center fill-mode-backwards sm:-mt-20"
>
<HyprlandLogo class=" mb-6 h-40 w-48 sm:h-48 sm:w-56" />
</div>
<h1
class="ani-in title pointer-events-auto mb-4 max-w-[20ch] text-center !leading-[1.25] fill-mode-backwards [animation-delay:384ms]"
class="ani-in title pointer-events-auto mb-4 max-w-[20ch] text-center text-4xl font-bold !leading-[1.25] fill-mode-backwards [animation-delay:384ms] sm:text-6xl md:text-7xl lg:text-8xl lg:tracking-tight"
>
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-lg sm:px-0 md:max-w-lg"
class="ani-in mb-8 text-center text-base font-medium text-slate-400 fill-mode-backwards [animation-delay:794ms] sm:mb-12 sm:max-w-lg sm:px-0 sm:text-xl md:max-w-lg md:text-2xl lg:max-w-[50ch]"
>
Hyprland provides the latest Wayland features, dynamic tiling, all the eyecandy, powerful
plugins and much more.
plugins 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]"
>
<a href="https://wiki.hyprland.org/Getting-Started/Installation/">
<Button size="lg">Install</Button>
<Button size="xl">Install</Button>
</a>
<a href="https://wiki.hyprland.org/">
<Button type="fancyOutline" size="lg">Wiki</Button>
<Button type="fancyOutline" size="xl">Wiki</Button>
</a>
</div>
</div>
@ -72,7 +67,6 @@
theme(colors.cyan.500 / 0%)
);
background-clip: text;
@apply text-4xl font-bold sm:text-5xl md:text-7xl;
}
.title-gradient {