Skip to content

M
my-cucumbers-ru-github-io
Commit 0e18e525 authored by Vadim Makeev's avatar Vadim Makeev
Browse files
Options

Clean up to focus on core module

parent b02018f7
Show whitespace changes
Inline Side-by-side
Showing with 0 additions and 5335 deletions
index.html deleted 100755 → 0
View file @ b02018f7
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Shower Presentation Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=1274, user-scalable=no">
<link rel="stylesheet" href="themes/ribbon/styles/screen.css">
<link rel="stylesheet" href="themes/ribbon/styles/print.css" media="print">
<!--
To apply styles to the certain slides
set slide ID to get needed elements
-->
<style>
#Cover h2 {
margin:65px 0 0;
color:#FFF;
text-align:center;
font-size:70px;
}
#Picture h2 {
color:#FFF;
}
</style>
</head>
<body class="list">
<header class="caption">
<h1>Shower Presentation Template</h1>
<p><a href="http://pepelsbey.net/">Vadim Makeev</a>, <a href="http://opera.com">Opera Software</a></p>
</header>
<section class="slide cover" id="Cover"><div>
<h2>Shower Presentation Template</h2>
<img src="pictures/cover.jpg" alt="">
</div></section>
<section class="slide" data-timing="00:05"><div>
<h2>Slide with timer</h2>
<p>It will change right in five seconds</p>
</div></section>
<section class="slide"><div>
<h2>Heading</h2>
<p>In your slides text you can use <a href="http://google.com/">links</a> and various inline elements for <em>emotional</em> and <strong>strong</strong> emphasis or just for <i>italic</i> or <b>bold</b> decoration. <code>&lt;code&gt;</code> is used for inline code samples.</p>
</div></section>
<section class="slide"><div>
<h2>Two rows.<br> Mighty heading</h2>
<p>You can use two lines header but it would reduce space on a slide. The “Ribbon” theme is designed for seven lines of code after one-line header by default.</p>
<p class="note">This paragraph could be used as a footnote</p>
</div></section>
<section class="slide"><div>
<h2>Various lists</h2>
<ul>
<li>Simple lists are marked with bullets.</li>
<li>Ordered lists begin with a number.</li>
<li>You can even nest lists one inside another.
<ol>
<li>Or mix their types.</li>
<li>But do not go too far.</li>
<li>Otherwise audience will be bored.</li>
</ol>
</li>
<li>Look, seven rows exactly!</li>
</ul>
</div></section>
<section class="slide"><div>
<h2>Serious citation</h2>
<figure>
<blockquote>
<p>You can wrap one or more paragraphs into citation, which will make text italic and add a nice quote on the left. Giving the citation source would make it even more serious.</p>
</blockquote>
<figcaption>Vadim Makeev</figcaption>
</figure>
</div></section>
<section class="slide"><div>
<h2>When you have a lot of code</h2>
<pre>
<code>&lt;html lang="en"&gt;</code>
<code><mark>&lt;head&gt;</mark> <mark class="comment">&lt;!--Comment--&gt;</mark></code>
<code> &lt;title&gt;Shower&lt;/title&gt;</code>
<code> &lt;meta charset="<mark class="important">UTF-8</mark>"&gt;</code>
<code> &lt;link rel="stylesheet" href="s/screen.css"&gt;</code>
<code> &lt;script src="j/jquery.js"&gt;&lt;/script&gt;</code>
<code><mark>&lt;/head&gt;</mark></code>
</pre>
</div></section>
<section class="slide"><div>
<h2>Code in separate blocks</h2>
<pre>
<code><mark>&lt;html</mark> lang="en"&gt;</code>
</pre>
<p class="note">Now you can add a note for each block</p>
<pre>
<code><mark>&lt;meta</mark> charset="<mark>UTF-8</mark>"&gt;</code>
</pre>
<p class="note">And explain what is interesting about it</p>
</div></section>
<section class="slide shout"><div>
<h2>You can shout<br> this way</h2>
</div></section>
<section class="slide cover" id="Picture"><div>
<h2>And place any picture</h2>
<img src="pictures/picture.jpg" alt="">
</div></section>
<section class="slide"><div>
<h2>Inner navigation</h2>
<ol>
<li>Lets you change objects one by one</li>
<li class="next">For example, show list items</li>
<li class="next">Or switch pictures</li>
<li class="next">And much more</li>
<li class="next">But it will work only once</li>
</ol>
</div></section>
<section class="slide"><div>
<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>
</div></section>
<!--
To hide progress bar from entire presentation
just remove “progress” element.
-->
<div class="progress"><div></div></div>
<script src="scripts/script.js"></script>
<!-- Copyright © 2010–2012 Vadim Makeev — pepelsbey.net -->
<!-- Photos by John Carey — fiftyfootshadows.net -->
</body>
</html>
\ No newline at end of file
scripts/print.sh deleted 100755 → 0
View file @ b02018f7
#!/bin/bash
file=$1
name=${file%.*}
echo 'Printing…'
# http://code.google.com/p/wkhtmltopdf
wkhtmltopdf -T 0 -R 0 -B 0 -L 0 --page-width 1024px --page-height 640px --dpi 300 --print-media-type --quiet ${file} ${name}.pdf
# http://princexml.com
# prince -i html5 ${file}
echo 'Finished.'
# Usage example: sh print.sh index.html
\ No newline at end of file
themes/ribbon/fonts/PTMono.svg deleted 100644 → 0
View file @ b02018f7
This source diff could not be displayed because it is too large. You can view the blob instead.
themes/ribbon/fonts/PTSans.Bold.Italic.svg deleted 100644 → 0
View file @ b02018f7
This source diff could not be displayed because it is too large. You can view the blob instead.
themes/ribbon/fonts/PTSans.Bold.svg deleted 100644 → 0
View file @ b02018f7
This source diff could not be displayed because it is too large. You can view the blob instead.
themes/ribbon/fonts/PTSans.Italic.svg deleted 100644 → 0
View file @ b02018f7
This source diff could not be displayed because it is too large. You can view the blob instead.
themes/ribbon/fonts/PTSans.Narrow.Bold.svg deleted 100644 → 0
View file @ b02018f7
This source diff could not be displayed because it is too large. You can view the blob instead.
themes/ribbon/fonts/PTSans.svg deleted 100644 → 0
View file @ b02018f7
This source diff could not be displayed because it is too large. You can view the blob instead.
themes/ribbon/images/ribbon.svg deleted 100644 → 0
View file @ b02018f7
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="120">
<polygon fill="#C00" points="0,0 40,0 40,120 20,100 0,120"/>
</svg>
\ No newline at end of file
themes/ribbon/index.html deleted 100644 → 0
View file @ b02018f7
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Ribbon theme for Shower</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=1274, user-scalable=no">
<link rel="stylesheet" href="styles/screen.css">
<link rel="stylesheet" href="styles/print.css" media="print">
</head>
<body class="list debug">
<header class="caption">
<h1>Presentation Title</h1>
<p><a href="">Author Name</a></p>
</header>
<section class="slide"><div>
<h2>Header</h2>
<p>Typewriter etsy messenger bag <a href="">fingerstache</a>, aesthetic vinyl semiotics twee <strong>DIY</strong> forage chillwave. Thundercats ennui messenger bag, <em>squid</em> carles chillwave shoreditch pickled cliche <b>letterpress</b>. DIY beard locavore <i>occupy</i> salvia, whatever single-origin <code>coffee</code> fanny pack 3 wolf moon typewriter gastropub kale chips.</p>
<p class="note">Secondary footnote.</p>
</div></section>
<section class="slide"><div>
<h2>Lists in Enlish typography</h2>
<ul>
<li>Ennui keffiyeh thundercats</li>
<li>Jean shorts biodiesel</li>
<li>Terry richardson, swag blog
<ol>
<li>Locavore umami vegan helvetica</li>
<li>Fingerstache kale chips</li>
<li>Keytar sriracha gluten-free</li>
</ol>
</li>
<li>Before they sold out master</li>
</ul>
</div></section>
<section class="slide" lang="ru"><div>
<h2>Lists in Russian typography</h2>
<ul>
<li>Ennui keffiyeh thundercats</li>
<li>Jean shorts biodiesel</li>
<li>Terry richardson, swag blog
<ol>
<li>Locavore umami vegan helvetica</li>
<li>Fingerstache kale chips</li>
<li>Keytar sriracha gluten-free</li>
</ol>
</li>
<li>Before they sold out master</li>
</ul>
</div></section>
<section class="slide"><div>
<h2>Quote</h2>
<figure>
<blockquote>
<p>Typewriter etsy messenger bag fingerstache, aesthetic vinyl semiotics twee DIY forage chillwave. Thundercats ennui messenger bag, squid carles chillwave shoreditch pickled cliche letterpress. DIY beard locavore occupy salvia, whatever single-origin coffee fanny pack 3 wolf moon typewriter gastropub kale chips.</p>
</blockquote>
<figcaption>Author Name</figcaption>
</figure>
</div></section>
<section class="slide"><div>
<h2>Code listing</h2>
<pre>
<code>&lt;html lang="en"&gt;</code>
<code><mark>&lt;head&gt;</mark> <mark class="comment">&lt;!--Comment--&gt;</mark></code>
<code> &lt;title&gt;Shower&lt;/title&gt;</code>
<code> &lt;meta charset="<mark class="important">UTF-8</mark>"&gt;</code>
<code> &lt;link rel="stylesheet" href="s/screen.css"&gt;</code>
<code> &lt;script src="j/jquery.js"&gt;&lt;/script&gt;</code>
<code><mark>&lt;/head&gt;</mark></code>
</pre>
</div></section>
<section class="slide"><div>
<h2>Code listing</h2>
<pre><code>&lt;html lang="en"&gt;
<mark>&lt;head&gt;</mark> <mark class="comment">&lt;!--Comment--&gt;</mark>
&lt;title&gt;Shower&lt;/title&gt;
&lt;meta charset="<mark class="important">UTF-8</mark>"&gt;
&lt;link rel="stylesheet" href="s/screen.css"&gt;
&lt;script src="j/jquery.js"&gt;&lt;/script&gt;
<mark>&lt;/head&gt;</mark></code></pre>
</div></section>
<section class="slide shout"><div>
<h2>Shout</h2>
</div></section>
<section class="slide cover"><div>
<img src="pictures/exact.png" alt="">
</div></section>
<section class="slide cover w"><div>
<img src="pictures/wide.png" alt="">
</div></section>
<section class="slide cover h"><div>
<img src="pictures/tall.png" alt="">
</div></section>
<section class="slide cover h"><div>
<img src="pictures/wide.png" alt="">
</div></section>
<section class="slide cover w"><div>
<img src="pictures/tall.png" alt="">
</div></section>
<section class="slide cover w h"><div>
<img src="pictures/square.png" alt="">
</div></section>
<section class="slide shout"><div>
<img src="pictures/square.png" alt="" class="place t l">
<img src="pictures/square.png" alt="" class="place t">
<img src="pictures/square.png" alt="" class="place t r">
<img src="pictures/square.png" alt="" class="place l">
<img src="pictures/square.png" alt="" class="place m">
<img src="pictures/square.png" alt="" class="place r">
<img src="pictures/square.png" alt="" class="place b l">
<img src="pictures/square.png" alt="" class="place b">
<img src="pictures/square.png" alt="" class="place b r">
</div></section>
<section class="slide" data-timing="00:03"><div>
<h2>Timer</h2>
<p>Three seconds to go.</p>
</div></section>
<section class="slide"><div>
<h2>List navigation</h2>
<ol>
<li>Ennui keffiyeh thundercats</li>
<li class="next">Jean shorts biodiesel</li>
<li class="next">Terry richardson, swag blog</li>
<li class="next">Locavore umami vegan helvetica</li>
<li class="next">Fingerstache kale chips</li>
<li class="next">Keytar sriracha gluten-free</li>
<li class="next">Before they sold out master</li>
</ol>
</div></section>
<!--
To hide progress bar from entire presentation
just remove “progress” element.
-->
<div class="progress"><div></div></div>
<script src="../../scripts/script.js"></script>
<!-- Copyright © 2010–2012 Vadim Makeev — pepelsbey.net -->
</body>
</html>
\ No newline at end of file
themes/ribbon/styles/defaults.scss deleted 100644 → 0
View file @ b02018f7
// Ribbon theme for Shower HTML presentation template: github.com/pepelsbey/shower
// Copyright © 2010–2012 Vadim Makeev, pepelsbey.net
// Licensed under MIT license: github.com/pepelsbey/shower/wiki/License-En
// Layout
$width:1024px; // Slide width, permanent in most cases
$height:640px; // Slide height, 640px for 16/10, 768px for 4/3
$top:71px; // Top padding above slide content
$sides:120px; // Left and right paddings around slide content
$break:1324px; // Window width for small thumbnails to appear
$grid:'';
// Mixins
@mixin tab-size($n) {
-moz-tab-size:$n;
-o-tab-size:$n;
tab-size:$n;
}
@mixin transform($n) {
-webkit-transform:$n;
-moz-transform:$n;
-ms-transform:$n;
-o-transform:$n;
transform:$n;
}
@mixin transform-origin($n) {
-webkit-transform-origin:$n;
-moz-transform-origin:$n;
-ms-transform-origin:$n;
-o-transform-origin:$n;
transform-origin:$n;
}
@mixin transition($n) {
-webkit-transition:$n;
-moz-transition:$n;
-o-transition:$n;
transition:$n;
}
\ No newline at end of file
themes/ribbon/styles/fonts.scss deleted 100755 → 0
View file @ b02018f7
/* PT Sans */
@font-face {
font-family:'PT Sans';
src:url(../fonts/PTSans.woff) format('woff'),
url(../fonts/PTSans.ttf) format('truetype'),
url(../fonts/PTSans.svg#PTSans-Regular) format('svg');
}
@font-face {
font-weight:bold;
font-family:'PT Sans';
src:url(../fonts/PTSans.Bold.woff) format('woff'),
url(../fonts/PTSans.Bold.ttf) format('truetype'),
url(../fonts/PTSans.Bold.svg#PTSans-Bold) format('svg');
}
@font-face {
font-style:italic;
font-family:'PT Sans';
src:url(../fonts/PTSans.Italic.woff) format('woff'),
url(../fonts/PTSans.Italic.ttf) format('truetype'),
url(../fonts/PTSans.Italic.svg#PTSans-Italic) format('svg');
}
@font-face {
font-style:italic;
font-weight:bold;
font-family:'PT Sans';
src:url(../fonts/PTSans.Bold.Italic.woff) format('woff'),
url(../fonts/PTSans.Bold.Italic.ttf) format('truetype'),
url(../fonts/PTSans.Bold.Italic.svg#PTSans-BoldItalic) format('svg');
}
@font-face {
font-family:'PT Sans Narrow';
font-weight:bold;
src:url(../fonts/PTSans.Narrow.Bold.woff) format('woff'),
url(../fonts/PTSans.Narrow.Bold.ttf) format('truetype'),
url(../fonts/PTSans.Narrow.Bold.svg#PTSans-NarrowBold) format('svg');
}
/* PT Mono */
@font-face {
font-family:'PT Mono';
src:url(../fonts/PTMono.woff) format('woff'),
url(../fonts/PTMono.ttf) format('truetype'),
url(../fonts/PTMono.svg#PTMono) format('svg');
}
\ No newline at end of file
themes/ribbon/styles/print.css deleted 100644 → 0
View file @ b02018f7
@page{margin:0;size:1024px 640px}.list{padding:0;background:none}.list *{-webkit-print-color-adjust:exact}.list .caption{display:none}.list .slide{float:none;margin:0;-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}.list .slide:before{display:none}.list .slide:after{position:absolute;left:120px;bottom:80px;color:#CCC;text-shadow:none;line-height:18px;font-weight:normal;font-size:25px}.list .slide.cover,.list .slide.shout{z-index:1}.list .slide.cover:after,.list .slide.shout:after{content:''}.list .slide.cover{background:#000}
themes/ribbon/styles/print.scss deleted 100644 → 0
View file @ b02018f7
// Ribbon theme for Shower HTML presentation template: github.com/pepelsbey/shower
// Copyright © 2010–2012 Vadim Makeev, pepelsbey.net
// Licensed under MIT license: github.com/pepelsbey/shower/wiki/License-En
@import 'defaults.scss';
@page {
margin:0;
size:$width $height;
}
// List
// -------------------------------
.list {
padding:0;
background:none;
// Magic
* {
-webkit-print-color-adjust:exact;
}
// Caption
.caption {
display:none;
}
// Slide
.slide {
float:none;
margin:0;
-webkit-transform:none;
-moz-transform:none;
-ms-transform:none;
-o-transform:none;
transform:none;
&:before {
display:none;
}
&:after {
position:absolute;
left:120px;
bottom:80px;
color:#CCC;
text-shadow:none;
line-height:18px;
font-weight:normal;
font-size:25px;
}
// Cover Shout
&.cover,
&.shout {
z-index:1;
&:after {
content:'';
}
}
&.cover {
background:#000;
}
}
}
\ No newline at end of file
themes/ribbon/styles/reset.scss deleted 100644 → 0
View file @ b02018f7
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
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,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
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;
}
body {
line-height:1;
}
ol, ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
table {
border-collapse:collapse;
border-spacing:0;
}
\ No newline at end of file
themes/ribbon/styles/screen.css deleted 100644 → 0
View file @ b02018f7
@font-face{font-family:'PT Sans';src:url(../fonts/PTSans.woff) format("woff"),url(../fonts/PTSans.ttf) format("truetype"),url(../fonts/PTSans.svg#PTSans-Regular) format("svg")}@font-face{font-weight:bold;font-family:'PT Sans';src:url(../fonts/PTSans.Bold.woff) format("woff"),url(../fonts/PTSans.Bold.ttf) format("truetype"),url(../fonts/PTSans.Bold.svg#PTSans-Bold) format("svg")}@font-face{font-style:italic;font-family:'PT Sans';src:url(../fonts/PTSans.Italic.woff) format("woff"),url(../fonts/PTSans.Italic.ttf) format("truetype"),url(../fonts/PTSans.Italic.svg#PTSans-Italic) format("svg")}@font-face{font-style:italic;font-weight:bold;font-family:'PT Sans';src:url(../fonts/PTSans.Bold.Italic.woff) format("woff"),url(../fonts/PTSans.Bold.Italic.ttf) format("truetype"),url(../fonts/PTSans.Bold.Italic.svg#PTSans-BoldItalic) format("svg")}@font-face{font-family:'PT Sans Narrow';font-weight:bold;src:url(../fonts/PTSans.Narrow.Bold.woff) format("woff"),url(../fonts/PTSans.Narrow.Bold.ttf) format("truetype"),url(../fonts/PTSans.Narrow.Bold.svg#PTSans-NarrowBold) format("svg")}@font-face{font-family:'PT Mono';src:url(../fonts/PTMono.woff) format("woff"),url(../fonts/PTMono.ttf) format("truetype"),url(../fonts/PTMono.svg#PTMono) format("svg")}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,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,menu,nav,output,ruby,section,summary,time,mark,audio,video{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}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}body{counter-reset:slide;font:25px/2 "PT Sans",sans-serif}.slide{width:1024px;height:640px;background:#fff url(../images/ribbon.svg) 865px 0 no-repeat;color:#000}.slide:after{position:absolute;counter-increment:slide;content:counter(slide, decimal-leading-zero);line-height:1}.debug .slide{background:url(../images/ribbon.svg) 865px 0 no-repeat, url(../images/grid-16x10.png) no-repeat, #fff}.slide>div{position:absolute;top:0;left:0;overflow:hidden;padding:71px 120px 0;width:784px;height:569px}.slide h2{margin:0 0 37px;color:#666;font:bold 50px/1 "PT Sans Narrow",sans-serif}.slide p{margin:0 0 50px}.slide p.note{color:#999}.slide a{border-bottom:0.1em solid;color:#0174A7;text-decoration:none}.slide b,.slide strong{font-weight:bold}.slide i,.slide em{font-style:italic}.slide kbd,.slide code,.slide samp{padding:3px 8px;border-radius:8px;background:#FAFAA2;color:#000;-moz-tab-size:4;-o-tab-size:4;tab-size:4;line-height:1;font-family:'PT Mono', monospace}.slide blockquote{font-style:italic}.slide blockquote:before{position:absolute;margin:-16px 0 0 -80px;color:#CCC;font:200px/1 "PT Sans",sans-serif;content:'\201C'}.slide blockquote+figcaption{margin:-50px 0 40px;font-style:italic;font-weight:bold}.slide ol,.slide ul{margin:0 0 50px;counter-reset:list}.slide ol li,.slide ul li{text-indent:-2em}.slide ol li:before,.slide ul li:before{display:inline-block;width:2em;color:#BBB;text-align:right}.slide ol ol,.slide ol ul,.slide ul ol,.slide ul ul{margin:0 0 0 39px}.slide ul>li:before{content:'\2022\00A0\00A0'}.slide ul>li:lang(ru):before{content:'\2014\00A0\00A0'}.slide ol>li:before{counter-increment:list;content:counter(list) ".\00A0"}.slide pre{margin:0 0 50px;counter-reset:code;white-space:normal}.slide pre code{display:block;padding:0;background:none;white-space:pre;line-height:50px}.slide pre code:before{position:absolute;margin:0 0 0 -110px;width:100px;color:#BBB;text-align:right;counter-increment:code;content:counter(code, decimal-leading-zero) "."}.slide pre code:only-child:before{content:''}.slide pre mark{margin:0 -8px;padding:3px 8px;border-radius:8px;background:rgba(236,249,0,0.37);color:#000;font-style:normal}.slide pre mark.important{margin:0;background:#C00;color:#FFF;font-weight:normal}.slide pre mark.comment{margin:0;padding:0;background:none;color:#999}.slide.cover{background:#000}.slide.cover img,.slide.cover svg,.slide.cover video,.slide.cover object,.slide.cover canvas{position:absolute;top:0;left:0;z-index:-1}.slide.cover.w img,.slide.cover.w svg,.slide.cover.w video,.slide.cover.w object,.slide.cover.w canvas{top:50%;width:100%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%)}.slide.cover.h img,.slide.cover.h svg,.slide.cover.h video,.slide.cover.h object,.slide.cover.h canvas{left:50%;height:100%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%)}.slide.cover.w.h img,.slide.cover.w.h svg,.slide.cover.w.h video,.slide.cover.w.h object,.slide.cover.w.h canvas{top:0;left:0;-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}.slide.shout{background-image:none}.slide.shout h2{position:absolute;top:50%;left:0;width:100%;text-align:center;line-height:1;font-size:150px;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%)}.slide .place{position:absolute}.slide .place.t,.slide .place.m,.slide .place.b{left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%)}.slide .place.t{top:0}.slide .place.b{bottom:0}.slide .place.l,.slide .place.m,.slide .place.r{top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%)}.slide .place.l{left:0}.slide .place.m{-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.slide .place.r{right:0;left:auto}.slide .place.t.l,.slide .place.t.r,.slide .place.b.r,.slide .place.b.l{-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}.slide .place.t.l,.slide .place.t.r{top:0}.slide .place.b.r,.slide .place.b.l{top:auto}.list{padding:80px 0 40px 100px;background:#585a5e url(../images/linen.png)}.list:after{clear:both;display:block;content:''}.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}.list .caption a{color:#4B86C2;text-shadow:0 -1px 1px #1f3f60;text-decoration:none}.list .caption a:hover{color:#5ca4ed}.list .slide{position:relative;float:left;margin:0 -412px -220px 0;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);-o-transform:scale(0.5);transform:scale(0.5)}@media (max-width: 1324px){.list .slide{margin:0 -688px -400px 0;-webkit-transform:scale(0.25);-moz-transform:scale(0.25);-ms-transform:scale(0.25);-o-transform:scale(0.25);transform:scale(0.25)}}.list .slide:before{position:absolute;top:0;left:0;z-index:-1;width:512px;height:320px;box-shadow:0 0 30px rgba(0,0,0,0.005),0 20px 50px rgba(42,43,45,0.6);border-radius:2px;content:'';-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scale(2);-moz-transform:scale(2);-ms-transform:scale(2);-o-transform:scale(2);transform:scale(2)}@media (max-width: 1324px){.list .slide:before{width:256px;height:160px;-webkit-transform:scale(4);-moz-transform:scale(4);-ms-transform:scale(4);-o-transform:scale(4);transform:scale(4)}}.list .slide:after{bottom:-100px;left:120px;color:#3C3D40;text-shadow:0 2px 1px #8D8E90;font-weight:bold;font-size:50px}@media (max-width: 1324px){.list .slide:after{bottom:-180px;text-shadow:0 4px 2px #8D8E90;font-size:100px}}.list .slide:hover:before{box-shadow:0 0 0 10px rgba(42,43,45,0.3),0 20px 50px rgba(42,43,45,0.6)}.list .slide:target:before{box-shadow:0 0 0 1px #305f8d,0 0 0 10px #3c7cbd,0 20px 50px rgba(42,43,45,0.6)}@media (max-width: 1324px){.list .slide:target:before{box-shadow:0 0 0 1px #305f8d,0 0 0 10px #3c7cbd,0 20px 50px rgba(42,43,45,0.6)}}.list .slide:target:after{text-shadow:0 2px 1px rgba(42,43,45,0.6);color:#4B86C2}@media (max-width: 1324px){.list .slide:target:after{text-shadow:0 4px 2px rgba(42,43,45,0.6)}}.full{position:absolute;top:50%;left:50%;overflow:hidden;margin:-320px 0 0 -512px;width:1024px;height:640px;background:#000}.full .caption{display:none}.full .slide{position:absolute;top:0;left:0;clip:rect(0, 0, 0, 0)}.full .slide:after{left:120px;bottom:80px;color:#CCC;line-height:18px;font-size:25px}.full .slide:target{clip:rect(0, auto, auto, 0)}.full .slide.cover,.full .slide.shout{z-index:1}.full .slide.cover:after,.full .slide.shout:after{content:''}.full li.next{display:none}.full li.next.active{display:block}.full .progress{position:absolute;right:118px;bottom:40px;left:118px}.full .progress div{width:0;height:10px;box-shadow:0 0 0 1px rgba(255,255,255,0.4);border-radius:5px;background:rgba(177,177,177,0.4);-webkit-transition:width 0.2s linear;-moz-transition:width 0.2s linear;-o-transition:width 0.2s linear;transition:width 0.2s linear}
themes/ribbon/styles/screen.scss deleted 100644 → 0
View file @ b02018f7
// Ribbon theme for Shower HTML presentation template: github.com/pepelsbey/shower
// Copyright © 2010–2012 Vadim Makeev, pepelsbey.net
// Licensed under MIT license: github.com/pepelsbey/shower/wiki/License-En
@import 'defaults';
@import 'fonts';
@import 'reset';
body {
counter-reset:slide;
font:25px/2 'PT Sans', sans-serif;
}
// Slide
// -------------------------------
.slide {
width:$width;
height:$height;
background:#FFF url(../images/ribbon.svg) 865px 0 no-repeat;
color:#000;
&:after {
position:absolute;
counter-increment:slide;
content:counter(slide, decimal-leading-zero);
line-height:1;
}
.debug & {
@if $width == 1024px {
@if $height == 640px {
$grid:'url(../images/grid-16x10.png) no-repeat,'
}
@if $height == 768px {
$grid:'url(../images/grid-4x3.png) no-repeat,'
}
}
background:url(../images/ribbon.svg) 865px 0 no-repeat, #{$grid} #FFF;
}
> div {
position:absolute;
top:0;
left:0;
overflow:hidden;
padding:$top $sides 0;
width:$width - $sides * 2;
height:$height - $top;
}
}
// Header
.slide {
h2 {
margin:0 0 37px;
color:#666;
font:bold 50px/1 'PT Sans Narrow', sans-serif;
}
// Text
p {
margin:0 0 50px;
}
p.note {
color:#999;
}
a {
border-bottom:0.1em solid;
color:#0174A7;
text-decoration:none;
}
b, strong {
font-weight:bold;
}
i, em {
font-style:italic;
}
kbd, code, samp {
padding:3px 8px;
border-radius:8px;
background:#FAFAA2;
color:#000;
@include tab-size(4);
line-height:1;
font-family:'PT Mono', monospace;
}
// Quote
blockquote {
font-style:italic;
&:before {
position:absolute;
margin:-16px 0 0 -80px;
color:#CCC;
font:200px/1 'PT Sans', sans-serif;
content:'\201C';
}
& + figcaption {
margin:-50px 0 40px;
font-style:italic;
font-weight:bold;
}
}
// Lists
ol, ul {
margin:0 0 50px;
counter-reset:list;
li {
text-indent:-2em;
&:before {
display:inline-block;
width:2em;
color:#BBB;
text-align:right;
}
}
ol,
ul {
margin:0 0 0 39px;
}
}
ul > li:before {
content:'\2022\00A0\00A0';
}
ul > li:lang(ru):before {
content:'\2014\00A0\00A0';
}
ol > li:before {
counter-increment:list;
content:counter(list)'.\00A0';
}
// Code
pre {
margin:0 0 50px;
counter-reset:code;
white-space:normal;
code {
display:block;
padding:0;
background:none;
white-space:pre;
line-height:50px;
&:before {
position:absolute;
margin:0 0 0 -110px;
width:100px;
color:#BBB;
text-align:right;
counter-increment:code;
content:counter(code, decimal-leading-zero)'.';
}
&:only-child:before {
content:'';
}
}
mark {
margin:0 -8px;
padding:3px 8px;
border-radius:8px;
background:rgba(236,249,0,.37);
color:#000;
font-style:normal;
&.important {
margin:0;
background:#C00;
color:#FFF;
font-weight:normal;
}
&.comment {
margin:0;
padding:0;
background:none;
color:#999;
}
}
}
// Cover
&.cover {
background:#000;
img, svg, video,
object, canvas {
position:absolute;
top:0;
left:0;
z-index:-1;
}
&.w {
img, svg, video,
object, canvas {
top:50%;
width:100%;
@include transform(translateY(-50%));
}
}
&.h {
img, svg, video,
object, canvas {
left:50%;
height:100%;
@include transform(translateX(-50%));
}
}
&.w.h {
img, svg, video,
object, canvas {
top:0;
left:0;
@include transform(none);
}
}
}
// Shout
&.shout {
background-image:none;
h2 {
position:absolute;
top:50%;
left:0;
width:100%;
text-align:center;
line-height:1;
font-size:150px;
@include transform(translateY(-50%));
}
}
// Place
.place {
position:absolute;
&.t, &.m, &.b {
left:50%;
@include transform(translateX(-50%));
}
&.t { top:0; }
&.b { bottom:0; }
&.l, &.m, &.r {
top:50%;
@include transform(translateY(-50%));
}
&.l { left:0; }
&.m { @include transform(translate(-50%, -50%)); }
&.r {
right:0;
left:auto;
}
&.t.l, &.t.r, &.b.r, &.b.l {
@include transform(none);
}
&.t.l, &.t.r { top:0; }
&.b.r, &.b.l { top:auto; }
}
}
// List
// -------------------------------
.list {
padding:80px 0 40px 100px;
background:#585A5E url(../images/linen.png);
&:after {
clear:both;
display:block;
content:'';
}
// Caption
.caption {
margin:0 0 50px;
color:#3C3D40;
text-shadow:0 1px 1px #8D8E90;
h1 {
font:bold 50px/1 'PT Sans Narrow', sans-serif;
}
a {
color:#4B86C2;
text-shadow:0 -1px 1px #1F3F60;
text-decoration:none;
&:hover {
color:#5ca4ed;
}
}
}
// Slide
.slide {
position:relative;
float:left;
margin:0 (100-$width/2) (100-$height/2) 0;
@include transform-origin(0 0);
@include transform(scale(0.5));
@media (max-width:$break) {
margin:0 (80-($width/2+$width/4)) (80-($height/2+$height/4)) 0;
@include transform(scale(0.25));
}
&:before {
position:absolute;
top:0;
left:0;
z-index:-1;
width:$width/2;
height:$height/2;
box-shadow:
0 0 30px rgba(0, 0, 0, 0.005),
0 20px 50px rgba(42, 43, 45, 0.6);
border-radius:2px;
content:'';
@include transform-origin(0 0);
@include transform(scale(2));
@media (max-width:$break) {
width:$width/4;
height:$height/4;
@include transform(scale(4));
}
}
&:after {
bottom:-100px;
left:120px;
color:#3C3D40;
text-shadow:0 2px 1px #8D8E90;
font-weight:bold;
font-size:50px;
@media (max-width:$break) {
bottom:-180px;
text-shadow:0 4px 2px #8D8E90;
font-size:100px;
}
}
&:hover:before {
box-shadow:
0 0 0 10px rgba(42, 43, 45, 0.3),
0 20px 50px rgba(42, 43, 45, 0.6);
}
&:target {
&:before {
box-shadow:
0 0 0 1px #305F8D,
0 0 0 10px #3C7CBD,
0 20px 50px rgba(42, 43, 45, 0.6);
@media (max-width:$break) {
box-shadow:
0 0 0 1px #305F8D,
0 0 0 10px #3C7CBD,
0 20px 50px rgba(42, 43, 45, 0.6);
}
}
&:after {
text-shadow:0 2px 1px rgba(42, 43, 45, 0.6);
color:#4B86C2;
@media (max-width:$break) {
text-shadow:0 4px 2px rgba(42, 43, 45, 0.6);
}
}
}
}
}
// Full
// -------------------------------
.full {
position:absolute;
top:50%;
left:50%;
overflow:hidden;
margin:(-$height/2) 0 0 (-$width/2);
width:$width;
height:$height;
background:#000;
.caption {
display:none;
}
.slide {
position:absolute;
top:0;
left:0;
clip:rect(0, 0, 0, 0);
&:after {
left:120px;
bottom:80px;
color:#CCC;
line-height:18px;
font-size:25px;
}
&:target {
clip:rect(0, auto, auto, 0);
}
// Cover Shout
&.cover,
&.shout {
z-index:1;
&:after {
content:'';
}
}
}
// Next Lists
li.next {
display:none;
&.active {
display:block;
}
}
// Progress
.progress {
position:absolute;
right:118px;
bottom:40px;
left:118px;
div {
width:0;
height:10px;
box-shadow:0 0 0 1px rgba(255, 255, 255, 0.4);
border-radius:5px;
background:rgba(177, 177, 177, 0.4);
@include transition(width 0.2s linear);
}
}
}
\ 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