From 1df46c6a636fd8d1d4f795d30f027b931f20b346 Mon Sep 17 00:00:00 2001
From: Tim Keller <tjk@tjkeller.xyz>
Date: Tue, 17 Jun 2025 21:06:55 -0500
Subject: finish tailwind restyle

---
 public/index.html | 68 ++++++++++++++++++++--------------------
 src/style.css     | 93 ++++++++++++-------------------------------------------
 webpack.config.js | 10 +-----
 3 files changed, 53 insertions(+), 118 deletions(-)

diff --git a/public/index.html b/public/index.html
index dc140fe..bd55000 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,26 +9,28 @@
 	<header></header>
 	<main class="my-4">
 		<div id="slideshow" class="hidden!">
-			<div id="slideshow-top-controls">
-				<div id="slideshow-share">
-					<button id="share"    class="svgbtn p-3 size-12"><svg alt="Share"    class="size-6"><use href="#sprite-share"></use></svg></button>
-					<button id="download" class="svgbtn p-3 size-12"><svg alt="Download" class="size-6"><use href="#sprite-download"></use></svg></button>
+			<div class="flex justify-end pe-[10vw] w-full absolute bg-gradient-to-b from-black/40 z-20">
+				<div id="slideshow-share" class="z-10">
+					<button id="share"    class="svg-btn p-3 size-12"><svg alt="Share"    class="size-6"><use href="#sprite-share"></use></svg></button>
+					<button id="download" class="svg-btn p-3 size-12"><svg alt="Download" class="size-6"><use href="#sprite-download"></use></svg></button>
 					<!-- <button id="hide"><svg alt="Don't Show This Image"><use href="#skip_next"></use></svg></button> -->
 				</div>
 			</div>
 			<div id="slideshow-carousel" class="h-full"></div>
 			<template id="carousel-cell-template">
-				<div class="carousel-cell"><img src="" /></div>
+				<div class="carousel-cell"><img class="carousel-img" src="" /></div>
 			</template>
-			<div id="slideshow-bottom-controls" class="grid grid-cols-3 max-w-3xl">
-				<button id="prevSlide" class="svgbtn"><svg alt="Previous Slide" class="size-full"><use href="#sprite-skip_previous"></use></svg></button>
-				<button id="playPause" class="svgbtn"><svg alt="Pause"          class="size-full"><use href="#sprite-pause"></use></svg></button>
-				<button id="nextSlide" class="svgbtn"><svg alt="Next Slide"     class="size-full"><use href="#sprite-skip_next"></use></svg></button>
+			<div class="grid grid-cols-3 w-full max-w-3xl m-auto justify-items-center py-4">
+				<button id="prevSlide" class="svg-btn size-12"><svg alt="Previous Slide" class="size-full"><use href="#sprite-skip_previous"></use></svg></button>
+				<button id="playPause" class="svg-btn size-12"><svg alt="Pause"          class="size-full"><use href="#sprite-pause"></use></svg></button>
+				<button id="nextSlide" class="svg-btn size-12"><svg alt="Next Slide"     class="size-full"><use href="#sprite-skip_next"></use></svg></button>
 			</div>
 		</div>
-		<div id="albums" class="hidden!">
-			<input class="rounded-2xl max-w-3xl" id="album-search" placeholder="Search your albums" />
-			<div id="albums-container"></div>
+		<div id="albums" class="hidden! overflow-y-scroll"><div class="px-4 m-auto max-w-3xl">
+			<div class="p-2 sticky top-0 z-20 bg-black">
+				<input class="rounded-input mx-auto mb-4 w-full" id="album-search" placeholder="Search your albums" />
+			</div>
+			<div id="albums-container" class="m-auto z-10"></div>
 			<template id="album-template">
 				<div class="album group">
 					<svg class="opacity-0 self-center size-6 group-hover:opacity-50
@@ -50,52 +52,48 @@
 					</a>
 				</div>
 			</template>
-		</div>
-		<div id="settings" class="hidden!">
-			<form class="flex flex-col gap-4 m-auto max-w-3xl">
-				<fieldset>
-					<h2>
+		</div></div>
+		<div id="settings" class="hidden! overflow-y-scroll">
+			<form class="flex flex-col gap-4 m-auto max-w-3xl mx-auto px-4">
+				<fieldset class="rounded-fieldset">
+					<h2 class="fieldset-header">
 						<svg class="size-6 inline"><use href="#sprite-camera"></use></svg>
 						Immich Server
 					</h2>
 					<div>
