Compare commits

..

4 commits

Author SHA1 Message Date
Mihkel Martin Kasterpalu
a4e4f1157b Layout and sizing changes 2025-01-22 17:05:21 +02:00
Mihkel Martin Kasterpalu
c9167cc969 add a more soon "game" to landingpage 2025-01-22 17:05:10 +02:00
Mihkel Martin Kasterpalu
10d050ec30 Tweaked paku biiti placeholder transition 2025-01-22 16:06:48 +02:00
Mihkel Martin Kasterpalu
1c0b60e5e0 Simplify layout across site 2025-01-22 16:04:16 +02:00
7 changed files with 23 additions and 30 deletions

View file

@ -9,5 +9,10 @@ export const games: GamesObj = {
name: 'Paku biiti',
image: '',
description: 'Sorteeri kolme suvalise muusika albumi pealkiri, artistid ja pilt.'
},
'': {
name: 'More soonTM',
image: '',
description: ''
}
};

View file

@ -1,7 +0,0 @@
<script lang="ts">
let { children } = $props();
</script>
<div class="container flex min-h-screen flex-col items-center justify-center py-4">
{@render children()}
</div>

View file

@ -48,7 +48,7 @@
>
{#each { length: 3 }}
{#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}
<Skeleton class="aspect-square h-auto max-w-full rounded-xl object-cover" />
{/if}
@ -93,9 +93,9 @@
</AlertDialog.Content>
</AlertDialog.Root>
<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">Paku biiti</h1>
<p class="text-2xl font-semibold text-muted-foreground">
<header class="font-title mb-12 flex flex-col items-center">
<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">
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>.
@ -112,7 +112,7 @@
{#await data.streamed.albums}
<div
class="grid w-full gap-4"
in:fade={{ duration: 150, delay: 150, easing: expoIn }}
in:fade={{ duration: 150, easing: expoIn }}
out:fade={{ duration: 150, easing: expoOut }}
>
{@render playArea(undefined, true)}

View file

@ -1,7 +0,0 @@
<script lang="ts">
let { children } = $props();
</script>
<div class="container mt-32 flex flex-col items-center py-4">
{@render children()}
</div>

View file

@ -34,21 +34,23 @@
<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="/">
<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>
<Button onclick={() => cycleTheme()} variant="outline" size="icon">
<Button onclick={() => cycleTheme()} variant="ghost" size="icon" class="h-12 w-12">
{#if theme === 'dark'}
<Moon class="absolute h-[1.2rem] w-[1.2rem]" />
<Moon class="!h-6 !w-6" />
{:else if theme === 'light'}
<Sun class="h-[1.2rem] w-[1.2rem] " />
<Sun class="!h-6 !w-6" />
{:else}
<LaptopMinimal class="h-[1.2rem] w-[1.2rem]" />
<LaptopMinimal class="!h-6 !w-6" />
{/if}
<span class="sr-only">Toggle theme</span>
</Button>
</header>
{@render children()}
<div class="container flex flex-col items-center">
{@render children()}
</div>

View file

@ -12,13 +12,13 @@
<meta property="og:image" content={baseURL + '/favicon.svg'} />
</svelte:head>
<header class="mb-24 flex flex-col items-center font-title">
<h1 class="mb-1 scroll-m-20 text-6xl font-extrabold tracking-tight lg:text-7xl">
<header class="font-title mb-24 flex flex-col items-center">
<h1 class="mb-1 scroll-m-20 text-5xl font-extrabold tracking-tight lg:text-6xl">
stuff.kasterpalu.ee
</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>
<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 }]}
<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"