From a3651595531e210916b29f66ac7cce61d5d87670 Mon Sep 17 00:00:00 2001 From: Tim Keller Date: Mon, 5 May 2025 19:02:08 -0500 Subject: fix gallery size, css changes center controls for slideshow --- src/slides.js | 1 + src/style.css | 45 +++++++++++++++++++++++++++------------------ 2 files changed, 28 insertions(+), 18 deletions(-) (limited to 'src') 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; -- cgit v1.2.3