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 {