feat: warm redesign, full French localization, compact sticky form, fixed row heights, and show quality score in list

1 files changed, 14 insertions, 11 deletions

diff --git a/src/lib/components/Nav.svelte b/src/lib/components/Nav.svelte
index f6c83fc..725c098 100644
--- a/src/lib/components/Nav.svelte
+++ b/src/lib/components/Nav.svelte
@@ -3,11 +3,11 @@
 </script>
 
 <nav class="navbar">
-	<a href="/" class:active={$page.url.pathname === '/'}>List</a>
-	<a href="/catalog" class:active={$page.url.pathname === '/catalog'}>Catalog</a
+	<a href="/" class:active={$page.url.pathname === '/'}>Liste</a>
+	<a href="/catalog" class:active={$page.url.pathname === '/catalog'}>Catalogue</a
 	>
 	<a href="/categories" class:active={$page.url.pathname === '/categories'}
-		>Categories</a
+		>Catégories</a
 	>
 </nav>
 
@@ -15,29 +15,32 @@
 	.navbar {
 		display: flex;
 		gap: 0.25rem;
-		padding: 0.5rem 0;
-		border-bottom: 1px solid #ddd;
+		padding: 0.75rem 0;
+		border-bottom: 1px solid var(--border);
 		position: sticky;
 		top: 0;
-		background: #fafafa;
+		background: var(--bg);
 		z-index: 20;
 	}
 
 	.navbar a {
 		padding: 0.5rem 1rem;
-		border-radius: 0.5rem;
-		color: #333;
+		border-radius: 9999px;
+		color: var(--text-secondary);
 		text-decoration: none;
 		font-size: 0.875rem;
-		transition: background 0.15s;
+		font-weight: 500;
+		transition: all 0.2s ease;
 	}
 
 	.navbar a:hover {
-		background: #f5f5f5;
+		color: var(--text);
+		background: var(--surface);
 	}
 
 	.navbar a.active {
-		background: #333;
+		background: var(--accent);
 		color: #fff;
+		box-shadow: 0 1px 2px var(--shadow);
 	}
 </style>