feat: use tailwind and daisyui

4 files changed, 39 insertions, 29 deletions

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 1eaed7e..9995027 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -4,22 +4,25 @@ const commitSha =
 const repositoryUrl = "https://github.com/getchoo/website";
 ---
 
-<footer>
-	{
-		commitSha && (
-			<p>
-				Site version
-				<a href={`${repositoryUrl}/commit/${commitSha}`}>
-					{commitSha.substring(0, 7)}
-				</a>
-				.
-			</p>
-		)
-	}
-	<p>Content is All Rights Reserved.</p>
-	<p>
-		The <a href={repositoryUrl}>source code</a> is available under the <a
-			href="https://spdx.org/licenses/MIT.html">MIT License</a
-		>.
-	</p>
+<footer class="footer footer-center footer-horizontal">
+	<aside>
+		<p>
+			{
+				commitSha && (
+					<p>
+						Site version
+						<a href={`${repositoryUrl}/commit/${commitSha}`}>
+							{commitSha.substring(0, 7)}
+						</a>
+						.
+					</p>
+				)
+			}
+			Content is All Rights Reserved.
+			<br />
+			The <a href={repositoryUrl}>source code</a> is available under the <a
+				href="https://spdx.org/licenses/MIT.html">MIT License</a
+			>.
+		</p>
+	</aside>
 </footer>
diff --git a/src/components/GifButtons.astro b/src/components/GifButtons.astro
index 3c88dbd..0fc76e3 100644
--- a/src/components/GifButtons.astro
+++ b/src/components/GifButtons.astro
@@ -38,7 +38,7 @@ const gifButtons = [
 ];
 ---
 
-<div class="gif-buttons">
+<div class="flex flex-row flex-wrap items-center justify-center not-prose">
 	{
 		gifButtons.map(({ buttonName, altText, link }) => {
 			const imageTag = (
@@ -49,7 +49,7 @@ const gifButtons = [
 			);
 
 			return (
-				<div class="gif-button">
+				<div class="p-1">
 					{link ? <a href={link}>{imageTag}</a> : imageTag}
 				</div>
 			);
diff --git a/src/components/Head.astro b/src/components/Head.astro
index d355012..7ec74ad 100644
--- a/src/components/Head.astro
+++ b/src/components/Head.astro
@@ -1,5 +1,5 @@
 ---
-import "@styles/style.scss";
+import "@styles/main.css";
 import "@fontsource/noto-sans";
 import notoSansWoff2 from "@fontsource/noto-sans/files/noto-sans-latin-400-normal.woff2";
 
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index f122ee7..fc2599c 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -7,12 +7,19 @@ const navLinks = [
 ];
 ---
 
-<nav>
-	{
-		navLinks.map(({ name, url }) => (
-			<div>
-				<a href={url}>{name}</a>
-			</div>
-		))
-	}
+<nav class="navbar">
+	<div class="navbar-start"></div>
+	<div class="navbar-center lg:flex">
+		<ul class="menu menu-horizontal">
+			{
+				navLinks.map(({ name, url }) => (
+					<li>
+						<a class="btn btn-ghost text-xl" href={url}>
+							{name}
+						</a>
+					</li>
+				))
+			}
+		</ul>
+	</div>
 </nav>