From d3c498a746e4a027b0472437e09e5514261217d9 Mon Sep 17 00:00:00 2001
From: Araozu <fernando@araozu.dev>
Date: Fri, 1 Nov 2024 06:52:58 -0500
Subject: [PATCH] feat: dark mode for login page

---
 src/modules/auth/login.templ  |  8 +++----
 src/modules/index/index.templ |  4 ++--
 tailwind.config.cjs           | 16 --------------
 tailwind.config.mjs           | 40 +++++++++++++++++++++++++++++++++++
 4 files changed, 46 insertions(+), 22 deletions(-)
 delete mode 100644 tailwind.config.cjs
 create mode 100644 tailwind.config.mjs

diff --git a/src/modules/auth/login.templ b/src/modules/auth/login.templ
index e74bcc9..c206df6 100644
--- a/src/modules/auth/login.templ
+++ b/src/modules/auth/login.templ
@@ -7,7 +7,7 @@ templ LoginTempl() {
 		<nav class="bg-sky-500 text-white text-xl font-bold p-2">
 			music to go
 		</nav>
-		<div hx-ext="response-targets">
+		<div hx-ext="response-targets" class="container">
 			Login to Navidrome:
 			<br/>
 			<form
@@ -22,7 +22,7 @@ templ LoginTempl() {
 				</label>
 				<input
 					id="navidrome-url"
-					class="w-full py-1 px-2 rounded"
+					class="w-full py-1 px-2 rounded bg-c-bg text-c-on-bg border border-sky-400"
 					placeholder="https://"
 					name="navidrome-url"
 					required
@@ -33,7 +33,7 @@ templ LoginTempl() {
 				</label>
 				<input
 					id="username"
-					class="w-full py-1 px-2 rounded"
+					class="w-full py-1 px-2 rounded bg-c-bg text-c-on-bg border border-sky-400"
 					placeholder="username"
 					name="username"
 					required
@@ -44,7 +44,7 @@ templ LoginTempl() {
 				</label>
 				<input
 					id="password"
-					class="w-full py-1 px-2 rounded"
+					class="w-full py-1 px-2 rounded bg-c-bg text-c-on-bg border border-sky-400"
 					placeholder="password"
 					name="password"
 					type="password"
diff --git a/src/modules/index/index.templ b/src/modules/index/index.templ
index e9afc23..f8f128e 100644
--- a/src/modules/index/index.templ
+++ b/src/modules/index/index.templ
@@ -28,9 +28,9 @@ templ IndexTempl(albums []utils.Album) {
 }
 
 templ AlbumCard(album utils.Album) {
-	<div class="inline-block p-1 rounded bg-zinc-200 dark:bg-zinc-800 w-full max-w-32">
+	<div class="inline-block p-1 rounded bg-zinc-200 dark:bg-zinc-800">
 		<div class="h-30 w-28 relative">
-			<img src={ fmt.Sprintf("/covers/%s", album.ID) }/>
+			<img class="w-full" src={ fmt.Sprintf("/covers/%s", album.ID) }/>
 			<a
 				href={ templ.URL(fmt.Sprintf("/album/%s", album.ID)) }
 				class="inline-block w-full overflow-hidden whitespace-nowrap overflow-ellipsis hover:underline"
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
deleted file mode 100644
index de468af..0000000
--- a/tailwind.config.cjs
+++ /dev/null
@@ -1,16 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    "./src/**/*.{html,templ,go}",
-  ],
-  theme: {
-    extend: {
-      colors: {
-        "c-bg": "var(--c-bg)",
-        "c-on-bg": "var(--c-on-bg)",
-      }
-    },
-  },
-  plugins: [],
-}
-
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
new file mode 100644
index 0000000..9d56d37
--- /dev/null
+++ b/tailwind.config.mjs
@@ -0,0 +1,40 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./src/**/*.{html,templ,go}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        "c-bg": "var(--c-bg)",
+        "c-on-bg": "var(--c-on-bg)",
+      }
+    },
+  },
+  corePlugins: {
+    container: false
+  },
+  plugins: [
+    function({ addComponents }) {
+      addComponents({
+        '.container': {
+          maxWidth: '95%',
+          margin: "auto",
+          '@screen sm': {
+            maxWidth: '640px',
+          },
+          '@screen md': {
+            maxWidth: '768px',
+          },
+          '@screen lg': {
+            maxWidth: '1024px',
+          },
+          '@screen xl': {
+            maxWidth: '1280px',
+          },
+        }
+      })
+    }
+  ],
+}
+