/* Layout of a canvas */
.sws-header , .sws-title,{
- height:5vmin;
+ height:5%;
}
.sws-inner-canvas {
- height: 80vmin;
+ height: 80%;
text-align: justify;
}
margin: 0;
padding: 0;
display: block;
- width: 100%;
+ box-sizing: border-box;
}
.sws-footer{
- height: 10vmin;
+ height: 10%;
}
.sws-header, .sws-title, .sws-inner-canvas, .sws-footer{
-body > h1, body > h2, body > h3 {
+body > h1, body > h2, body > h3, body > a.sws-previous {
display: none;
}
/* Display Mode */
/****************************************/
-:root.sws-display body {
- overflow:hidden;
-}
+/* display mode */
+/* Aspect is 4/3, 16/9, 16/10 (default is 4/3) */
:root.sws-display .sws-canvas {
- width:133.3vmin;
- height:100vmin;
+ max-width: 100vw;
+ max-height: 100vh;
overflow:hidden;
+
}
-/* display mode */
-/* Aspect is 4/3, 16/9, 16/10 (default is 4/3) */
+:root.sws-by-width.sws-aspect-4-3 .sws-canvas {
+ width:133.3vh;
+ height:100vh;
+}
+
+:root.sws-by-width.sws-aspect-16-9 .sws-canvas {
+ width:177.7vh;
+ height:100vh;
+}
-:root.sws-aspect-4-3 .sws-canvas {
- width:133.3vmin;
- height:100vmin;
+:root.sws-by-width.sws-aspect-16-10 .sws-canvas {
+ width:160vh;
+ height:100vh;
}
-:root.sws-aspect-16-9 .sws-canvas {
- width:177.7vmin;
- height:100vmin;
+:root.sws-by-height.sws-aspect-4-3 .sws-canvas {
+ width:100vw;
+ height:75vw;
}
-:root.sws-aspect-16-10 .sws-canvas {
- width:160vmin;
- height:100vmin;
+:root.sws-by-height.sws-aspect-16-9 .sws-canvas {
+ width:100vw;
+ height:56.25vw;
+}
+
+:root.sws-by-height.sws-aspect-16-10 .sws-canvas {
+ width:100vw;
+ height:62.5vw;
+}
+
+:root.sws-display body::after{
+ display:inline-block;
+ height:100vh;
+ width:0;
+ content: "";
+ vertical-align:middle;
+
}
:root.sws-display .sws-canvas {
- position: relative;
- margin-left: auto;
- margin-right: auto;
+ display:inline-block;
padding: 0;
- margin-top: 0;
- margin-bottom: 0;
+ max-width: 100vw;
}
:root.sws-display .sws-inactive-slide {
display: none;
}
+
:root.sws-display body {
background: black;
+ overflow: hidden;
+ text-align:center;
}
</div>\
<div id='sws-control-panel-options'>\
<span title='Change the aspect ratio' class='sws-symbol' >💻</span><select id='sws-aspect-select' onchange='SWS.Presentation.changeAspect();'>\
-<option value='sws-aspect-4-3'>4:3</option>\
+<option value='sws-aspect-4-3' selected='selected'>4:3</option>\
<option value='sws-aspect-16-9'>16:9</option>\
<option value='sws-aspect-16-10'>16:10</option>\
</select>\
});
};
self.changeAspect = function() {
+ var newClass = $("#sws-aspect-select").val();
+ var args = newClass.split("-");
+ var targetRatio = (args[2] - 0) / (args[3] - 0);
+ var realRatio = window.innerWidth / window.innerHeight;
+ var byClass = (targetRatio > realRatio ) ? "sws-by-height" : "sws-by-width";
+ console.log(byClass);
+
+ if ($("html").hasClass(newClass)
+ && $("html").hasClass(byClass))
+ return;
+
$("html").removeClass("sws-aspect-4-3")
.removeClass("sws-aspect-16-9")
.removeClass("sws-aspect-16-10")
- .addClass($("#sws-aspect-select").val());
+ .removeClass("sws-by-width")
+ .removeClass("sws-by-height")
+ .addClass(newClass).addClass(byClass);
self.redraw();
};
}
else {
if (self.showHelpAtStartup()) $("#sws-help-panel-canvas").show().delay(5000).hide();
+ self.changeAspect();
self.refresh();
};
$(document).keydown(self.inputHandler);
document.body.addEventListener('touchstart',self.inputHandler, false);
document.body.addEventListener('touchend',self.inputHandler, false);
+ $(window).resize(self.changeAspect);
_initialized = true;
};
- setTimeout(f, 100);
+ //setTimeout(f, 100);
+ f();
};
};
/* Title of the slide */
.sws-title {
padding: 2vmin 0 2vmin 0;
- height: 10vmin;
- background:red;
+ height: 10%;
+ z-index:2;
+ vertical-align: middle;
}
h1 {
color: #00486c;
font-size: larger;
- text-align:center;
+ text-align: center;
+}
+.sws-title h1 {
+ display:inline-block;
+ margin:0;
+}
+
+.sws-toc { position: absolute;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ top:0;
+ }
+.sws-toc > ul {
+ display:inline-block;
+}
+
+.sws-toc::before {
+ display:inline-block;
+ content: "";
+ height:100%;
+ width: 0px;
+ vertical-align:middle;
}
.sws-canvas {
background: #fff;
padding:0;
margin: 0;
- z-index:2;
+ position:relative;
+ z-index:0;
}
-.sws-inner-canvas { /* allows the canvas to cover the logo if needed */
- z-index:2;
- height: 80vmin;
- background:blue;
+
+.sws-inner-canvas {
+ height: 85%;
+ z-index: 2;
+ position: relative; /* to make z-index work */
}
.sws-footer {
- height: 10vmin;
- background:pink;
+ height: 5%;
+ text-align:right;
+ padding-right:1ex;
+ vertical-align: middle;
+ z-index: 2;
}
.sws-footer::before {
+ display:inline-block;
+ height:12%;
+ width: 12%;
+ left: 0.5ch;
+ bottom:0.5ch;
position:absolute;
- bottom: 1vmin;
- left:1vmin;
- display:block;
- height:10vmin;
content:"";
- background-size: 100%;
+ background-size: contain;
background-image: url("logo_psud_psay.png");
background-repeat: no-repeat;
+ z-index: 1;
}
-:root.sws-display .sws-footer::before { z-index: -1; }
-/*:root.sws-print .sws-footer::before { z-index: 1; }*/
+
.sws-slide-num-sep:after {
content: "/";
}
+
@font-face {
src: url("DIN-Medium.ttf") format("truetype");
font-family: "DIN";
color: #696968;
}
-:root.sws-display body {
- font-size: 3.5vh;
+:root.sws-display .sws-canvas {
+ font-size: 2.2vw;
}
:root.sws-print body {
font-size: 21pt;
}
-.sws-footer {
- text-align: right;
- height: 5%;
-}
@media print {
color: #92b938;
}
-.done:after {
+.done::after {
content: " ✔";
}
li {
- margin-top:0.5vh;
+ margin-top:0.5vmin;
}
tt em, code em {
}
dl {
- padding: 1vh 1em 1vh 1em;
+ padding: 1vmin 1em 1vmin 1em;
}
dt { display: inline;