src/modules/album/album.templ

@@ -15,20 +15,14 @@ templ allAlbumsTempl(albums []utils.Album) {
 				Albums
 			</h1>
 			<div class="px-2">
-				<form
-					action="/album/"
-					method="GET"
-					hx-boost="true"
-					hx-target="#album-list"
-					hx-trigger="keyup changed delay:500ms from:input, search"
-				>
 				<input
 					class="inline-block w-full py-1 px-2 border border-sky-600 rounded-md text-sky-600"
-						type="search"
 					placeholder="Search albums"
 					name="s"
+					hx-get="/album/"
+					hx-trigger="keyup changed delay:500ms"
+					hx-target="#album-list"
 				/>
-				</form>
 			</div>
 			<br/>
 			<div id="album-list" class="grid grid-cols-3 gap-2 px-2">

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" class="container">
+		<div hx-ext="response-targets">
 			Login to Navidrome:
 			<br/>
 			<form
@@ -22,7 +22,7 @@ templ LoginTempl() {
 				</label>
 				<input
 					id="navidrome-url"
-					class="w-full py-1 px-2 rounded bg-c-bg text-c-on-bg border border-sky-400"
+					class="w-full py-1 px-2 rounded"
 					placeholder="https://"
 					name="navidrome-url"
 					required
@@ -33,7 +33,7 @@ templ LoginTempl() {
 				</label>
 				<input
 					id="username"
-					class="w-full py-1 px-2 rounded bg-c-bg text-c-on-bg border border-sky-400"
+					class="w-full py-1 px-2 rounded"
 					placeholder="username"
 					name="username"
 					required
@@ -44,7 +44,7 @@ templ LoginTempl() {
 				</label>
 				<input
 					id="password"
-					class="w-full py-1 px-2 rounded bg-c-bg text-c-on-bg border border-sky-400"
+					class="w-full py-1 px-2 rounded"
 					placeholder="password"
 					name="password"
 					type="password"

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">
+	<div class="inline-block p-1 rounded bg-zinc-200 dark:bg-zinc-800 w-full max-w-32">
 		<div class="h-30 w-28 relative">
-			<img class="w-full" src={ fmt.Sprintf("/covers/%s", album.ID) }/>
+			<img 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"

tailwind.config.cjs

@@ -0,0 +1,16 @@
+/** @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: [],
+}
+

tailwind.config.mjs

@@ -1,40 +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)",
-      }
-    },
-  },
-  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',
-          },
-        }
-      })
-    }
-  ],
-}
-