feat: look nice

src/lib/artefact.remote.ts

@@ -13,10 +13,10 @@ export const getArtefacts = query(
 		if (tags.length == 0) return a;
 
 		return a.filter((a) => {
-			for (const tag of a.tags) {
+			for (const tag of tags) {
-				if (tags.includes(tag)) return true;
+				if (!a.tags.includes(tag)) return false;
 			}
-			return false;
+			return true;
 		});
 	}
 );

src/lib/components/Artefact.svelte

@@ -45,8 +45,8 @@
 	}
 </script>
 
-<Card class="grid min-w-full grid-cols-2 gap-5 p-5">
+<Card class="flex min-w-full flex-col justify-between gap-5 p-5">
-	<h1 class="col-span-2 break-words hyphens-auto">{artefact.title}</h1>
+	<h3 class="col-span-2 break-words hyphens-auto">{artefact.title}</h3>
 	<div class="col-span-2 flex flex-wrap items-start justify-start">
 		{#each artefact.tags as tag}
 			<button
@@ -78,12 +78,14 @@
 	</div>
 	<p class="col-span-2 my-5">{artefact.description}</p>
 
-	<p
+	<div class=" grid grid-cols-2 gap-5">
-		class={`flex items-center justify-center rounded-3xl p-2 text-white ${getStatusColor(artefact.status)}`}
+		<p
-	>
+			class={`flex items-center justify-center rounded-3xl p-2 text-white ${getStatusColor(artefact.status)}`}
-		{artefact.status}
+		>
-	</p>
+			{artefact.status}
-	<Button onclick={() => (edit = true)}>Edit</Button>
+		</p>
+		<Button onclick={() => (edit = true)}>Edit</Button>
+	</div>
 </Card>
 
 <Modal bind:open={edit}>

src/routes/+layout.svelte

@@ -2,15 +2,18 @@
 	import { views } from '$lib/artefact';
 	import { state } from '$lib/view.svelte';
 	import '../app.css';
-	import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, Select } from 'flowbite-svelte';
+	import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, Select, Label } from 'flowbite-svelte';
 	let { children } = $props();
 
 	$inspect(state.view);
 </script>
 
-<!-- <svelte:head>Repo Mod</svelte:head> -->
+<svelte:head>
+	<title>Repo Mod</title>
+	<meta name="description" content="This is where the description goes for SEO" />
+</svelte:head>
 
-<Navbar>
+<Navbar class="shadow">
 	<NavBrand href="/">
 		<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Repo Mod</span
 		>
@@ -29,7 +32,7 @@
 			}))}
 		/>
 
-		<!-- 	<NavLi href="/">Home</NavLi> -->
+		<NavLi href="/">Projekte</NavLi>
 		<!-- 	<NavLi href="/about">About</NavLi> -->
 		<!-- 	<NavLi href="/docs/components/navbar">Navbar</NavLi> -->
 		<!-- 	<NavLi href="/pricing">Pricing</NavLi> -->
@@ -37,6 +40,6 @@
 	</NavUl>
 </Navbar>
 
-<main class="mx-10 mt-5 xl:mx-44">
+<main class="mx-10 mt-5 mb-5 xl:mx-44">
 	{@render children?.()}
 </main>