hyprwm/hyprland-website
1
0
Fork 0
mirror of https://github.com/hyprwm/hyprland-website.git synced 2024-11-16 18:35:59 +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

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

@ -12,8 +12,8 @@
'outline' == type && 'bg-transparent text-white outline outline-2 outline-slate-200', 'outline' == type && 'bg-transparent text-white outline outline-2 outline-slate-200',
'fancyOutline' == type && 'fancy', 'fancyOutline' == type && 'fancy',
'md' == size && 'min-w-[5.5rem] px-4 py-2.5', 'md' == size && 'min-w-[5.5rem] px-4 py-2.5',
'lg' == size && 'min-w-[5.5rem] px-6 py-3 ', 'lg' == size && 'min-w-[5.5rem] px-6 py-3',
'xl' == size && 'min-w-[5.5rem] px-8 py-4 ', 'xl' == size && 'min-w-[5.5rem] px-8 py-3.5',
$$restProps.class $$restProps.class
) )
</script> </script>

16
src/routes/Navbar.svelte
View file

@ -19,14 +19,14 @@
</script> </script>
<header <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 <a
href="/" 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" /> <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 <button
@ -82,7 +82,12 @@
</a> </a>
</li> </li>
<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" /> <ForgejoIcon class="h-full w-full" />
</a> </a>
</li> </li>
@ -100,7 +105,6 @@
.nav { .nav {
/* Base classes */ /* Base classes */
font-weight: 600; font-weight: 600;
@apply text-lg;
/* Mobile classes */ /* Mobile classes */
position: absolute; position: absolute;
@ -117,7 +121,7 @@
/* Desktop classes */ /* Desktop classes */
@media screen(lg) { @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> </script>
<section <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 use:inview
on:inview_change={({ detail: { inView } }) => { on:inview_change={({ detail: { inView } }) => {
isVisible = inView isVisible = inView
@ -27,31 +27,26 @@
<div <div
class="pointer-events-none z-10 flex h-full 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="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 <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> 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-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 Hyprland provides the latest Wayland features, dynamic tiling, all the eyecandy, powerful
plugins and much more. plugins and much more
</p> </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]"
> >
<a href="https://wiki.hyprland.org/Getting-Started/Installation/"> <a href="https://wiki.hyprland.org/Getting-Started/Installation/">
<Button size="lg">Install</Button> <Button size="xl">Install</Button>
</a> </a>
<a href="https://wiki.hyprland.org/"> <a href="https://wiki.hyprland.org/">
<Button type="fancyOutline" size="lg">Wiki</Button> <Button type="fancyOutline" size="xl">Wiki</Button>
</a> </a>
</div> </div>
</div> </div>
@ -72,7 +67,6 @@
theme(colors.cyan.500 / 0%) theme(colors.cyan.500 / 0%)
); );
background-clip: text; background-clip: text;
@apply text-4xl font-bold sm:text-5xl md:text-7xl;
} }
.title-gradient { .title-gradient {