From daeb5e604a376a4b72a7281e7cb5aa52cc6da9f9 Mon Sep 17 00:00:00 2001
From: LukaDev <47296785+lukadev-0@users.noreply.github.com>
Date: Tue, 13 Aug 2024 15:09:05 +0200
Subject: [PATCH] feat(website): make page more responsive

---
 website/src/routes/+page.svelte |  2 +-
 website/src/routes/Hero.svelte  | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/website/src/routes/+page.svelte b/website/src/routes/+page.svelte
index 7553156..d50c947 100644
--- a/website/src/routes/+page.svelte
+++ b/website/src/routes/+page.svelte
@@ -15,7 +15,7 @@
 	</h2>
 
 	<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-		{#each data.packages as pkg}
+		{#each data.packages.slice(0, 24) as pkg}
 			{@const [scope, name] = pkg.name.split("/")}
 			{@const targetName = pkg.target.kind[0].toUpperCase() + pkg.target.kind.slice(1)}
 
diff --git a/website/src/routes/Hero.svelte b/website/src/routes/Hero.svelte
index b2acc55..b18f616 100644
--- a/website/src/routes/Hero.svelte
+++ b/website/src/routes/Hero.svelte
@@ -63,27 +63,27 @@
 </script>
 
 <section class="mx-auto max-w-screen-xl px-4 py-32">
-	<h1 class="mb-6 text-5xl font-semibold text-heading">
+	<h1 class="mb-3 text-2xl font-semibold text-heading md:mb-6 md:text-4xl lg:text-5xl">
 		Manage your packages<br />
 		<span class="sr-only"> for Luau</span>
 		<span class="text-primary" aria-hidden="true">
 			for {typewriteText}{#if cursorVisible}
 				<span
-					class="ml-1 inline-block h-9 w-0.5 bg-current duration-100"
+					class="ml-1 inline-block h-[1.125rem] w-0.5 bg-current duration-100 md:h-7 lg:h-9"
 					class:animate-cursor-blink={blink}
 				></span>
 			{/if}
 		</span>
 	</h1>
 
-	<p class="mb-8 max-w-md text-lg">
+	<p class="mb-5 max-w-sm md:mb-8 md:max-w-md md:text-lg">
 		A package manager for the Luau programming language, supporting multiple runtimes including
 		Roblox and Lune.
 	</p>
 
 	<a
-		href="#"
-		class="hover:bg-primary-hover inline-flex h-11 items-center rounded bg-primary px-5 font-semibold text-primary-fg transition"
+		href="/docs/get-started"
+		class="inline-flex h-10 items-center rounded bg-primary px-4 font-semibold text-primary-fg transition hover:bg-primary-hover md:h-11 md:px-5"
 	>
 		Get Started
 	</a>