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

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;

diff --git a/simpleWebSlides.js b/simpleWebSlides.js
index 10d5d03..cce515f 100644 (file)
--- a/simpleWebSlides.js
+++ b/simpleWebSlides.js
@@ -280,7 +280,7 @@ SWS.Presentation = new function () {
 
         var cur = info.current;
         var custom = info.custom;
-        var real_slide = to_slide.children(".sws-slide");
+        var real_slide = to_slide.find(".sws-slide");
 
         real_slide.find("*").andSelf().each(function (i){
             var frameset = $(this).data("sws-frame-set") || {};
@@ -422,7 +422,7 @@ SWS.Presentation = new function () {
         var cur_frame = 0;
         var last_frame = canvas.find(".sws-pause").length;
         //Add all regular elements to the frame list
-        var slide = $(canvas.children(".sws-slide")[0]);
+        var slide = $(canvas.find(".sws-slide")[0]);
 
         var callbacks = { at_slide : new Array(),
                           at_frame : new Array() }
@@ -506,8 +506,26 @@ SWS.Presentation = new function () {
             if (!($(this).hasClass("sws-option-noheader"))) {
                 canvas.append($('<div class="sws-header"/>'));
             };
+            var inner = $('<div class="sws-inner-canvas"/>');
+            var h1 = $(this).children("h1");
+            if (h1) {
+              var title = $('<div class="sws-title"/>');
+              h1.detach();
+              title.append(h1);
+              inner.append(title);
+            }
             $(this).find('script[type="text/javascript"]').remove();
-            canvas.append($(this));
+            if (!($(this).hasClass("sws-option-nofiller"))) {
+                inner.append('<div class="sws-filler"/>');
+                inner.append('<div class="sws-filler"/>');
+            };
+            inner.append($(this));
+            if (!($(this).hasClass("sws-option-nofiller"))) {
+                inner.append('<div class="sws-filler"/>');
+                inner.append('<div class="sws-filler"/>');
+            };
+            inner.append('<div class="sws-filler"/>');
+            canvas.append(inner);
             if (!($(this).hasClass("sws-option-nofooter"))) {
                 canvas.append($('<div class="sws-footer"/>'));
             };

diff --git a/themes/default.css b/themes/default.css
index 584cba4..cc5fe67 100644 (file)
--- a/themes/default.css
+++ b/themes/default.css
@@ -1,31 +1,29 @@
 /* Default document properties */
 body {
     font-family: sans-serif;
-    font-size: 18pt;
 }
 
-/* The slide should be positioned w.r.t. to the canvas.
-   The canvas takes up the whole window in screen mode and a
-   whole page in print mode
-*/
-.sws-slide {
-    margin: 10pt;
-    border-width:1mm;
-    border-radius:5mm;
+.sws-inner-canvas {
+    top:3vh;
+    margin:auto;
+    height:90vh;
+    width:126vh;
+    border-width:0.1vh;
+    border-radius:1.5vh;
     border-color:black;
     border-style:solid;
-    left:0pt;
-    right:0pt;
-    top:0pt;
-    bottom:0pt;
-    padding:5mm;
+    padding:1.4vh;
+    overflow:hidden;
 }
 
-/* slide title */
-.sws-slide h1 {
+h1 {
     font-weight: bolder;
 }
 
+h1:first-child {
+    margin-top:0pt;
+}
+
 span.sws-slide-num-sep:after {
     content : "/";
 }

diff --git a/themes/webTwoPointO.css b/themes/webTwoPointO.css
index 0403851..f110830 100644 (file)
--- a/themes/webTwoPointO.css
+++ b/themes/webTwoPointO.css
@@ -1,42 +1,25 @@
 @import url(https://fonts.googleapis.com/css?family=Armata&subset=latin,latin-ext);
 @import url(https://fonts.googleapis.com/css?family=Inconsolata:400,700&subset=latin,latin-ext);
+
 /* Default document properties */
 body {
     font-family: 'Armata',sans-serif;
-    font-size: 18pt;
 }
 code, pre, tt {
     font-family: 'Inconsolata', monospace;
 }
 
-/* The slide should be positioned w.r.t. to the canvas.
-   The canvas takes up the whole window in screen mode and a
-   whole page in print mode
-*/
-
-.sws-slide {
-    margin: 0pt;
-    left:0pt;
-    right:0pt;
-    top:0pt;
-    bottom:0pt;
-    padding:5mm;
+.sws-inner-canvas {
+    top:0vh;
+    width:127vh;
+    height:93vh;
+    padding-left:3vh;
+    padding-right:3vh;
+    overflow:hidden;
 }
 
 .sws-cover {
     text-align:center;
-    vertical-align:middle;
-}
-.sws-cover .centerbox {
-    display:inline-block;
-    vertical-align: middle;
-}
-.sws-cover:before {
-    content: "";
-    display: inline-block;
-    width:10pt;
-    height:100%;
-    vertical-align:middle;
 }
 
 a { text-decoration: none; }
@@ -48,7 +31,7 @@ ul {
         background-color: black;
         color: white;
     }
-    .sws-slide h1 {
+    h1 {
         color: #f14a29;
 
     }
@@ -73,7 +56,7 @@ ul {
 }
 
 /* slide title */
-.sws-slide h1 {
+h1 {
     font-weight: bolder;
     text-align: center;
 }
@@ -83,7 +66,4 @@ span.sws-slide-num-sep:after {
 }
 .sws-footer {
     text-align: center;
-    position: absolute;
-    width: 100%;
-    bottom: 0pt;
 }