mihkelmk/portfolio_site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Layout and sizing changes

Browse source
This commit is contained in:
Mihkel Martin Kasterpalu 2025-01-22 17:05:21 +02:00
parent c9167cc969
commit a4e4f1157b
3 changed files with 14 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/routes/(games)/pakubiiti/+page.svelte
View file

@ -48,7 +48,7 @@
> >
{#each { length: 3 }} {#each { length: 3 }}
{#if i < 2} {#if i < 2}
<Skeleton class="h-[6rem] w-full rounded-xl border border-primary/5" /> <Skeleton class="h-[5rem] w-full rounded-xl border border-primary/5" />
{:else} {:else}
<Skeleton class="aspect-square h-auto max-w-full rounded-xl object-cover" /> <Skeleton class="aspect-square h-auto max-w-full rounded-xl object-cover" />
{/if} {/if}
@ -93,9 +93,9 @@
</AlertDialog.Content> </AlertDialog.Content>
</AlertDialog.Root> </AlertDialog.Root>
<header class="font-title mb-16 flex flex-col items-center"> <header class="font-title mb-12 flex flex-col items-center">
<h1 class="mb-1 scroll-m-20 text-6xl font-extrabold tracking-tight lg:text-7xl">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-2xl font-semibold text-muted-foreground"> <p class="text-xl font-semibold 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>.

14
src/routes/+layout.svelte
View file

@ -34,23 +34,23 @@
<ModeWatcher /> <ModeWatcher />
<header class="absolute top-0 flex w-full justify-between px-8 py-6"> <header class="container flex w-full items-center justify-between px-8 py-6">
<a href="/"> <a href="/">
<img src="/favicon.svg" alt="Mihkel Martin Kasterpalu logo" class="h-10" /> <img src="/favicon.svg" alt="Mihkel Martin Kasterpalu logo" class="h-9" />
</a> </a>
<Button onclick={() => cycleTheme()} variant="outline" size="icon"> <Button onclick={() => cycleTheme()} variant="ghost" size="icon" class="h-12 w-12">
{#if theme === 'dark'} {#if theme === 'dark'}
<Moon class="absolute h-[1.2rem] w-[1.2rem]" /> <Moon class="!h-6 !w-6" />
{:else if theme === 'light'} {:else if theme === 'light'}
<Sun class="h-[1.2rem] w-[1.2rem] " /> <Sun class="!h-6 !w-6" />
{:else} {:else}
<LaptopMinimal class="h-[1.2rem] w-[1.2rem]" /> <LaptopMinimal class="!h-6 !w-6" />
{/if} {/if}
<span class="sr-only">Toggle theme</span> <span class="sr-only">Toggle theme</span>
</Button> </Button>
</header> </header>
<div class="container mt-24 flex flex-col items-center py-4"> <div class="container flex flex-col items-center">
{@render children()} {@render children()}
</div> </div>

6
src/routes/+page.svelte
View file

@ -13,12 +13,12 @@
</svelte:head> </svelte:head>
<header class="font-title mb-24 flex flex-col items-center"> <header class="font-title mb-24 flex flex-col items-center">
<h1 class="mb-1 scroll-m-20 text-6xl font-extrabold tracking-tight lg:text-7xl"> <h1 class="mb-1 scroll-m-20 text-5xl font-extrabold tracking-tight lg:text-6xl">
stuff.kasterpalu.ee stuff.kasterpalu.ee
</h1> </h1>
<p class="text-2xl font-semibold text-muted-foreground">Minimängud ja muud huvitavat</p> <p class="text-xl font-semibold text-muted-foreground">Minimängud ja muud huvitavat</p>
</header> </header>
<main class="grid w-full max-w-4xl justify-items-center"> <main class="grid w-full max-w-4xl justify-items-center 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
class="shadow-sharp flex aspect-[4/1] w-full max-w-sm items-center justify-center rounded-xl border-2 border-current bg-contain bg-no-repeat transition-all" class="shadow-sharp flex aspect-[4/1] w-full max-w-sm items-center justify-center rounded-xl border-2 border-current bg-contain bg-no-repeat transition-all"