Adjust heading spacing and title styling

This commit is contained in:
Mihkel Martin Kasterpalu 2025-01-31 20:08:32 +02:00
parent 196a046567
commit dad4698a0a
5 changed files with 17 additions and 15 deletions

View file

@ -56,7 +56,7 @@
</Button> </Button>
</header> </header>
<div class="relative container mt-14 flex flex-col items-center"> <div class="container relative mt-16 flex flex-col items-center">
{@render children()} {@render children()}
</div> </div>

View file

@ -16,12 +16,12 @@
tags: Tag[], tags: Tag[],
link: string link: string
)} )}
<div class="mb-16 w-80 space-y-3 md:w-64"> <div class="mb-10 w-80 space-y-3 md:w-60">
<Image {image} {tags} class="aspect-[4/5] object-cover" /> <Image {image} {tags} class="aspect-[4/5] object-cover" />
<div class="grid grid-cols-[1fr_auto] items-center text-sm"> <div class="grid grid-cols-[1fr_auto] items-center text-sm">
<div class="mt-1 pr-4"> <div class="mt-1 pr-4">
<h3 class="text-lg leading-none font-medium">{name}</h3> <h3 class="text-lg font-medium leading-none">{name}</h3>
<p class="text-muted-foreground mt-1.5 text-sm leading-5">{description}</p> <p class="mt-1.5 text-sm leading-5 text-muted-foreground">{description}</p>
</div> </div>
<Button target="_blank" href={link} variant="secondary" size="icon"> <Button target="_blank" href={link} variant="secondary" size="icon">
<SquareArrowOutUpRight /> <SquareArrowOutUpRight />
@ -40,11 +40,11 @@
<meta property="og:image" content={baseURL + site.image} /> <meta property="og:image" content={baseURL + site.image} />
</svelte:head> </svelte:head>
<header class="font-title mb-12 flex flex-col items-center text-center"> <header class="mb-16 flex flex-col items-center text-center font-title">
<h1 class="mb-1 scroll-m-20 text-5xl font-extrabold tracking-tight lg:text-6xl"> <h1 class="mb-1 scroll-m-20 text-5xl font-extrabold tracking-tight lg:text-6xl">
Hei! Mina olen Mihkel Hei! Mina olen Mihkel
</h1> </h1>
<p class="text-muted-foreground font-sans text-base"> <p class="text-xl font-semibold leading-7 text-muted-foreground">
Peale selle toreda saidi on mul veel palju hobisid Peale selle toreda saidi on mul veel palju hobisid
</p> </p>
</header> </header>

View file

@ -16,20 +16,20 @@
<meta property="og:image" content={baseURL + site.image} /> <meta property="og:image" content={baseURL + site.image} />
</svelte:head> </svelte:head>
<header class="font-title mb-12 flex flex-col items-center text-center"> <header class="flex flex-col items-center text-center font-title">
<h1 class="mb-1 scroll-m-20 text-5xl font-extrabold tracking-tight lg:text-6xl">Vinge värk</h1> <h1 class="mb-1 scroll-m-20 text-5xl font-extrabold tracking-tight lg:text-6xl">Vinge värk</h1>
<p class="text-muted-foreground font-sans text-base leading-7"> <p class="text-xl font-semibold leading-7 text-muted-foreground">
Minu loodud minimängud ja muud huvitavat. Minu loodud minimängud ja muud huvitavat.
</p> </p>
<p class="text-muted-foreground font-sans text-base leading-7"> <p class="text-xl font-semibold leading-7 text-muted-foreground">
Aitäh Aitäh
<a href="https://neal.fun" class="font-medium underline underline-offset-4">neal.fun</a> inspo eest <a href="https://neal.fun" class="font-bold underline underline-offset-4">neal.fun</a> inspo eest
:) :)
</p> </p>
</header> </header>
<div <div
class="mx-auto flex w-full flex-wrap items-center justify-center justify-items-center gap-4 gap-x-8 gap-y-8 lg:grid-cols-2" class="mx-auto mt-20 flex w-full flex-wrap items-center justify-center justify-items-center gap-4 gap-x-8 gap-y-8 lg:grid-cols-2"
> >
{#each Object.entries(games) as [href, { image, name }]} {#each Object.entries(games) as [href, { image, name }]}
<a <a
@ -41,7 +41,7 @@
draggable="false" draggable="false"
href="/vinge/{href}" href="/vinge/{href}"
> >
<span class="relative block rounded font-mono text-lg font-semibold select-none lg:text-xl"> <span class="relative block select-none rounded font-mono text-lg font-semibold lg:text-xl">
{name} {name}
</span> </span>
</a> </a>

View file

@ -50,7 +50,9 @@
<header class="mb-24 flex flex-col items-center text-center font-title"> <header class="mb-24 flex flex-col items-center text-center font-title">
<h1 class="mb-1 scroll-m-20 text-5xl font-extrabold tracking-tight lg:text-6xl">Epochalypse</h1> <h1 class="mb-1 scroll-m-20 text-5xl font-extrabold tracking-tight lg:text-6xl">Epochalypse</h1>
<p class="text-xl font-semibold text-muted-foreground">Ära muretse! Sul on veel aega:</p> <p class="text-xl font-semibold leading-7 text-muted-foreground">
Ära muretse! Sul on veel aega:
</p>
</header> </header>
<main class="w-full max-w-4xl"> <main class="w-full max-w-4xl">
<div <div

View file

@ -86,9 +86,9 @@
</AlertDialog.Content> </AlertDialog.Content>
</AlertDialog.Root> </AlertDialog.Root>
<header class="mb-12 flex flex-col items-center text-center font-title"> <header class="mb-16 flex flex-col items-center text-center font-title">
<h1 class="mb-1 scroll-m-20 text-5xl font-extrabold tracking-tight lg:text-6xl">Paku biiti</h1> <h1 class="mb-1 scroll-m-20 text-5xl font-extrabold tracking-tight lg:text-6xl">Paku biiti</h1>
<p class="text-xl font-semibold text-muted-foreground"> <p class="text-xl font-semibold leading-7 text-muted-foreground">
Lohista kokku õiged albumi <span class="text-red-600 dark:text-red-400">nimed</span>, Lohista kokku õiged albumi <span class="text-red-600 dark:text-red-400">nimed</span>,
<span class="text-purple-600 dark:text-purple-400">artistid</span> ja <span class="text-purple-600 dark:text-purple-400">artistid</span> ja
<span class="text-blue-600 dark:text-blue-400">pildid</span>. <span class="text-blue-600 dark:text-blue-400">pildid</span>.