start to simplify a bit with tailwind

2 files changed, 6 insertions, 92 deletions

diff --git a/src/albums.js b/src/albums.js
index 19602df..529a02e 100644
--- a/src/albums.js
+++ b/src/albums.js
@@ -8,8 +8,8 @@ export default async function initAlbums(albumsPageContainer) {
 	async function createAlbum(res) {
 		console.log(res.albumName, res.id, res.startDate, res.endDate, res.assetCount, res.shared)
 		const albumClone = albumTemplate.content.cloneNode(true)
-		albumClone.querySelector(".album").dataset.key = res.id
-		albumClone.querySelector(".album-thumb").src = apiConnector.assetThumbnailSrc(res.albumThumbnailAssetId)
+		albumClone.firstElementChild.dataset.key = res.id
+		albumClone.querySelector("img").src = apiConnector.assetThumbnailSrc(res.albumThumbnailAssetId)
 		albumClone.querySelector(".album-name").textContent = res.albumName
 		albumClone.querySelector(".album-assets-count").textContent = res.assetCount.toLocaleString()
 		if (!res.shared)
@@ -33,7 +33,10 @@ export default async function initAlbums(albumsPageContainer) {
 			return
 
 		console.log(album)
-		album.classList.toggle("selected")
+		if (album.dataset.selected)
+			delete album.dataset.selected
+		else
+			album.dataset.selected = "1"
 	})
 
 	return true
diff --git a/src/style.css b/src/style.css
index f370f2c..1b0109f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -11,8 +11,6 @@
 	--immich-dark-hover-border: rgb(31 41 55);
 }
 
-.font-bold { font-weight: 700 }
-
 body {
 	background: black;
 	color-scheme: dark;
@@ -33,17 +31,6 @@ main, #slideshow {
 	overflow: hidden;
 }
 
-svg {
-	fill: white;
-	width: 100%;
-	height: 100%;
-
-	&.p24 {
-		width: 24px;
-		height: 24px;
-	}
-}
-
 /* slideshow */
 #slideshow-carousel {
 	height: 100%
@@ -107,7 +94,6 @@ svg {
 #album-search {
 	display: block;
 	padding: 1rem;
-	border-radius: 1rem;
 	border: 0;
 	margin: 1rem auto;
 	width: 100%;
@@ -133,57 +119,6 @@ svg {
 		border: 1px solid transparent;
 		border-bottom: 1px solid var(--selected-border);
 		border-top:    1px solid var(--selected-border);
-		/*border-bottom: 1px solid var(--immich-dark-hover-border);*/
-
-		.album-selector {
-			opacity: 0;
-			border-radius: 50%;
-			align-self: center
-		}
-
-		&.selected {
-			background: var(--selected-bg);
-		}
-
-		&:hover {
-			cursor: pointer;
-			background: var(--immich-dark-hover-bg);
-			border: 1px solid var(--immich-dark-hover-border);
-
-			.album-selector { opacity: .5 }
-			.album-thumb {
-				box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
-			}
-			.album-name { color: var(--immich-dark-primary) }
-			.album-open { opacity: 1 }
-		}
-
-
-		&.selected .album-selector {
-			opacity: 1;
-			fill: var(--immich-dark-primary);
-			background: black;
-		}
-	}
-
-	.album-thumb {
-		aspect-ratio: 1/1;
-		object-fit: cover;
-		border-radius: 1rem;
-	}
-
-	.album-desc-grid {
-		display: flex;
-		justify-content: space-between;
-		align-self: center;
-		font-size: 18px;
-	}
-
-	.album-open {
-		position: absolute;
-		bottom: 1rem;
-		right: 1rem;
-		opacity: 0;
 	}
 }
 
@@ -192,7 +127,6 @@ svg {
 		grid-template-columns: 1fr 1fr;
 		gap: 1.5rem;
 		width: 100%;
-		.album-info { font-size-adjust: .4; }
 	}
 }
 
@@ -203,42 +137,19 @@ svg {
 	}
 }
 
-footer {
-	width: 100%;
-}
-
-#bottom-container {
-	max-width: 1024px;
-	margin: auto;
-}
-
 #menu {
 	a {
 		display: flex;
-		color: white;
 		align-items: center;
 		justify-content: center;
 		text-decoration: none;
 		width: 100%;
 		gap: 1rem;
 
-		&:hover {
-			color: var(--immich-dark-primary);
-
-			svg{ fill: var(--immich-dark-primary) }
-		}
-
-		svg { height: 24px; width: 24px }
 		span {
 			font-size: .875rem;
 			line-height: 1.25rem;
 			font-weight: 500;
 		}
 	}
-	display: flex;
-	width: 100%;
-	padding: 1rem;
-	gap: 2ex;
-	box-sizing: border-box;
-	border-top: 1px solid rgb(55, 65, 81);
 }