Always use a 4/3 display. Vertically center the content of slides.

[hacks/simpleWebSlides.git] / simpleWebSlides.css

diff --git a/simpleWebSlides.css b/simpleWebSlides.css
index e7dcb60..29f5f53 100644 (file)
--- a/simpleWebSlides.css
+++ b/simpleWebSlides.css
@@ -1,8 +1,13 @@
+:root {
+    font-size: 3vh;
+}
+
 @media screen {
     .sws-canvas {
         position: absolute;
-        width:100%;
-        height:100%;
+        width:133vh;
+        height:100vh;
+        margin: auto;
         overflow:hidden;
     }
 
@@ -42,9 +47,6 @@
         width: 297mm;
         height: 209.8mm; /* not 210 due to rounding errors */
         padding:0pt;
-        left:0pt;
-        top:0pt;
-        display: block;
         visibility:visible;
         opacity:1.0;
     }
@@ -69,22 +71,42 @@ body {
 }
 
 .sws-canvas {
-   top: 0pt;
-   left:0pt;
-   right:0pt;
-   bottom:0pt;
+    top:0pt;
+    left:0pt;
+    right:0pt;
 }
 
-.sws-slide {
+.sws-header {
     position:absolute;
+    width:133vh;
+    left:0pt;
+    right:0pt;
+    top:0pt;
 }
 
-.sws-slide .sws-footer {
+.sws-footer {
     position: absolute;
+    width:133vh;
     left: 0pt;
     right: 0pt;
     bottom: 0pt;
 }
+.sws-title, .sws-slide {
+    display:table-row;
+    height:1pt;
+}
+
+.sws-inner-canvas {
+    display:table;
+    position:absolute;
+    left:0pt;
+    right:0pt;
+}
+
+.sws-filler {
+    display:table-row;
+    height:auto;
+}
 
 body > h1, body > h2, body > h3 {
     display: none;