Lots of css fixes. Lots more to come!

src/lib/ProjectCard/Commit.svelte

@@ -10,9 +10,9 @@
 	const open = index === 0;
 </script>
 
-<AccordionItem {...open ? { open: true } : {}}>
+<AccordionItem borderSharedClass="border-slate-400" {...open ? { open: true } : {}}>
 	<span slot="header" class="flex justify-between items-center w-full">
-		<span>{@html title}</span>
+		<h3>{@html title}</h3>
 		<p class="text-xs mr-2">{pubAgo}</p>
 	</span>
 	<div class="flex flex-col">

src/lib/ProjectCard/ProjectRepo.svelte

@@ -7,15 +7,15 @@
 </script>
 
 <div class="flex justify-center gap-12 my-12">
-	<div>
+	<div class="hover:scale-125">
 		<a href={url}>
-			<GlobeOutline class="hover:text-slate-400 mx-auto" />
+			<GlobeOutline class="hover:scale-125 mx-auto" />
 		</a>
 		<p>www</p>
 	</div>
-	<div>
+	<div class="hover:scale-110">
 		<a href={repo}>
-			<GithubSolid class="hover:text-slate-400 mx-auto" />
+			<GithubSolid class="mx-auto" />
 		</a>
 		<p>git</p>
 	</div>

src/lib/ProjectCard/VendorGallery.svelte

@@ -6,7 +6,7 @@
 
 <div class="my-4 dark:bg-slate-800 w-fit mx-auto rounded-2xl p-2">
 	<h3 class="text-xl mb-2">built with</h3>
-	<div class="flex justify-center gap-6">
+	<div class="flex justify-center gap-6 flex-wrap">
 		{#each vendors as vendor}
 			<VendorIcon {...vendor} />
 		{/each}

src/lib/ProjectCard/VendorIcon.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <a href={url}>
-	<div class="flex flex-col justify-center">
+	<div class="flex flex-col justify-center hover:scale-110">
 		<img src={img} alt={name} class="max-h-12 max-w-12 self-center" />
 		<p>{name}</p>
 	</div>

src/lib/projects.js

@@ -43,7 +43,7 @@ export const projects = [
 	},
 	{
 		category: 'nextjs',
-		title: 'Scaffolding for next project.',
+		title: 'Scaffolding the next project.',
 		url: 'https://titles-psi.vercel.app/',
 		description:
 			'I am exploring different librarys for ui, auth, ORM etc. for my next project. This time it is deployed to vercel, but I am still using workflows.',

src/routes/+layout.svelte

@@ -62,7 +62,7 @@
 			{/if}
 		{/each}
 	</ul>
-	<hr class="nav-divider max-w-xl border-1 mx-auto border-gray-800 rounded dark:border-slate-400" />
+	<hr class="nav-divider max-w-xl border-1 mx-auto rounded border-slate-400" />
 	{#key selected}
 		<ul in:blur={{ delay: 250 }} out:blur={{ duration: 250 }} class="text-center h-4 my-1">
 			{#each selected.subPages as subPage}
@@ -72,7 +72,7 @@
 			{/each}
 		</ul>
 	{/key}
-	<div class="absolute top-6 right-6">
+	<div class="absolute top-2 md:top-6 right-2 md:right-6">
 		<DarkMode />
 	</div>
 </nav>