[presentation] Implemented proper slide scaling

1 files changed, 24 insertions, 21 deletions

diff --git a/src/presentation.css b/src/presentation.css
index afaa3ae..e790a2c 100644
--- a/src/presentation.css
+++ b/src/presentation.css
@@ -1,3 +1,23 @@
+/* This is done so that .slide and .absolute-slide are easily findable in DOM CSS representation. */
+
+.slide {
+    box-sizing: border-box;
+    height: 210mm;
+    padding: 1em;
+    width: 297mm; /* Size of landscape A4 paper */
+    font-size: 30px;
+  }
+.absolute-slide {
+    border: none !important;
+    left: 50%;
+    margin: 0 auto;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    visibility: visible;
+  }
+
 /* Stylesheet override */
 
 article { max-width: calc(297mm + 2em); }
@@ -15,15 +35,9 @@ h2, h3, h4, h5, h6 {
   /* Presenting mode */
   #presentCont { display: initial; }
 
-/* Slides styles */
+/* Slides styles
 
-.slide {
-    box-sizing: border-box;
-    height: 210mm;
-    padding: 1em;
-    width: 297mm; /* Size of landscape A4 paper */
-    font-size: 30px;
-  }
+.slide {...} */
   .slide img:not(.clicked-image) {
       height: auto;
       max-height: 100%;
@@ -84,20 +98,9 @@ h2, h3, h4, h5, h6 {
   .lineb8 { padding: 4.0em; }
   .lineb9 { padding: 4.5em; }
 
+/* Presenting mode
 
-/* Presenting mode */
-
-.absolute-slide {
-    border: none;
-    height: min(100vh, 100vw / 1.414);
-    left: 0;
-    margin: 0 auto;
-    position: absolute;
-    right: 0;
-    top: 0;
-    visibility: visible;
-    width: min(100vh * 1.414, 100vw);
-  }
+absolute-slide {...} */
   .invisible { visibility: hidden; }
   .no-overflow { overflow: hidden; }
   .body-bg-color { background-color: var(--bg-color); }