optimize more

1 files changed, 5 insertions, 18 deletions

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
 	;
 }