feat(ui): enhance Countdown and layout components

* Improve Countdown component styling and structure * Update layout to include responsive menu and background pattern * Adjust PhotoBackground and page styles for better presentation * Add damask pattern SVG for background use
2026-08-11 23:58:28 +02:00
parent 39f5b8d5cc
commit 143161c234
8 changed files with 262 additions and 168 deletions
@@ -1,45 +1,93 @@
 <script lang="ts">
-	import '../app.css';
-	import favicon from '$lib/assets/favicon.svg';
-	import { page } from '$app/state';
-	import Countdown from '$lib/components/Countdown.svelte';
-	import { createWeddingInfo } from '$lib/wedding-info.svelte';
+  import "../app.css";
+  import favicon from "$lib/assets/favicon.svg";
+  import { page } from "$app/state";
+  import Countdown from "$lib/components/Countdown.svelte";
+  import { createWeddingInfo } from "$lib/wedding-info.svelte";

-	let { children } = $props();
+  let { children } = $props();

-	const wedding = createWeddingInfo();
+  const wedding = createWeddingInfo();

-	const links = [
-		{ href: '/', label: 'Home' },
-		{ href: '/rsvp', label: 'RSVP' },
-		{ href: '/photos', label: 'Photos' }
-	];
+  const links = [
+    { href: "/", label: "Home" },
+    { href: "/rsvp", label: "RSVP" },
+    { href: "/photos", label: "Photos" },
+  ];
+
+  let menuOpen = $state(false);
+
+  $effect(() => {
+    page.url.pathname;
+    menuOpen = false;
+  });
 </script>

 <svelte:head><link rel="icon" href={favicon} /></svelte:head>

-<div class="bg-surface-50 dark:bg-surface-950 flex min-h-screen flex-col">
-	<div class="sticky top-0 z-20 flex flex-col">
-		<nav class="bg-primary-950 flex items-center justify-between px-4 py-3 sm:px-8">
-			<a href="/" class="text-surface-50 font-malibu text-xl tracking-wide">Zoé &amp; Shaldon</a>
-			<div class="flex gap-2">
-				{#each links as link (link.href)}
-					<a
-						href={link.href}
-						class="btn field-sm {page.url.pathname === link.href
-							? 'preset-filled-secondary-500'
-							: 'text-surface-100 hover:text-secondary-400'}"
-					>
-						{link.label}
-					</a>
-				{/each}
-			</div>
-		</nav>
-		<div class="text-surface-50 flex justify-center px-4 py-3 drop-shadow-[0_2px_6px_rgba(0,0,0,0.6)]">
-			<Countdown target={wedding.date} compact pastMessage="Already married! 🎉" />
-		</div>
-	</div>
-	<main class="flex flex-1 flex-col">
-		{@render children()}
-	</main>
+<div
+	class="bg-surface-50 dark:bg-surface-950 flex min-h-screen flex-col bg-[url('/patterns/damask.svg')] bg-repeat [background-size:160px_160px]"
+>
+  <div class="sticky top-0 z-20 flex flex-col">
+    <nav
+      class="bg-primary-950 flex items-center justify-between px-4 py-3 sm:px-8"
+    >
+      <a
+        href="/"
+        class="text-surface-50 font-malibu hidden text-3xl tracking-wide sm:inline"
+        >Zoé &amp; Shaldon</a
+      >
+      <Countdown
+        target={wedding.date}
+        compact
+        pastMessage="Already married! 🎉"
+      />
+      <div class="hidden gap-2 sm:flex">
+        {#each links as link (link.href)}
+          <a
+            href={link.href}
+            class="btn field-sm {page.url.pathname === link.href
+              ? 'preset-filled-secondary-500'
+              : 'text-surface-100 hover:text-secondary-400'}"
+          >
+            {link.label}
+          </a>
+        {/each}
+      </div>
+      <button
+        type="button"
+        class="text-surface-50 flex items-center justify-center p-2 sm:hidden"
+        aria-label="Menu"
+        aria-expanded={menuOpen}
+        onclick={() => (menuOpen = !menuOpen)}
+      >
+        {#if menuOpen}
+          <svg viewBox="0 0 24 24" class="size-6" fill="none" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" d="M6 6l12 12M18 6L6 18" />
+          </svg>
+        {:else}
+          <svg viewBox="0 0 24 24" class="size-6" fill="none" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" d="M4 7h16M4 12h16M4 17h16" />
+          </svg>
+        {/if}
+      </button>
+    </nav>
+    {#if menuOpen}
+      <div class="bg-primary-950 border-primary-800 flex flex-col gap-1 border-t px-4 py-3 sm:hidden">
+        {#each links as link (link.href)}
+          <a
+            href={link.href}
+            class="btn field-sm w-full {page.url.pathname === link.href
+              ? 'preset-filled-secondary-500'
+              : 'text-surface-100 hover:text-secondary-400'}"
+          >
+            {link.label}
+          </a>
+        {/each}
+      </div>
+    {/if}
+  </div>
+  <main class="flex flex-1 flex-col">
+    {@render children()}
+  </main>
 </div>