albums page and a bunch of stuff

1 files changed, 52 insertions, 0 deletions

diff --git a/src/style.css b/src/style.css
index 98d3fda..607e6ec 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,3 +1,9 @@
+:root {
+	--immich-dark-primary: rgb(172 203 250);
+}
+
+.font-bold { font-weight: 700 }
+
 body {
 	background: black;
 	color: white;
@@ -21,6 +27,7 @@ svg {
 	height: 100%;
 }
 
+/* slideshow */
 #slideshow-carousel {
 	height: 100%
 }
@@ -77,6 +84,44 @@ svg {
 	}
 }
 
+/* albums */
+#albums {
+	width: 100%;
+	height: 100%;
+	overflow: scroll;
+}
+#albums-container {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+	gap: 2.5rem;
+	margin: auto;
+	padding: 2rem;
+
+	.album-thumb {
+		width: 100%;
+		aspect-ratio: 1/1;
+		object-fit: cover;
+		border-radius: 1rem;
+		margin-bottom: 1rem;
+	}
+
+}
+
+@media (max-width: 512px) {
+	#albums-container {
+		grid-template-columns: 1fr 1fr;
+		gap: 1.5rem;
+		.album-info { font-size-adjust: .4; }
+	}
+}
+
+@media (max-width: 768px) {
+	.carousel-cell {
+		width: 70vw;
+		margin: 12px;
+	}
+}
+
 footer {
 	width: 100%;
 }
@@ -95,6 +140,13 @@ footer {
 		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;