WIP

transform.json

@@ -11,6 +11,7 @@
 			"publish.sh",
 			"web/TODO.md",
 			"web/src/lib/components/jolly-roger",
+			"web/src/lib/components/structure/Footer.svelte",
 			"web/static/images/featured"
 		]
 	}

web/src/app.css

@@ -132,8 +132,15 @@ hide element so that only screen-reader can "see" them
 
 	--color-background-base-1: hsl(231.43 15% 16%);
 
-	--color-text-primary: white;
+	--color-text-primary: black;
 	--color-background-primary: hsl(325.52 100% 74%);
+	--color-text-primary-1: black;
+	--color-background-primary-1: hsl(325.52 100% 64%);
+
+	--color-text-secondary: black;
+	--color-background-secondary: hsl(264.71 89% 78%);
+	--color-text-secondary-1: black;
+	--color-background-secondary-1: hsl(264.71 54% 67%);
 
 	--color-link-base: white;
 }
@@ -146,6 +153,8 @@ hide element so that only screen-reader can "see" them
 :root {
 	background-color: var(--color-background-base);
 	color: var(--color-text-base);
+
+	font-family: 'Noto Sans', Verdana, sans-serif;
 }
 
 a {

web/src/lib/components/jolly-roger/Feature.svelte

@@ -2,12 +2,12 @@
 	export let title: string;
 </script>
 
-<div class="rounded-base border-base">
-	<div class="mt-10">
-		<h3 class="text-lg leading-6 font-medium text-primary">
+<div>
+	<div>
+		<h3>
 			{title}
 		</h3>
-		<p class="mt-2 leading-6">
+		<p>
 			<slot />
 		</p>
 	</div>

web/src/lib/components/jolly-roger/Showcase.svelte

@@ -9,31 +9,43 @@
 	export let source: string | undefined = undefined;
 </script>
 
-<div class="flex flex-col rounded-lg shadow-lg bg-base-200 overflow-hidden">
-	<div class="flex-shrink-0">
-		<a {href} target="_blank" rel="noreferrer"><img class="h-48 w-full object-cover" src={url(preview)} alt={name} /></a
-		>
+<div class="wrapper">
+	<div>
+		<a {href} target="_blank" rel="noreferrer"><img src={url(preview)} alt={name} /></a>
 	</div>
-	<div class="flex-1 p-6 flex flex-col justify-between">
-		<div class="flex-1">
-			<p class="text-xl font-medium">
-				<a {href} target="_blank" rel="noreferrer" class="link primary-link text-primary">
-					{name}
-				</a>
-			</p>
-			<div class="block mt-2">
-				<p class="text-xl font-semibold">
-					{title}
-				</p>
-				<p class="mt-3 text-base">
-					{description}
-				</p>
-				<p class="mt-3 text-base">
+	<div class="info-wrapper">
+		<div class="info">
+			<p><a {href} target="_blank" rel="noreferrer">{name}</a></p>
+			<div>
+				<p>{title}</p>
+				<p>{description}</p>
+				<p>
 					{#if source}
-						Check the <a href={source} target="_blank" rel="noreferrer" class="underline">source code</a>.
+						Check the <a href={source} target="_blank" rel="noreferrer">source code</a>.
 					{:else}Source code not yet available.{/if}
 				</p>
 			</div>
 		</div>
 	</div>
 </div>
+
+<style>
+	.wrapper {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.wrapper img {
+		object-fit: cover;
+	}
+
+	.info-wrapper {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.info {
+		flex: 1;
+	}
+</style>

web/src/lib/components/daisyui/NavTabs.svelte → web/src/lib/components/navigation/NavTabs.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import PageLink from '$lib/components/navigation/PageLink.svelte';
+	import PageLink from './PageLink.svelte';
 	export let pages: {pathname: string; title: string}[];
 </script>
 
@@ -15,9 +15,10 @@
 	nav ol {
 		display: flex;
 		justify-content: flex-start;
-		gap: 16px;
-		list-style-type: none;
-		padding: 0;
 		margin: 0;
+		list-style-type: none;
+		padding: 8px 8px 0px 0px;
+		background-color: var(--color-background-base);
+		border-bottom: 4px solid var(--color-background-primary);
 	}
 </style>