From 7f88f436e0b5398ad79b4c130834d95d622d62be Mon Sep 17 00:00:00 2001
From: Tim Keller <tjk@tjkeller.xyz>
Date: Fri, 13 Jun 2025 20:36:38 -0500
Subject: optimize more

---
 public/index.html |  6 +++---
 src/style.css     | 23 +++++------------------
 2 files changed, 8 insertions(+), 21 deletions(-)

diff --git a/public/index.html b/public/index.html
index a1781a8..1af1745 100644
--- a/public/index.html
+++ b/public/index.html
@@ -20,14 +20,14 @@
 			<template id="carousel-cell-template">
 				<div class="carousel-cell"><img src="" /></div>
 			</template>
-			<div id="slideshow-bottom-controls">
+			<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>
 		</div>
 		<div id="albums" class="hidden!">
-			<input class="rounded-2xl" id="album-search" placeholder="Search your albums" />
+			<input class="rounded-2xl max-w-3xl" id="album-search" placeholder="Search your albums" />
 			<div id="albums-container"></div>
 			<template id="album-template">
 				<div class="album group">
@@ -56,7 +56,7 @@
 	</main>
 	<footer class="w-full">
 		<div class="max-w-5xl m-auto">
-			<div id="menu" class="flex w-full p-4 gap-4 box-border border-t border-gray-500">
+			<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>
diff --git a/src/style.css b/src/style.css
index 39e320b..5363742 100644
--- a/src/style.css
+++ b/src/style.css
@@ -42,10 +42,7 @@ main, #slideshow {
 
 
 #slideshow-bottom-controls {
-	display: grid;
-	grid-template-columns: repeat(3, 1fr);
 	margin: 48px auto;
-	max-width: 768px;
 	button {
 		width: 48px;
 		height: 48px;
@@ -71,34 +68,24 @@ main, #slideshow {
 	&:focus { outline: 2px solid rgb(55, 65, 81) }
 }
 #albums-container {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(768px, 1fr));
-	width: max-content;
-	margin: auto;
-	padding: 2rem;
+	grid-template-columns: repeat(auto-fill, minmax(var(--breakpoint-md), 1fr));
+	@apply grid w-max m-auto p-8;
 }
 
 #albums-container .album {
 	border: 1px solid transparent;
 	border-bottom: 1px solid var(--selected-border);
 	border-top:    1px solid var(--selected-border);
-	@apply flex relative h-40 gap-6 p-4 cursor-pointer
+	@apply flex relative h-40 gap-6 p-3 cursor-pointer
 	       data-selected:bg-slate-950 data-selected:hover:bg-slate-900
 	       hover:bg-gray-900
 	;
 }
 
-@media (max-width: 512px) {
-	#albums-container {
-		grid-template-columns: 1fr 1fr;
-		gap: 1.5rem;
-		width: 100%;
-	}
-}
-
 #menu a {
-	@apply flex items-center justify-center no-underline w-full gap-4
+	@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
 	;
 }
-- 
cgit v1.2.3