Shower Presentation Template
+Vadim Makeev, Opera Software
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
- 
-
-
-
-
-
+
+
+
+
+ Shower Presentation Template
+
Picture
-
-
+
+
+
+ 
+
+
+
+
+
+
+
+
+ Picture
+
+
\ No newline at end of file
diff --git a/pictures/cover.jpg b/pictures/cover.jpg
index d638bc4..412a93a 100644
Binary files a/pictures/cover.jpg and b/pictures/cover.jpg differ
diff --git a/pictures/image.jpg b/pictures/image.jpg
deleted file mode 100644
index 12cb1d5..0000000
Binary files a/pictures/image.jpg and /dev/null differ
diff --git a/pictures/picture.jpg b/pictures/picture.jpg
new file mode 100644
index 0000000..3509d34
Binary files /dev/null and b/pictures/picture.jpg differ
diff --git a/scripts/script.js b/scripts/script.js
index feb1d16..cbda339 100755
--- a/scripts/script.js
+++ b/scripts/script.js
@@ -1,8 +1,7 @@
(function() {
+
var url = document.location,
- linkScreen = document.querySelector('link[title=screen]'),
- linkProjection = document.querySelector('link[title=projection]'),
- shower = document.querySelector('div.shower'),
+ body = document.body;
slides = document.querySelectorAll('section.slide'),
slideList = [], hashList = {},
progress = document.querySelector('div.progress div'),
@@ -12,25 +11,31 @@
var id = slides[i].id;
slideList[i] = '#' + id;
hashList['#' + id] = i;
+ slides[i].addEventListener('click', function(){
+ enterSingle();
+ turnSlide(hashList['#' + this.id]);
+ }, false);
}
- function toggleFull(force) {
- fullscreen = (typeof force == 'boolean') ? force : (
- window.fullScreen || // Firefox
- document.webkitFullScreen || // Webkit
- screen.width == window.outerWidth && screen.height == window.outerHeight
- );
- updateView();
- updateProgress();
+ function resizeBody(p) {
+ if(typeof p == 'boolean' && p) {
+ var transform = 'none';
+ } else {
+ var sx = body.clientWidth / window.innerWidth,
+ sy = body.clientHeight / window.innerHeight,
+ transform = 'scale(' + (1/Math.max(sx, sy)) + ')';
+ }
+ body.style.MozTransform = transform;
+ body.style.WebkitTransform = transform;
+ body.style.OTransform = transform;
+ body.style.msTransform = transform;
+ body.style.transform = transform;
}
-
+
function turnSlide(e) {
- if(!fullscreen) return;
var current = hashList[url.hash],
target;
- if(e == null) {
- target = slideList[current++];
- } else if(e.type == 'keyup') { // Key-Based
+ if(e.type == 'keyup') { // Key-Based
switch(e.which) {
case 33 : // PgUp
case 38 : // Up
@@ -52,42 +57,49 @@
current += e.shiftKey ? -1 : 1;
break;
}
- target = slideList[current];
e.preventDefault();
- } else { // Specific
- target = slideList[+e || 0];
+ } else {
+ current = e || 0;
}
+ target = slideList[current];
if(target) url.hash = target;
updateProgress();
}
- function updateView() {
- linkScreen.disabled = fullscreen;
- linkProjection.disabled = !fullscreen;
- if (fullscreen) {
- linkScreen.setAttribute('disabled', 'disabled');
- linkProjection.removeAttribute('disabled');
- } else {
- linkScreen.removeAttribute('disabled');
- linkProjection.setAttribute('disabled', 'disabled');
- }
- if(!hashList[url.hash]) turnSlide(0);
+ function enterSingle() {
+ body.className = 'single';
+ resizeBody();
+ updateProgress();
+ window.addEventListener('resize', resizeBody, false);
+ document.addEventListener('keyup', turnSlide, false);
+ document.addEventListener('keyup', exitSingleEsc, false);
}
-
+
+ function exitSingle() {
+ body.className = 'multiple';
+ resizeBody(true);
+ window.removeEventListener('resize', resizeBody, false);
+ window.removeEventListener('keyup', turnSlide, false);
+ document.removeEventListener('keyup', exitSingleEsc, false);
+ }
+
+ function exitSingleEsc(e) {
+ if(e.which != 27) return;
+ exitSingle();
+ url.hash = '';
+ }
+
+ function checkHash() {
+ if(typeof hashList[url.hash] != 'undefined') {
+ enterSingle();
+ }
+ }
+
function updateProgress() {
if(!progress) return;
progress.style.width = (100/(slideList.length-1) * hashList[url.hash]).toFixed(2) + '%';
}
- slides[0].addEventListener('click', function(){
- toggleFull(true);
- }, false);
+ window.addEventListener('DOMContentLoaded', checkHash, false);
- document.addEventListener('keyup', turnSlide, false);
- document.addEventListener('keyup', function(e) {
- if(e.which == 27) toggleFull(false);
- }, false);
-
- window.addEventListener('resize', toggleFull, false);
- window.addEventListener('DOMContentLoaded', toggleFull, false);
})();
\ No newline at end of file
diff --git a/styles/projection.css b/styles/projection.css
deleted file mode 100644
index eb5f166..0000000
--- a/styles/projection.css
+++ /dev/null
@@ -1,372 +0,0 @@
-@import url(reset.css);
-@import url(fonts.css);
-
-BODY {
- overflow:hidden;
- background:#000;
- color:#FFF;
- counter-reset:paging;
- font:1em 'PT Sans', sans-serif;
- }
-A {
- text-decoration:none;
- }
-
-/* Basic Font-Size
----------------------------------------- */
-
-@media ( min-height:480px ) { BODY { font-size:30px } }
-@media ( min-height:600px ) { BODY { font-size:38px } }
-@media ( min-height:768px ) { BODY { font-size:48px } }
-@media ( min-height:800px ) { BODY { font-size:50px } }
-@media ( min-height:900px ) { BODY { font-size:56px } }
-@media ( min-height:1024px ) { BODY { font-size:64px } }
-@media ( min-height:1050px ) { BODY { font-size:66px } }
-@media ( min-height:1200px ) { BODY { font-size:75px } }
-
-/* H ÷ 16 ≈ Font-Size */
-
-/* Shower
----------------------------------------- */
-.shower {
- position:fixed;
- top:0;
- right:0;
- bottom:0;
- left:0;
- }
-.shower:after {
- position:absolute;
- top:-1em;
- bottom:-1em;
- right:-1em;
- z-index:3;
- width:1.5em;
- border:1em solid #000;
- border-left-width:0;
- -webkit-border-radius:0 2.5em 2.5em 0;
- -moz-border-radius:0 2.5em 2.5em 0;
- border-radius:0 2.5em 2.5em 0;
- content:'';
- }
-
-/* Slide
----------------------------------------- */
-.slide {
- position:absolute;
- top:0;
- right:0;
- bottom:0;
- left:0;
- margin-left:100%;
- overflow:hidden;
- background:#FFF;
- color:#000;
- }
-.slide:target {
- margin-left:0;
- }
-.slide:before {
- position:absolute;
- top:0;
- right:3em;
- width:1em;
- height:3em;
- background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAEsCAMAAAACQObTAAAAz1BMVEXMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAAAS27ylAAAARHRSTlMA+QMGCfb8D/BFw+3GEgzP8zM8zLdUhKufYDY5SDDJsXJjvVGZeKVLFZOKP2ldfm9a6rScwNKulqhXTpCNdWy6h6JCgQMMiNQAAAGxSURBVHhe7M2xCcJgFAbA1xkJPzGkU7S2tXAD959JxOJbIE8Q7ha4ev3APyUSiUQikUgkEolEIpFIJBKJRCKRSCQSiUQikUgkEolEIpFIJBKJRCKRSCQSiUQikUgkEolEIpFIJBKJRCKRSCQSiUQikUgkEolEIpFIJBKJRCKRSCSSx/HZnszXui9dSY7K0pPMa32MpTGZ1voaW0OSI0tPMp0rDtvuSY4st4bkdKnIsmvyrm0+VyKIoQCMfskUcRERWXdXFKwFu6hYe3n/Z1LwxxVmTCa5N+cFjhyyLBgnS8sQXvRJ03fA4sCFnEOWkVnSHINqQXVAPTJJmg9C6muDpJknrN5WJHJEF2Xi1omrX2OJ/oB6rEjcAVgsWBxQjTMT98Bw1WVW4nZIUW0EEvUhS3LiVkhV3SQmbfoB1TQhkcNoofe4J4+fDk7aC3L5u4FJe0o+vx9J5DBe6Byr6Pj3eKI9wM8CiRzqJZxsYWLWSewPuPo/OcHMbieRw3jpJi+Yuu1LzjF2KEmpQxZJNingUZJiBzz9TZ4p5EiSPSi6UPaAt9/kjKImP4kc5RY+KW7yDcDGg0ekTkUOAAAAAElFTkSuQmCC) 0 100% no-repeat;
- -webkit-background-size:100%;
- -moz-background-size:100%;
- background-size:100%;
- content:'';
- }
-.slide:after {
- position:absolute;
- bottom:4em;
- left:6em;
- color:#AAA;
- font-size:0.5em;
- counter-increment:paging;
- content:counter(paging, decimal-leading-zero);
- }
-
-/* Article */
-.slide ARTICLE {
- position:absolute;
- top:2em;
- right:3em;
- bottom:3em;
- left:3em;
- line-height:1.7;
- }
-
-/* Elements */
-.slide ARTICLE H1,
-.slide ARTICLE H2 {
- margin:0 0 1.2em;
- color:#666;
- font:bold 1em/1.2 'PT Sans Narrow', sans-serif;
- }
-.slide ARTICLE P {
- margin:0 0 1.7em;
- font-size:0.65em;
- }
-.slide ARTICLE P.note {
- color:#888;
- }
-.slide ARTICLE A {
- border-bottom:0.1em solid;
- color:#0174A7;
- }
-.slide ARTICLE A[target=_blank] {
- margin-right:0.9em;
- }
-.slide ARTICLE A[target=_blank]:after {
- position:absolute;
- margin:0.1em 0 0 0.3em;
- font-family:'Target Blank';
- content:'\005E';
- }
-.slide ARTICLE B,
-.slide ARTICLE STRONG {
- font-weight:bold;
- }
-.slide ARTICLE I,
-.slide ARTICLE EM {
- font-style:italic;
- }
-.slide ARTICLE KBD,
-.slide ARTICLE CODE {
- padding:0.1em 0.3em;
- -webkit-border-radius:0.3em;
- -moz-border-radius:0.3em;
- border-radius:0.3em;
- background:#FAFAA2;
- font-family:Consolas, 'Droid Sans Mono', monospace;
- }
-
-/* Quote */
-.slide ARTICLE BLOCKQUOTE {
- font-style:italic;
- font-size:0.65em;
- }
- .slide ARTICLE BLOCKQUOTE P {
- font-size:1em;
- }
-.slide ARTICLE BLOCKQUOTE:before {
- position:absolute;
- margin:-0.1em 0 0 -0.44em;
- color:#BBB;
- line-height:1;
- font-size:8em;
- content:'\201C';
- }
-.slide ARTICLE BLOCKQUOTE:after {
- display:block;
- margin:-1em 0 0;
- color:#444;
- font-weight:bold;
- content:attr(cite);
- }
-
-/* Lists */
-.slide ARTICLE OL,
-.slide ARTICLE UL {
- margin:0 0 1.7em;
- counter-reset:list;
- font-size:0.65em;
- }
- .slide ARTICLE UL UL,
- .slide ARTICLE UL OL,
- .slide ARTICLE OL OL,
- .slide ARTICLE OL UL {
- font-size:1em;
- }
- .slide ARTICLE UL UL,
- .slide ARTICLE OL UL {
- margin:0 0 0 1.5em;
- }
- .slide ARTICLE OL OL,
- .slide ARTICLE UL OL {
- margin:0 0 0 1.8em;
- }
- .slide ARTICLE OL LI:before,
- .slide ARTICLE UL LI:before {
- position:absolute;
- width:2em;
- color:#BBB;
- text-align:right;
- }
- .slide ARTICLE UL LI:before {
- margin-left:-2.58em;
- line-height:1;
- font-size:1.6em;
- content:'\2022';
- }
- .slide ARTICLE OL LI:before {
- margin-left:-3em;
- counter-increment:list;
- content:counter(list)'\002E';
- }
-
-/* Code */
-.slide ARTICLE PRE {
- margin:0 0 1.7em;
- counter-reset:code;
- white-space:normal;
- font-size:0.65em;
- }
- .slide ARTICLE PRE CODE {
- display:block;
- padding:0;
- background:none;
- white-space:pre;
- }
- .slide ARTICLE PRE CODE:before {
- position:absolute;
- margin:0 0 0 -2.8em;
- width:2em;
- color:#BBB;
- text-align:right;
- counter-increment:code;
- content:counter(code, decimal-leading-zero)'.';
- }
- .slide ARTICLE PRE EM,
- .slide ARTICLE PRE STRONG {
- padding:0.1em 0.3em;
- -webkit-border-radius:0.3em;
- -moz-border-radius:0.3em;
- border-radius:0.3em;
- }
- .slide ARTICLE PRE EM {
- background:#FAFAA2;
- color:#000;
- font-style:normal;
- }
- .slide ARTICLE PRE STRONG {
- background:#C00;
- color:#FFF;
- font-weight:normal;
- }
-
-/* Cover
----------------------------------------- */
-.slide.cover {
- z-index:3;
- }
-.slide.cover:before {
- position:absolute;
- top:0;
- right:3em;
- width:1em;
- height:100%;
- background:#000;
- content:'';
- }
-.slide.cover:after {
- display:none;
- }
-
-/* Back
----------------------------------------- */
-.slide.back {
- background:#000;
- }
- .slide.back ARTICLE {
- z-index:3;
- }
- .slide.back IMG {
- position:absolute;
- top:0;
- left:50%;
- z-index:2;
- height:100%;
- -webkit-transform-origin:50% 0;
- -webkit-transform:translate(-50%, 0);
- -moz-transform-origin:50% 0;
- -moz-transform:translate(-50%, 0);
- -ms-transform-origin:50% 0;
- -ms-transform:translate(-50%, 0);
- -o-transform-origin:50% 0;
- -o-transform:translate(-50%, 0);
- transform-origin:50% 0;
- transform:translate(-50%, 0);
- }
-.slide.back:after {
- content:'';
- }
-
-/* Shout
----------------------------------------- */
-.slide.shout {
- }
- .slide.shout ARTICLE H2 {
- position:absolute;
- top:50%;
- margin:-0.5em 0 0;
- width:100%;
- text-align:center;
- font-size:4em;
- opacity:0;
- -webkit-transform:scale(0.1) translate(0, 2em);
- -webkit-transition:all 0.8s ease-out;
- -moz-transform:scale(0.1) translate(0, 2em);
- -moz-transition:all 0.8s ease-out;
- -ms-transform:scale(0.1) translate(0, 2em);
- -ms-transition:all 0.8s ease-out;
- -o-transform:scale(0.1) translate(0, 2em);
- -o-transition:all 0.8s ease-out;
- transform:scale(0.1) translate(0, 2em);
- transition:all 0.8s ease-out;
- }
- .slide.shout ARTICLE A {
- margin:0;
- }
- .slide.shout ARTICLE A:after {
- content:'';
- }
- .slide.shout:target ARTICLE H2 {
- opacity:1;
- -webkit-transform:scale(1) translate(0, 0);
- -moz-transform:scale(1) translate(0, 0);
- -ms-transform:scale(1) translate(0, 0);
- -o-transform:scale(1) translate(0, 0);
- transform:scale(1) translate(0, 0);
- }
-.slide.shout:before {
- display:none;
- }
-.slide.shout:after {
- content:'';
- }
-
-/* Progress
----------------------------------------- */
-.progress {
- position:absolute;
- right:3em;
- bottom:1em;
- left:3em;
- z-index:2;
- height:0.2em;
- border:0.03em solid rgba(255, 255, 255, 0.4);
- -webkit-border-radius:0.2em;
- -moz-border-radius:0.2em;
- border-radius:0.2em;
- }
- .progress DIV {
- position:absolute;
- top:0;
- left:0;
- width:0;
- height:100%;
- -webkit-border-radius:0.2em;
- -moz-border-radius:0.2em;
- border-radius:0.2em;
- background:rgba(177, 177, 177, 0.5);
- -webkit-transition:width 0.2s linear;
- -moz-transition:width 0.2s linear;
- -o-transition:width 0.2s linear;
- transition:width 0.2s linear;
- }
-.progress-off:target ~ .progress {
- display:none;
- }
\ No newline at end of file
diff --git a/styles/reset.css b/styles/reset.css
index fdbc203..dc418a4 100644
--- a/styles/reset.css
+++ b/styles/reset.css
@@ -7,36 +7,36 @@ B, U, I, CENTER,
DL, DT, DD, OL, UL, LI,
FIELDSET, FORM, LABEL, LEGEND,
TABLE, CAPTION, TBODY, TFOOT, THEAD, TR, TH, TD,
-ARTICLE, ASIDE, CANVAS, DETAILS, EMBED,
-FIGURE, FIGCAPTION, FOOTER, HEADER, HGROUP,
+ARTICLE, ASIDE, CANVAS, DETAILS, EMBED,
+FIGURE, FIGCAPTION, FOOTER, HEADER, HGROUP,
MENU, NAV, OUTPUT, RUBY, SECTION, SUMMARY,
TIME, MARK, AUDIO, VIDEO {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline;
+ margin:0;
+ padding:0;
+ border:0;
+ font-size:100%;
+ font:inherit;
+ vertical-align:baseline;
}
ARTICLE, ASIDE, DETAILS, FIGCAPTION, FIGURE,
FOOTER, HEADER, HGROUP, MENU, NAV, SECTION {
- display: block;
+ display:block;
}
BODY {
- line-height: 1;
+ line-height:1;
}
OL, UL {
- list-style: none;
+ list-style:none;
}
BLOCKQUOTE, Q {
- quotes: none;
+ quotes:none;
}
BLOCKQUOTE:before, BLOCKQUOTE:after,
Q:before, Q:after {
- content: '';
- content: none;
+ content:'';
+ content:none;
}
TABLE {
- border-collapse: collapse;
- border-spacing: 0;
+ border-collapse:collapse;
+ border-spacing:0;
}
\ No newline at end of file
diff --git a/styles/screen.css b/styles/screen.css
deleted file mode 100755
index 5d25359..0000000
--- a/styles/screen.css
+++ /dev/null
@@ -1,280 +0,0 @@
-@import url(reset.css);
-@import url(fonts.css);
-
-BODY {
- background:#DDD;
- color:#000;
- counter-reset:paging;
- font:15px 'PT Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
- }
-A {
- text-decoration:none;
- }
-
-@media ( max-width:960px ) { BODY { font-size:12px; } }
-@media ( max-width:760px ) { BODY { font-size:10px; } }
-
-/* Shower
----------------------------------------- */
-.shower {
- margin:3em 0 0;
- }
-
-/* Slide
----------------------------------------- */
-.slide {
- position:relative;
- margin:0 auto 3em;
- width:55em;
- background:#FFF;
- border:0.8em solid #CCC;
- -webkit-border-radius:0.8em;
- -moz-border-radius:0.8em;
- border-radius:0.8em;
- }
- .slide:first-child {
- cursor:pointer;
- }
- .slide:first-child:after {
- position:absolute;
- top:50%;
- left:50%;
- margin:-5em 0 0 -5em;
- width:10em;
- height:10em;
- background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAMAAAAL34HQAAABoVBMVEX///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+lpaVRUVHt7e2urq4kJCT8/PwqKirz8/Ph4eHn5+fPz8+NjY0SEhI2NjYMDAzV1dV7e3tpaWmWlpZaWlpjY2Ofn5+3t7eEhIRISEhFRUUDAwPS0tK6urotLS0eHh4bGxu0tLQwMDDJyckPDw/AwMD29vb5+fkJCQne3t54eHhsbGzk5ORmZmaBgYFgYGCTk5OZmZldXV1XV1c/Pz9+fn7///8AAADb29tycnKcnJwGBgbw8PAYGBhLS0urRoz6AAAATXRSTlMA8+oemRjwhFr5A8P8zGn22xtUFWAGsQmBvUI/59iHk3gze8AnjQyWdVfeLckwxn7hJCFy7ZwSRbfk0opjn89vtKg2q5A81TlID126UUtzOooAAAUfSURBVHhezNfJjrJAFIZhC0sEBMUyxnmORKPGKMZh47DpTfdVffb0/1fdfQEaCqhT9LNh+6Y4p5LKpTUSQ85LnufZgP37KXE+FKNcdqrW4OjjCf84sKrak2qC+4jkc1HT17Tov0Bar7/Qck7hGTGdwwJtU2N+RSLXeYMsKggNJGaEAUnUvrlDKrviXv1ITRlSY1O1i1kfV6BEZVxXV3XoQZneQVFU4Qalbipuf+fCoBi7OGmrthMQmGzTVVkmSJhWmgXkIMMTr2R+CULLfLKqVRekuqskVR0GYqwTv0rYIGeLuFVlFxq45XhVTWiyjlO1Bv5gVxkaSf9H4UIj902uqm1DK7stdYua0MyUeLIVDGhnRD7YnBYy0HIisorIRDFi3F1kwm0TDBbdeMkPlv7xmiFDs2dVG4YMsc2TrFdI+f8OEq3HVRbk3L8+vkHBelQVnGSz7vd/nyBwCh5kNX+YN7eepoIoCu+2cNSQ2DaeFJPW8gI2UdPwwIuhfQN5opWrFryAqKgoVq33+xkV9Vcb4wkr6QtnZq8ZXL/gS3oya++1V5PsWMbsPw3zqJZzVljGbK3xv/qyDGsiscQym3efs7kmZEiFUzZYqfauskev4ZW2kVhgQV8ekCOAoQyy6IZldm91mVjFUZd5BlhQ/8OyrwlnPG+PBa08JE4S4wLFiQsW1OH5USzQmBLLHLxaJWGNgWoyccWCft0hcU0eYtUVWNAGx4/qh1jTKizo0zoBa1pSLSRaLPjRCz3XQoo1pcaClvR+NJVinSNgQfdvKLGupC6dcLDgR8rhtYA0i4AF9W4v6xOvCg0LevRMgVWRv8oTsaDOS3dfxBNPxzKDm6uah75FxoIeLzpitTCXErGgjWtOWA1MD1QsaHvdcYqIvGKZzev2fhThMWVjQUtPHB7Uqjcs6J6tH1UlDoBldi3DlFjO+sSCeh/t9p+2Xyxo38KP2lLxjQV9Xsvuis1wWGbwNWOY0pRSACxoL5sflaQWBAv6ksWPahIFwoK2uxme+VxwLNM/0o9ykoTDglZ2juDiYNFt8j/9ETmfPHsEiyTPwGIPrDXOc8oe70tyiYHFXoaaIa26Y2HVlMGGvWi3OWMgO5Y4EWhofm05NHNWDHbkVeUsZOyAsMBZX8lxauR92X/vtOyTohFyVN8gBUnkw0bLY+x2oIvdZEaPxT2azbAiXe6JseIpAO8zAnD+uaDLOBfIBTUW9dhfkn+aU2NRqxFzKda8GotaJJlnnzm33jDPnDKrxWKWlGbx90wtFrPSdZFZOPjOKhw0ifUMYl0w5pVZdphlFlL1B0EHv4c3WnTFetul9sqGOsQjllhIQqkaoZTwFuklPH1lcfDOf2VRysXjL3gWywLZ1pJwwWGrriwP98KVh4+/av2nmjvITRgGwjA6QELMhJTSqoLQIjlElQhqqEBKipIdbIAzsOUic/JyAUshxvbwVl56b3+/IjxNqZHrhYxIVd/4R+TQaMMyepCggik5kyLXoEbt6Co/Oj5jrAUYkgMh8g4B1fb2s8k9/8hUTdhNcjP2ATOfpjNgGcdPeU4J8BxeYDlTMYMWEtOjHgnPCRSmgzHtiQ4Z0RGgZRuSAestaMLl46eblgj6xgd6qMOY4SzY6x/XETX+k3P6yqBPWvpBCSacpM6c4eIEpkzEjlrZiQkY5cuK7lRJHyzI6zk1Nq9zsMbPigZPyasi88G23tmLlXdbxd65B85gIhZeEUVRRTfV7VB4vyJB0PMPrLSkIal8JSEAAAAASUVORK5CYII=) no-repeat;
- -webkit-background-size:100%;
- -moz-background-size:100%;
- background-size:100%;
- content:'';
- opacity:0.5;
- -webkit-transition:opacity 0.3s linear;
- -moz-transition:opacity 0.3s linear;
- -ms-transition:opacity 0.3s linear;
- -o-transition:opacity 0.3s linear;
- }
- .slide:first-child:hover:after {
- opacity:0.8;
- }
-.slide:before {
- position:absolute;
- top:-1em;
- z-index:2;
- right:3em;
- width:2em;
- height:6em;
- background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAEsCAMAAAACQObTAAAAz1BMVEXMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAADMAAAS27ylAAAARHRSTlMA+QMGCfb8D/BFw+3GEgzP8zM8zLdUhKufYDY5SDDJsXJjvVGZeKVLFZOKP2ldfm9a6rScwNKulqhXTpCNdWy6h6JCgQMMiNQAAAGxSURBVHhe7M2xCcJgFAbA1xkJPzGkU7S2tXAD959JxOJbIE8Q7ha4ev3APyUSiUQikUgkEolEIpFIJBKJRCKRSCQSiUQikUgkEolEIpFIJBKJRCKRSCQSiUQikUgkEolEIpFIJBKJRCKRSCQSiUQikUgkEolEIpFIJBKJRCKRSCSSx/HZnszXui9dSY7K0pPMa32MpTGZ1voaW0OSI0tPMp0rDtvuSY4st4bkdKnIsmvyrm0+VyKIoQCMfskUcRERWXdXFKwFu6hYe3n/Z1LwxxVmTCa5N+cFjhyyLBgnS8sQXvRJ03fA4sCFnEOWkVnSHINqQXVAPTJJmg9C6muDpJknrN5WJHJEF2Xi1omrX2OJ/oB6rEjcAVgsWBxQjTMT98Bw1WVW4nZIUW0EEvUhS3LiVkhV3SQmbfoB1TQhkcNoofe4J4+fDk7aC3L5u4FJe0o+vx9J5DBe6Byr6Pj3eKI9wM8CiRzqJZxsYWLWSewPuPo/OcHMbieRw3jpJi+Yuu1LzjF2KEmpQxZJNingUZJiBzz9TZ4p5EiSPSi6UPaAt9/kjKImP4kc5RY+KW7yDcDGg0ekTkUOAAAAAElFTkSuQmCC) 0 100% no-repeat;
- -webkit-background-size:100%;
- -moz-background-size:100%;
- background-size:100%;
- content:'';
- }
-
-/* Article */
-.slide ARTICLE {
- padding:2em 3em 1em 4em;
- line-height:1.7;
- }
- .slide ARTICLE:after {
- display:block;
- margin:0 0 1em;
- color:#AAA;
- counter-increment:paging;
- content:counter(paging, decimal-leading-zero);
- }
-
-/* Elements */
-.slide ARTICLE H1,
-.slide ARTICLE H2 {
- margin:0 0 1em;
- color:#666;
- font:bold 2.5em/1.2 'PT Sans Narrow', sans-serif;
- }
-.slide ARTICLE P {
- margin:0 0 1em;
- }
-.slide ARTICLE P.note {
- color:#888;
- }
-.slide ARTICLE A {
- border-bottom:0.07em solid;
- color:#0174A7;
- }
-.slide ARTICLE A[target=_blank] {
- margin-right:0.9em;
- }
-.slide ARTICLE A[target=_blank]:after {
- position:absolute;
- margin-left:0.3em;
- font-family:'Target Blank';
- content:'\005E';
- }
-.slide ARTICLE B,
-.slide ARTICLE STRONG {
- font-weight:bold;
- }
-.slide ARTICLE I,
-.slide ARTICLE EM {
- font-style:italic;
- }
-.slide ARTICLE KBD,
-.slide ARTICLE CODE {
- padding:0.1em 0.3em;
- -webkit-border-radius:0.3em;
- -moz-border-radius:0.3em;
- border-radius:0.3em;
- background:#EEE;
- font-family:Consolas, 'Droid Sans Mono', monospace;
- }
-
-/* Quote */
-.slide ARTICLE BLOCKQUOTE {
- font-style:italic;
- }
-.slide ARTICLE BLOCKQUOTE:before {
- position:absolute;
- margin:-0.1em 0 0 -0.5em;
- color:#BBB;
- line-height:1;
- font-size:6.5em;
- content:'\201C';
- }
-.slide ARTICLE BLOCKQUOTE:after {
- display:block;
- margin:0 0 1em;
- color:#444;
- font-weight:bold;
- content:attr(cite);
- }
-
-/* Lists */
-.slide ARTICLE OL,
-.slide ARTICLE UL {
- margin:0 0 1em;
- counter-reset:list;
- }
- .slide ARTICLE UL UL,
- .slide ARTICLE OL UL {
- margin:0 0 0 1.7em;
- }
- .slide ARTICLE OL OL,
- .slide ARTICLE UL OL {
- margin:0 0 0 1.8em;
- }
- .slide ARTICLE OL LI:before,
- .slide ARTICLE UL LI:before {
- position:absolute;
- color:#AAA;
- text-align:right;
- }
- .slide ARTICLE UL LI:before {
- margin-left:-2.7em;
- width:2em;
- line-height:1;
- font-size:1.5em;
- content:'\2022';
- }
- .slide ARTICLE OL LI:before {
- margin-left:-4em;
- width:3em;
- counter-increment:list;
- content:counter(list)'\002E';
- }
-
-/* Code */
-.slide ARTICLE PRE {
- margin:0 0 1em;
- counter-reset:code;
- white-space:normal;
- }
- .slide ARTICLE PRE CODE {
- display:block;
- padding:0;
- background:none;
- white-space:pre;
- }
- .slide ARTICLE PRE CODE:before {
- position:absolute;
- margin:0 0 0 -4em;
- width:3.2em;
- color:#BBB;
- text-align:right;
- counter-increment:code;
- content:counter(code, decimal-leading-zero)'.';
- }
- .slide ARTICLE PRE EM,
- .slide ARTICLE PRE STRONG {
- padding:0.1em 0.3em;
- -webkit-border-radius:0.3em;
- -moz-border-radius:0.3em;
- border-radius:0.3em;
- }
- .slide ARTICLE PRE EM {
- background:#FAFAA2;
- color:#000;
- font-style:normal;
- }
- .slide ARTICLE PRE STRONG {
- background:#C00;
- color:#FFF;
- font-weight:normal;
- }
-
-/* Cover
----------------------------------------- */
-.slide.cover {
- min-height:34em;
- }
-.slide.cover:before {
- position:absolute;
- top:0;
- right:3em;
- z-index:2;
- width:2em;
- height:100%;
- background:#000;
- content:'';
- }
- .slide.cover ARTICLE:after {
- display:none;
- }
-
-/* Back
----------------------------------------- */
-.slide.back {
- }
- .slide.back ARTICLE {
- position:absolute;
- top:0;
- right:;
- bottom:0;
- left:0;
- }
- .slide.back ARTICLE:after {
- position:absolute;
- bottom:1em;
- left:4em;
- }
- .slide.back IMG {
- display:block;
- width:100%;
- }
-
-/* Shout
----------------------------------------- */
-.slide.shout {
- }
- .slide.shout ARTICLE:after {
- content:'';
- }
- .slide.shout ARTICLE H2 {
- padding:0.5em 0 0;
- text-align:center;
- font-size:4em;
- }
- .slide.shout ARTICLE A {
- margin:0;
- }
- .slide.shout ARTICLE A:after {
- content:'';
- }
\ No newline at end of file
diff --git a/styles/style.css b/styles/style.css
new file mode 100644
index 0000000..47ec805
--- /dev/null
+++ b/styles/style.css
@@ -0,0 +1,92 @@
+@import url(reset.css);
+
+/* Multiple
+---------------------------------------- */
+.multiple {
+ padding:60px 50px 0 100px;
+ background:#585A5E url(../images/linen.png);
+ counter-reset:muliple-paging;
+ }
+
+/* Caption */
+.multiple .slide-caption {
+ margin:0 0 50px;
+ color:#3C3D40;
+ text-shadow:0 1px 1px #8D8E90;
+ }
+ .multiple .slide-caption H1 {
+ font:bold 50px/1 'PT Sans Narrow', sans-serif;
+ }
+
+/* Frame */
+.multiple .slide-frame {
+ position:relative;
+ float:left;
+ margin:0 50px 80px 0;
+ width:512px;
+ height:320px;
+ box-shadow:0 0 50px rgba(0, 0, 0, 0.5);
+ border-radius:1px;
+ background:#FFF;
+ }
+.multiple .slide-frame:hover,
+.multiple .slide-frame:focus {
+ box-shadow:
+ 0 0 0 1px #305F8D,
+ 0 0 0 10px #3C7CBD,
+ 0 0 50px rgba(0, 0, 0, 0.5);
+ outline:none;
+ }
+ .multiple .slide-frame:after {
+ position:absolute;
+ bottom:-45px;
+ left:57px;
+ color:#3C3D40;
+ counter-increment:muliple-paging;
+ content:counter(muliple-paging, decimal-leading-zero);
+ text-shadow:0 1px 1px #8D8E90;
+ line-height:1;
+ font-weight:bold;
+ font-size:25px;
+ }
+
+/* Slide */
+.multiple .slide {
+ -webkit-transform-origin:0 0;
+ -webkit-transform:scale(0.5);
+ -moz-transform-origin:0 0;
+ -moz-transform:scale(0.5);
+ -ms-transform-origin:0 0;
+ -ms-transform:scale(0.5);
+ -o-transform-origin:0 0;
+ -o-transform:scale(0.5);
+ transform-origin:0 0;
+ transform:scale(0.5);
+ }
+
+/* Single
+---------------------------------------- */
+.single {
+ position:absolute;
+ top:50%;
+ left:50%;
+ overflow:hidden;
+ margin:-320px 0 0 -512px;
+ width:1024px;
+ height:640px;
+ background:#000;
+ }
+
+/* Caption */
+.single .slide-caption {
+ display:none;
+ }
+
+/* Single */
+.single .slide {
+ position:absolute;
+ bottom:200%;
+ }
+.single .slide:target {
+ bottom:0;
+ }
\ No newline at end of file
diff --git a/fonts/DroidSansMono.svg b/themes/ribbon/fonts/DroidSansMono.svg
similarity index 100%
rename from fonts/DroidSansMono.svg
rename to themes/ribbon/fonts/DroidSansMono.svg
diff --git a/fonts/DroidSansMono.ttf b/themes/ribbon/fonts/DroidSansMono.ttf
similarity index 100%
rename from fonts/DroidSansMono.ttf
rename to themes/ribbon/fonts/DroidSansMono.ttf
diff --git a/fonts/PTSans.Bold.Italic.svg b/themes/ribbon/fonts/PTSans.Bold.Italic.svg
similarity index 100%
rename from fonts/PTSans.Bold.Italic.svg
rename to themes/ribbon/fonts/PTSans.Bold.Italic.svg
diff --git a/fonts/PTSans.Bold.Italic.ttf b/themes/ribbon/fonts/PTSans.Bold.Italic.ttf
similarity index 100%
rename from fonts/PTSans.Bold.Italic.ttf
rename to themes/ribbon/fonts/PTSans.Bold.Italic.ttf
diff --git a/fonts/PTSans.Bold.Italic.woff b/themes/ribbon/fonts/PTSans.Bold.Italic.woff
similarity index 100%
rename from fonts/PTSans.Bold.Italic.woff
rename to themes/ribbon/fonts/PTSans.Bold.Italic.woff
diff --git a/fonts/PTSans.Bold.svg b/themes/ribbon/fonts/PTSans.Bold.svg
similarity index 100%
rename from fonts/PTSans.Bold.svg
rename to themes/ribbon/fonts/PTSans.Bold.svg
diff --git a/fonts/PTSans.Bold.ttf b/themes/ribbon/fonts/PTSans.Bold.ttf
similarity index 100%
rename from fonts/PTSans.Bold.ttf
rename to themes/ribbon/fonts/PTSans.Bold.ttf
diff --git a/fonts/PTSans.Bold.woff b/themes/ribbon/fonts/PTSans.Bold.woff
similarity index 100%
rename from fonts/PTSans.Bold.woff
rename to themes/ribbon/fonts/PTSans.Bold.woff
diff --git a/fonts/PTSans.Italic.svg b/themes/ribbon/fonts/PTSans.Italic.svg
similarity index 100%
rename from fonts/PTSans.Italic.svg
rename to themes/ribbon/fonts/PTSans.Italic.svg
diff --git a/fonts/PTSans.Italic.ttf b/themes/ribbon/fonts/PTSans.Italic.ttf
similarity index 100%
rename from fonts/PTSans.Italic.ttf
rename to themes/ribbon/fonts/PTSans.Italic.ttf
diff --git a/fonts/PTSans.Italic.woff b/themes/ribbon/fonts/PTSans.Italic.woff
similarity index 100%
rename from fonts/PTSans.Italic.woff
rename to themes/ribbon/fonts/PTSans.Italic.woff
diff --git a/fonts/PTSans.Narrow.Bold.svg b/themes/ribbon/fonts/PTSans.Narrow.Bold.svg
similarity index 100%
rename from fonts/PTSans.Narrow.Bold.svg
rename to themes/ribbon/fonts/PTSans.Narrow.Bold.svg
diff --git a/fonts/PTSans.Narrow.Bold.ttf b/themes/ribbon/fonts/PTSans.Narrow.Bold.ttf
similarity index 100%
rename from fonts/PTSans.Narrow.Bold.ttf
rename to themes/ribbon/fonts/PTSans.Narrow.Bold.ttf
diff --git a/fonts/PTSans.Narrow.Bold.woff b/themes/ribbon/fonts/PTSans.Narrow.Bold.woff
similarity index 100%
rename from fonts/PTSans.Narrow.Bold.woff
rename to themes/ribbon/fonts/PTSans.Narrow.Bold.woff
diff --git a/fonts/PTSans.Narrow.svg b/themes/ribbon/fonts/PTSans.Narrow.svg
similarity index 100%
rename from fonts/PTSans.Narrow.svg
rename to themes/ribbon/fonts/PTSans.Narrow.svg
diff --git a/fonts/PTSans.Narrow.ttf b/themes/ribbon/fonts/PTSans.Narrow.ttf
similarity index 100%
rename from fonts/PTSans.Narrow.ttf
rename to themes/ribbon/fonts/PTSans.Narrow.ttf
diff --git a/fonts/PTSans.Narrow.woff b/themes/ribbon/fonts/PTSans.Narrow.woff
similarity index 100%
rename from fonts/PTSans.Narrow.woff
rename to themes/ribbon/fonts/PTSans.Narrow.woff
diff --git a/fonts/PTSans.svg b/themes/ribbon/fonts/PTSans.svg
similarity index 100%
rename from fonts/PTSans.svg
rename to themes/ribbon/fonts/PTSans.svg
diff --git a/fonts/PTSans.ttf b/themes/ribbon/fonts/PTSans.ttf
similarity index 100%
rename from fonts/PTSans.ttf
rename to themes/ribbon/fonts/PTSans.ttf
diff --git a/fonts/PTSans.woff b/themes/ribbon/fonts/PTSans.woff
similarity index 100%
rename from fonts/PTSans.woff
rename to themes/ribbon/fonts/PTSans.woff
diff --git a/fonts/TargetBlank.otf b/themes/ribbon/fonts/TargetBlank.otf
similarity index 100%
rename from fonts/TargetBlank.otf
rename to themes/ribbon/fonts/TargetBlank.otf
diff --git a/fonts/TargetBlank.svg b/themes/ribbon/fonts/TargetBlank.svg
similarity index 100%
rename from fonts/TargetBlank.svg
rename to themes/ribbon/fonts/TargetBlank.svg
diff --git a/themes/ribbon/images/grid.png b/themes/ribbon/images/grid.png
new file mode 100644
index 0000000..0270962
Binary files /dev/null and b/themes/ribbon/images/grid.png differ
diff --git a/themes/ribbon/images/ribbon.svg b/themes/ribbon/images/ribbon.svg
new file mode 100644
index 0000000..02b2a89
--- /dev/null
+++ b/themes/ribbon/images/ribbon.svg
@@ -0,0 +1,4 @@
+
+
\ No newline at end of file
diff --git a/styles/fonts.css b/themes/ribbon/styles/fonts.css
similarity index 100%
rename from styles/fonts.css
rename to themes/ribbon/styles/fonts.css
diff --git a/themes/ribbon/styles/style.css b/themes/ribbon/styles/style.css
new file mode 100644
index 0000000..0dc8fdb
--- /dev/null
+++ b/themes/ribbon/styles/style.css
@@ -0,0 +1,250 @@
+@import url(fonts.css);
+
+BODY {
+ font:25px/1.8 'PT Sans', sans-serif;
+ }
+
+/* Slide
+---------------------------------------- */
+.slide {
+ padding:80px 120px 0;
+ width:784px;
+ height:560px;
+ background:#FFF;
+ }
+ .slide:before {
+ position:absolute;
+ top:0;
+ right:120px;
+ width:40px;
+ height:120px;
+ background:url(../images/ribbon.svg) no-repeat;
+ content:'';
+ }
+ .slide:after {
+ position:absolute;
+ bottom:85px;
+ left:120px;
+ color:#BBB;
+ counter-increment:single-paging;
+ content:counter(single-paging, decimal-leading-zero);
+ line-height:1;
+ }
+
+/* Header */
+.slide HEADER {
+ margin:0 0 58px;
+ color:#666;
+ font:bold 40px/1.13 'PT Sans Narrow', sans-serif;
+ }
+
+/* Elements */
+.slide P {
+ margin:0 0 45px;
+ }
+.slide A {
+ border-bottom:0.1em solid;
+ color:#0174A7;
+ text-decoration:none;
+ }
+.slide A[target=_blank] {
+ margin-right:22px;
+ }
+.slide A[target=_blank]:after {
+ position:absolute;
+ margin-left:7px;
+ font-family:'Target Blank';
+ content:'\005E';
+ }
+.slide B,
+.slide STRONG {
+ font-weight:bold;
+ }
+.slide I,
+.slide EM {
+ font-style:italic;
+ }
+.slide KBD,
+.slide CODE {
+ padding:3px 8px;
+ -webkit-border-radius:8px;
+ -moz-border-radius:8px;
+ border-radius:8px;
+ background:#FAFAA2;
+ -webkit-tab-size:4;
+ -moz-tab-size:4;
+ -o-tab-size:4;
+ tab-size:4;
+ font-family:Consolas, 'Droid Sans Mono', monospace;
+ }
+
+/* Quote */
+.slide BLOCKQUOTE {
+ font-style:italic;
+ }
+.slide BLOCKQUOTE:before {
+ position:absolute;
+ margin:-15px 0 0 -80px;
+ color:#CCC;
+ font:200px/1 'PT Sans', sans-serif;
+ content:'\201C'; /* ldquo */
+ }
+.slide BLOCKQUOTE:after {
+ margin:-45px 0 45px;
+ display:block;
+ color:#444;
+ font-weight:bold;
+ content:attr(cite);
+ }
+
+/* Lists */
+.slide OL,
+.slide UL {
+ margin:0 0 45px;
+ counter-reset:list;
+ }
+ .slide UL UL,
+ .slide OL UL,
+ .slide OL OL,
+ .slide UL OL {
+ margin:0 0 0 38px;
+ }
+ .slide OL LI:before,
+ .slide UL LI:before {
+ position:absolute;
+ margin-left:-120px;
+ width:100px;
+ color:#BBB;
+ text-align:right;
+ }
+ .slide UL LI:before {
+ content:'\2022'; /* bull */
+ line-height:1.1;
+ font-size:40px;
+ }
+ .slide OL LI:before {
+ counter-increment:list;
+ content:counter(list)'.';
+ }
+
+/* Code */
+.slide PRE {
+ margin:0 0 45px;
+ counter-reset:code;
+ white-space:normal;
+ }
+ .slide PRE CODE {
+ display:block;
+ padding:0;
+ background:none;
+ white-space:pre;
+ }
+ .slide PRE CODE:before {
+ position:absolute;
+ margin:0 0 0 -120px;
+ width:110px;
+ color:#BBB;
+ text-align:right;
+ counter-increment:code;
+ content:counter(code, decimal-leading-zero)'.';
+ }
+ .slide PRE EM,
+ .slide PRE STRONG {
+ padding:3px 8px;
+ -webkit-border-radius:8px;
+ -moz-border-radius:8px;
+ border-radius:8px;
+ }
+ .slide PRE EM {
+ background:#FAFAA2;
+ color:#000;
+ font-style:normal;
+ }
+ .slide PRE STRONG {
+ background:#C00;
+ color:#FFF;
+ font-weight:normal;
+ }
+
+/* Background
+---------------------------------------- */
+.slide.bg {
+ background:transparent;
+ }
+ .slide.bg:before {
+ display:none;
+ }
+ .slide.bg:after {
+ content:'';
+ }
+ .slide.bg IMG {
+ position:absolute;
+ top:0;
+ left:0;
+ z-index:-1;
+ }
+
+/* Shout
+---------------------------------------- */
+.slide.shout {
+ z-index:1;
+ }
+ .slide.shout:before {
+ display:none;
+ }
+ .slide.shout:after {
+ content:'';
+ }
+ .slide.shout H2 {
+ position:absolute;
+ top:50%;
+ left:0;
+ margin:-70px 0 0;
+ width:100%;
+ text-align:center;
+ line-height:1;
+ font-size:150px;
+ }
+ .slide.shout H2 A {
+ margin:0;
+ }
+ .slide.shout H2 A:after {
+ content:'';
+ }
+
+/* Multiple
+---------------------------------------- */
+.multiple .slide:after {
+ display:none;
+ }
+
+/* Single
+---------------------------------------- */
+.single {
+ counter-reset:single-paging;
+ }
+ .single .slide {
+ overflow:hidden;
+ }
+ .single .progress {
+ position:absolute;
+ right:118px;
+ bottom:49px;
+ left:118px;
+ border-radius:7px;
+ border:2px solid rgba(255, 255, 255, 0.2);
+ }
+ .single .progress DIV {
+ width:0;
+ height:10px;
+ border-radius:5px;
+ background:rgba(177, 177, 177, 0.4);
+ -webkit-transition:width 0.2s linear;
+ -moz-transition:width 0.2s linear;
+ -ms-transition:width 0.2s linear;
+ -o-transition:width 0.2s linear;
+ transition:width 0.2s linear;
+ }
+ .single .progress-off {
+ z-index:1;
+ }
\ No newline at end of file