fix gallery size, css changes center controls for slideshow

2 files changed, 28 insertions, 18 deletions

diff --git a/src/slides.js b/src/slides.js
index bac2d5a..f61d1fa 100644
--- a/src/slides.js
+++ b/src/slides.js
@@ -59,6 +59,7 @@ export default function initSlides() {
 		prevNextButtons: false,
 		pageDots: false,
 		resize: true,
+		setGallerySize: false,
 	})
 
 	flkty.on("scroll", scroll)
diff --git a/src/style.css b/src/style.css
index 0175b0c..8149462 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,14 +1,31 @@
 body {
 	background: black;
 	color: white;
+	height: 100vh;
+	max-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	margin: 0;
+}
+
+main, #slideshow {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
 }
 
 svg {
 	fill: white;
+	width: 100%;
+	height: 100%;
+}
+
+#slideshow-carousel {
+	height: 100%
 }
 
 .carousel-cell {
-	height: 70vh;
+	height: 100%;
 	width: 80vw;
 
 	margin: 24px;
@@ -24,15 +41,6 @@ svg {
 	object-fit: contain;
 }
 
-
-/*
-@media (max-width: 768px) {
-	.carousel-cell {
-		height: 100vh;
-	}
-}
-*/
-
 #slideshow-share button,
 #slideshow-bottom-controls button {
 	background: none;
@@ -57,16 +65,18 @@ svg {
 
 
 #slideshow-bottom-controls {
-	margin: auto;
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	margin: 48px auto;
 	max-width: 768px;
-	button { width: 48px; height: 48px; }
+	button {
+		width: 48px;
+		height: 48px;
+		margin: auto;
+	}
 }
 
-
-
 footer {
-	position: fixed;
-	bottom: 0;
 	width: 100%;
 }
 
@@ -76,8 +86,7 @@ footer {
 }
 
 #menu {
-	a { width: 100% }
-	svg { height: 48px; width: 100% }
+	a { width: 100%; height: 48px }
 	display: flex;
 	width: 100%;
 	padding: 16px;