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>
</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()}
</div>

View file

@ -16,12 +16,12 @@
tags: Tag[],
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" />
<div class="grid grid-cols-[1fr_auto] items-center text-sm">
<div class="mt-1 pr-4">
<h3 class="text-lg leading-none font-medium">{name}</h3>
<p class="text-muted-foreground mt-1.5 text-sm leading-5">{description}</p>
<h3 class="text-lg font-medium leading-none">{name}</h3>
<p class="mt-1.5 text-sm leading-5 text-muted-foreground">{description}</p>
</div>
<Button target="_blank" href={link} variant="secondary" size="icon">
<SquareArrowOutUpRight />
@ -40,11 +40,11 @@
<meta property="og:image" content={baseURL + site.image} />
</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">
Hei! Mina olen Mihkel
</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
</p>
</header>

View file

@ -16,20 +16,20 @@
<meta property="og:image" content={baseURL + site.image} />
</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>
<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.
</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
<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>
</header>
<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 }]}
<a
@ -41,7 +41,7 @@
draggable="false"
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}
</span>
</a>

View file

@ -50,7 +50,9 @@
<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>
<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>
<main class="w-full max-w-4xl">
<div

View file

@ -86,9 +86,9 @@
</AlertDialog.Content>
</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>
<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>,
<span class="text-purple-600 dark:text-purple-400">artistid</span> ja
<span class="text-blue-600 dark:text-blue-400">pildid</span>.