feat(website): make page more responsive

This commit is contained in:
LukaDev 2024-08-13 15:09:05 +02:00
parent a2b6296f2e
commit daeb5e604a
2 changed files with 6 additions and 6 deletions

View file

@ -15,7 +15,7 @@
</h2> </h2>
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"> <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 [scope, name] = pkg.name.split("/")}
{@const targetName = pkg.target.kind[0].toUpperCase() + pkg.target.kind.slice(1)} {@const targetName = pkg.target.kind[0].toUpperCase() + pkg.target.kind.slice(1)}

View file

@ -63,27 +63,27 @@
</script> </script>
<section class="mx-auto max-w-screen-xl px-4 py-32"> <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 /> Manage your packages<br />
<span class="sr-only"> for Luau</span> <span class="sr-only"> for Luau</span>
<span class="text-primary" aria-hidden="true"> <span class="text-primary" aria-hidden="true">
for {typewriteText}{#if cursorVisible} for {typewriteText}{#if cursorVisible}
<span <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} class:animate-cursor-blink={blink}
></span> ></span>
{/if} {/if}
</span> </span>
</h1> </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 A package manager for the Luau programming language, supporting multiple runtimes including
Roblox and Lune. Roblox and Lune.
</p> </p>
<a <a
href="#" href="/docs/get-started"
class="hover:bg-primary-hover inline-flex h-11 items-center rounded bg-primary px-5 font-semibold text-primary-fg transition" 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 Get Started
</a> </a>