shower 2 init
This commit is contained in:
Vadim Makeev
parent
bf5db5a968
commit
c0dae20432
|
|
@ -6,6 +6,8 @@
|
||||||
* Press `→` to navigate
|
* Press `→` to navigate
|
||||||
* Press `Esc` to exit presentation mode
|
* Press `Esc` to exit presentation mode
|
||||||
|
|
||||||
|
If you want to test your presentation in different resolutions open [frame.htm](http://pepelsbey.github.com/shower/frame.htm) and switch between tabs.
|
||||||
|
|
||||||
Follow [shower_me](http://twitter.com/shower_me/) on Twitter for updates.
|
Follow [shower_me](http://twitter.com/shower_me/) on Twitter for updates.
|
||||||
|
|
||||||
## Supported Browsers
|
## Supported Browsers
|
||||||
|
|
@ -28,7 +30,6 @@ Desktop platforms:
|
||||||
|
|
||||||
Mobile platforms:
|
Mobile platforms:
|
||||||
|
|
||||||
* Opera Mobile
|
* Mobile Safari on iOS Devices
|
||||||
* Mobile Safari
|
|
||||||
|
|
||||||
Please address bugs and your suggestions to [Issues](http://github.com/pepelsbey/shower/issues)
|
Please address bugs and your suggestions to [Issues](http://github.com/pepelsbey/shower/issues)
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
286
index.htm
286
index.htm
|
|
@ -3,153 +3,161 @@
|
||||||
<head>
|
<head>
|
||||||
<title>Shower</title>
|
<title>Shower</title>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<base target="_top">
|
<link rel="stylesheet" href="styles/style.css">
|
||||||
<link rel="stylesheet" title="screen" href="styles/screen.css">
|
<link rel="stylesheet" href="themes/ribbon/styles/style.css">
|
||||||
<link rel="stylesheet" title="projection" disabled href="styles/projection.css">
|
|
||||||
<style>
|
<style>
|
||||||
#Cover H1 {
|
#Cover H2 {
|
||||||
color:#FFF;
|
|
||||||
text-shadow:0 3px 10px #000;
|
|
||||||
}
|
|
||||||
#Image H2 {
|
|
||||||
text-shadow:0 3px 10px #000;
|
|
||||||
color:#FFF;
|
color:#FFF;
|
||||||
|
font-size:70px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="multiple">
|
||||||
<div class="shower">
|
<header class="slide-caption">
|
||||||
<section class="slide cover back" id="Cover">
|
<h1>Shower Presentation Template</h1>
|
||||||
<article>
|
<p>Vadim Makeev, Opera Software</p>
|
||||||
<h1>Shower Presentation Template</h1>
|
</header>
|
||||||
</article>
|
<div class="slide-frame">
|
||||||
|
<section class="slide bg" id="Cover">
|
||||||
|
<header>
|
||||||
|
<h2>Shower Presentation Template</h2>
|
||||||
|
</header>
|
||||||
<img src="pictures/cover.jpg" alt="">
|
<img src="pictures/cover.jpg" alt="">
|
||||||
</section>
|
</section>
|
||||||
<section class="slide" id="Header">
|
|
||||||
<article>
|
|
||||||
<h2>Heading</h2>
|
|
||||||
<p>This <code><tool></code> is provided <strong>without</strong> warranty, guarantee, or much in the way of explanation. Note that use of <a href="#TwoLinesHeader">this tool</a> may or may not crash <em>your</em> browser…</p>
|
|
||||||
<p class="note"><a href="examples/index.htm" target="_blank">This link will be opened in the new tab</a></p>
|
|
||||||
</article>
|
|
||||||
</section>
|
|
||||||
<section class="slide" id="TwoLinesHeader">
|
|
||||||
<article>
|
|
||||||
<h2>Two rows.<br>Mighty heading</h2>
|
|
||||||
<p>This <code><tool></code> is provided <strong>without</strong> warranty, guarantee, or much in the way of explanation. Note that use of <a href="#SevenItemsList">this tool</a> may or may not crash <em>your</em> browser…</p>
|
|
||||||
</article>
|
|
||||||
</section>
|
|
||||||
<section class="slide" id="SevenItemsList">
|
|
||||||
<article>
|
|
||||||
<h2>Seven Items List</h2>
|
|
||||||
<ul>
|
|
||||||
<li>This tool is provided</li>
|
|
||||||
<li>Without warranty, guarantee</li>
|
|
||||||
<li>Or much in the way of explanation
|
|
||||||
<ul>
|
|
||||||
<li>Note that use of this tool</li>
|
|
||||||
<li>May or may not crash your browser</li>
|
|
||||||
<li>Lock up your machine</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li>Erase your hard drive…</li>
|
|
||||||
</ul>
|
|
||||||
</article>
|
|
||||||
</section>
|
|
||||||
<section class="slide" id="NumberedList">
|
|
||||||
<article>
|
|
||||||
<h2>Numbered List</h2>
|
|
||||||
<ol>
|
|
||||||
<li>This tool is provided</li>
|
|
||||||
<li>Without warranty, guarantee</li>
|
|
||||||
<li>Or much in the way of explanation
|
|
||||||
<ol>
|
|
||||||
<li>Note that use of this tool</li>
|
|
||||||
<li>May or may not crash your browser</li>
|
|
||||||
<li>Lock up your machine</li>
|
|
||||||
</ol>
|
|
||||||
</li>
|
|
||||||
<li>Erase your hard drive…</li>
|
|
||||||
</ol>
|
|
||||||
</article>
|
|
||||||
</section>
|
|
||||||
<section class="slide" id="SevenRowsCode">
|
|
||||||
<article>
|
|
||||||
<h2>Seven Rows Code</h2>
|
|
||||||
<pre>
|
|
||||||
<code><html lang="en-US"></code>
|
|
||||||
<code><em><head></em></code>
|
|
||||||
<code> <title>Shower</title></code>
|
|
||||||
<code> <meta charset="<strong>UTF-8</strong>"></code>
|
|
||||||
<code> <link rel="stylesheet" href="s/screen.css"></code>
|
|
||||||
<code> <script src="j/jquery.js"></script></code>
|
|
||||||
<code><em></head></em></code>
|
|
||||||
</pre>
|
|
||||||
</article>
|
|
||||||
</section>
|
|
||||||
<section class="slide" id="CodeAndNote">
|
|
||||||
<article>
|
|
||||||
<h2>Code And Its Note</h2>
|
|
||||||
<pre>
|
|
||||||
<code><html lang="en-US"></code>
|
|
||||||
<code><em><head></em></code>
|
|
||||||
<code> <title>Shower</title></code>
|
|
||||||
<code> <meta charset="<strong>UTF-8</strong>"></code>
|
|
||||||
<code><em></head></em></code>
|
|
||||||
</pre>
|
|
||||||
<p class="note">May or may not crash your browser</p>
|
|
||||||
</article>
|
|
||||||
</section>
|
|
||||||
<section class="slide" id="CodeAndTwoNotes">
|
|
||||||
<article>
|
|
||||||
<h2>Code And Two Notes</h2>
|
|
||||||
<pre>
|
|
||||||
<code><em><html</em> lang="en-US"></code>
|
|
||||||
</pre>
|
|
||||||
<p class="note">May or may not crash your browser</p>
|
|
||||||
<pre>
|
|
||||||
<code><em><meta</em> charset="<strong>UTF-8</strong>"></code>
|
|
||||||
</pre>
|
|
||||||
<p class="note">Lock up your machine</p>
|
|
||||||
</article>
|
|
||||||
</section>
|
|
||||||
<section class="slide" id="Quote">
|
|
||||||
<article>
|
|
||||||
<h2>Block Quote</h2>
|
|
||||||
<blockquote cite="Anonymous">
|
|
||||||
<p>This tool is provided without warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash your browser, lock up your machine, erase your hard drive…</p>
|
|
||||||
</blockquote>
|
|
||||||
</article>
|
|
||||||
</section>
|
|
||||||
<section class="slide back progress-off" id="Image">
|
|
||||||
<article>
|
|
||||||
<h2>Picture</h2>
|
|
||||||
</article>
|
|
||||||
<img src="pictures/image.jpg" alt="">
|
|
||||||
</section>
|
|
||||||
<section class="slide shout" id="JustAshout">
|
|
||||||
<article>
|
|
||||||
<h2>Shout!</h2>
|
|
||||||
</article>
|
|
||||||
</section>
|
|
||||||
<section class="slide shout" id="ShoutDemo">
|
|
||||||
<article>
|
|
||||||
<h2><a href="examples/index.htm" target="_blank">Demo</a></h2>
|
|
||||||
</article>
|
|
||||||
</section>
|
|
||||||
<section class="slide last" id="ThankYou">
|
|
||||||
<article>
|
|
||||||
<h2>Shower Presentation Template</h2>
|
|
||||||
<p>Vadim Makeev, Opera Software</p>
|
|
||||||
<ul>
|
|
||||||
<li><a href="http://pepelsbey.net">pepelsbey.net</a></li>
|
|
||||||
<li><a href="http://twitter.com/pepelsbey">twitter.com/pepelsbey</a></li>
|
|
||||||
<li><a href="mailto:pepelsbey@gmail.com">pepelsbey@gmail.com</a></li>
|
|
||||||
</ul>
|
|
||||||
<p>Shower: <a href="http://github.com/pepelsbey/shower">github.com/pepelsbey/shower</a></p>
|
|
||||||
</article>
|
|
||||||
</section>
|
|
||||||
<div class="progress"><div></div></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="slide-frame">
|
||||||
|
<section class="slide" id="Header">
|
||||||
|
<header>
|
||||||
|
<h2>Header</h2>
|
||||||
|
</header>
|
||||||
|
<p>This <code><tool></code> is provided <strong>without</strong> warranty, guarantee, or much in the way of explanation. Note that use of <a href="#TwoLinesHeader">this tool</a> may or may not crash <em>your</em> browser…</p>
|
||||||
|
<p><a href="examples/index.htm" target="_blank">This link will be opened in the new tab</a></p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div class="slide-frame">
|
||||||
|
<section class="slide" id="TwoLinesHeader">
|
||||||
|
<header>
|
||||||
|
<h2>Two rows.<br>Mighty heading</h2>
|
||||||
|
</header>
|
||||||
|
<p>This <code><tool></code> is provided <strong>without</strong> warranty, guarantee, or much in the way of explanation. Note that use of <a href="#SevenItemsList">this tool</a> may or may not crash <em>your</em> browser…</p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div class="slide-frame">
|
||||||
|
<section class="slide" id="UnorderedList">
|
||||||
|
<header>
|
||||||
|
<h2>Unordered List</h2>
|
||||||
|
</header>
|
||||||
|
<ul>
|
||||||
|
<li>This tool is provided</li>
|
||||||
|
<li>Without warranty, guarantee</li>
|
||||||
|
<li>Or much in the way of explanation
|
||||||
|
<ul>
|
||||||
|
<li>Note that use of this tool</li>
|
||||||
|
<li>May or may not crash your browser</li>
|
||||||
|
<li>Lock up your machine</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>Erase your hard drive…</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div class="slide-frame">
|
||||||
|
<section class="slide" id="OrderedList">
|
||||||
|
<header>
|
||||||
|
<h2>Ordered List</h2>
|
||||||
|
</header>
|
||||||
|
<ol>
|
||||||
|
<li>This tool is provided</li>
|
||||||
|
<li>Without warranty, guarantee</li>
|
||||||
|
<li>Or much in the way of explanation
|
||||||
|
<ol>
|
||||||
|
<li>Note that use of this tool</li>
|
||||||
|
<li>May or may not crash your browser</li>
|
||||||
|
<li>Lock up your machine</li>
|
||||||
|
</ol>
|
||||||
|
</li>
|
||||||
|
<li>Erase your hard drive…</li>
|
||||||
|
</ol>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div class="slide-frame">
|
||||||
|
<section class="slide bg progress-off" id="Picture">
|
||||||
|
<header>
|
||||||
|
<h2>Picture</h2>
|
||||||
|
</header>
|
||||||
|
<img src="pictures/picture.jpg" alt="">
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div class="slide-frame">
|
||||||
|
<section class="slide" id="CodeSample">
|
||||||
|
<header>
|
||||||
|
<h2>Code Sample</h2>
|
||||||
|
</header>
|
||||||
|
<pre>
|
||||||
|
<code><html lang="en-US"></code>
|
||||||
|
<code><em><head></em></code>
|
||||||
|
<code> <title>Shower</title></code>
|
||||||
|
<code> <meta charset="<strong>UTF-8</strong>"></code>
|
||||||
|
<code> <link rel="stylesheet" href="s/screen.css"></code>
|
||||||
|
<code> <script src="j/jquery.js"></script></code>
|
||||||
|
<code><em></head></em></code>
|
||||||
|
</pre>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div class="slide-frame">
|
||||||
|
<section class="slide" id="CodeNotes">
|
||||||
|
<header>
|
||||||
|
<h2>Code Notes</h2>
|
||||||
|
</header>
|
||||||
|
<pre>
|
||||||
|
<code><em><html</em> lang="en-US"></code>
|
||||||
|
</pre>
|
||||||
|
<p class="note">May or may not crash your browser</p>
|
||||||
|
<pre>
|
||||||
|
<code><em><meta</em> charset="<strong>UTF-8</strong>"></code>
|
||||||
|
</pre>
|
||||||
|
<p class="note">Lock up your machine</p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div class="slide-frame">
|
||||||
|
<section class="slide shout" id="Shout">
|
||||||
|
<header>
|
||||||
|
<h2>Shout!</h2>
|
||||||
|
</header>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div class="slide-frame">
|
||||||
|
<section class="slide shout" id="Demo">
|
||||||
|
<header>
|
||||||
|
<h2><a href="examples/index.htm" target="_blank">Demo</a></h2>
|
||||||
|
</header>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div class="slide-frame">
|
||||||
|
<section class="slide" id="BlockQuote">
|
||||||
|
<header>
|
||||||
|
<h2>Block Quote</h2>
|
||||||
|
</header>
|
||||||
|
<blockquote cite="Anonymous">
|
||||||
|
<p>This tool is provided without warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash your browser, lock up your machine, erase your hard drive…</p>
|
||||||
|
</blockquote>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div class="slide-frame">
|
||||||
|
<section class="slide" id="ThankYou">
|
||||||
|
<header>
|
||||||
|
<h2>Shower Presentation Template</h2>
|
||||||
|
</header>
|
||||||
|
<p>Vadim Makeev, Opera Software</p>
|
||||||
|
<ul>
|
||||||
|
<li><a href="http://pepelsbey.net">pepelsbey.net</a></li>
|
||||||
|
<li><a href="http://twitter.com/pepelsbey">twitter.com/pepelsbey</a></li>
|
||||||
|
<li><a href="mailto:pepelsbey@gmail.com">pepelsbey@gmail.com</a></li>
|
||||||
|
</ul>
|
||||||
|
<p>Shower: <a href="http://github.com/pepelsbey/shower">github.com/pepelsbey/shower</a></p>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<div class="progress"><div></div></div>
|
||||||
<script src="scripts/script.js"></script>
|
<script src="scripts/script.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 148 KiB After Width: | Height: | Size: 189 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
|
|
@ -1,8 +1,7 @@
|
||||||
(function() {
|
(function() {
|
||||||
|
|
||||||
var url = document.location,
|
var url = document.location,
|
||||||
linkScreen = document.querySelector('link[title=screen]'),
|
body = document.body;
|
||||||
linkProjection = document.querySelector('link[title=projection]'),
|
|
||||||
shower = document.querySelector('div.shower'),
|
|
||||||
slides = document.querySelectorAll('section.slide'),
|
slides = document.querySelectorAll('section.slide'),
|
||||||
slideList = [], hashList = {},
|
slideList = [], hashList = {},
|
||||||
progress = document.querySelector('div.progress div'),
|
progress = document.querySelector('div.progress div'),
|
||||||
|
|
@ -12,25 +11,31 @@
|
||||||
var id = slides[i].id;
|
var id = slides[i].id;
|
||||||
slideList[i] = '#' + id;
|
slideList[i] = '#' + id;
|
||||||
hashList['#' + id] = i;
|
hashList['#' + id] = i;
|
||||||
|
slides[i].addEventListener('click', function(){
|
||||||
|
enterSingle();
|
||||||
|
turnSlide(hashList['#' + this.id]);
|
||||||
|
}, false);
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleFull(force) {
|
function resizeBody(p) {
|
||||||
fullscreen = (typeof force == 'boolean') ? force : (
|
if(typeof p == 'boolean' && p) {
|
||||||
window.fullScreen || // Firefox
|
var transform = 'none';
|
||||||
document.webkitFullScreen || // Webkit
|
} else {
|
||||||
screen.width == window.outerWidth && screen.height == window.outerHeight
|
var sx = body.clientWidth / window.innerWidth,
|
||||||
);
|
sy = body.clientHeight / window.innerHeight,
|
||||||
updateView();
|
transform = 'scale(' + (1/Math.max(sx, sy)) + ')';
|
||||||
updateProgress();
|
}
|
||||||
|
body.style.MozTransform = transform;
|
||||||
|
body.style.WebkitTransform = transform;
|
||||||
|
body.style.OTransform = transform;
|
||||||
|
body.style.msTransform = transform;
|
||||||
|
body.style.transform = transform;
|
||||||
}
|
}
|
||||||
|
|
||||||
function turnSlide(e) {
|
function turnSlide(e) {
|
||||||
if(!fullscreen) return;
|
|
||||||
var current = hashList[url.hash],
|
var current = hashList[url.hash],
|
||||||
target;
|
target;
|
||||||
if(e == null) {
|
if(e.type == 'keyup') { // Key-Based
|
||||||
target = slideList[current++];
|
|
||||||
} else if(e.type == 'keyup') { // Key-Based
|
|
||||||
switch(e.which) {
|
switch(e.which) {
|
||||||
case 33 : // PgUp
|
case 33 : // PgUp
|
||||||
case 38 : // Up
|
case 38 : // Up
|
||||||
|
|
@ -52,42 +57,49 @@
|
||||||
current += e.shiftKey ? -1 : 1;
|
current += e.shiftKey ? -1 : 1;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
target = slideList[current];
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
} else { // Specific
|
} else {
|
||||||
target = slideList[+e || 0];
|
current = e || 0;
|
||||||
}
|
}
|
||||||
|
target = slideList[current];
|
||||||
if(target) url.hash = target;
|
if(target) url.hash = target;
|
||||||
updateProgress();
|
updateProgress();
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateView() {
|
function enterSingle() {
|
||||||
linkScreen.disabled = fullscreen;
|
body.className = 'single';
|
||||||
linkProjection.disabled = !fullscreen;
|
resizeBody();
|
||||||
if (fullscreen) {
|
updateProgress();
|
||||||
linkScreen.setAttribute('disabled', 'disabled');
|
window.addEventListener('resize', resizeBody, false);
|
||||||
linkProjection.removeAttribute('disabled');
|
document.addEventListener('keyup', turnSlide, false);
|
||||||
} else {
|
document.addEventListener('keyup', exitSingleEsc, false);
|
||||||
linkScreen.removeAttribute('disabled');
|
|
||||||
linkProjection.setAttribute('disabled', 'disabled');
|
|
||||||
}
|
|
||||||
if(!hashList[url.hash]) turnSlide(0);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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() {
|
function updateProgress() {
|
||||||
if(!progress) return;
|
if(!progress) return;
|
||||||
progress.style.width = (100/(slideList.length-1) * hashList[url.hash]).toFixed(2) + '%';
|
progress.style.width = (100/(slideList.length-1) * hashList[url.hash]).toFixed(2) + '%';
|
||||||
}
|
}
|
||||||
|
|
||||||
slides[0].addEventListener('click', function(){
|
window.addEventListener('DOMContentLoaded', checkHash, false);
|
||||||
toggleFull(true);
|
|
||||||
}, 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);
|
|
||||||
})();
|
})();
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -7,36 +7,36 @@ B, U, I, CENTER,
|
||||||
DL, DT, DD, OL, UL, LI,
|
DL, DT, DD, OL, UL, LI,
|
||||||
FIELDSET, FORM, LABEL, LEGEND,
|
FIELDSET, FORM, LABEL, LEGEND,
|
||||||
TABLE, CAPTION, TBODY, TFOOT, THEAD, TR, TH, TD,
|
TABLE, CAPTION, TBODY, TFOOT, THEAD, TR, TH, TD,
|
||||||
ARTICLE, ASIDE, CANVAS, DETAILS, EMBED,
|
ARTICLE, ASIDE, CANVAS, DETAILS, EMBED,
|
||||||
FIGURE, FIGCAPTION, FOOTER, HEADER, HGROUP,
|
FIGURE, FIGCAPTION, FOOTER, HEADER, HGROUP,
|
||||||
MENU, NAV, OUTPUT, RUBY, SECTION, SUMMARY,
|
MENU, NAV, OUTPUT, RUBY, SECTION, SUMMARY,
|
||||||
TIME, MARK, AUDIO, VIDEO {
|
TIME, MARK, AUDIO, VIDEO {
|
||||||
margin: 0;
|
margin:0;
|
||||||
padding: 0;
|
padding:0;
|
||||||
border: 0;
|
border:0;
|
||||||
font-size: 100%;
|
font-size:100%;
|
||||||
font: inherit;
|
font:inherit;
|
||||||
vertical-align: baseline;
|
vertical-align:baseline;
|
||||||
}
|
}
|
||||||
ARTICLE, ASIDE, DETAILS, FIGCAPTION, FIGURE,
|
ARTICLE, ASIDE, DETAILS, FIGCAPTION, FIGURE,
|
||||||
FOOTER, HEADER, HGROUP, MENU, NAV, SECTION {
|
FOOTER, HEADER, HGROUP, MENU, NAV, SECTION {
|
||||||
display: block;
|
display:block;
|
||||||
}
|
}
|
||||||
BODY {
|
BODY {
|
||||||
line-height: 1;
|
line-height:1;
|
||||||
}
|
}
|
||||||
OL, UL {
|
OL, UL {
|
||||||
list-style: none;
|
list-style:none;
|
||||||
}
|
}
|
||||||
BLOCKQUOTE, Q {
|
BLOCKQUOTE, Q {
|
||||||
quotes: none;
|
quotes:none;
|
||||||
}
|
}
|
||||||
BLOCKQUOTE:before, BLOCKQUOTE:after,
|
BLOCKQUOTE:before, BLOCKQUOTE:after,
|
||||||
Q:before, Q:after {
|
Q:before, Q:after {
|
||||||
content: '';
|
content:'';
|
||||||
content: none;
|
content:none;
|
||||||
}
|
}
|
||||||
TABLE {
|
TABLE {
|
||||||
border-collapse: collapse;
|
border-collapse:collapse;
|
||||||
border-spacing: 0;
|
border-spacing:0;
|
||||||
}
|
}
|
||||||
|
|
@ -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:'';
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
Before Width: | Height: | Size: 135 KiB After Width: | Height: | Size: 135 KiB |
|
Before Width: | Height: | Size: 295 KiB After Width: | Height: | Size: 295 KiB |
|
Before Width: | Height: | Size: 258 KiB After Width: | Height: | Size: 258 KiB |
|
Before Width: | Height: | Size: 301 KiB After Width: | Height: | Size: 301 KiB |
|
Before Width: | Height: | Size: 248 KiB After Width: | Height: | Size: 248 KiB |
|
Before Width: | Height: | Size: 256 KiB After Width: | Height: | Size: 256 KiB |
|
Before Width: | Height: | Size: 269 KiB After Width: | Height: | Size: 269 KiB |
|
Before Width: | Height: | Size: 482 B After Width: | Height: | Size: 482 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1,4 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 120">
|
||||||
|
<polygon fill="#CC0000" points="0,0 40,0 40,120 20,100 0,120"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 186 B |
|
|
@ -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;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue