feat: add alert message and improve layout on about page

Signed-off-by: Robert Goniszewski <[email protected]>
goniszewski · Jun 18, 2024 · 1979e05 · 1979e05
1 parent 6542728
commit 1979e05
Showing 1 changed file with 42 additions and 24 deletions.
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
@@ -1,8 +1,29 @@
 <div class="w-full">
 	<h1 class="text-2xl font-bold">About</h1>
-	<div class="flex w-full flex-wrap mb-14">
-		<div class="flex flex-none flex-col indent-8 gap-2 mt-4 max-w-fit md:max-w-xl">
-			<div class="flex justify-center items-center mt-8 mb-6">
+
+	<div class="mb-14 flex w-full flex-wrap">
+		<div class="mt-4 flex max-w-fit flex-none flex-col gap-2 indent-8 md:max-w-xl">
+			<div role="alert" class="alert">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					class="h-6 w-6 shrink-0 stroke-info"
+					><path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+					></path></svg
+				>
+				<div class="flex flex-col">
+					<span>
+						Remember, Grimoire is a <strong>work-in-progress</strong> project.
+					</span>
+					<span>Accidents may happen!</span>
+				</div>
+			</div>
+			<div class="mb-6 mt-8 flex items-center justify-center">
 				<img
 					srcset="grimoire_logo_300.webp 300w,
 					grimoire_logo_600.webp 600w,
@@ -15,7 +36,7 @@
 				Glimpse into the magical book of <em>your</em> forbidden knowledge -
 			</p>
 			<p class="mx-auto my-2">
-				<strong class="text-3xl font-serif"><em>Grimoire!</em></strong> 📖💫
+				<strong class="font-serif text-3xl"><em>Grimoire!</em></strong> 📖💫
 			</p>
 			<p>
 				Unleash your inner sorcerer and conquer the chaos of bookmarks! With Grimoire, you'll have a
@@ -31,36 +52,33 @@
 			</p>
 			<p>It's time to conjure up some organization! 📚✨</p>
 		</div>
-		<div class="flex flex-col flex-1 min-w-fit">
-			<div class="flex flex-col justify-center items-center">
-				<h2 class="text-xl font-bold mt-8 mb-4">Developers and contributors</h2>
+		<div class="flex min-w-fit flex-1 flex-col">
+			<div class="flex flex-col items-center justify-center">
+				<h2 class="mb-4 mt-8 text-xl font-bold">Developers and contributors</h2>
 				<div class="flex flex-col gap-2">
 					<div class="flex max-w-[14rem] items-center">
 						<div class="indicator">
-							<span class="indicator-item indicator-top badge badge-primary badge-sm">author</span>
-							<a href="https://www.github.com/goniszewski" class="link text-center p-1">
+							<span class="badge indicator-item badge-primary badge-sm indicator-top">author</span>
+							<a href="https://www.github.com/goniszewski" class="p-1 text-center">
 								Robert Goniszewski (@goniszewski)
 							</a>
 						</div>
 					</div>
 				</div>
 			</div>
-			<div class="flex flex-col items-center mt-8">
-				<h2 class="text-xl font-bold mt-8 mb-4">Special thanks to</h2>
+			<div class="mt-8 flex flex-col items-center">
+				<h2 class="mb-4 mt-8 text-xl font-bold">Special thanks to</h2>
 				<p class="flex flex-col items-center gap-2">
-					<a href="https://github.com/extractus/article-extractor" class="link">
-						@extractus/article-extractor</a
-					>
-					<a href="https://github.com/saadeghi/daisyui" class="link">DaisyUI</a>
-					<a href="https://github.com/krisk/fuse" class="link">Fuse.js</a>
-					<a href="https://github.com/microlinkhq/metascraper" class="link">MetaScraper</a>
-					<a href="https://github.com/pocketbase/pocketbase" class="link">PocketBase</a>
-					<a href="https://github.com/apostrophecms/sanitize-html" class="link">sanitize-html</a>
-					<a href="https://github.com/sveltejs/kit" class="link">SvelteKit</a>
-					<a href="https://github.com/kbrgl/svelte-french-toast" class="link">Svelte French Toast</a
-					>
-					<a href="https://github.com/rob-balfre/svelte-select" class="link">Svelte Select</a>
-					<a href="https://tailwindcss.com" class="link">Tailwind CSS</a>
+					<a href="https://github.com/extractus/article-extractor"> @extractus/article-extractor</a>
+					<a href="https://github.com/saadeghi/daisyui">DaisyUI</a>
+					<a href="https://github.com/krisk/fuse">Fuse.js</a>
+					<a href="https://github.com/microlinkhq/metascraper">MetaScraper</a>
+					<a href="https://github.com/pocketbase/pocketbase">PocketBase</a>
+					<a href="https://github.com/apostrophecms/sanitize-html">sanitize-html</a>
+					<a href="https://github.com/sveltejs/kit">SvelteKit</a>
+					<a href="https://github.com/kbrgl/svelte-french-toast">Svelte French Toast</a>
+					<a href="https://github.com/rob-balfre/svelte-select">Svelte Select</a>
+					<a href="https://tailwindcss.com">Tailwind CSS</a>
 				</p>
 			</div>
 		</div>