Skip to content

M
my-cucumbers-ru-github-io
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 @@
<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>&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>
</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>
......
scripts/script.js
View file @ d3c6b652
(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();
}
......
themes/ribbon/styles/style.css
View file @ d3c6b652
@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
---------------------------------------- */
.single {
counter-reset:single-paging;
/* 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;
}
.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;
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;
}
\ 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