1 files changed, 85 insertions, 0 deletions
diff --git a/assets/static/css/gallery.css b/assets/static/css/gallery.css
new file mode 100644
index 0000000..c72dd80
--- /dev/null
+++ b/assets/static/css/gallery.css
@@ -0,0 +1,85 @@
+* {
+	box-sizing: border-box;
+}
+
+html, body {
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	min-height: 100vh;
+	background-color: #faf6e5;
+	font-family: Helvetica, Verdana, sans-serif;
+}
+
+.header-container,
+.gallery-container {
+	width: 90vw;
+	height: auto;
+	margin: 0 auto;
+	padding: 1em;
+}
+
+.album-container {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.album-container a {
+	text-decoration: none;
+	flex-grow: 1;
+	height: 150px;
+}
+
+.album-container img {
+	max-height: 100%;
+	min-width: 100%;
+	object-fit: cover;
+}
+
+.album-container::after {
+	content: "";
+	flex-grow: 10;
+}
+
+.image-container {
+	text-align: center;
+	background-color: #000;
+}
+
+.image-container img {
+	display: inline-block;
+	max-width: 100vw;
+	max-height: 85vh;
+}
+
+.control-btn {
+	display: inline-block;
+	text-decoration: none;
+	padding: 0.5em;
+	color: #fff !important;
+}
+
+.control-btn:hover {
+	text-decoration: none;
+	background-color: #333;
+	color: #fff;
+}
+
+.control-btn.hidden {
+	visibility: hidden;
+}
+
+@media (prefers-color-scheme: dark) {
+	html, body {
+		background-color: #151517;
+		color: #fcf8e2;
+	}
+
+	a {
+		color: #3f6e90;
+	}
+
+	a:visited {
+		color: #9c6992;
+	}
+}