Skip to content

S
shower-presentation
Commit d3c6b652 authored by Vadim Makeev's avatar Vadim Makeev
Browse files
Options

global styles merged with default theme

parent c2d2141c
Show whitespace changes
Inline Side-by-side
Showing with 184 additions and 90 deletions
index.htm
View file @ d3c6b652
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<title>Shower</title> <title>Shower</title>
<meta charset="UTF-8"> <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"> <link rel="stylesheet" href="themes/ribbon/styles/style.css">
<style> <style>
#Cover H2 { #Cover H2 {
...@@ -12,21 +12,21 @@ ...@@ -12,21 +12,21 @@
} }
</style> </style>
</head> </head>
<body class="multiple"> <body class="list">
<header class="slide-caption"> <header class="caption">
<h1>Shower Presentation Template</h1> <h1>Shower Presentation Template</h1>
<p>Vadim Makeev, Opera Software</p> <p>Vadim Makeev, Opera Software</p>
</header> </header>
<div class="slide-frame"> <div class="slide bg" id="Cover">
<section class="slide bg" id="Cover"> <section>
<header> <header>
<h2>Shower Presentation Template</h2> <h2>Shower Presentation Template</h2>
</header> </header>
<img src="pictures/cover.jpg" alt=""> <img src="pictures/cover.jpg" alt="">
</section> </section>
</div> </div>
<div class="slide-frame"> <div class="slide" id="Header">
<section class="slide" id="Header"> <section>
<header> <header>
<h2>Header</h2> <h2>Header</h2>
</header> </header>
...@@ -34,16 +34,16 @@ ...@@ -34,16 +34,16 @@
<p><a href="examples/index.htm" target="_blank">This link will be opened in the new tab</a></p> <p><a href="examples/index.htm" target="_blank">This link will be opened in the new tab</a></p>
</section> </section>
</div> </div>
<div class="slide-frame"> <div class="slide" id="TwoLinesHeader">
<section class="slide" id="TwoLinesHeader"> <section>
<header> <header>
<h2>Two rows.<br>Mighty heading</h2> <h2>Two rows.<br>Mighty heading</h2>
</header> </header>
<p>This <code>&lt;tool&gt;</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> <p>This <code>&lt;tool&gt;</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> </section>
</div> </div>
<div class="slide-frame"> <div class="slide" id="UnorderedList">
<section class="slide" id="UnorderedList"> <section>
<header> <header>
<h2>Unordered List</h2> <h2>Unordered List</h2>
</header> </header>
...@@ -61,8 +61,8 @@ ...@@ -61,8 +61,8 @@
</ul> </ul>
</section> </section>
</div> </div>
<div class="slide-frame"> <div class="slide" id="OrderedList">
<section class="slide" id="OrderedList"> <section>
<header> <header>
<h2>Ordered List</h2> <h2>Ordered List</h2>
</header> </header>
...@@ -80,16 +80,16 @@ ...@@ -80,16 +80,16 @@
</ol> </ol>
</section> </section>
</div> </div>
<div class="slide-frame"> <div class="slide bg progress-off" id="Picture">
<section class="slide bg progress-off" id="Picture"> <section>
<header> <header>
<h2>Picture</h2> <h2>Picture</h2>
</header> </header>
<img src="pictures/picture.jpg" alt=""> <img src="pictures/picture.jpg" alt="">
</section> </section>
</div> </div>
<div class="slide-frame"> <div class="slide" id="CodeSample">
<section class="slide" id="CodeSample"> <section>
<header> <header>
<h2>Code Sample</h2> <h2>Code Sample</h2>
</header> </header>
...@@ -104,8 +104,8 @@ ...@@ -104,8 +104,8 @@
</pre> </pre>
</section> </section>
</div> </div>
<div class="slide-frame"> <div class="slide" id="CodeNotes">
<section class="slide" id="CodeNotes"> <section>
<header> <header>
<h2>Code Notes</h2> <h2>Code Notes</h2>
</header> </header>
...@@ -119,22 +119,22 @@ ...@@ -119,22 +119,22 @@
<p class="note">Lock up your machine</p> <p class="note">Lock up your machine</p>
</section> </section>
</div> </div>
<div class="slide-frame"> <div class="slide shout" id="Shout">
<section class="slide shout" id="Shout"> <section>
<header> <header>
<h2>Shout!</h2> <h2>Shout!</h2>
</header> </header>
</section> </section>
</div> </div>
<div class="slide-frame"> <div class="slide shout" id="Demo">
<section class="slide shout" id="Demo"> <section>
<header> <header>
<h2><a href="examples/index.htm" target="_blank">Demo</a></h2> <h2><a href="examples/index.htm" target="_blank">Demo</a></h2>
</header> </header>
</section> </section>
</div> </div>
<div class="slide-frame"> <div class="slide" id="BlockQuote">
<section class="slide" id="BlockQuote"> <section>
<header> <header>
<h2>Block Quote</h2> <h2>Block Quote</h2>
</header> </header>
...@@ -143,8 +143,8 @@ ...@@ -143,8 +143,8 @@
</blockquote> </blockquote>
</section> </section>
</div> </div>
<div class="slide-frame"> <div class="slide" id="ThankYou">
<section class="slide" id="ThankYou"> <section>
<header> <header>
<h2>Shower Presentation Template</h2> <h2>Shower Presentation Template</h2>
</header> </header>
......
scripts/script.js
View file @ d3c6b652
(function() { (function() {
var url = document.location, var url = window.location,
body = document.body; body = document.body;
slides = document.querySelectorAll('section.slide'), slides = document.querySelectorAll('div.slide'),
slideList = [], hashList = {}, slideList = [], hashList = {},
progress = document.querySelector('div.progress div'), progress = document.querySelector('div.progress div'),
fullscreen = false; fullscreen = false;
...@@ -40,11 +40,15 @@ ...@@ -40,11 +40,15 @@
case 33 : // PgUp case 33 : // PgUp
case 38 : // Up case 38 : // Up
case 37 : // Left case 37 : // Left
case 72 : // h
case 75 : // k
current--; current--;
break; break;
case 34 : // PgDown case 34 : // PgDown
case 40 : // Down case 40 : // Down
case 39 : // Right case 39 : // Right
case 76 : // l
case 74 : // j
current++; current++;
break; break;
case 36 : // Home case 36 : // Home
...@@ -67,7 +71,7 @@ ...@@ -67,7 +71,7 @@
} }
function enterSingle() { function enterSingle() {
body.className = 'single'; body.className = 'full';
resizeBody(); resizeBody();
updateProgress(); updateProgress();
window.addEventListener('resize', resizeBody, false); window.addEventListener('resize', resizeBody, false);
...@@ -76,7 +80,7 @@ ...@@ -76,7 +80,7 @@
} }
function exitSingle() { function exitSingle() {
body.className = 'multiple'; body.className = 'list';
resizeBody(true); resizeBody(true);
window.removeEventListener('resize', resizeBody, false); window.removeEventListener('resize', resizeBody, false);
window.removeEventListener('keyup', turnSlide, false); window.removeEventListener('keyup', turnSlide, false);
...@@ -90,6 +94,7 @@ ...@@ -90,6 +94,7 @@
} }
function checkHash() { function checkHash() {
// if(!window.location.search.length) history.pushState(null, null, window.location.href + '?list');
if(typeof hashList[url.hash] != 'undefined') { if(typeof hashList[url.hash] != 'undefined') {
enterSingle(); enterSingle();
} }
......
themes/ribbon/styles/style.css
View file @ d3c6b652
@import url(fonts.css); @import url(fonts.css);
@import url(reset.css);
BODY { BODY {
font:25px/1.8 'PT Sans', sans-serif; font:25px/1.8 'PT Sans', sans-serif;
counter-reset:paging;
} }
/* Slide /* Slide
---------------------------------------- */ ---------------------------------------- */
.slide { .slide {
background:#FFF;
color:#000;
}
.slide:after {
counter-increment:paging;
content:counter(paging, decimal-leading-zero);
}
.slide SECTION {
padding:80px 120px 0; padding:80px 120px 0;
width:784px; width:784px;
height:560px; height:560px;
background:#FFF;
} }
.slide:before { .slide SECTION:before {
position:absolute; position:absolute;
top:0; top:0;
right:120px; right:120px;
...@@ -21,15 +30,6 @@ BODY { ...@@ -21,15 +30,6 @@ BODY {
background:url(../images/ribbon.svg) no-repeat; background:url(../images/ribbon.svg) no-repeat;
content:''; 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 */ /* Header */
.slide HEADER { .slide HEADER {
...@@ -166,17 +166,13 @@ BODY { ...@@ -166,17 +166,13 @@ BODY {
font-weight:normal; font-weight:normal;
} }
/* Background /* Background */
---------------------------------------- */
.slide.bg { .slide.bg {
background:transparent; background:transparent;
} }
.slide.bg:before { .slide.bg SECTION:before {
display:none; display:none;
} }
.slide.bg:after {
content:'';
}
.slide.bg IMG { .slide.bg IMG {
position:absolute; position:absolute;
top:0; top:0;
...@@ -184,17 +180,13 @@ BODY { ...@@ -184,17 +180,13 @@ BODY {
z-index:-1; z-index:-1;
} }
/* Shout /* Shout */
---------------------------------------- */
.slide.shout { .slide.shout {
z-index:1; z-index:1;
} }
.slide.shout:before { .slide.shout SECTION:before {
display:none; display:none;
} }
.slide.shout:after {
content:'';
}
.slide.shout H2 { .slide.shout H2 {
position:absolute; position:absolute;
top:50%; top:50%;
...@@ -212,21 +204,118 @@ BODY { ...@@ -212,21 +204,118 @@ BODY {
content:''; content:'';
} }
/* Multiple /* List
---------------------------------------- */ ---------------------------------------- */
.multiple .slide:after { .list {
display:none; padding:60px 0 0 100px;
background:#585A5E url(../images/linen.png);
}
.list:after {
display:block;
clear:both;
content:'';
} }
/* Single /* Caption */
---------------------------------------- */ .list .caption {
.single { margin:0 0 50px;
counter-reset:single-paging; 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;
} }
.single .slide { .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
---------------------------------------- */
.full {
position:absolute;
top:50%;
left:50%;
overflow:hidden; 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; position:absolute;
right:118px; right:118px;
bottom:49px; bottom:49px;
...@@ -234,7 +323,7 @@ BODY { ...@@ -234,7 +323,7 @@ BODY {
border-radius:7px; border-radius:7px;
border:2px solid rgba(255, 255, 255, 0.2); border:2px solid rgba(255, 255, 255, 0.2);
} }
.single .progress DIV { .full .progress DIV {
width:0; width:0;
height:10px; height:10px;
border-radius:5px; border-radius:5px;
...@@ -245,6 +334,6 @@ BODY { ...@@ -245,6 +334,6 @@ BODY {
-o-transition:width 0.2s linear; -o-transition:width 0.2s linear;
transition:width 0.2s linear; transition:width 0.2s linear;
} }
.single .progress-off { .full .progress-off {
z-index:1; z-index:1;
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment