(presentation) Fixed slide scaling to work properly

3 files changed, 15 insertions, 7 deletions

diff --git a/src/presentation.css b/src/presentation.css
index 4b74030..4dbe7e0 100644
--- a/src/presentation.css
+++ b/src/presentation.css
@@ -6,6 +6,8 @@
     padding: 1em;
     width: 297mm; /* Size of landscape A4 paper */
     font-size: 30px;
+    transform-origin: 0 0;
+    margin-bottom: 1em;
   }
 .absolute-slide {
     border: none !important;
@@ -15,6 +17,7 @@
     right: 0;
     top: 50%;
     transform: translate(-50%, -50%);
+    transform-origin: center center;
     visibility: visible;
   }
   .absolute-slide .clicked-image {
@@ -25,8 +28,6 @@
 
 /* Stylesheet override */
 
-article { max-width: calc(297mm + 2em); }
-
 ul, ol { padding-inline-start: 30px; }
 
 /* Presentation controller */
@@ -127,7 +128,6 @@ absolute-slide {...} */
 @media screen {
   .slide {
       border: 1px solid var(--fg-color);
-      margin-bottom: 1em;
     }
 }
 
@@ -135,7 +135,7 @@ absolute-slide {...} */
   article, body {
       border: none !important;
       margin: 0;
-      max-width: auto;
+      max-width: none;
       padding: 0;
     }
     nav, article > :not(.slide), #pagenav {
@@ -144,6 +144,7 @@ absolute-slide {...} */
     .slide {
         height: 210mm;
         width: 297mm;
+        margin: 0;
       }
 }
 
diff --git a/src/scripts/presentation.js b/src/scripts/presentation.js
index 425815c..ba7dd66 100644
--- a/src/scripts/presentation.js
+++ b/src/scripts/presentation.js
@@ -79,20 +79,26 @@ presentBtn.addEventListener('click', function() {
 	else {
 		pageY = window.scrollY; pageX = window.scrollX;
 		window.scrollTo(0, 0);
-		fixAbsoluteSlideScale();
 	}
 
 	presenting = !presenting;
+	fixAbsoluteSlideScale();
 });
 
 function fixAbsoluteSlideScale() {
-	var scale = Math.min(window.innerHeight / slides[0].offsetHeight, window.innerWidth / slides[0].offsetWidth); 
+	var height = (presenting) ? window.innerHeight : articleElem.offsetHeight;
+	var width  = (presenting) ? window.innerWidth  : articleElem.offsetWidth - 32;
+	var scale = Math.min(height / slides[0].offsetHeight, width / slides[0].offsetWidth); 
+	// Update .slide
+	document.styleSheets.item(3).cssRules[0].style.transform = 'scale(' + scale + ')';
+	document.styleSheets.item(3).cssRules[0].style.marginBottom = 'calc(1em - ' + slides[0].offsetHeight + 'px * ' + (1 - scale) + ')';
 	// Update .absolute-slide
 	document.styleSheets.item(3).cssRules[1].style.transform = 'translate(-50%, -50%) scale(' + scale + ')';
 	// Update .clicked-image
 	document.styleSheets.item(3).cssRules[2].style.transform = 'translate(-50%, -50%) scale(' + (1/scale) + ')';
 }
 window.addEventListener('resize', fixAbsoluteSlideScale);
+window.addEventListener('load', fixAbsoluteSlideScale);
 
 /* Show as article button */
 
diff --git a/src/styles.css b/src/styles.css
index 79b0b83..2a14de5 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -423,7 +423,7 @@ dt, dd {
 
 /* Small screen support */
 
-@media screen and (max-width: 610px) {
+@media screen and ((max-width: 610px) or (max-height: 610px)) {
   article {
       border-top: none;
       max-width: calc(100vw - 16px - 3px);
@@ -460,6 +460,7 @@ dt, dd {
       }
 
   pre, code { white-space: pre-wrap !important; }
+  .slide, .absolute-slide { transform: none !important; margin: 0; }
 }
 
 /* presentation.js */