-						<label>Immich URL</label>
+						<label class="settings-label">Immich URL</label>
 						<p>Complete Immich base url (e.g. <span class="font-medium">http://immich.local</span>)</p>
 					</div>
 					<input class="rounded-input" name="immich_url" type="text" />
 					<div>
-						<label>Immich API Key</label>
+						<label class="settings-label">Immich API Key</label>
 						<p>Generate an API key in User Settings</p>
 					</div>
 					<input class="rounded-input" name="immich_api_key" type="text" />
 				</fieldset>
-				<fieldset>
-					<h2>
+				<fieldset class="rounded-fieldset">
+					<h2 class="fieldset-header">
 						<svg class="size-6 inline"><use href="#sprite-photo_frame"></use></svg>
 						Display
 					</h2>
-					<div class="grid grid-cols-[16fr_9fr] gap-6">
+					<div class="grid md:grid-cols-[16fr_9fr] gap-4">
 						<div>
-							<label>Image Duration</label>
+							<label class="settings-label">Image Duration</label>
 							<p>Number of seconds each image will be displayed.</p>
 						</div>
 						<input class="my-auto rounded-input" name="image_duration" type="number" />
 						<div>
-							<label>Transition Duration</label>
+							<label class="settings-label">Transition Duration</label>
 							<p>Number of seconds each transition between images will take.<br>Set as 0 to disable.</p>
 						</div>
 						<input class="my-auto rounded-input" name="transition_duration" type="number" />
 						<div>
-							<label>Max Framerate</label>
+							<label class="settings-label">Max Framerate</label>
 							<p>Target display framerate.<br>Simple transitions look good as low as 12-15 fps.</p>
 						</div>
 						<input class="my-auto rounded-input" name="max_framerate" type="number" />
-						<!--<div>
-							<label>Auto Transition</label>
-							<input name="auto_transition" type="checkbox" />
-						</div>-->
 						<div>
-							<label>Display Size</label>
+							<label class="settings-label">Display Size</label>
 							<p>Image size to load on the display.<br>Large thumbnail size is suitable for FHD.</p>
 						</div>
 						<select class="my-auto rounded-input" name="display_size">
@@ -104,22 +102,22 @@
 							<option value="fullsize">Original Image</option>
 						</select>
 						<div>
-							<label>Max Cached Assets</label>
+							<label class="settings-label">Max Cached Assets</label>
 							<p>Number of assets that can exist at once in RAM.<br>Each additional asset will take ~2x the display size in memory.</p>
 						</div>
 						<input class="my-auto rounded-input" name="max_cache_assets" type="number" />
 					</div>
 				</fieldset>
-				<input class="rounded-button ml-auto" type="submit" value="Save Settings" />
+				<input class="rounded-btn ml-auto" type="submit" value="Save Settings" />
 			</form>
 		</div>
 	</main>
 	<footer class="w-full">
 		<div class="max-w-5xl m-auto">
 			<div id="menu" class="flex w-full p-2 gap-4 box-border border-t border-gray-500">
-				<a href="/slideshow"><svg class="size-6"><use href="#sprite-slideshow"  ></use></svg><span>Slideshow</span></a>
-				<a href="/albums"   ><svg class="size-6"><use href="#sprite-photo_album"></use></svg><span>Albums</span></a>
-				<a href="/settings" ><svg class="size-6"><use href="#sprite-settings"   ></use></svg><span>Settings</span></a>
+				<a class="nav-btn" href="/slideshow"><svg class="size-6"><use href="#sprite-slideshow"  ></use></svg><span class="max-[425px]:hidden">Slideshow</span></a>
+				<a class="nav-btn" href="/albums"   ><svg class="size-6"><use href="#sprite-photo_album"></use></svg><span class="max-[425px]:hidden">Albums</span></a>
+				<a class="nav-btn" href="/settings" ><svg class="size-6"><use href="#sprite-settings"   ></use></svg><span class="max-[425px]:hidden">Settings</span></a>
 			</div>
 		</div>
 	</footer>
diff --git a/src/style.css b/src/style.css
index f4bf0a0..4760434 100644
--- a/src/style.css
+++ b/src/style.css
@@ -3,13 +3,6 @@
 
 :root {
 	--font-sans: "Overpass", sans-serif;
-	--immich-dark-primary: rgb(172 203 250);
-	--immich-dark-secondary: rgb(33 33 33);
-	--immich-dark-secondary-border: rgb(33 33 33 / .1);
-	--selected-bg: rgb(172 203 250 / .1);
-	--selected-border: rgb(172 203 250 / .1);
-	--immich-dark-hover-bg: rgb(17 24 39);
-	--immich-dark-hover-border: rgb(31 41 55);
 	@apply scheme-dark;
 }
 
@@ -20,93 +13,45 @@ main, #slideshow {
 	overflow: hidden;
 }
 
