diff --git a/deck.html b/deck.html index 9fb9594..d656f2d 100644 --- a/deck.html +++ b/deck.html @@ -50,17 +50,20 @@ body { SCREEN: single-slide viewer ============================ */ @media screen { - body { - background: #000; + html, body { + margin: 0; + padding: 0; + width: 100%; + height: 100%; overflow: hidden; - width: 100vw; - height: 100vh; - display: flex; - align-items: center; - justify-content: center; + background: #000; } .slide { display: none !important; + position: fixed; + top: 0; + left: 0; + transform-origin: 0 0; page-break-after: auto; } .slide.active { @@ -68,35 +71,35 @@ body { } .slide-nav { position: fixed; - bottom: 20px; + bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; z-index: 100; - background: rgba(0,0,0,0.6); - padding: 8px 20px; - border-radius: 24px; + background: rgba(0,0,0,0.7); + padding: 6px 18px; + border-radius: 20px; } .slide-nav button { background: none; border: 1px solid rgba(245,237,224,0.3); color: var(--sand); - font-size: 18px; - padding: 6px 16px; + font-size: 16px; + padding: 4px 14px; cursor: pointer; border-radius: 4px; font-family: 'Inter', sans-serif; } .slide-nav button:hover { - background: rgba(245,237,224,0.1); + background: rgba(245,237,224,0.15); } .slide-nav span { color: rgba(245,237,224,0.5); - font-size: 14px; + font-size: 13px; font-family: 'Inter', sans-serif; - min-width: 60px; + min-width: 50px; text-align: center; } } @@ -897,9 +900,11 @@ body { var total = slides.length; var current = 0; var counter = document.getElementById('counter'); + var navH = 48; function show(i) { slides[current].classList.remove('active'); + slides[current].style.transform = ''; current = (i + total) % total; slides[current].classList.add('active'); counter.textContent = (current + 1) + ' / ' + total; @@ -908,11 +913,14 @@ body { function fitSlide() { var slide = slides[current]; - var scaleX = window.innerWidth / 1920; - var scaleY = window.innerHeight / 1080; + var vw = window.innerWidth; + var vh = window.innerHeight - navH; + var scaleX = vw / 1920; + var scaleY = vh / 1080; var scale = Math.min(scaleX, scaleY); - slide.style.transform = 'scale(' + scale + ')'; - slide.style.transformOrigin = 'center center'; + var x = (vw - 1920 * scale) / 2; + var y = (vh - 1080 * scale) / 2; + slide.style.transform = 'translate(' + x + 'px,' + y + 'px) scale(' + scale + ')'; } slides[0].classList.add('active'); diff --git a/index.html b/index.html index c7c2616..90874e9 100644 --- a/index.html +++ b/index.html @@ -642,7 +642,7 @@ .flipbook-section { padding: 3.5rem 1rem; } .flipbook-embed { - aspect-ratio: 4/3; + aspect-ratio: 16/9; } .sensory-tags {