global styles merged with default theme
This commit is contained in:
Vadim Makeev
parent
c2d2141ccc
commit
d3c6b652a2
54
index.htm
54
index.htm
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<title>Shower</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="styles/style.css">
|
||||
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="themes/ribbon/styles/style.css">
|
||||
<style>
|
||||
#Cover H2 {
|
||||
|
|
@ -12,21 +12,21 @@
|
|||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="multiple">
|
||||
<header class="slide-caption">
|
||||
<body class="list">
|
||||
<header class="caption">
|
||||
<h1>Shower Presentation Template</h1>
|
||||
<p>Vadim Makeev, Opera Software</p>
|
||||
</header>
|
||||
<div class="slide-frame">
|
||||
<section class="slide bg" id="Cover">
|
||||
<div class="slide bg" id="Cover">
|
||||
<section>
|
||||
<header>
|
||||
<h2>Shower Presentation Template</h2>
|
||||
</header>
|
||||
<img src="pictures/cover.jpg" alt="">
|
||||
</section>
|
||||
</div>
|
||||
<div class="slide-frame">
|
||||
<section class="slide" id="Header">
|
||||
<div class="slide" id="Header">
|
||||
<section>
|
||||
<header>
|
||||
<h2>Header</h2>
|
||||
</header>
|
||||
|
|
@ -34,16 +34,16 @@
|
|||
<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">
|
||||
<div class="slide" id="TwoLinesHeader">
|
||||
<section>
|
||||
<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="#Header">previous slide</a> may or may not crash <em>your</em> browser…</p>
|
||||
</section>
|
||||
</div>
|
||||
<div class="slide-frame">
|
||||
<section class="slide" id="UnorderedList">
|
||||
<div class="slide" id="UnorderedList">
|
||||
<section>
|
||||
<header>
|
||||
<h2>Unordered List</h2>
|
||||
</header>
|
||||
|
|
@ -61,8 +61,8 @@
|
|||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
<div class="slide-frame">
|
||||
<section class="slide" id="OrderedList">
|
||||
<div class="slide" id="OrderedList">
|
||||
<section>
|
||||
<header>
|
||||
<h2>Ordered List</h2>
|
||||
</header>
|
||||
|
|
@ -80,16 +80,16 @@
|
|||
</ol>
|
||||
</section>
|
||||
</div>
|
||||
<div class="slide-frame">
|
||||
<section class="slide bg progress-off" id="Picture">
|
||||
<div class="slide bg progress-off" id="Picture">
|
||||
<section>
|
||||
<header>
|
||||
<h2>Picture</h2>
|
||||
</header>
|
||||
<img src="pictures/picture.jpg" alt="">
|
||||
</section>
|
||||
</div>
|
||||
<div class="slide-frame">
|
||||
<section class="slide" id="CodeSample">
|
||||
<div class="slide" id="CodeSample">
|
||||
<section>
|
||||
<header>
|
||||
<h2>Code Sample</h2>
|
||||
</header>
|
||||
|
|
@ -104,8 +104,8 @@
|
|||
</pre>
|
||||
</section>
|
||||
</div>
|
||||
<div class="slide-frame">
|
||||
<section class="slide" id="CodeNotes">
|
||||
<div class="slide" id="CodeNotes">
|
||||
<section>
|
||||
<header>
|
||||
<h2>Code Notes</h2>
|
||||
</header>
|
||||
|
|
@ -119,22 +119,22 @@
|
|||
<p class="note">Lock up your machine</p>
|
||||
</section>
|
||||
</div>
|
||||
<div class="slide-frame">
|
||||
<section class="slide shout" id="Shout">
|
||||
<div class="slide shout" id="Shout">
|
||||
<section>
|
||||
<header>
|
||||
<h2>Shout!</h2>
|
||||
</header>
|
||||
</section>
|
||||
</div>
|
||||
<div class="slide-frame">
|
||||
<section class="slide shout" id="Demo">
|
||||
<div class="slide shout" id="Demo">
|
||||
<section>
|
||||
<header>
|
||||
<h2><a href="examples/index.htm" target="_blank">Demo</a></h2>
|
||||
</header>
|
||||
</section>
|
||||
</div>
|
||||
<div class="slide-frame">
|
||||
<section class="slide" id="BlockQuote">
|
||||
<div class="slide" id="BlockQuote">
|
||||
<section>
|
||||
<header>
|
||||
<h2>Block Quote</h2>
|
||||
</header>
|
||||
|
|
@ -143,8 +143,8 @@
|
|||
</blockquote>
|
||||
</section>
|
||||
</div>
|
||||
<div class="slide-frame">
|
||||
<section class="slide" id="ThankYou">
|
||||
<div class="slide" id="ThankYou">
|
||||
<section>
|
||||
<header>
|
||||
<h2>Shower Presentation Template</h2>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
(function() {
|
||||
|
||||
var url = document.location,
|
||||
var url = window.location,
|
||||
body = document.body;
|
||||
slides = document.querySelectorAll('section.slide'),
|
||||
slides = document.querySelectorAll('div.slide'),
|
||||
slideList = [], hashList = {},
|
||||
progress = document.querySelector('div.progress div'),
|
||||
fullscreen = false;
|
||||
|
|
@ -40,11 +40,15 @@
|
|||
case 33 : // PgUp
|
||||
case 38 : // Up
|
||||
case 37 : // Left
|
||||
case 72 : // h
|
||||
case 75 : // k
|
||||
current--;
|
||||
break;
|
||||
case 34 : // PgDown
|
||||
case 40 : // Down
|
||||
case 39 : // Right
|
||||
case 76 : // l
|
||||
case 74 : // j
|
||||
current++;
|
||||
break;
|
||||
case 36 : // Home
|
||||
|
|
@ -67,7 +71,7 @@
|
|||
}
|
||||
|
||||
function enterSingle() {
|
||||
body.className = 'single';
|
||||
body.className = 'full';
|
||||
resizeBody();
|
||||
updateProgress();
|
||||
window.addEventListener('resize', resizeBody, false);
|
||||
|
|
@ -76,7 +80,7 @@
|
|||
}
|
||||
|
||||
function exitSingle() {
|
||||
body.className = 'multiple';
|
||||
body.className = 'list';
|
||||
resizeBody(true);
|
||||
window.removeEventListener('resize', resizeBody, false);
|
||||
window.removeEventListener('keyup', turnSlide, false);
|
||||
|
|
@ -90,6 +94,7 @@
|
|||
}
|
||||
|
||||
function checkHash() {
|
||||
// if(!window.location.search.length) history.pushState(null, null, window.location.href + '?list');
|
||||
if(typeof hashList[url.hash] != 'undefined') {
|
||||
enterSingle();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,27 @@
|
|||
@import url(fonts.css);
|
||||
@import url(reset.css);
|
||||
|
||||
BODY {
|
||||
font:25px/1.8 'PT Sans', sans-serif;
|
||||
counter-reset:paging;
|
||||
}
|
||||
|
||||
/* Slide
|
||||
---------------------------------------- */
|
||||
.slide {
|
||||
background:#FFF;
|
||||
color:#000;
|
||||
}
|
||||
.slide:after {
|
||||
counter-increment:paging;
|
||||
content:counter(paging, decimal-leading-zero);
|
||||
}
|
||||
.slide SECTION {
|
||||
padding:80px 120px 0;
|
||||
width:784px;
|
||||
height:560px;
|
||||
background:#FFF;
|
||||
}
|
||||
.slide:before {
|
||||
.slide SECTION:before {
|
||||
position:absolute;
|
||||
top:0;
|
||||
right:120px;
|
||||
|
|
@ -21,15 +30,6 @@ BODY {
|
|||
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 {
|
||||
|
|
@ -166,17 +166,13 @@ BODY {
|
|||
font-weight:normal;
|
||||
}
|
||||
|
||||
/* Background
|
||||
---------------------------------------- */
|
||||
/* Background */
|
||||
.slide.bg {
|
||||
background:transparent;
|
||||
}
|
||||
.slide.bg:before {
|
||||
.slide.bg SECTION:before {
|
||||
display:none;
|
||||
}
|
||||
.slide.bg:after {
|
||||
content:'';
|
||||
}
|
||||
.slide.bg IMG {
|
||||
position:absolute;
|
||||
top:0;
|
||||
|
|
@ -184,17 +180,13 @@ BODY {
|
|||
z-index:-1;
|
||||
}
|
||||
|
||||
/* Shout
|
||||
---------------------------------------- */
|
||||
/* Shout */
|
||||
.slide.shout {
|
||||
z-index:1;
|
||||
}
|
||||
.slide.shout:before {
|
||||
.slide.shout SECTION:before {
|
||||
display:none;
|
||||
}
|
||||
.slide.shout:after {
|
||||
content:'';
|
||||
}
|
||||
.slide.shout H2 {
|
||||
position:absolute;
|
||||
top:50%;
|
||||
|
|
@ -212,21 +204,118 @@ BODY {
|
|||
content:'';
|
||||
}
|
||||
|
||||
/* Multiple
|
||||
/* List
|
||||
---------------------------------------- */
|
||||
.multiple .slide:after {
|
||||
display:none;
|
||||
.list {
|
||||
padding:60px 0 0 100px;
|
||||
background:#585A5E url(../images/linen.png);
|
||||
}
|
||||
.list:after {
|
||||
display:block;
|
||||
clear:both;
|
||||
content:'';
|
||||
}
|
||||
|
||||
/* Single
|
||||
/* Caption */
|
||||
.list .caption {
|
||||
margin:0 0 50px;
|
||||
color:#3C3D40;
|
||||
text-shadow:0 1px 1px #8D8E90;
|
||||
}
|
||||
.list .caption H1 {
|
||||
font:bold 50px/1 'PT Sans Narrow', sans-serif;
|
||||
}
|
||||
|
||||
/* Slide */
|
||||
.list .slide {
|
||||
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;
|
||||
}
|
||||
.list .slide:hover,
|
||||
.list .slide:focus,
|
||||
.list .slide:target {
|
||||
box-shadow:
|
||||
0 0 0 1px #305F8D,
|
||||
0 0 0 10px #3C7CBD,
|
||||
0 0 50px rgba(0, 0, 0, 0.5);
|
||||
outline:none;
|
||||
}
|
||||
.list .slide:after {
|
||||
position:absolute;
|
||||
bottom:-45px;
|
||||
left:57px;
|
||||
color:#3C3D40;
|
||||
text-shadow:0 1px 1px #8D8E90;
|
||||
line-height:1;
|
||||
font-weight:bold;
|
||||
font-size:25px;
|
||||
}
|
||||
.list .slide SECTION {
|
||||
-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);
|
||||
}
|
||||
.list .slide SECTION:after {
|
||||
position:absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
left:0;
|
||||
content:'';
|
||||
}
|
||||
.list .slide.bg {
|
||||
background:rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* Full
|
||||
---------------------------------------- */
|
||||
.single {
|
||||
counter-reset:single-paging;
|
||||
}
|
||||
.single .slide {
|
||||
.full {
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
overflow:hidden;
|
||||
margin:-320px 0 0 -512px;
|
||||
width:1024px;
|
||||
height:640px;
|
||||
background:#000;
|
||||
}
|
||||
.single .progress {
|
||||
.full .caption {
|
||||
display:none;
|
||||
}
|
||||
.full .slide {
|
||||
position:absolute;
|
||||
margin-top:200%;
|
||||
}
|
||||
.full .slide:target {
|
||||
margin-top:0;
|
||||
}
|
||||
.full .slide:after {
|
||||
position:absolute;
|
||||
bottom:85px;
|
||||
left:120px;
|
||||
color:#BBB;
|
||||
line-height:1;
|
||||
}
|
||||
.full .slide.bg:after,
|
||||
.full .slide.shout:after {
|
||||
content:'';
|
||||
}
|
||||
|
||||
/* Progress */
|
||||
.full .progress {
|
||||
position:absolute;
|
||||
right:118px;
|
||||
bottom:49px;
|
||||
|
|
@ -234,7 +323,7 @@ BODY {
|
|||
border-radius:7px;
|
||||
border:2px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.single .progress DIV {
|
||||
.full .progress DIV {
|
||||
width:0;
|
||||
height:10px;
|
||||
border-radius:5px;
|
||||
|
|
@ -245,6 +334,6 @@ BODY {
|
|||
-o-transition:width 0.2s linear;
|
||||
transition:width 0.2s linear;
|
||||
}
|
||||
.single .progress-off {
|
||||
.full .progress-off {
|
||||
z-index:1;
|
||||
}
|
||||
Loading…
Reference in New Issue