-.svgbtn {
+.svg-btn {
 	@apply bg-none border-0 p-0 cursor-pointer;
 }
 
-/* slideshow */
-.carousel-cell {
-	@apply h-full w-[70vw] m-3 md:w-[80vw] md:m-6;
-
-	img {
-		@apply align-middle h-full max-w-full object-contain;
-	}
-}
-
-#slideshow-share,
-#slideshow-bottom-controls {
-	display: flex;
-	width: 80vw;
-	margin: auto;
-	justify-content: right;
-}
-
-
-#slideshow-bottom-controls {
-	margin: 48px auto;
-	button {
-		width: 48px;
-		height: 48px;
-		margin: auto;
-	}
-}
-
-/* albums */
-#albums {
-	height: 100%;
-	overflow: scroll;
-	margin-inline: 1rem;
+.nav-btn {
+	@apply flex items-center justify-center no-underline w-full gap-4 p-3 rounded-full
+	       hover:text-blue-300 hover:fill-blue-300
+	       data-selected:text-blue-300 data-selected:fill-blue-300
+	       data-selected:bg-gray-900
+	;
 }
-#album-search {
-	display: block;
-	padding: 1rem;
-	border: 0;
-	margin: 1rem auto;
-	width: 100%;
-	max-width: 768px;
-	background-color: var(--immich-dark-secondary);
 
-	&:focus { outline: 2px solid rgb(55, 65, 81) }
+.carousel-cell {
+	@apply h-full w-[70vw] mx-3 md:w-[80vw] md:mx-6;
 }
-#albums-container {
-	grid-template-columns: repeat(auto-fill, minmax(var(--breakpoint-md), 1fr));
-	@apply grid w-max m-auto p-8;
+.carousel-img {
+	@apply align-middle h-full max-w-full object-contain;
 }
 
-#albums-container .album {
-	border: 1px solid transparent;
-	border-bottom: 1px solid var(--selected-border);
-	border-top:    1px solid var(--selected-border);
+.album {
 	@apply flex relative h-40 gap-6 p-3 cursor-pointer
+	       border-y border-slate-800
 	       data-selected:bg-slate-950 data-selected:hover:bg-slate-900
 	       hover:bg-gray-900
 	;
 }
 
-/* settings */
-fieldset {
+.rounded-fieldset {
 	@apply border rounded-2xl p-6 border-gray-500 flex flex-col gap-4;
 }
-
-fieldset h2 {
+.fieldset-header {
 	@apply font-bold text-blue-300 fill-blue-300 text-xl;
 }
-fieldset label {
-	@apply font-medium text-blue-200
+.settings-label {
+	@apply font-medium text-blue-200;
 }
-
 .rounded-input {
-	@apply rounded-2xl bg-zinc-800 p-4
+	@apply rounded-2xl bg-zinc-800 p-4;
 }
-
-.rounded-button {
+.rounded-btn {
 	@apply rounded-full w-fit bg-blue-200 px-4 py-2 text-black font-medium;
 }
-
-#menu a {
-	@apply flex items-center justify-center no-underline w-full gap-4 p-3 rounded-full
-	       hover:text-blue-300 hover:fill-blue-300
-	       data-selected:text-blue-300 data-selected:fill-blue-300
-	       data-selected:bg-gray-900
-	;
-}
diff --git a/webpack.config.js b/webpack.config.js
index ba6756e..6204e46 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -10,15 +10,7 @@ module.exports = {
 					"css-loader",
 					{
 						loader: "postcss-loader",
-						options: {
-							postcssOptions: {
-								plugins: [
-									require("autoprefixer"),
-									require("postcss-nested"),
-									require("@tailwindcss/postcss"),
-								]
-							}
-						}
+						options: { postcssOptions: { plugins: [ require("@tailwindcss/postcss") ] } },
 					},
 				],
 			},
-- 
cgit v1.2.3