Work around some insane shortcommings of CSS (vertical centering).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>
-<html xmlns="http://www.w3.org/1999/xhtml">
+<html xmlns="http://www.w3.org/1999/xhtml"
+ class="sws-aspect-16-9"
+>
<head>
<title>SimpleWebSlides</title>
<script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
<!-- Initialize the library -->
- <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css"
- media="all" />
<script src="../simpleWebSlides.js" type="text/javascript" >
</script>
-
+ <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css"
+ media="all" />
<!-- Load a custom Theme -->
<link rel="stylesheet" title="Web 2.0"
href="../themes/webTwoPointO.css"
-:root {
- font-size: 3vh;
+:root.sws-aspect-4-3 .sws-canvas {
+ width:133.3vh;
+ height:100vh;
}
-
-@media screen {
- .sws-canvas {
- position: absolute;
- width:133vh;
+:root.sws-aspect-16-9 .sws-canvas {
+ width:177.7vh;
height:100vh;
- margin: auto;
- overflow:hidden;
- }
-
- .sws-active-slide {
- display: block;
- }
-
- .sws-inactive-slide {
- display: none;
- }
-
- .sws-active-object {
- visibility: visible;
- }
-
- .sws-inactive-object {
- visibility: hidden;
- }
-
+}
+.sws-canvas {
+ position: relative;
+ margin-left: auto;
+ margin-right: auto;
+ padding: 0vh;
+ overflow:hidden;
+ margin-top: 0vh;
+ margin-bottom: 0vh;
}
-@media print {
-
- body {
- margin: 0pt 0pt 0pt 0pt;
- padding: 0pt 0pt 0pt 0pt;
- border-width: 0pt;
- }
-
- .sws-canvas {
- overflow:hidden;
- position:relative;
- border-width: 0cm;
- border-style: none;
- margin:0pt 0pt 0pt 0pt;
- page-break-after:always;
- width: 297mm;
- height: 209.8mm; /* not 210 due to rounding errors */
- padding:0pt;
- visibility:visible;
- opacity:1.0;
- }
- .sws-canvas:last-child {
- page-break-after: avoid;
- }
- .sws-active-slide, .sws-inactive-slide {
- display: block;
- visibility:visible;
- opacity:1.0;
-
- }
- .sws-active-object, .sws-inactive-object {
- visibility:visible;
- opacity:1.0;
- }
-
+.sws-active-slide {
+ display: block;
}
-body {
- overflow:hidden;
+.sws-inactive-slide {
+ display: none;
}
-.sws-canvas {
- top:0pt;
- left:0pt;
- right:0pt;
+.sws-active-object {
+ visibility: visible;
}
-.sws-header {
- position:absolute;
- width:133vh;
- left:0pt;
- right:0pt;
- top:0pt;
+.sws-inactive-object {
+ visibility: hidden;
}
-.sws-footer {
+.sws-header, .sws-title, .sws-inner-canvas, .sws-footer {
position: absolute;
- width:133vh;
- left: 0pt;
- right: 0pt;
- bottom: 0pt;
+ width: 100%;
+ display:inline-block;
+ padding: 0vh;
+ margin: 0vh;
+ border: 0vh;
}
-.sws-title, .sws-slide {
- display:table-row;
- height:1pt;
+.sws-title {
+ vertical-align:middle;
}
-
.sws-inner-canvas {
- display:table;
- position:absolute;
- left:0pt;
- right:0pt;
+ white-space: nowrap;
+}
+.sws-content {
+ margin: 0vh;
+ padding: 0vh;
+ display:inline-block;
+ width: 100%;
+ vertical-align: middle;
+ max-height: 100%;
+ overflow:hidden;
+}
+.sws-vertical-align {
+ display:inline-block;
+ height: 33%;
+ width: 0%;
+ vertical-align:text-bottom;
}
-.sws-filler {
- display:table-row;
- height:auto;
+body {
+ overflow:hidden;
+ margin: 0vh;
+ padding: 0vh;
}
body > h1, body > h2, body > h3 {
display: none;
}
+
#sws-control-panel {
/* visibility: hidden;*/
display:none;
cursor: pointer;
}
-@media print {
- #sws-control-panel {
- display: none;
- }
-}
var canvas = $('<div class="sws-canvas"/>');
if (!($(this).hasClass("sws-option-noheader"))) {
- canvas.append($('<div class="sws-header"/>'));
+ canvas.append($('<div class="sws-header"/><br/>'));
};
+
var inner = $('<div class="sws-inner-canvas"/>');
+ var content = $('<div class="sws-content"/>');
+ var title = $('<div class="sws-title"/>');
var h1 = $(this).children("h1");
if (h1) {
- var title = $('<div class="sws-title"/>');
h1.detach();
title.append(h1);
- inner.append(title);
}
+ canvas.append(title);
+ canvas.append($("<br/>"));
$(this).find('script[type="text/javascript"]').remove();
- 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"/>');
+ content.append($(this));
+ inner.append(content);
+ inner.append($('<span class="sws-vertical-align"> </span><br/>'));
canvas.append(inner);
+
if (!($(this).hasClass("sws-option-nofooter"))) {
canvas.append($('<div class="sws-footer"/>'));
};
+
par.append(canvas);
if (i == cur) {
@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;
+/* Slide layout
+ .sws-{header,inner-canvas,footer} are in
+ a .sws-canvas which fills the whole viewport vertically
+ and is horizontally centered.
+ The .sws-canvas has an aspect ratio of 4/3 or 16/9
+*/
+
+.sws-header {
+ top: 0vh;
+ height: 5vh;
}
-code, pre, tt {
- font-family: 'Inconsolata', monospace;
+.sws-title {
+ top: 5vh;
+ height: 15vh;
}
-
.sws-inner-canvas {
- top:0vh;
- width:127vh;
- height:93vh;
- padding-left:3vh;
- padding-right:3vh;
- overflow:hidden;
+ top: 20vh;
+ height: 75vh;
+}
+.sws-footer {
+ top: 95vh;
+ height: 5vh;
+ text-align: right;
}
-.sws-cover {
- text-align:center;
+.sws-content {
+ padding: 3vh;
}
-a { text-decoration: none; }
-ul {
- list-style-type: square;
+.sws-slide-num-sep:after {
+ content: "/";
}
-@media screen {
- body, .sws-slide {
- background-color: black;
- color: white;
- }
- h1 {
- color: #f14a29;
- }
- em {
- color: #f14a29;
- font-style:normal;
- }
- a {
- color: #0092bf;
- text-decoration:none;
- font-style:normal;
- }
+body {
+ font-family: 'Armata',sans-serif;
+ font-size: 4vh;
+ background-color: black;
+ color: white;
}
-@media print {
- body, .sws-slide {
- background-color: white;
- color: black;
- }
- em {
- font-style:italic;
- }
+
+code, pre, tt {
+ font-family: 'Inconsolata', monospace;
}
-/* slide title */
-h1 {
- font-weight: bolder;
- text-align: center;
+ul {
+ list-style-type: square;
}
-span.sws-slide-num-sep:after {
- content : "⋯";
+
+h1 { color: #f14a29;
+ font-size: 6vh;
+ text-align:center;
+ }
+
+em { color: #f14a29;
+ font-style:normal;
+ }
+
+a {
+ color: #1092bf;
+ text-decoration:none;
+ font-style:normal;
}
-.sws-footer {
+
+.centerbox {
text-align: center;
-}
+}
\ No newline at end of file
projects / hacks / simpleWebSlides.git / commitdiff