Skip to content

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

Brutal merging of master-new

parent 6724b0cd
Hide whitespace changes
Inline Side-by-side
Showing with 1269 additions and 1837 deletions
Contributing.md 0 → 100644
View file @ b02018f7
# Contributing to Shower
No spaces, tabs only
\ No newline at end of file
README.md
View file @ b02018f7
# Shower
Сross-browser presentation template.
- Open [pepelsbey.github.com/shower/en.htm](http://pepelsbey.github.com/shower/en.htm)
- Open [pepelsbey.github.com/shower/](http://pepelsbey.github.com/shower/)
- Click any slide to enter presentation mode
- Use arrow keys to navigate
- Press `Esc` to exit presentation mode
......@@ -25,6 +26,7 @@ Please address bugs and your suggestions to [Issues](http://github.com/pepelsbey
## Usage examples
- [Clear and Sharp](http://pepelsbey.net/pres/clear-and-sharp/)
- [CSS Management](http://pepelsbey.net/pres/css-management/)
- [Push it!](http://pepelsbey.net/pres/push-it/)
- [Pre-fixes](http://pepelsbey.net/pres/pre-fixes/)
......@@ -32,42 +34,4 @@ Please address bugs and your suggestions to [Issues](http://github.com/pepelsbey
- [Sense Coding](http://pepelsbey.net/pres/sense-coding/)
- [Dynamic Graphics](http://pepelsbey.net/pres/dynamic-graphics/)
Licensed under [MIT License](http://en.wikipedia.org/wiki/MIT_License), see [license page](shower/wiki/The-MIT-License) for details.
---
# Shower
Кроссбраузерный шаблон для презентаций
- Откройте [pepelsbey.github.com/shower/ru.htm](http://pepelsbey.github.com/shower/ru.htm)
- Кликните по любому слайду для перехода в режим презентации
- Используйте клавиши со стрелками для навигации
- Нажмите `Esc` для выхода из режима презентации
Подробнее о том, как использовать для навигации только клавиатуру, [читайте в документации](shower/wiki/Клавиатура).
Читайте новости и задавайте вопросы [@shower_me](http://twitter.com/shower_me/) в Твиттере.
## Поддерживаемые браузеры
- Десктопные: Chrome, Firefox, Opera, Safari
Поддеживаются только последние стабильные версии указанных браузеров.
## Планируемая поддержка
- Десктопные: IE10
- Мобильные: Mobile Safari, Opera Mobile
Сообщения об ошибках и пожелания оставляйте в разделе [Issues](http://github.com/pepelsbey/shower/issues).
## Примеры использования
- [CSS-менеджмент](http://pepelsbey.net/pres/css-management/)
- [Жми сюда!](http://pepelsbey.net/pres/push-it/)
- [Пре-фиксы](http://pepelsbey.net/pres/pre-fixes/)
- [Веб в кривых](http://pepelsbey.net/pres/web-in-curves/)
- [Вёрстка со смыслом](http://pepelsbey.net/pres/sense-coding/)
- [Динамическая графика](http://pepelsbey.net/pres/dynamic-graphics/)
Лицензировано под [лицензией MIT](http://ru.wikipedia.org/wiki/Лицензия_MIT), читайте подробнее [на странице лицензии](shower/wiki/Лицензия-MIT).
\ No newline at end of file
Licensed under [MIT License](http://en.wikipedia.org/wiki/MIT_License), see [license page](shower/wiki/MIT-License) for details.
\ No newline at end of file
en.htm deleted 100755 → 0
View file @ 6724b0cd
<!DOCTYPE HTML>
<html lang="en-US">
<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/style.css">
<link rel="stylesheet" href="themes/ribbon/styles/print.css" media="print">
<!--
To apply styles to the certain slides
use slide ID to get needed elements
-->
<style>
#Cover h2 {
color:#FFF;
text-align:center;
font-size:70px;
}
#FitToWidth h2,
#FitToHeight h2 {
color:#FFF;
text-align:center;
}
</style>
</head>
<body class="list">
<header class="caption">
<h1>Shower Presentation Template</h1>
<p>Vadim Makeev, Opera Software</p>
</header>
<div class="slide cover" id="Cover"><div>
<section>
<header>
<h2>Shower Presentation Template</h2>
</header>
<img src="pictures/cover.jpg" alt="">
</section>
</div></div>
<div class="slide" id="Header"><div>
<section>
<header>
<h2>Header</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 this tool 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>
<div class="slide" id="TwoLinesHeader"><div>
<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 this tool may or may not crash <em>your</em> browser.</p>
</section>
</div></div>
<div class="slide" id="UnorderedList"><div>
<section>
<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
<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>
</ul>
</section>
</div></div>
<div class="slide" id="OrderedList"><div>
<section>
<header>
<h2>Ordered List</h2>
</header>
<ol>
<li>Note that use of this tool</li>
<li>Erase your hard drive.</li>
<li>May or may not crash your browser
<ul>
<li>This tool is provided</li>
<li>Or much in the way of explanation</li>
<li>Without warranty, guarantee</li>
</ul>
</li>
<li>Lock up your machine</li>
</ol>
</section>
</div></div>
<div class="slide" id="InTheMiddle"><div>
<section>
<header>
<h2>In the Middle</h2>
</header>
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 512 512" class="middle">
<path fill="#0174A7" d="m315 259l18-18 179 179v-36l-161-161 18-18 143 143v-36l-125-125 18-18 107 107v-225c0-28-23-51-51-51h-410c-28 0-51 23-51 51v410c0 28 23 51 51 51h191c17-25 14-59-8-81l-63-63-63-63c-55-55-55-145-0-199 55-55 144-55 199 0l9 7h109l-163 163v-107l-9-9c-25-25-66-25-91-0-25 25-25 66 0 91l63 63 63 63c37 37 49 89 37 135h136c28 0 51-23 51-51v-5l-197-197z"/>
</svg>
</section>
</div></div>
<div class="slide cover" id="FitToHeight"><div>
<section>
<header>
<h2>Fit to height</h2>
</header>
<img src="pictures/picture.jpg" alt="">
</section>
</div></div>
<div class="slide cover w" id="FitToWidth"><div>
<section>
<header>
<h2>Fit to width</h2>
</header>
<img src="pictures/picture.jpg" alt="">
</section>
</div></div>
<div class="slide" id="CodeSample"><div>
<section>
<header>
<h2>Code Sample</h2>
</header>
<pre>
<code>&lt;html lang="en-US"&gt;</code>
<code><mark>&lt;head&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>
</section>
</div></div>
<div class="slide" id="CodeNotes"><div>
<section>
<header>
<h2>Code Notes</h2>
</header>
<pre>
<code><mark>&lt;html</mark> lang="en-US"&gt;</code>
</pre>
<p class="note">May or may not crash your browser</p>
<pre>
<code><mark>&lt;meta</mark> charset="<mark>UTF-8</mark>"&gt;</code>
</pre>
<p class="note">Lock up your machine</p>
</section>
</div></div>
<div class="slide shout" id="Shout"><div>
<section>
<header>
<h2>Warning<br>Message</h2>
</header>
</section>
</div></div>
<div class="slide shout" id="Demo"><div>
<section>
<header>
<h2><a href="examples/index.htm" target="_blank">Demo</a></h2>
</header>
</section>
</div></div>
<div class="slide" id="BlockQuote"><div>
<section>
<header>
<h2>Block Quote</h2>
</header>
<blockquote>
<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>
<div class="slide" id="ThankYou"><div>
<section>
<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>
<!--
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
examples/index.htm deleted 100644 → 0
View file @ 6724b0cd
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>Shower</title>
<meta charset="UTF-8">
<style>
BODY {
background:#FFF;
}
H1 {
position:absolute;
top:50%;
left:0;
margin-top:-100px;
width:100%;
color:#000;
text-align:center;
font:bold 150px Georgia, serif;
}
</style>
</head>
<body>
<h1>★ Demo ★</h1>
</body>
</html>
\ No newline at end of file
index.html 0 → 100755
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
license.txt
View file @ b02018f7
......@@ -18,30 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Лицензия MIT
Copyright © 2010–2012 Вадим Макеев, http://pepelsbey.net/
Данная лицензия разрешает лицам, получившим копию данного программного обеспечения
и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»),
безвозмездно использовать Программное Обеспечение без ограничений, включая
неограниченное право на использование, копирование, изменение, добавление,
публикацию, распространение, сублицензирование и/или продажу копий
Программного Обеспечения, также как и лицам, которым предоставляется
данное Программное Обеспечение, при соблюдении следующих условий:
Указанное выше уведомление об авторском праве и данные условия должны быть
включены во все копии или значимые части данного Программного Обеспечения.
ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ,
ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ ГАРАНТИЯМИ ТОВАРНОЙ
ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ ПРАВ.
НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО ИСКАМ
О ВОЗМЕЩЕНИИ УЩЕРБА, УБЫТКОВ ИЛИ ДРУГИХ ТРЕБОВАНИЙ ПО ДЕЙСТВУЮЩИМ КОНТРАКТАМ,
ДЕЛИКТАМ ИЛИ ИНОМУ, ВОЗНИКШИМ ИЗ, ИМЕЮЩИМ ПРИЧИНОЙ ИЛИ СВЯЗАННЫМ С ПРОГРАММНЫМ
ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫМИ ДЕЙСТВИЯМИ
С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ.
\ No newline at end of file
THE SOFTWARE.
\ No newline at end of file
pictures/picture.jpg
View replaced file @ 6724b0cd View file @ b02018f7
pictures/picture.jpg

196 KB | W: | H:

pictures/picture.jpg

147 KB | W: | H:

pictures/picture.jpg
pictures/picture.jpg
pictures/picture.jpg
pictures/picture.jpg
  • 2-up
  • Swipe
  • Onion skin
ru.htm deleted 100755 → 0
View file @ 6724b0cd
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<title>Шаблон презентаций Shower</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=1274, user-scalable=no">
<link rel="stylesheet" href="themes/ribbon/styles/style.css">
<link rel="stylesheet" href="themes/ribbon/styles/print.css" media="print">
<!--
Для оформления отдельный слайдов, используйте
ID слайда для доступа к необходимым элементам
-->
<style>
#Cover h2 {
color:#FFF;
text-align:center;
font-size:70px;
}
#FitToWidth h2,
#FitToHeight h2 {
color:#FFF;
text-align:center;
}
</style>
</head>
<body class="list">
<header class="caption">
<h1>Шаблон презентаций Shower</h1>
<p>Вадим Макеев, Opera Software</p>
</header>
<div class="slide cover" id="Cover"><div>
<section>
<header>
<h2>Шаблон презентации Shower</h2>
</header>
<img src="pictures/cover.jpg" alt="">
</section>
</div></div>
<div class="slide" id="Header"><div>
<section>
<header>
<h2>Заголовок</h2>
</header>
<p>Очередь <code>заведено</code> создаете <strong>те про,</strong> джоэл должен написано вы всю. Получаете отказаться программистов миф мы, <em>не пишете размере</em> количества нее, по две.</p>
<p><a href="examples/index.htm" target="_blank">Эта ссылка откроется в новом окне</a></p>
</section>
</div></div>
<div class="slide" id="TwoLinesHeader"><div>
<section>
<header>
<h2>Две строки.<br>Мощный заголовок</h2>
</header>
<p>Очередь <code>заведено</code> создаете <strong>те про,</strong> джоэл должен написано вы всю. Получаете отказаться программистов миф мы, <em>не пишете размере</em> количества нее, по две.</p>
</section>
</div></div>
<div class="slide" id="UnorderedList"><div>
<section>
<header>
<h2>Неупорядоченный список</h2>
</header>
<ul>
<li>Очередь заведено создаете</li>
<li>Те про, джоэл должен написано вы всю</li>
<li>Получаете отказаться программистов
<ol>
<li>Миф мы, не пишете размере</li>
<li>Количества нее, по две</li>
<li>Заведено безостановочно</li>
</ol>
</li>
<li>Ещё то этой вреде внешних.</li>
</ul>
</section>
</div></div>
<div class="slide" id="OrderedList"><div>
<section>
<header>
<h2>Упорядоченный список</h2>
</header>
<ol>
<li>Миф мы, не пишете размере</li>
<li>Ещё то этой вреде внешних</li>
<li>Заведено безостановочно
<ul>
<li>Очередь заведено создаете</li>
<li>Те про, джоэл должен написано вы всю</li>
<li>Получаете отказаться программистов</li>
</ul>
</li>
<li>Количества нее, по две</li>
</ol>
</section>
</div></div>
<div class="slide" id="InTheMiddle"><div>
<section>
<header>
<h2>Посередине</h2>
</header>
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 512 512" class="middle">
<path fill="#0174A7" d="m315 259l18-18 179 179v-36l-161-161 18-18 143 143v-36l-125-125 18-18 107 107v-225c0-28-23-51-51-51h-410c-28 0-51 23-51 51v410c0 28 23 51 51 51h191c17-25 14-59-8-81l-63-63-63-63c-55-55-55-145-0-199 55-55 144-55 199 0l9 7h109l-163 163v-107l-9-9c-25-25-66-25-91-0-25 25-25 66 0 91l63 63 63 63c37 37 49 89 37 135h136c28 0 51-23 51-51v-5l-197-197z"/>
</svg>
</section>
</div></div>
<div class="slide cover" id="FitToHeight"><div>
<section>
<header>
<h2>Вписана по высоте</h2>
</header>
<img src="pictures/picture.jpg" alt="">
</section>
</div></div>
<div class="slide cover w" id="FitToWidth"><div>
<section>
<header>
<h2>Вписана по ширине</h2>
</header>
<img src="pictures/picture.jpg" alt="">
</section>
</div></div>
<div class="slide" id="CodeSample"><div>
<section>
<header>
<h2>Пример кода</h2>
</header>
<pre>
<code>&lt;html lang="ru-RU"&gt;</code>
<code><mark>&lt;head&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>
</section>
</div></div>
<div class="slide" id="CodeNotes"><div>
<section>
<header>
<h2>Заметки к коду</h2>
</header>
<pre>
<code><mark>&lt;html</mark> lang="ru-RU"&gt;</code>
</pre>
<p class="note">Получаете отказаться программистов</p>
<pre>
<code><mark>&lt;meta</mark> charset="<mark>UTF-8</mark>"&gt;</code>
</pre>
<p class="note">Заведено безостановочно</p>
</section>
</div></div>
<div class="slide shout" id="Shout"><div>
<section>
<header>
<h2>Опасносте<br>сообщение</h2>
</header>
</section>
</div></div>
<div class="slide shout" id="Demo"><div>
<section>
<header>
<h2><a href="examples/index.htm" target="_blank">Демо</a></h2>
</header>
</section>
</div></div>
<div class="slide" id="BlockQuote"><div>
<section>
<header>
<h2>Цитата</h2>
</header>
<blockquote>
<p>Очередь заведено создаете те про, джоэл должен написано вы всю. Получаете отказаться программистов миф мы, не пишете размере количества нее, по две.</p>
</blockquote>
</section>
</div></div>
<div class="slide" id="ThankYou"><div>
<section>
<header>
<h2>Шаблон презентаций Shower</h2>
</header>
<p>Вадим Макеев, 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>
<!--
Для того, чтобы убрать индикатор прогресса
из презентации, просто удалите элемент «progress».
-->
<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/script.js
View file @ b02018f7
window.shower = (function () {
var _ = {},
window.shower = (function(window, document, undefined) {
var shower = {},
url = window.location,
body = document.body,
slides = document.querySelectorAll('div.slide'),
slides = document.querySelectorAll('.slide'),
progress = document.querySelector('div.progress div'),
slideList = [],
timer,
isHistoryApiSupported = !!(window.history && history.pushState),
l = slides.length, i;
/**
* Get value at named data store for the DOM element.
* @private
* @param {domElem} element
* @param {string} name
* @returns {string}
*/
shower._getData = function(element, name) {
return element.dataset ? element.dataset[name] : element.getAttribute('data-' + name);
}
for (i = 0; i < l; i++) {
// Slide ID's are optional. In case of missing ID we set it to the
// slide number
if ( ! slides[i].id) {
slides[i].id = i + 1;
}
slideList.push({
id: slides[i].id,
hasInnerNavigation: null !== slides[i].querySelector('.inner')
hasInnerNavigation: null !== slides[i].querySelector('.next'),
hasTiming: (shower._getData(slides[i], 'timing') && shower._getData(slides[i], 'timing').indexOf(':') !== -1)
});
}
function getTransform() {
/**
* Get slide scale value
* @private
* @returns {String}
*/
shower._getTransform = function() {
var denominator = Math.max(
body.clientWidth / window.innerWidth,
body.clientHeight / window.innerHeight
);
return 'scale(' + (1 / denominator) + ')';
}
function applyTransform(transform) {
};
/**
* Set CSS transform with prefixes to body
* @private
* @returns {true}
*/
shower._applyTransform = function(transform) {
body.style.WebkitTransform = transform;
body.style.MozTransform = transform;
body.style.msTransform = transform;
body.style.OTransform = transform;
body.style.transform = transform;
}
_.next = function () {
var currentSlideNumber = _.getCurrentSlideNumber();
return true;
};
/**
* Show next slide. If slide is last returns false, otherwise return slide
* number which been shown.
* @returns {number|false}
*/
shower.next = function () {
var currentSlideNumber = shower.getCurrentSlideNumber(),
ret;
// Only go to next slide if current slide have no inner
// navigation or inner navigation is fully shown
......@@ -40,188 +78,441 @@ window.shower = (function () {
if (
-1 === currentSlideNumber ||
!slideList[currentSlideNumber].hasInnerNavigation ||
-1 === increaseInnerNavigation(currentSlideNumber)
-1 === shower.increaseInnerNavigation(currentSlideNumber)
) {
currentSlideNumber++;
_.go(currentSlideNumber);
shower.go(currentSlideNumber + 1);
// slides starts from 0
ret = currentSlideNumber + 2;
} else {
ret = false;
}
}
_.previous = function () {
_.go(_.getCurrentSlideNumber() - 1);
}
_.first = function() {
_.go(0)
}
_.last = function() {
_.go(slideList.length - 1);
}
_.enterSlideMode = function() {
body.className = 'full';
applyTransform(getTransform());
}
_.enterListMode = function() {
body.className = 'list';
applyTransform('none');
}
return ret;
};
/**
* Show previous slide. If slide is first returns false, otherwise return slide
* number which been shown.
* @returns {number|false}
*/
shower.previous = function () {
var currentSlideNumber = shower.getCurrentSlideNumber(),
ret;
// slides starts from 0
if (currentSlideNumber > 0) {
ret = currentSlideNumber;
shower.go(currentSlideNumber - 1);
} else {
ret = false;
}
_.getCurrentSlideNumber = function() {
var i, l = slideList.length,
return ret;
};
/**
* Show first slide.
* @returns {number}
*/
shower.first = function() {
return shower.go(0);
};
/**
* Show last slide.
* @returns {number}
*/
shower.last = function() {
return shower.go(slideList.length - 1);
};
/**
* Switch to slide view.
* @returns {number}
*/
shower.enterSlideMode = function() {
// @TODO: check if it's already in slide mode...
body.classList.remove('list');
body.classList.add('full');
return shower._applyTransform(shower._getTransform());
};
/**
* Switch to list view.
* @returns {number}
*/
shower.enterListMode = function() {
// @TODO: check if it's already in list mode...
body.classList.remove('full');
body.classList.add('list');
return shower._applyTransform('none');
};
// @TODO: add method shower.toggleMode()
/**
* Get current slide number. Starts from zero. Warning: when in url you have
* slide number 1 this method will return 0.
* If something wrong return -1.
* @returns {number}
*/
shower.getCurrentSlideNumber = function() {
var i = slideList.length - 1,
currentSlideId = url.hash.substr(1);
for (i = 0; i < l; ++i) {
// As fast as you can ;-)
// http://jsperf.com/for-vs-foreach/46
for (; i >= 0; --i) {
if (currentSlideId === slideList[i].id) {
return i;
}
}
return -1;
}
};
/**
* Check if arg is number.
* @private
* @param {number|whatelse} arg Any type
* @returns {boolean}
*/
shower._isNumber = function(arg) {
if(! ( ! isNaN(parseFloat(arg)) && isFinite(arg))) {
return false;
}
function scrollToSlide(slideNumber) {
if (-1 === slideNumber ) { return; }
return true;
};
var currentSlide = document.getElementById(slideList[slideNumber].id);
/**
* Scroll to slide.
* @param {number} slideNumber slide number (sic!)
* @returns {undefined|boolean}
*/
shower.scrollToSlide = function(slideNumber) {
var currentSlide,
ret;
if (null != currentSlide) {
window.scrollTo(0, currentSlide.offsetTop);
if( ! shower._isNumber(slideNumber)) {
throw new Error('Gimme slide number as number, baby!');
}
}
_.isListMode = function() {
return 'full' !== url.search.substr(1);
}
if( ! shower.isListMode()) {
throw new Error('You can\'t to scroll cause you in slide mode. Please, switch to list mode.');
}
// @TODO: WTF?
if (-1 === slideNumber) {
return;
}
function normalizeSlideNumber(slideNumber) {
if (0 > slideNumber) {
return slideList.length - 1;
} else if (slideList.length <= slideNumber) {
return 0;
if (slideList[slideNumber]) {
currentSlide = document.getElementById(slideList[slideNumber].id);
window.scrollTo(0, currentSlide.offsetTop);
ret = true;
} else {
return slideNumber;
throw new Error('There is no slide with number ' + slideNumber);
}
}
_.updateProgress = function(slideNumber) {
if (null === progress) { return; }
progress.style.width = (100 / (slideList.length - 1) * normalizeSlideNumber(slideNumber)).toFixed(2) + '%';
}
return ret;
};
/**
* Chech if it's list mode.
* @returns {boolean}
*/
shower.isListMode = function() {
return isHistoryApiSupported ? 'full' !== url.search.substr(1) : body.classList.contains('list');
};
/**
* Normalize slide number.
* @private
* @param {number} slideNumber slide number (sic!)
* @returns {number}
*/
shower._normalizeSlideNumber = function(slideNumber) {
if( ! shower._isNumber(slideNumber)) {
throw new Error('Gimme slide number as number, baby!');
}
_.getSlideHash = function(slideNumber) {
return '#' + slideList[normalizeSlideNumber(slideNumber)].id;
}
if (slideNumber < 0) {
slideNumber = 0;
}
_.go = function(slideNumber) {
url.hash = _.getSlideHash(slideNumber);
if (slideNumber >= slideList.length) {
slideNumber = slideList.length - 1;
}
if (!_.isListMode()) {
_.updateProgress(slideNumber);
return slideNumber;
};
/**
* Update progress bar.
* @param {number} slideNumber slide number (sic!)
* @returns {boolean}
*/
shower.updateProgress = function(slideNumber) {
// if progress bar doesn't exist
if (null === progress) {
return false;
}
if (typeof _.onchange == 'function')
_.onchange(slideNumber);
}
if( ! shower._isNumber(slideNumber)) {
throw new Error('Gimme slide number as number, baby!');
}
function getContainingSlideId(el) {
var node = el;
while ('BODY' !== node.nodeName && 'HTML' !== node.nodeName) {
if (node.classList.contains('slide')) {
return node.id;
progress.style.width = (100 / (slideList.length - 1) * shower._normalizeSlideNumber(slideNumber)).toFixed(2) + '%';
return true;
};
/**
* Update current and passed slides.
* @param {number} slideNumber slide number (sic!)
* @returns {boolean}
*/
shower.updateCurrentAndPassedSlides = function(slideNumber) {
var i,
slide,
l = slideList.length;
slideNumber = shower._normalizeSlideNumber(slideNumber);
if( ! shower._isNumber(slideNumber)) {
throw new Error('Gimme slide number as number, baby!');
}
for (i = 0; i < l; ++i) {
slide = document.getElementById(slideList[i].id);
if (i < slideNumber) {
slide.classList.remove('current');
slide.classList.add('passed');
} else if (i > slideNumber) {
slide.classList.remove('passed');
slide.classList.remove('current');
} else {
slide.classList.remove('passed');
slide.classList.add('current');
}
}
return true;
};
/**
* Get slide hash.
* @param {number} slideNumber slide number (sic!). Attention: starts from zero.
* @returns {boolean}
*/
shower.getSlideHash = function(slideNumber) {
if( ! shower._isNumber(slideNumber)) {
throw new Error('Gimme slide number as number, baby!');
}
slideNumber = shower._normalizeSlideNumber(slideNumber);
return '#' + slideList[slideNumber].id;
};
/**
* Go to slide number...
* @param {number} slideNumber slide number (sic!). Attention: starts from zero.
* @returns {number}
*/
shower.go = function(slideNumber) {
if( ! shower._isNumber(slideNumber)) {
throw new Error('Gimme slide number as number, baby!');
}
url.hash = shower.getSlideHash(slideNumber);
if ( ! shower.isListMode()) {
shower.updateProgress(slideNumber);
shower.updateCurrentAndPassedSlides(slideNumber);
}
return slideNumber;
};
/**
* Get containing slide id.
* @private
* @param {domElem} el
* @returns {string}
*/
shower._getContainingSlideId = function(el) {
while ('BODY' !== el.nodeName && 'HTML' !== el.nodeName) {
if (el.classList.contains('slide')) {
return el.id;
} else {
node = node.parentNode;
el = el.parentNode;
}
}
return '';
}
};
/**
* Dispatch single slide mode.
* @TODO: Renaming needed? Or just some handlers rewriting?
* @private
* @param {domElem} e
* @returns {undefined}
*/
shower._dispatchSingleSlideMode = function(e) {
// Process links
// @TODO: presentation links support
if ('A' === e.target.nodeName) {
e.preventDefault();
function dispatchSingleSlideMode(e) {
var slideId = getContainingSlideId(e.target);
window.open(e.target.getAttribute('href'));
return;
}
if ('' !== slideId && _.isListMode()) {
var slideId = shower._getContainingSlideId(e.target);
if ('' !== slideId && shower.isListMode()) {
e.preventDefault();
// NOTE: we should update hash to get things work properly
url.hash = '#' + slideId;
history.replaceState(null, null, url.pathname + '?full#' + slideId);
_.enterSlideMode();
if (isHistoryApiSupported)
history.replaceState(null, null, url.pathname + '?full#' + slideId);
shower.enterSlideMode();
_.updateProgress(_.getCurrentSlideNumber());
shower.updateProgress(shower.getCurrentSlideNumber());
shower.updateCurrentAndPassedSlides(shower.getCurrentSlideNumber());
shower.runSlideshowIfPresented(shower.getCurrentSlideNumber());
}
}
// Increases inner navigation by adding 'active' class to next inactive inner navigation item
function increaseInnerNavigation(slideNumber) {
// Shortcut for slides without inner navigation
if (true !== slideList[slideNumber].hasInnerNavigation) { return -1; }
return;
};
/**
* Run slide show in presented.
* @param {number} slideNumber
* @returns {undefined}
*/
shower.runSlideshowIfPresented = function(slideNumber) {
if( ! shower._isNumber(slideNumber)) {
throw new Error('Gimme slide number as number, baby!');
}
var activeNodes = document.querySelectorAll(_.getSlideHash(slideNumber) + ' .active'),
// NOTE: we assume there is no other elements in inner navigation
node = activeNodes[activeNodes.length - 1].nextElementSibling;
slideNumber = shower._normalizeSlideNumber(slideNumber);
if (null !== node) {
node.classList.add('active');
return activeNodes.length + 1;
} else {
return -1;
clearTimeout(timer);
if (slideList[slideNumber].hasTiming) {
// Compute number of milliseconds from format "X:Y", where X is
// number of minutes, and Y is number of seconds
var timing = shower._getData(document.getElementById(slideList[slideNumber].id), 'timing').split(':');
timing = parseInt(timing[0], 10) * 60 * 1000 + parseInt(timing[1], 10) * 1000;
timer = setTimeout(function() {
shower.go(slideNumber + 1);
shower.runSlideshowIfPresented(slideNumber + 1);
},
timing);
}
};
/**
* Increases inner navigation by adding 'active' class to next inactive inner navigation item
* @param {number} slideNumber
* @returns {number}
*/
shower.increaseInnerNavigation = function(slideNumber) {
var nextNodes,
node,
ret = -1;
if( ! shower._isNumber(slideNumber)) {
throw new Error('Gimme slide number as number, baby!');
}
// If inner navigation in this slide...
if (slideList[slideNumber].hasInnerNavigation) {
nextNodes = document.getElementById(slideList[slideNumber].id).querySelectorAll('.next:not(.active)');
if (0 !== nextNodes.length) {
node = nextNodes[0];
node.classList.add('active');
ret = nextNodes.length - 1;
}
}
}
return ret;
};
// Event handlers
window.addEventListener('DOMContentLoaded', function () {
if (!_.isListMode()) {
if ( ! shower.isListMode()) {
// "?full" is present without slide hash, so we should display first slide
if (-1 === _.getCurrentSlideNumber()) {
history.replaceState(null, null, url.pathname + '?full' + _.getSlideHash(0));
if (-1 === shower.getCurrentSlideNumber()) {
if (isHistoryApiSupported)
history.replaceState(null, null, url.pathname + '?full' + shower.getSlideHash(0));
}
_.enterSlideMode();
_.updateProgress(_.getCurrentSlideNumber());
shower.enterSlideMode();
shower.updateProgress(shower.getCurrentSlideNumber());
shower.updateCurrentAndPassedSlides(shower.getCurrentSlideNumber());
shower.runSlideshowIfPresented(shower.getCurrentSlideNumber());
}
}, false);
window.addEventListener('popstate', function (e) {
if (_.isListMode()) {
_.enterListMode();
scrollToSlide(_.getCurrentSlideNumber());
if (shower.isListMode()) {
shower.enterListMode();
shower.scrollToSlide(shower.getCurrentSlideNumber());
} else {
_.enterSlideMode();
shower.enterSlideMode();
}
}, false);
window.addEventListener('resize', function (e) {
if (!_.isListMode()) {
applyTransform(getTransform());
if ( ! shower.isListMode()) {
shower._applyTransform(shower._getTransform());
}
}, false);
document.addEventListener('keydown', function (e) {
// Shortcut for alt, shift and meta keys
if (e.altKey || e.ctrlKey || e.metaKey) { return; }
var currentSlideNumber = _.getCurrentSlideNumber();
var currentSlideNumber = shower.getCurrentSlideNumber(),
innerNavigationCompleted = true;
switch (e.which) {
case 116: // F5
case 13: // Enter
if (_.isListMode() && -1 !== currentSlideNumber) {
if (shower.isListMode() && -1 !== currentSlideNumber) {
e.preventDefault();
history.pushState(null, null, url.pathname + '?full' + _.getSlideHash(currentSlideNumber));
_.enterSlideMode();
if (isHistoryApiSupported)
history.pushState(null, null, url.pathname + '?full' + shower.getSlideHash(currentSlideNumber));
shower.enterSlideMode();
_.updateProgress(currentSlideNumber);
shower.updateProgress(currentSlideNumber);
shower.updateCurrentAndPassedSlides(currentSlideNumber);
shower.runSlideshowIfPresented(currentSlideNumber);
}
break;
case 27: // Esc
if (!_.isListMode()) {
if ( ! shower.isListMode()) {
e.preventDefault();
history.pushState(null, null, url.pathname + _.getSlideHash(currentSlideNumber));
_.enterListMode();
scrollToSlide(currentSlideNumber);
if (isHistoryApiSupported)
history.pushState(null, null, url.pathname + shower.getSlideHash(currentSlideNumber));
shower.enterListMode();
shower.scrollToSlide(currentSlideNumber);
}
break;
......@@ -231,7 +522,7 @@ window.shower = (function () {
case 72: // h
case 75: // k
e.preventDefault();
_.previous();
shower.previous();
break;
case 34: // PgDown
......@@ -241,24 +532,46 @@ window.shower = (function () {
case 74: // j
e.preventDefault();
_.next();
if ( ! shower.isListMode()) {
// Inner navigation is "completed" if current slide have
// no inner navigation or inner navigation is fully shown
innerNavigationCompleted = !slideList[currentSlideNumber].hasInnerNavigation ||
-1 === shower.increaseInnerNavigation(currentSlideNumber);
} else {
// Also inner navigation is always "completed" if we are in
// list mode
innerNavigationCompleted = true;
}
// NOTE: First of all check if there is no current slide
if (
-1 === currentSlideNumber || innerNavigationCompleted
) {
currentSlideNumber++;
shower.go(currentSlideNumber);
// We must run slideshow only in full mode
if ( ! shower.isListMode()) {
shower.runSlideshowIfPresented(currentSlideNumber);
}
}
break;
case 36: // Home
e.preventDefault();
_.first();
shower.first();
break;
case 35: // End
e.preventDefault();
_.last();
shower.last();
break;
case 9: // Tab = +1; Shift + Tab = -1
case 32: // Space = +1; Shift + Space = -1
e.preventDefault();
_[e.shiftKey ? 'previous' : 'next']();
shower[e.shiftKey ? 'previous' : 'next']();
break;
default:
......@@ -266,12 +579,12 @@ window.shower = (function () {
}
}, false);
document.addEventListener('click', dispatchSingleSlideMode, false);
document.addEventListener('touchend', dispatchSingleSlideMode, false);
document.addEventListener('click', shower._dispatchSingleSlideMode, false);
document.addEventListener('touchend', shower._dispatchSingleSlideMode, false);
document.addEventListener('touchstart', function (e) {
if (!_.isListMode()) {
var currentSlideNumber = _.getCurrentSlideNumber(),
if ( ! shower.isListMode()) {
var currentSlideNumber = shower.getCurrentSlideNumber(),
x = e.touches[0].pageX;
if (x > window.innerWidth / 2) {
currentSlideNumber++;
......@@ -279,15 +592,16 @@ window.shower = (function () {
currentSlideNumber--;
}
_.go(currentSlideNumber);
shower.go(currentSlideNumber);
}
}, false);
document.addEventListener('touchmove', function (e) {
if (!_.isListMode()) {
if ( ! shower.isListMode()) {
e.preventDefault();
}
}, false);
return _;
}());
return shower;
})(this, this.document);
themes/ribbon/fonts/PTSans.Narrow.svg deleted 100644 → 0
View file @ 6724b0cd
This source diff could not be displayed because it is too large. You can view the blob instead.
themes/ribbon/fonts/TargetBlank.svg deleted 100644 → 0
View file @ 6724b0cd
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
Designer: Vadim Makeev
</metadata>
<defs>
<font id="TargetBlank" horiz-adv-x="500" >
<font-face units-per-em="1000" ascent="800" descent="-200" />
<missing-glyph horiz-adv-x="500" />
<glyph unicode=" "/>
<glyph unicode="^" horiz-adv-x="600" d="M300 700h300v-300h-80v160l-262 -262l-57 56l265 266h-166v80zM420 80v220h80v-300h-500v600h200v-80h-120v-440h340z"/>
</font>
</defs>
</svg>
\ No newline at end of file
themes/ribbon/images/ribbon.svg
View file @ b02018f7
<?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 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 0 → 100644
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 0 → 100644
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.css → themes/ribbon/styles/fonts.scss
View file @ b02018f7
/* PTSans */
/* PT Sans */
@font-face {
font-family:'PT Sans';
src:local('PT Sans'), local('PTSansRegular'),
url(../fonts/PTSans.woff) format('woff'),
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:local('PT Sans Bold'), local('PTSansBold'),
url(../fonts/PTSans.Bold.woff) format('woff'),
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:local('PT Sans Italic'), local('PTSansItalic'),
url(../fonts/PTSans.Italic.woff) format('woff'),
src:url(../fonts/PTSans.Italic.woff) format('woff'),
url(../fonts/PTSans.Italic.ttf) format('truetype'),
url(../fonts/PTSans.Italic.svg#PTSans-Italic) format('svg');
}
......@@ -26,23 +23,14 @@
font-style:italic;
font-weight:bold;
font-family:'PT Sans';
src:local('PT Sans Bold Italic'), local('PTSansBoldItalic'),
url(../fonts/PTSans.Bold.Italic.woff) format('woff'),
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';
src:local('PT Sans Narrow'), local('PTSansNarrow'),
url(../fonts/PTSans.Narrow.woff) format('woff'),
url(../fonts/PTSans.Narrow.ttf) format('truetype'),
url(../fonts/PTSans.Narrow.svg#PTSans-Narrow) format('svg');
}
@font-face {
font-family:'PT Sans Narrow';
font-weight:bold;
src:local('PT Sans Narrow Bold'), local('PTSansNarrowBold'),
url(../fonts/PTSans.Narrow.Bold.woff) format('woff'),
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');
}
......@@ -50,15 +38,7 @@
/* PT Mono */
@font-face {
font-family:'PT Mono';
src:local('PT Mono'), local('PTMonoRegular'),
url(../fonts/PTMono.woff) format('woff'),
src:url(../fonts/PTMono.woff) format('woff'),
url(../fonts/PTMono.ttf) format('truetype'),
url(../fonts/PTMono.svg#PTMono) format('svg');
}
/* Linker */
@font-face {
font-family:'Target Blank';
src:url(../fonts/TargetBlank.otf) format('opentype'),
url(../fonts/TargetBlank.svg#TargetBlank) format('svg');
}
\ No newline at end of file
themes/ribbon/styles/print.css
View file @ b02018f7
/*
Ribbon theme for Shower presentation template: http://github.com/pepelsbey/shower
Copyright © 2010–2012 Vadim Makeev, http://pepelsbey.net/
Licensed under MIT license: https://github.com/pepelsbey/shower/wiki/License
*/
* { -webkit-print-color-adjust:exact }
@page {
margin:0;
size:1024px 640px;
}
/* List
---------------------------------------- */
.list {
float:none;
padding:0;
background:none;
}
/* Caption */
.list .caption {
display:none;
}
/* Slide */
.list .slide {
float:none;
margin:0;
padding:0;
}
.list .slide:after {
position:absolute;
bottom:85px;
left:120px;
color:#BBB;
line-height:1;
text-shadow:none;
}
.list .slide > div {
width:1024px;
height:640px;
background:none;
}
.list .slide > div,
.list .slide > div:hover,
.list .slide:target > div {
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}
.list .slide section {
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
}
\ No newline at end of file
@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 0 → 100644
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/screen.css 0 → 100644
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 0 → 100644
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
themes/ribbon/styles/style.css deleted 100644 → 0
View file @ 6724b0cd
/*
Ribbon theme for Shower presentation template: http://github.com/pepelsbey/shower
Copyright © 2010–2012 Vadim Makeev, http://pepelsbey.net/
Licensed under MIT license: https://github.com/pepelsbey/shower/wiki/License
*/
@import url(fonts.css);
@import url(reset.css);
BODY {
font:25px/1.8 'PT Sans', sans-serif;
counter-reset:paging;
}
/* Slide
---------------------------------------- */
.slide:after {
counter-increment:paging;
content:counter(paging, decimal-leading-zero);
}
.slide section {
padding:80px 120px 0;
width:784px;
height:560px;
background:#FFF;
color:#000;
}
.slide section:before {
position:absolute;
top:0;
right:120px;
width:40px;
height:120px;
background:url(../images/ribbon.svg) no-repeat;
content:'';
}
/* 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 p.note {
color:#888;
}
.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;
color:#000;
-webkit-tab-size:4;
-moz-tab-size:4;
-o-tab-size:4;
tab-size:4;
font-family:'PT 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 */
}
/* 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 mark {
padding:3px 8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
background:#FAFAA2;
color:#000;
font-style:normal;
}
.slide pre .important {
background:#C00;
color:#FFF;
font-weight:normal;
}
.slide pre .comment {
padding:0;
background:none;
color:#888;
}
/* Cover */
.slide.cover section {
background:#000;
overflow:hidden;
}
.slide.cover section:before {
display:none;
}
.slide.cover img,
.slide.cover svg,
.slide.cover video,
.slide.cover object {
position:absolute;
top:0;
left:50%;
z-index:-1;
height:100%;
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-ms-transform:translateX(-50%);
-o-transform:translateX(-50%);
transform:translateX(-50%);
}
.slide.cover.w img,
.slide.cover.w svg,
.slide.cover.w video,
.slide.cover.w object {
top:50%;
left:0;
width:100%;
height:auto;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-ms-transform:translateY(-50%);
-o-transform:translateY(-50%);
transform:translateY(-50%);
}
/* Shout */
.slide.shout section:before {
display: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.shout h2 a[target=_blank] {
margin:0;
}
.slide.shout h2 a[target=_blank]:after {
content:'';
}
/* Middle */
.middle {
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
-o-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
/* List
---------------------------------------- */
.list {
float:left;
padding:80px 0 80px 100px;
background:#585A5E url(../images/linen.png);
}
/* Caption */
.list .caption {
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;
}
/* Slide */
.list .slide {
position:relative;
float:left;
margin:0 50px 0 0;
padding:80px 0 0;
}
.list .slide:after {
position:absolute;
bottom:-45px;
left:60px;
color:#3C3D40;
text-shadow:0 1px 1px #8D8E90;
line-height:1;
font-weight:bold;
font-size:25px;
}
.list .slide:target:after {
text-shadow:0 -1px 1px #1F3F60;
color:#4B86C2;
}
.list .slide > div {
position:relative;
overflow:hidden;
width:512px;
height:320px;
box-shadow:0 0 50px #3C3D40;
border-radius:1px;
background:rgba(0, 0, 0, 0.3);
}
.list .slide > div:hover {
box-shadow:
0 0 0 10px rgba(60, 61, 64, 0.6),
0 0 50px #3C3D40;
}
.list .slide:target > div {
box-shadow:
0 0 0 1px #305F8D,
0 0 0 10px #3C7CBD,
0 0 50px #3C3D40;
}
.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:'';
}
/* Small */
@media all and (max-width:1274px) {
.list .slide:after {
left:30px;
}
.list .slide > div {
width:256px;
height:160px;
}
.list .slide section {
-webkit-transform:scale(0.25);
-moz-transform:scale(0.25);
-ms-transform:scale(0.25);
-o-transform:scale(0.25);
transform:scale(0.25);
}
}
/* Full
---------------------------------------- */
.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;
visibility:hidden;
}
.full .slide:target {
visibility:visible;
}
.full .slide:after {
position:absolute;
bottom:85px;
left:120px;
color:#BBB;
line-height:1;
}
.full .slide section {
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
}
.full .slide.cover {
z-index:1;
}
.full .slide.cover:after,
.full .slide.shout:after {
content:'';
}
/* Progress */
.full .progress {
position:absolute;
right:118px;
bottom:49px;
left:118px;
border-radius:7px;
border:2px solid rgba(255, 255, 255, 0.2);
}
.full .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;
}
.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