Revert "Removed useless files [#CLICKHOUSE-3]."
This reverts commit 1b5c668d91
.
21
doc/presentations/evolution/shower/themes/ribbon/LICENSE.md
Normal file
@ -0,0 +1,21 @@
|
||||
# The MIT License
|
||||
|
||||
Copyright © 2010–2016 Vadim Makeev, http://pepelsbey.net/
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 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–2016 Вадим Макеев, http://pepelsbey.net/
|
||||
|
||||
Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, добавление, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, также как и лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий:
|
||||
|
||||
Указанное выше уведомление об авторском праве и данные условия должны быть включены во все копии или значимые части данного Программного Обеспечения.
|
||||
|
||||
ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ ГАРАНТИЯМИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ ПРАВ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО ИСКАМ О ВОЗМЕЩЕНИИ УЩЕРБА, УБЫТКОВ ИЛИ ДРУГИХ ТРЕБОВАНИЙ ПО ДЕЙСТВУЮЩИМ КОНТРАКТАМ, ДЕЛИКТАМ ИЛИ ИНОМУ, ВОЗНИКШИМ ИЗ, ИМЕЮЩИМ ПРИЧИНОЙ ИЛИ СВЯЗАННЫМ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫМИ ДЕЙСТВИЯМИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ.
|
41
doc/presentations/evolution/shower/themes/ribbon/README.md
Normal file
@ -0,0 +1,41 @@
|
||||
# Ribbon theme for Shower [![Build Status](https://travis-ci.org/shower/ribbon.svg?branch=master)](https://travis-ci.org/shower/ribbon)
|
||||
|
||||
![Ribbon screen shot](pictures/canvas.png)
|
||||
|
||||
Default theme for the [Shower](https://github.com/shower/shower/) presentation engine. Doesn’t include engine itself. [See it in action](http://shwr.me/shower/themes/ribbon/). Follow [@shower_me](https://twitter.com/shower_me) for support and updates, [file an issue](https://github.com/shower/shower/issues/new) if you have any.
|
||||
|
||||
## Usage
|
||||
|
||||
Get the Shower template where Ribbon is already included. Download the [template archive](http://shwr.me/shower.zip) or install the package:
|
||||
|
||||
npm install shower
|
||||
|
||||
If you want to install Ribbon separately you can download the [theme archive](http://shwr.me/ribbon.zip) or install the package:
|
||||
|
||||
npm install shower-ribbon
|
||||
|
||||
## Features
|
||||
|
||||
All theme’s features are demonstrated in the [index.html](index.html) file. Use it as a reference while building your presentation. See more detailed [features overview](https://github.com/shower/shower/blob/master/docs/features-en.md).
|
||||
|
||||
## Ratios
|
||||
|
||||
Ribbon theme supports two slide ratios: wide 16×10 (default) and taller 4×3. To change the slide’s ratio include one of the pre-built `screen-16x10.css` or `screen-4x3.css` files in the `<head>` of your presentation.
|
||||
|
||||
## PDF
|
||||
|
||||
Ribbon could be exported to PDF by printing it from the list mode in Chrome or Opera browsers. See [printing documentation](https://github.com/shower/shower/blob/master/docs/printing-en.md) for more options.
|
||||
|
||||
## Development
|
||||
|
||||
If you want to adjust theme for your needs:
|
||||
|
||||
1. Fork this repository and clone it to your local machine.
|
||||
2. Install dependencies: `npm install`.
|
||||
3. Start a local server with watcher: `npm run dev` or just `gulp` if you have it installed globally.
|
||||
4. Edit your files and see changes in the opened browser.
|
||||
|
||||
To take part in Ribbon development please read [contributing guidelines](CONTRIBUTING.md) first and [file an issue](https://github.com/shower/shower/issues/new) before sending any pull request.
|
||||
|
||||
---
|
||||
Licensed under [MIT License](LICENSE.md).
|
304
doc/presentations/evolution/shower/themes/ribbon/index.html
Normal file
@ -0,0 +1,304 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Ribbon theme for Shower</title>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="stylesheet" href="styles/screen-16x10.css">
|
||||
</head>
|
||||
<body class="shower list">
|
||||
<header class="caption">
|
||||
<h1>Presentation Title</h1>
|
||||
<p><a href="">Yours Truly</a>, Famous Inc.</p>
|
||||
</header>
|
||||
<section class="slide">
|
||||
<h2>Slide Header</h2>
|
||||
<p>Echo Park 8-bit sustainable umami deep v Kickstarter. DIY cliche typewriter brunch, Odd Future sriracha pickled aesthetic. Farm-to-table bespoke fingerstache, kale chips umami brunch letterpress.</p>
|
||||
<p>Whatever authentic disrupt, you probably haven't heard of them direct trade mlkshk Etsy. Gluten-free roof party plaid four loko quinoa.</p>
|
||||
<p class="note">Echo Park 8-bit sustainable umami deep v Kickstarter.</p>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Inline Elements</h2>
|
||||
<p>Retro meh brunch <a href="">aesthetic</a> Cosby sweater Shoreditch. Banksy Tumblr <strong>sriracha</strong>, flexitarian pug chia master cleanse vinyl <em>wayfarers</em> fanny pack bespoke Helvetica <b>roof</b> party. Messenger bag retro cred <i>Portland</i> next level. Yr stumptown Schlitz Carles deep v small batch. Hella sustainable messenger bag, <mark>leggings</mark> skateboard literally<sup>1</sup> bicycle rights H<sub>2</sub>0 mumblecore banh mi DIY VHS. Semiotics four loko street art asymmetrical. Asymmetrical <code><paleo></code> you probably haven’t heard of.</p>
|
||||
<footer class="footer">
|
||||
<p>Retro meh brunch <a href="">aesthetic</a> Cosby sweater Shoreditch. Banksy Tumblr <strong>sriracha</strong>, flexitarian pug chia master cleanse vinyl <em>wayfarers</em> fanny pack bespoke Helvetica <b>roof</b> party. Messenger bag retro cred <i>Portland</i> next level. Yr stumptown Schlitz Carles deep v small batch. Hella sustainable messenger bag, <mark>leggings</mark> skateboard literally<sup>1</sup> bicycle rights H<sub>2</sub>0 mumblecore banh mi DIY VHS. Semiotics four loko street art asymmetrical. Asymmetrical <code><paleo></code> you probably haven’t heard of.</p>
|
||||
</footer>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Quotes</h2>
|
||||
<blockquote>
|
||||
<p>Flannel bicycle rights locavore selfies skateboard. Authentic fanny pack paleo four loko bespoke. Artisan tattooed chia XOXO ennui, lomo disrupt 8-bit art party Tumblr scenester.</p>
|
||||
</blockquote>
|
||||
<figure>
|
||||
<blockquote>
|
||||
<p>Post-ironic fashion axe flexitarian, Tonx narwhal messenger bag Tumblr. Portland gentrify deep v kale chips literally.</p>
|
||||
</blockquote>
|
||||
<figcaption>Yours Truly</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Nested Lists</h2>
|
||||
<ol>
|
||||
<li>Literally viral vegan, ugh drinking vinegar photo booth</li>
|
||||
<li>Wes Anderson chillwave Marfa pour-over Etsy banh mi</li>
|
||||
<li>Ethnic polaroid lo-fi iPhone ennui
|
||||
<ul>
|
||||
<li>Yr wayfarers before they sold out Kickstarter asymmetrical</li>
|
||||
<li>Irony flexitarian readymade quinoa, kogi bespoke meggings narwhal</li>
|
||||
<li>Skateboard Etsy twee artisan Echo Park</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Tonx kitsch fingerstache readymade, retro single-origin coffee</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Block Lists</h2>
|
||||
<ul>
|
||||
<li>Retro meh brunch aesthetic Cosby sweater Shoreditch. Banksy Tumblr sriracha, flexitarian pug chia master cleanse vinyl wayfarers fanny pack.</li>
|
||||
<li>Messenger bag retro cred Portland next level. Yr stumptown Schlitz Carles deep v small batch. Hella sustainable messenger bag.</li>
|
||||
<li>Leggings skateboard literally1 bicycle rights H20 mumblecore banh mi DIY VHS. Semiotics four loko street art asymmetrical. Asymmetrical paleo you probably haven’t heard of.</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Latin and Cyrillic List Bullets</h2>
|
||||
<ul lang="en">
|
||||
<li>Occupy locavore blog, mustache you probably haven't heard of them</li>
|
||||
<li>Skateboard pork belly aesthetic hoodie selfies brunch</li>
|
||||
<li>Food truck gluten-free disrupt Portland</li>
|
||||
</ul>
|
||||
<ul lang="ru">
|
||||
<li>Helvetica narwhal drinking vinegar chillwave, post-ironic ennui</li>
|
||||
<li>Cray pug paleo retro, Echo Park narwhal Wes Anderson</li>
|
||||
<li>Disrupt Williamsburg fixie, shabby chic bicycle rights hashtag kogi</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="slide grid">
|
||||
<h2>Two Columns</h2>
|
||||
<p class="double">Echo Park 8-bit sustainable umami deep v Kickstarter. DIY cliche typewriter brunch, Odd Future sriracha pickled aesthetic. Farm-to-table bespoke fingerstache, kale chips umami brunch American Apparel letterpress. Whatever authentic disrupt, you probably haven't heard of them direct trade mlkshk Etsy. Gluten-free roof party plaid American Apparel four loko quinoa. Echo Park 8-bit sustainable.</p>
|
||||
</section>
|
||||
<section class="slide grid">
|
||||
<h2>Three Columns</h2>
|
||||
<p class="triple">Echo Park 8-bit sustainable umami deep v Kickstarter. DIY cliche typewriter brunch, Odd Future sriracha pickled aesthetic. Farm-to-table bespoke fingerstache, kale chips umami brunch American Apparel letterpress. Whatever authentic disrupt, you probably haven't heard of them direct trade mlkshk Etsy. Gluten-free roof party plaid American Apparel four loko quinoa. Echo Park 8-bit sustainable.</p>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Simple Table</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<th scope="col">Gentrify</th>
|
||||
<th>Twee</th>
|
||||
<th>Artisan</th>
|
||||
<th>Banksy</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Messenger</th>
|
||||
<td>Mixtape</td>
|
||||
<td>Small batch</td>
|
||||
<td>Bicycle rights</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Meggings</th>
|
||||
<td>Freegan</td>
|
||||
<td>Retro biodiesel</td>
|
||||
<td>Slow-carb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Vegan</th>
|
||||
<td>Occupy</td>
|
||||
<td>Normcore</td>
|
||||
<td>Put a bird on it</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Next level</th>
|
||||
<td>Selfies</td>
|
||||
<td>Sustainable</td>
|
||||
<td>Organic</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Umami</th>
|
||||
<td>Asymmetrical</td>
|
||||
<td>Keytar</td>
|
||||
<td>Craft beer</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Biodiesel</th>
|
||||
<td>Haven’t heard</td>
|
||||
<td>Skateboard</td>
|
||||
<td>Farm-to-table</td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Striped Table</h2>
|
||||
<table class="striped">
|
||||
<tr>
|
||||
<th scope="col">Gentrify</th>
|
||||
<th>Twee</th>
|
||||
<th>Artisan</th>
|
||||
<th>Banksy</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Messenger</th>
|
||||
<td>Mixtape</td>
|
||||
<td>Small batch</td>
|
||||
<td>Bicycle rights</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Meggings</th>
|
||||
<td>Freegan</td>
|
||||
<td>Retro biodiesel</td>
|
||||
<td>Slow-carb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Vegan</th>
|
||||
<td>Occupy</td>
|
||||
<td>Normcore</td>
|
||||
<td>Put a bird on it</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Next level</th>
|
||||
<td>Selfies</td>
|
||||
<td>Sustainable</td>
|
||||
<td>Organic</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Umami</th>
|
||||
<td>Asymmetrical</td>
|
||||
<td>Keytar</td>
|
||||
<td>Craft beer</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Biodiesel</th>
|
||||
<td>Haven’t heard</td>
|
||||
<td>Skateboard</td>
|
||||
<td>Farm-to-table</td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Plain Code Listing</h2>
|
||||
<pre><code><html lang="en">
|
||||
<mark><head></mark> <span class="comment"><!--Comment--></span>
|
||||
<title>Shower</title>
|
||||
<meta charset="<mark class="important">UTF-8</mark>">
|
||||
<link rel="stylesheet" href="screen.css">
|
||||
<script src="script.js"></script>
|
||||
<mark></head></mark></code></pre>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Numbered Code Listing</h2>
|
||||
<pre>
|
||||
<code><html lang="en"></code>
|
||||
<code><mark><head></mark> <span class="comment"><!--Comment--></span></code>
|
||||
<code> <title>Shower</title></code>
|
||||
<code> <meta charset="<mark class="important">UTF-8</mark>"></code>
|
||||
<code> <link rel="stylesheet" href="screen.css"></code>
|
||||
<code> <script src="script.js"></script></code>
|
||||
<code><mark></head></mark></code>
|
||||
</pre>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Highlighted Code Lines</h2>
|
||||
<pre>
|
||||
<code><html lang="en"></code>
|
||||
<code class="mark"><head> <span class="comment"><!--Comment--></span></code>
|
||||
<code> <title>Shower</title></code>
|
||||
<code> <meta charset="<mark class="important">UTF-8</mark>"></code>
|
||||
<code> <link rel="stylesheet" href="screen.css"></code>
|
||||
<code> <script src="script.js"></script></code>
|
||||
<code class="mark"></head></code>
|
||||
</pre>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Hidden Code Steps</h2>
|
||||
<pre>
|
||||
<code class="next"><html lang="en"></code>
|
||||
<code class="next"><mark><head></mark> <span class="comment"><!--Comment--></span></code>
|
||||
<code class="next"> <title>Shower</title></code>
|
||||
<code class="next"> <meta charset="<mark class="important">UTF-8</mark>"></code>
|
||||
<code class="next"> <link rel="stylesheet" href="screen.css"></code>
|
||||
<code class="next"> <script src="script.js"></script></code>
|
||||
<code class="next"><mark></head></mark></code>
|
||||
</pre>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Highlighted Code Steps</h2>
|
||||
<pre>
|
||||
<code class="mark next"><html lang="en"></code>
|
||||
<code><head> <span class="comment"><!--Comment--></span></code>
|
||||
<code class="mark next"> <title>Shower</title></code>
|
||||
<code> <meta charset="<mark class="important">UTF-8</mark>"></code>
|
||||
<code class="mark next"> <link rel="stylesheet" href="screen.css"></code>
|
||||
<code> <script src="script.js"></script></code>
|
||||
<code class="mark next"></head></code>
|
||||
</pre>
|
||||
</section>
|
||||
<section class="slide grid">
|
||||
<h2>Grid Slide</h2>
|
||||
</section>
|
||||
<section class="slide white">
|
||||
<h2>White Slide</h2>
|
||||
</section>
|
||||
<section class="slide black">
|
||||
<h2>Black Slide</h2>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2 class="shout">Shout</h2>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2 class="shout">Multiline<br>Shout</h2>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2 class="shout"><a href="">Linked Shout</a></h2>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2 class="shout grow">Growing Shout</h2>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2 class="shout shrink">Shrinking Shout</h2>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<figure>
|
||||
<img class="cover" src="pictures/exact.png" alt="">
|
||||
<figcaption class="white">Copyright © 2016 <a href="">Yours Truly</a>, Famous Inc.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<img class="cover" src="pictures/tall.png" alt="">
|
||||
</section>
|
||||
<section class="slide">
|
||||
<img class="cover" src="pictures/wide.png" alt="">
|
||||
</section>
|
||||
<section class="slide white">
|
||||
<img class="place top left" src="pictures/square.png" alt="">
|
||||
<img class="place top" src="pictures/square.png" alt="">
|
||||
<img class="place top right" src="pictures/square.png" alt="">
|
||||
<img class="place left" src="pictures/square.png" alt="">
|
||||
<img class="place" src="pictures/square.png" alt="">
|
||||
<img class="place right" src="pictures/square.png" alt="">
|
||||
<img class="place bottom left" src="pictures/square.png" alt="">
|
||||
<img class="place bottom" src="pictures/square.png" alt="">
|
||||
<img class="place bottom right" src="pictures/square.png" alt="">
|
||||
</section>
|
||||
<section class="slide" data-timing="00:03">
|
||||
<h2 class="shout">Timer</h2>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<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>
|
||||
</ol>
|
||||
<p class="next">Before they sold out master</p>
|
||||
</section>
|
||||
<div class="progress"></div>
|
||||
<footer class="badge">
|
||||
<a href="https://github.com/shower/shower">Fork me on GitHub</a>
|
||||
</footer>
|
||||
<script src="../../shower.min.js"></script>
|
||||
<!-- Copyright © 2016 Yours Truly, Famous Inc. -->
|
||||
</body>
|
||||
</html>
|
After Width: | Height: | Size: 98 KiB |
After Width: | Height: | Size: 174 B |
After Width: | Height: | Size: 96 B |
After Width: | Height: | Size: 154 B |
After Width: | Height: | Size: 153 B |
@ -0,0 +1,2 @@
|
||||
http://www.slideshare.net/AlexeyMilovidov1/clickhouse-69616890/AlexeyMilovidov1/clickhouse-69616890
|
||||
file:///home/milovidov/work/Presentation/shower/index.html#cover
|
@ -0,0 +1,204 @@
|
||||
/**
|
||||
* Ribbon theme for Shower HTML presentation engine
|
||||
* shower-ribbon v2.0.8, https://github.com/shower/ribbon
|
||||
* @copyright 2010–2016 Vadim Makeev, http://pepelsbey.net/
|
||||
* @license MIT
|
||||
*/
|
||||
@charset "UTF-8";
|
||||
|
||||
@font-face {
|
||||
font-family: 'Yandex Sans Text Web';
|
||||
src: url(https://yastatic.net/adv-www/_/yy5JveR58JFkc97waf-xp0i6_jM.eot);
|
||||
src: url(https://yastatic.net/adv-www/_/yy5JveR58JFkc97waf-xp0i6_jM.eot?#iefix) format('embedded-opentype'),
|
||||
url(https://yastatic.net/adv-www/_/CYblzLEXzCqQIvrYs7QKQe2omRk.woff2) format('woff2'),
|
||||
url(https://yastatic.net/adv-www/_/pUcnOdRwl83MvPPzrNomhyletnA.woff) format('woff'),
|
||||
url(https://yastatic.net/adv-www/_/vNFEmXOcGYKJ4AAidUprHWoXrLU.ttf) format('truetype'),
|
||||
url(https://yastatic.net/adv-www/_/0w7OcWZM_QLP8x-LQUXFOgXO6dE.svg#YandexSansTextWeb-Bold) format('svg');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-stretch: normal
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Yandex Sans Text Web';
|
||||
src: url(https://yastatic.net/adv-www/_/LI6l3L2RqcgxBe2pXmuUha37czQ.eot);
|
||||
src: url(https://yastatic.net/adv-www/_/LI6l3L2RqcgxBe2pXmuUha37czQ.eot?#iefix) format('embedded-opentype'),
|
||||
url(https://yastatic.net/adv-www/_/z3MYElcut0R2MF_Iw1RDNrstgYs.woff2) format('woff2'),
|
||||
url(https://yastatic.net/adv-www/_/1jvKJ_-hCXl3s7gmFl-y_-UHTaI.woff) format('woff'),
|
||||
url(https://yastatic.net/adv-www/_/9nzjfpCR2QHvK1EzHpDEIoVFGuY.ttf) format('truetype'),
|
||||
url(https://yastatic.net/adv-www/_/gwyBTpxSwkFCF1looxqs6JokKls.svg#YandexSansTextWeb-Regular) format('svg');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-stretch: normal
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Yandex Sans Text Web';
|
||||
src: url(https://yastatic.net/adv-www/_/ayAFYoY8swgBLhq_I56tKj2JftU.eot);
|
||||
src: url(https://yastatic.net/adv-www/_/ayAFYoY8swgBLhq_I56tKj2JftU.eot?#iefix) format('embedded-opentype'),
|
||||
url(https://yastatic.net/adv-www/_/lGQcYklLVV0hyvz1HFmFsUTj8_0.woff2) format('woff2'),
|
||||
url(https://yastatic.net/adv-www/_/f0AAJ9GJ4iiwEmhG-7PWMHk6vUY.woff) format('woff'),
|
||||
url(https://yastatic.net/adv-www/_/4UDe4nlVvgEJ-VmLWNVq3SxCsA.ttf) format('truetype'),
|
||||
url(https://yastatic.net/adv-www/_/EKLr1STNokPqxLAQa_RyN82pL98.svg#YandexSansTextWeb-Light) format('svg');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-stretch: normal
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Yandex Sans Display Web';
|
||||
src: url(https://yastatic.net/adv-www/_/H63jN0veW07XQUIA2317lr9UIm8.eot);
|
||||
src: url(https://yastatic.net/adv-www/_/H63jN0veW07XQUIA2317lr9UIm8.eot?#iefix) format('embedded-opentype'),
|
||||
url(https://yastatic.net/adv-www/_/sUYVCPUAQE7ExrvMS7FoISoO83s.woff2) format('woff2'),
|
||||
url(https://yastatic.net/adv-www/_/v2Sve_obH3rKm6rKrtSQpf-eB7U.woff) format('woff'),
|
||||
url(https://yastatic.net/adv-www/_/PzD8hWLMunow5i3RfJ6WQJAL7aI.ttf) format('truetype'),
|
||||
url(https://yastatic.net/adv-www/_/lF_KG5g4tpQNlYIgA0e77fBSZ5s.svg#YandexSansDisplayWeb-Regular) format('svg');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-stretch: normal
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Yandex Sans Display Web';
|
||||
src: url(https://yastatic.net/adv-www/_/g8_MyyKVquSZ3xEL6tarK__V9Vw.eot);
|
||||
src: url(https://yastatic.net/adv-www/_/g8_MyyKVquSZ3xEL6tarK__V9Vw.eot?#iefix) format('embedded-opentype'),
|
||||
url(https://yastatic.net/adv-www/_/LGiRvlfqQHlWR9YKLhsw5e7KGNA.woff2) format('woff2'),
|
||||
url(https://yastatic.net/adv-www/_/40vXwNl4eYYMgteIVgLP49dwmfc.woff) format('woff'),
|
||||
url(https://yastatic.net/adv-www/_/X6zG5x_wO8-AtwJ-vDLJcKC5228.ttf) format('truetype'),
|
||||
url(https://yastatic.net/adv-www/_/ZKhaR0m08c8CRRL77GtFKoHcLYA.svg#YandexSansDisplayWeb-Light) format('svg');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-stretch: normal
|
||||
}
|
||||
|
||||
*,::after,::before{box-sizing:border-box}
|
||||
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}
|
||||
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}
|
||||
.caption p,body{line-height:1}
|
||||
p {line-height: 1}
|
||||
ol,ul{list-style:none}
|
||||
blockquote,q{quotes:none}
|
||||
blockquote::after,blockquote::before,q::after,q::before{content:none}
|
||||
table{border-collapse:collapse;border-spacing:0}
|
||||
a{text-decoration:none}
|
||||
@page{margin:0;size:1024px 640px}
|
||||
.shower{color:#000;counter-reset:slide;font:25px/2 Yandex Sans Display Web,sans-serif;-webkit-print-color-adjust:exact;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none}
|
||||
@media print{.shower{text-rendering:geometricPrecision}
|
||||
}
|
||||
.caption{font-size:25px;display:none;margin-top:-.2em;padding:0 1em .93em;width:100%;color:#3c3d40;text-shadow:0 1px 0 #8d8e90}
|
||||
@media (min-width:1174px){.caption{font-size:50px}
|
||||
}
|
||||
@media (min-width:2348px){.caption{font-size:100px}
|
||||
}
|
||||
.caption h1{padding-bottom:.15em;font:1em/2 Yandex Sans Display Web,sans-serif}
|
||||
.caption p{font-size:.6em}
|
||||
.caption a{color:#4b86c2;text-shadow:0 -1px 0 #1f3f60}
|
||||
.slide{position:relative;z-index:1;overflow:hidden;padding:20px 100px 0;width:1024px;height:640px;background:#fff;font-size:25px}
|
||||
|
||||
/*.slide::after{position:absolute;top:0;right:100px;padding-top:15px;width:50px;height:100px;background:url(../images/ribbon.svg) no-repeat;color:#fff;counter-increment:slide;content:counter(slide);text-align:center}*/
|
||||
|
||||
.slide h1{vertical-align:middle; color:#000;font:400 50px/2 Yandex Sans Display Web,sans-serif}
|
||||
.slide h2{margin-bottom:34px;color:#000;font:400 50px/2 Yandex Sans Display Web,sans-serif}
|
||||
.slide p{margin-bottom:1em}
|
||||
.slide p.note{color:#979a9e}
|
||||
.slide a{background:-webkit-linear-gradient(bottom,currentColor .09em,transparent .09em) repeat-x;background:linear-gradient(to top,currentColor .09em,transparent .09em) repeat-x;color:#4b86c2}
|
||||
.slide b,.slide strong{font-weight:700}
|
||||
.slide blockquote,.slide dfn,.slide em,.slide i{font-style:italic}
|
||||
.slide code,.slide kbd,.slide mark,.slide samp{padding:.1em .3em;border-radius:.2em}
|
||||
.slide code,.slide kbd,.slide samp{background:rgba(88,90,94,.1);line-height:1;font-family:PT Mono,monospace,monospace}
|
||||
.slide mark{background:#fafaa2}
|
||||
.slide sub,.slide sup{position:relative;line-height:0;font-size:75%}
|
||||
.slide sub{bottom:-.25em}
|
||||
.slide sup{top:-.5em}
|
||||
.slide blockquote::before{position:absolute;margin:-.15em 0 0 -.43em;color:#ccc;line-height:1;font-size:8em;content:'\201C'}
|
||||
.slide blockquote+figcaption{margin:-1em 0 1em;font-style:italic;font-weight:700}
|
||||
.slide ol,.slide ul{margin-bottom:0em;counter-reset:list}
|
||||
.slide ol li,.slide ul li{page-break-inside:avoid;text-indent:-2em}
|
||||
.slide ol li::before,.slide ul li::before{display:inline-block;width:2em;color:#979a9e;text-align:right}
|
||||
.slide ol ol,.slide ol ul,.slide ul ol,.slide ul ul{margin-bottom:0;margin-left:2em}
|
||||
.slide ul>li::before{padding-right:.5em;content:'•'}
|
||||
.slide ul>li:lang(ru)::before{content:'—'}
|
||||
.slide ol>li::before{padding-right:.4em;counter-increment:list;content:counter(list) "."}
|
||||
.slide table{margin-left:-100px;margin-bottom:1em;width:calc(100% + 100px + 100px)}
|
||||
.slide table td:first-child,.slide table th:first-child{padding-left:96px}
|
||||
.slide table td:last-child,.slide table th:last-child{padding-right:96px}
|
||||
.slide table th{text-align:left;font-weight:700}
|
||||
.slide table tr:not(:last-of-type)>*{background:-webkit-linear-gradient(bottom,rgba(88,90,94,.5) .055em,transparent .055em) repeat-x;background:linear-gradient(to top,rgba(88,90,94,.5) .055em,transparent .055em) repeat-x}
|
||||
.slide table.striped tr:nth-child(even){background:rgba(88,90,94,.1)}
|
||||
.slide table.striped tr>*{background-image:none}
|
||||
.slide pre{margin-bottom:1em;counter-reset:code;white-space:normal}
|
||||
.slide pre code{display:block;margin-left:-100px;padding:0 0 0 100px;width:calc(100% + 100px + 100px);border-radius:0;background:0 0;line-height:2;white-space:pre;-moz-tab-size:4;-o-tab-size:4;tab-size:4}
|
||||
.slide pre code:not(:only-child).mark{background:rgba(88,90,94,.1)}
|
||||
.slide pre code:not(:only-child)::before{position:absolute;margin-left:-2em;color:#979a9e;counter-increment:code;content:counter(code,decimal-leading-zero) "."}
|
||||
.slide pre mark{position:relative;z-index:-1;margin:0 -.3em}
|
||||
.slide pre mark.important{background:#c00;color:#fff}
|
||||
.slide pre .comment{color:#999}
|
||||
.slide footer{position:absolute;right:0;bottom:-640px;left:0;display:none;padding:41px 100px 8px;background:#fbfbba;box-shadow:0 1px 0 #fafaa2 inset;-webkit-transition:bottom .3s;transition:bottom .3s}
|
||||
.slide footer mark{background:rgba(255,255,255,.8)}
|
||||
.slide:hover>footer{bottom:0}
|
||||
.slide.grid{background-image:url(../images/grid.png);-ms-interpolation-mode:nearest-neighbor;image-rendering:-webkit-optimize-contrast;image-rendering:-moz-crisp-edges;image-rendering:pixelated}
|
||||
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.slide.grid{background-image:url(../images/grid@2x.png);background-size:1024px auto}
|
||||
}
|
||||
.slide.black{background-color:#000}
|
||||
.slide.black::after,.slide.white::after{visibility:hidden}
|
||||
.slide.white{background-color:#fff}
|
||||
.slide .double,.slide .triple{-webkit-column-gap:75px;-moz-column-gap:75px;column-gap:75px;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}
|
||||
.slide .double{-webkit-column-count:2;-moz-column-count:2;column-count:2}
|
||||
.slide .triple{-webkit-column-count:3;-moz-column-count:3;column-count:3}
|
||||
.slide .shout{position:absolute;top:50%;left:0;width:100%;text-align:center;line-height:1;font-size:150px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
|
||||
.slide .shout a{background:-webkit-linear-gradient(bottom,currentColor .11em,transparent .11em) repeat-x;background:linear-gradient(to top,currentColor .11em,transparent .11em) repeat-x}
|
||||
.slide .cover{z-index:-1;max-width:100%;max-height:100%}
|
||||
.slide .cover.w,.slide .cover.width{width:100%;max-height:none}
|
||||
.slide .cover.h,.slide .cover.height{height:100%;max-width:none}
|
||||
.slide .cover+figcaption{position:absolute;bottom:20px;right:10px;font-size:12px;opacity:.7;-webkit-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:translateX(100%) rotate(-90deg);transform:translateX(100%) rotate(-90deg)}
|
||||
.slide .cover+figcaption.white{color:#fff}
|
||||
.slide .cover+figcaption a{color:currentcolor}
|
||||
.slide .cover,.slide .place{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
|
||||
.slide .place.b.l,.slide .place.b.r,.slide .place.bottom.left,.slide .place.bottom.right,.slide .place.t.l,.slide .place.t.r,.slide .place.top.left,.slide .place.top.right{-webkit-transform:none;transform:none}
|
||||
.slide .place.b,.slide .place.bottom,.slide .place.t,.slide .place.top{-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}
|
||||
.slide .place.l,.slide .place.left,.slide .place.r,.slide .place.right{-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}
|
||||
.slide .place.t,.slide .place.t.r,.slide .place.top,.slide .place.top.left,.slide .place.top.right{top:0}
|
||||
.slide .place.r,.slide .place.right{right:0;left:auto}
|
||||
.slide .place.b,.slide .place.b.l,.slide .place.b.r,.slide .place.bottom,.slide .place.bottom.left,.slide .place.bottom.right{top:auto;bottom:0}
|
||||
.slide .place.l,.slide .place.left{left:0}
|
||||
.progress{left:-20px;bottom:0;z-index:1;display:none;width:0;height:0;box-sizing:content-box;border:10px solid #4b86c2;border-right-color:transparent;-webkit-transition:width .2s linear;transition:width .2s linear;clip:rect(10px,1044px,20px,20px)}
|
||||
.progress[style*='100%']{padding-left:10px}
|
||||
.badge,.badge a,.progress{position:absolute}
|
||||
.badge{font-size:10px;top:0;z-index:1;overflow:hidden;display:none;width:9em;height:9em;right:0;visibility:hidden}
|
||||
@media (min-width:1174px){.badge{font-size:20px}
|
||||
}
|
||||
@media (min-width:2348px){.badge{font-size:40px}
|
||||
}
|
||||
.badge a{right:-50%;bottom:50%;left:-50%;visibility:visible;background:#4b86c2;color:#fff;text-align:center;line-height:2;-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
|
||||
.region{display:none}
|
||||
@media screen{.shower.list{padding-top:25px;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;background:#585a5e;position:absolute;clip:rect(0,auto,auto,0)}
|
||||
}
|
||||
@media screen and (min-width:1174px){.shower.list{padding-top:50px}
|
||||
}
|
||||
@media screen and (min-width:2348px){.shower.list{padding-top:100px}
|
||||
}
|
||||
@media screen{.shower.list .caption{display:block}
|
||||
.shower.list .slide{-webkit-transform-origin:0 0;transform-origin:0 0;margin:0 -768px -455px 25px;-webkit-transform:scale(.25);transform:scale(.25);border-radius:2px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
|
||||
}
|
||||
@media screen and (min-width:1174px){.shower.list .slide{margin:0 -512px -270px 50px;-webkit-transform:scale(.5);transform:scale(.5)}
|
||||
}
|
||||
@media screen and (min-width:2348px){.shower.list .slide{margin:0 0 100px 100px;-webkit-transform:scale(1);transform:scale(1)}
|
||||
}
|
||||
@media screen{.shower.list .slide:hover{box-shadow:0 0 0 20px rgba(0,0,0,.1),0 20px 50px rgba(0,0,0,.3)}
|
||||
.shower.list .slide:target{box-shadow:0 0 0 1px #376da3,0 0 0 20px #4b86c2,0 20px 50px rgba(0,0,0,.3)}
|
||||
.shower.list .slide *{pointer-events:none}
|
||||
.shower.list .badge,.shower.list .slide footer{display:block}
|
||||
.shower.full{position:absolute;top:50%;left:50%;overflow:hidden;margin:-320px 0 0 -512px;width:1024px;height:640px;background:#000}
|
||||
.shower.full .slide{position:absolute;top:0;left:0;margin-left:-150%;visibility:hidden}
|
||||
.shower.full .slide:target{margin:0;visibility:visible}
|
||||
.shower.full .slide pre code:not(:only-child).mark.next{visibility:visible;background:0 0}
|
||||
.shower.full .slide pre code:not(:only-child).mark.next.active{background:rgba(88,90,94,.1)}
|
||||
.shower.full .slide .next{visibility:hidden}
|
||||
.shower.full .slide .next.active{visibility:visible}
|
||||
.shower.full .slide .shout.grow,.shower.full .slide .shout.shrink{opacity:0;-webkit-transition:.4s ease-out;transition:.4s ease-out;-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}
|
||||
.shower.full .slide .shout.grow{-webkit-transform:scale(.1) translateY(-50%);transform:scale(.1) translateY(-50%)}
|
||||
.shower.full .slide .shout.shrink{-webkit-transform:scale(10) translateY(-50%);transform:scale(10) translateY(-50%)}
|
||||
.shower.full .slide:target .shout.grow,.shower.full .slide:target .shout.shrink{opacity:1;-webkit-transform:scale(1) translateY(-50%);transform:scale(1) translateY(-50%)}
|
||||
.shower.full .progress{display:block;-webkit-transform:translateZ(0);transform:translateZ(0)}
|
||||
.shower.full .region{position:absolute;clip:rect(0 0 0 0);overflow:hidden;margin:-1px;padding:0;width:1px;height:1px;border:none;display:block}
|
||||
}
|
21
doc/presentations/group_by/shower/themes/ribbon/LICENSE.md
Normal file
@ -0,0 +1,21 @@
|
||||
# The MIT License
|
||||
|
||||
Copyright © 2010–2016 Vadim Makeev, http://pepelsbey.net/
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 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–2016 Вадим Макеев, http://pepelsbey.net/
|
||||
|
||||
Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, добавление, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, также как и лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий:
|
||||
|
||||
Указанное выше уведомление об авторском праве и данные условия должны быть включены во все копии или значимые части данного Программного Обеспечения.
|
||||
|
||||
ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ ГАРАНТИЯМИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ ПРАВ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО ИСКАМ О ВОЗМЕЩЕНИИ УЩЕРБА, УБЫТКОВ ИЛИ ДРУГИХ ТРЕБОВАНИЙ ПО ДЕЙСТВУЮЩИМ КОНТРАКТАМ, ДЕЛИКТАМ ИЛИ ИНОМУ, ВОЗНИКШИМ ИЗ, ИМЕЮЩИМ ПРИЧИНОЙ ИЛИ СВЯЗАННЫМ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫМИ ДЕЙСТВИЯМИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ.
|
41
doc/presentations/group_by/shower/themes/ribbon/README.md
Normal file
@ -0,0 +1,41 @@
|
||||
# Ribbon theme for Shower [![Build Status](https://travis-ci.org/shower/ribbon.svg?branch=master)](https://travis-ci.org/shower/ribbon)
|
||||
|
||||
![Ribbon screen shot](pictures/canvas.png)
|
||||
|
||||
Default theme for the [Shower](https://github.com/shower/shower/) presentation engine. Doesn’t include engine itself. [See it in action](http://shwr.me/shower/themes/ribbon/). Follow [@shower_me](https://twitter.com/shower_me) for support and updates, [file an issue](https://github.com/shower/shower/issues/new) if you have any.
|
||||
|
||||
## Usage
|
||||
|
||||
Get the Shower template where Ribbon is already included. Download the [template archive](http://shwr.me/shower.zip) or install the package:
|
||||
|
||||
npm install shower
|
||||
|
||||
If you want to install Ribbon separately you can download the [theme archive](http://shwr.me/ribbon.zip) or install the package:
|
||||
|
||||
npm install shower-ribbon
|
||||
|
||||
## Features
|
||||
|
||||
All theme’s features are demonstrated in the [index.html](index.html) file. Use it as a reference while building your presentation. See more detailed [features overview](https://github.com/shower/shower/blob/master/docs/features-en.md).
|
||||
|
||||
## Ratios
|
||||
|
||||
Ribbon theme supports two slide ratios: wide 16×10 (default) and taller 4×3. To change the slide’s ratio include one of the pre-built `screen-16x10.css` or `screen-4x3.css` files in the `<head>` of your presentation.
|
||||
|
||||
## PDF
|
||||
|
||||
Ribbon could be exported to PDF by printing it from the list mode in Chrome or Opera browsers. See [printing documentation](https://github.com/shower/shower/blob/master/docs/printing-en.md) for more options.
|
||||
|
||||
## Development
|
||||
|
||||
If you want to adjust theme for your needs:
|
||||
|
||||
1. Fork this repository and clone it to your local machine.
|
||||
2. Install dependencies: `npm install`.
|
||||
3. Start a local server with watcher: `npm run dev` or just `gulp` if you have it installed globally.
|
||||
4. Edit your files and see changes in the opened browser.
|
||||
|
||||
To take part in Ribbon development please read [contributing guidelines](CONTRIBUTING.md) first and [file an issue](https://github.com/shower/shower/issues/new) before sending any pull request.
|
||||
|
||||
---
|
||||
Licensed under [MIT License](LICENSE.md).
|
304
doc/presentations/group_by/shower/themes/ribbon/index.html
Normal file
@ -0,0 +1,304 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Ribbon theme for Shower</title>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="stylesheet" href="styles/screen-16x10.css">
|
||||
</head>
|
||||
<body class="shower list">
|
||||
<header class="caption">
|
||||
<h1>Presentation Title</h1>
|
||||
<p><a href="">Yours Truly</a>, Famous Inc.</p>
|
||||
</header>
|
||||
<section class="slide">
|
||||
<h2>Slide Header</h2>
|
||||
<p>Echo Park 8-bit sustainable umami deep v Kickstarter. DIY cliche typewriter brunch, Odd Future sriracha pickled aesthetic. Farm-to-table bespoke fingerstache, kale chips umami brunch letterpress.</p>
|
||||
<p>Whatever authentic disrupt, you probably haven't heard of them direct trade mlkshk Etsy. Gluten-free roof party plaid four loko quinoa.</p>
|
||||
<p class="note">Echo Park 8-bit sustainable umami deep v Kickstarter.</p>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Inline Elements</h2>
|
||||
<p>Retro meh brunch <a href="">aesthetic</a> Cosby sweater Shoreditch. Banksy Tumblr <strong>sriracha</strong>, flexitarian pug chia master cleanse vinyl <em>wayfarers</em> fanny pack bespoke Helvetica <b>roof</b> party. Messenger bag retro cred <i>Portland</i> next level. Yr stumptown Schlitz Carles deep v small batch. Hella sustainable messenger bag, <mark>leggings</mark> skateboard literally<sup>1</sup> bicycle rights H<sub>2</sub>0 mumblecore banh mi DIY VHS. Semiotics four loko street art asymmetrical. Asymmetrical <code><paleo></code> you probably haven’t heard of.</p>
|
||||
<footer class="footer">
|
||||
<p>Retro meh brunch <a href="">aesthetic</a> Cosby sweater Shoreditch. Banksy Tumblr <strong>sriracha</strong>, flexitarian pug chia master cleanse vinyl <em>wayfarers</em> fanny pack bespoke Helvetica <b>roof</b> party. Messenger bag retro cred <i>Portland</i> next level. Yr stumptown Schlitz Carles deep v small batch. Hella sustainable messenger bag, <mark>leggings</mark> skateboard literally<sup>1</sup> bicycle rights H<sub>2</sub>0 mumblecore banh mi DIY VHS. Semiotics four loko street art asymmetrical. Asymmetrical <code><paleo></code> you probably haven’t heard of.</p>
|
||||
</footer>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Quotes</h2>
|
||||
<blockquote>
|
||||
<p>Flannel bicycle rights locavore selfies skateboard. Authentic fanny pack paleo four loko bespoke. Artisan tattooed chia XOXO ennui, lomo disrupt 8-bit art party Tumblr scenester.</p>
|
||||
</blockquote>
|
||||
<figure>
|
||||
<blockquote>
|
||||
<p>Post-ironic fashion axe flexitarian, Tonx narwhal messenger bag Tumblr. Portland gentrify deep v kale chips literally.</p>
|
||||
</blockquote>
|
||||
<figcaption>Yours Truly</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Nested Lists</h2>
|
||||
<ol>
|
||||
<li>Literally viral vegan, ugh drinking vinegar photo booth</li>
|
||||
<li>Wes Anderson chillwave Marfa pour-over Etsy banh mi</li>
|
||||
<li>Ethnic polaroid lo-fi iPhone ennui
|
||||
<ul>
|
||||
<li>Yr wayfarers before they sold out Kickstarter asymmetrical</li>
|
||||
<li>Irony flexitarian readymade quinoa, kogi bespoke meggings narwhal</li>
|
||||
<li>Skateboard Etsy twee artisan Echo Park</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Tonx kitsch fingerstache readymade, retro single-origin coffee</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Block Lists</h2>
|
||||
<ul>
|
||||
<li>Retro meh brunch aesthetic Cosby sweater Shoreditch. Banksy Tumblr sriracha, flexitarian pug chia master cleanse vinyl wayfarers fanny pack.</li>
|
||||
<li>Messenger bag retro cred Portland next level. Yr stumptown Schlitz Carles deep v small batch. Hella sustainable messenger bag.</li>
|
||||
<li>Leggings skateboard literally1 bicycle rights H20 mumblecore banh mi DIY VHS. Semiotics four loko street art asymmetrical. Asymmetrical paleo you probably haven’t heard of.</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Latin and Cyrillic List Bullets</h2>
|
||||
<ul lang="en">
|
||||
<li>Occupy locavore blog, mustache you probably haven't heard of them</li>
|
||||
<li>Skateboard pork belly aesthetic hoodie selfies brunch</li>
|
||||
<li>Food truck gluten-free disrupt Portland</li>
|
||||
</ul>
|
||||
<ul lang="ru">
|
||||
<li>Helvetica narwhal drinking vinegar chillwave, post-ironic ennui</li>
|
||||
<li>Cray pug paleo retro, Echo Park narwhal Wes Anderson</li>
|
||||
<li>Disrupt Williamsburg fixie, shabby chic bicycle rights hashtag kogi</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="slide grid">
|
||||
<h2>Two Columns</h2>
|
||||
<p class="double">Echo Park 8-bit sustainable umami deep v Kickstarter. DIY cliche typewriter brunch, Odd Future sriracha pickled aesthetic. Farm-to-table bespoke fingerstache, kale chips umami brunch American Apparel letterpress. Whatever authentic disrupt, you probably haven't heard of them direct trade mlkshk Etsy. Gluten-free roof party plaid American Apparel four loko quinoa. Echo Park 8-bit sustainable.</p>
|
||||
</section>
|
||||
<section class="slide grid">
|
||||
<h2>Three Columns</h2>
|
||||
<p class="triple">Echo Park 8-bit sustainable umami deep v Kickstarter. DIY cliche typewriter brunch, Odd Future sriracha pickled aesthetic. Farm-to-table bespoke fingerstache, kale chips umami brunch American Apparel letterpress. Whatever authentic disrupt, you probably haven't heard of them direct trade mlkshk Etsy. Gluten-free roof party plaid American Apparel four loko quinoa. Echo Park 8-bit sustainable.</p>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Simple Table</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<th scope="col">Gentrify</th>
|
||||
<th>Twee</th>
|
||||
<th>Artisan</th>
|
||||
<th>Banksy</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Messenger</th>
|
||||
<td>Mixtape</td>
|
||||
<td>Small batch</td>
|
||||
<td>Bicycle rights</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Meggings</th>
|
||||
<td>Freegan</td>
|
||||
<td>Retro biodiesel</td>
|
||||
<td>Slow-carb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Vegan</th>
|
||||
<td>Occupy</td>
|
||||
<td>Normcore</td>
|
||||
<td>Put a bird on it</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Next level</th>
|
||||
<td>Selfies</td>
|
||||
<td>Sustainable</td>
|
||||
<td>Organic</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Umami</th>
|
||||
<td>Asymmetrical</td>
|
||||
<td>Keytar</td>
|
||||
<td>Craft beer</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Biodiesel</th>
|
||||
<td>Haven’t heard</td>
|
||||
<td>Skateboard</td>
|
||||
<td>Farm-to-table</td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Striped Table</h2>
|
||||
<table class="striped">
|
||||
<tr>
|
||||
<th scope="col">Gentrify</th>
|
||||
<th>Twee</th>
|
||||
<th>Artisan</th>
|
||||
<th>Banksy</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Messenger</th>
|
||||
<td>Mixtape</td>
|
||||
<td>Small batch</td>
|
||||
<td>Bicycle rights</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Meggings</th>
|
||||
<td>Freegan</td>
|
||||
<td>Retro biodiesel</td>
|
||||
<td>Slow-carb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Vegan</th>
|
||||
<td>Occupy</td>
|
||||
<td>Normcore</td>
|
||||
<td>Put a bird on it</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Next level</th>
|
||||
<td>Selfies</td>
|
||||
<td>Sustainable</td>
|
||||
<td>Organic</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Umami</th>
|
||||
<td>Asymmetrical</td>
|
||||
<td>Keytar</td>
|
||||
<td>Craft beer</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Biodiesel</th>
|
||||
<td>Haven’t heard</td>
|
||||
<td>Skateboard</td>
|
||||
<td>Farm-to-table</td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Plain Code Listing</h2>
|
||||
<pre><code><html lang="en">
|
||||
<mark><head></mark> <span class="comment"><!--Comment--></span>
|
||||
<title>Shower</title>
|
||||
<meta charset="<mark class="important">UTF-8</mark>">
|
||||
<link rel="stylesheet" href="screen.css">
|
||||
<script src="script.js"></script>
|
||||
<mark></head></mark></code></pre>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Numbered Code Listing</h2>
|
||||
<pre>
|
||||
<code><html lang="en"></code>
|
||||
<code><mark><head></mark> <span class="comment"><!--Comment--></span></code>
|
||||
<code> <title>Shower</title></code>
|
||||
<code> <meta charset="<mark class="important">UTF-8</mark>"></code>
|
||||
<code> <link rel="stylesheet" href="screen.css"></code>
|
||||
<code> <script src="script.js"></script></code>
|
||||
<code><mark></head></mark></code>
|
||||
</pre>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Highlighted Code Lines</h2>
|
||||
<pre>
|
||||
<code><html lang="en"></code>
|
||||
<code class="mark"><head> <span class="comment"><!--Comment--></span></code>
|
||||
<code> <title>Shower</title></code>
|
||||
<code> <meta charset="<mark class="important">UTF-8</mark>"></code>
|
||||
<code> <link rel="stylesheet" href="screen.css"></code>
|
||||
<code> <script src="script.js"></script></code>
|
||||
<code class="mark"></head></code>
|
||||
</pre>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Hidden Code Steps</h2>
|
||||
<pre>
|
||||
<code class="next"><html lang="en"></code>
|
||||
<code class="next"><mark><head></mark> <span class="comment"><!--Comment--></span></code>
|
||||
<code class="next"> <title>Shower</title></code>
|
||||
<code class="next"> <meta charset="<mark class="important">UTF-8</mark>"></code>
|
||||
<code class="next"> <link rel="stylesheet" href="screen.css"></code>
|
||||
<code class="next"> <script src="script.js"></script></code>
|
||||
<code class="next"><mark></head></mark></code>
|
||||
</pre>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Highlighted Code Steps</h2>
|
||||
<pre>
|
||||
<code class="mark next"><html lang="en"></code>
|
||||
<code><head> <span class="comment"><!--Comment--></span></code>
|
||||
<code class="mark next"> <title>Shower</title></code>
|
||||
<code> <meta charset="<mark class="important">UTF-8</mark>"></code>
|
||||
<code class="mark next"> <link rel="stylesheet" href="screen.css"></code>
|
||||
<code> <script src="script.js"></script></code>
|
||||
<code class="mark next"></head></code>
|
||||
</pre>
|
||||
</section>
|
||||
<section class="slide grid">
|
||||
<h2>Grid Slide</h2>
|
||||
</section>
|
||||
<section class="slide white">
|
||||
<h2>White Slide</h2>
|
||||
</section>
|
||||
<section class="slide black">
|
||||
<h2>Black Slide</h2>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2 class="shout">Shout</h2>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2 class="shout">Multiline<br>Shout</h2>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2 class="shout"><a href="">Linked Shout</a></h2>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2 class="shout grow">Growing Shout</h2>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2 class="shout shrink">Shrinking Shout</h2>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<figure>
|
||||
<img class="cover" src="pictures/exact.png" alt="">
|
||||
<figcaption class="white">Copyright © 2016 <a href="">Yours Truly</a>, Famous Inc.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<img class="cover" src="pictures/tall.png" alt="">
|
||||
</section>
|
||||
<section class="slide">
|
||||
<img class="cover" src="pictures/wide.png" alt="">
|
||||
</section>
|
||||
<section class="slide white">
|
||||
<img class="place top left" src="pictures/square.png" alt="">
|
||||
<img class="place top" src="pictures/square.png" alt="">
|
||||
<img class="place top right" src="pictures/square.png" alt="">
|
||||
<img class="place left" src="pictures/square.png" alt="">
|
||||
<img class="place" src="pictures/square.png" alt="">
|
||||
<img class="place right" src="pictures/square.png" alt="">
|
||||
<img class="place bottom left" src="pictures/square.png" alt="">
|
||||
<img class="place bottom" src="pictures/square.png" alt="">
|
||||
<img class="place bottom right" src="pictures/square.png" alt="">
|
||||
</section>
|
||||
<section class="slide" data-timing="00:03">
|
||||
<h2 class="shout">Timer</h2>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<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>
|
||||
</ol>
|
||||
<p class="next">Before they sold out master</p>
|
||||
</section>
|
||||
<div class="progress"></div>
|
||||
<footer class="badge">
|
||||
<a href="https://github.com/shower/shower">Fork me on GitHub</a>
|
||||
</footer>
|
||||
<script src="../../shower.min.js"></script>
|
||||
<!-- Copyright © 2016 Yours Truly, Famous Inc. -->
|
||||
</body>
|
||||
</html>
|
After Width: | Height: | Size: 98 KiB |
After Width: | Height: | Size: 174 B |
After Width: | Height: | Size: 96 B |
After Width: | Height: | Size: 154 B |
After Width: | Height: | Size: 153 B |
@ -0,0 +1,2 @@
|
||||
http://www.slideshare.net/AlexeyMilovidov1/clickhouse-69616890/AlexeyMilovidov1/clickhouse-69616890
|
||||
file:///home/milovidov/work/Presentation/shower/index.html#cover
|
@ -0,0 +1,204 @@
|
||||
/**
|
||||
* Ribbon theme for Shower HTML presentation engine
|
||||
* shower-ribbon v2.0.8, https://github.com/shower/ribbon
|
||||
* @copyright 2010–2016 Vadim Makeev, http://pepelsbey.net/
|
||||
* @license MIT
|
||||
*/
|
||||
@charset "UTF-8";
|
||||
|
||||
@font-face {
|
||||
font-family: 'Yandex Sans Text Web';
|
||||
src: url(https://yastatic.net/adv-www/_/yy5JveR58JFkc97waf-xp0i6_jM.eot);
|
||||
src: url(https://yastatic.net/adv-www/_/yy5JveR58JFkc97waf-xp0i6_jM.eot?#iefix) format('embedded-opentype'),
|
||||
url(https://yastatic.net/adv-www/_/CYblzLEXzCqQIvrYs7QKQe2omRk.woff2) format('woff2'),
|
||||
url(https://yastatic.net/adv-www/_/pUcnOdRwl83MvPPzrNomhyletnA.woff) format('woff'),
|
||||
url(https://yastatic.net/adv-www/_/vNFEmXOcGYKJ4AAidUprHWoXrLU.ttf) format('truetype'),
|
||||
url(https://yastatic.net/adv-www/_/0w7OcWZM_QLP8x-LQUXFOgXO6dE.svg#YandexSansTextWeb-Bold) format('svg');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-stretch: normal
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Yandex Sans Text Web';
|
||||
src: url(https://yastatic.net/adv-www/_/LI6l3L2RqcgxBe2pXmuUha37czQ.eot);
|
||||
src: url(https://yastatic.net/adv-www/_/LI6l3L2RqcgxBe2pXmuUha37czQ.eot?#iefix) format('embedded-opentype'),
|
||||
url(https://yastatic.net/adv-www/_/z3MYElcut0R2MF_Iw1RDNrstgYs.woff2) format('woff2'),
|
||||
url(https://yastatic.net/adv-www/_/1jvKJ_-hCXl3s7gmFl-y_-UHTaI.woff) format('woff'),
|
||||
url(https://yastatic.net/adv-www/_/9nzjfpCR2QHvK1EzHpDEIoVFGuY.ttf) format('truetype'),
|
||||
url(https://yastatic.net/adv-www/_/gwyBTpxSwkFCF1looxqs6JokKls.svg#YandexSansTextWeb-Regular) format('svg');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-stretch: normal
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Yandex Sans Text Web';
|
||||
src: url(https://yastatic.net/adv-www/_/ayAFYoY8swgBLhq_I56tKj2JftU.eot);
|
||||
src: url(https://yastatic.net/adv-www/_/ayAFYoY8swgBLhq_I56tKj2JftU.eot?#iefix) format('embedded-opentype'),
|
||||
url(https://yastatic.net/adv-www/_/lGQcYklLVV0hyvz1HFmFsUTj8_0.woff2) format('woff2'),
|
||||
url(https://yastatic.net/adv-www/_/f0AAJ9GJ4iiwEmhG-7PWMHk6vUY.woff) format('woff'),
|
||||
url(https://yastatic.net/adv-www/_/4UDe4nlVvgEJ-VmLWNVq3SxCsA.ttf) format('truetype'),
|
||||
url(https://yastatic.net/adv-www/_/EKLr1STNokPqxLAQa_RyN82pL98.svg#YandexSansTextWeb-Light) format('svg');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-stretch: normal
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Yandex Sans Display Web';
|
||||
src: url(https://yastatic.net/adv-www/_/H63jN0veW07XQUIA2317lr9UIm8.eot);
|
||||
src: url(https://yastatic.net/adv-www/_/H63jN0veW07XQUIA2317lr9UIm8.eot?#iefix) format('embedded-opentype'),
|
||||
url(https://yastatic.net/adv-www/_/sUYVCPUAQE7ExrvMS7FoISoO83s.woff2) format('woff2'),
|
||||
url(https://yastatic.net/adv-www/_/v2Sve_obH3rKm6rKrtSQpf-eB7U.woff) format('woff'),
|
||||
url(https://yastatic.net/adv-www/_/PzD8hWLMunow5i3RfJ6WQJAL7aI.ttf) format('truetype'),
|
||||
url(https://yastatic.net/adv-www/_/lF_KG5g4tpQNlYIgA0e77fBSZ5s.svg#YandexSansDisplayWeb-Regular) format('svg');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-stretch: normal
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Yandex Sans Display Web';
|
||||
src: url(https://yastatic.net/adv-www/_/g8_MyyKVquSZ3xEL6tarK__V9Vw.eot);
|
||||
src: url(https://yastatic.net/adv-www/_/g8_MyyKVquSZ3xEL6tarK__V9Vw.eot?#iefix) format('embedded-opentype'),
|
||||
url(https://yastatic.net/adv-www/_/LGiRvlfqQHlWR9YKLhsw5e7KGNA.woff2) format('woff2'),
|
||||
url(https://yastatic.net/adv-www/_/40vXwNl4eYYMgteIVgLP49dwmfc.woff) format('woff'),
|
||||
url(https://yastatic.net/adv-www/_/X6zG5x_wO8-AtwJ-vDLJcKC5228.ttf) format('truetype'),
|
||||
url(https://yastatic.net/adv-www/_/ZKhaR0m08c8CRRL77GtFKoHcLYA.svg#YandexSansDisplayWeb-Light) format('svg');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-stretch: normal
|
||||
}
|
||||
|
||||
*,::after,::before{box-sizing:border-box}
|
||||
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}
|
||||
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}
|
||||
.caption p,body{line-height:1}
|
||||
p {line-height: 1; white-space: pre;}
|
||||
ol,ul{list-style:none}
|
||||
blockquote,q{quotes:none}
|
||||
blockquote::after,blockquote::before,q::after,q::before{content:none}
|
||||
table{border-collapse:collapse;border-spacing:0}
|
||||
a{text-decoration:none}
|
||||
@page{margin:0;size:1024px 640px}
|
||||
.shower{color:#000;counter-reset:slide;font:25px/2 Yandex Sans Display Web,sans-serif;-webkit-print-color-adjust:exact;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none}
|
||||
@media print{.shower{text-rendering:geometricPrecision}
|
||||
}
|
||||
.caption{font-size:25px;display:none;margin-top:-.2em;padding:0 1em .93em;width:100%;color:#3c3d40;text-shadow:0 1px 0 #8d8e90}
|
||||
@media (min-width:1174px){.caption{font-size:50px}
|
||||
}
|
||||
@media (min-width:2348px){.caption{font-size:100px}
|
||||
}
|
||||
.caption h1{padding-bottom:.15em;font:1em/2 Yandex Sans Display Web,sans-serif}
|
||||
.caption p{font-size:.6em}
|
||||
.caption a{color:#4b86c2;text-shadow:0 -1px 0 #1f3f60}
|
||||
.slide{position:relative;z-index:1;overflow:hidden;padding:20px 100px 0;width:1024px;height:640px;background:#fff;font-size:25px}
|
||||
|
||||
/*.slide::after{position:absolute;top:0;right:100px;padding-top:15px;width:50px;height:100px;background:url(../images/ribbon.svg) no-repeat;color:#fff;counter-increment:slide;content:counter(slide);text-align:center}*/
|
||||
|
||||
.slide h1{vertical-align:middle; color:#000;font:400 50px/2 Yandex Sans Display Web,sans-serif}
|
||||
.slide h2{margin-bottom:34px;color:#000;font:400 50px/2 Yandex Sans Display Web,sans-serif}
|
||||
.slide p{margin-bottom:1em}
|
||||
.slide p.note{color:#979a9e}
|
||||
.slide a{background:-webkit-linear-gradient(bottom,currentColor .09em,transparent .09em) repeat-x;background:linear-gradient(to top,currentColor .09em,transparent .09em) repeat-x;color:#4b86c2}
|
||||
.slide b,.slide strong{font-weight:700}
|
||||
.slide blockquote,.slide dfn,.slide em,.slide i{font-style:italic}
|
||||
.slide code,.slide kbd,.slide mark,.slide samp{padding:.1em .3em;border-radius:.2em}
|
||||
.slide code,.slide kbd,.slide samp{background:rgba(88,90,94,.1);line-height:1;font-family:PT Mono,monospace,monospace}
|
||||
.slide mark{background:#fafaa2}
|
||||
.slide sub,.slide sup{position:relative;line-height:0;font-size:75%}
|
||||
.slide sub{bottom:-.25em}
|
||||
.slide sup{top:-.5em}
|
||||
.slide blockquote::before{position:absolute;margin:-.15em 0 0 -.43em;color:#ccc;line-height:1;font-size:8em;content:'\201C'}
|
||||
.slide blockquote+figcaption{margin:-1em 0 1em;font-style:italic;font-weight:700}
|
||||
.slide ol,.slide ul{margin-bottom:0em;counter-reset:list}
|
||||
.slide ol li,.slide ul li{page-break-inside:avoid;text-indent:-2em}
|
||||
.slide ol li::before,.slide ul li::before{display:inline-block;width:2em;color:#979a9e;text-align:right}
|
||||
.slide ol ol,.slide ol ul,.slide ul ol,.slide ul ul{margin-bottom:0;margin-left:2em}
|
||||
.slide ul>li::before{padding-right:.5em;content:'•'}
|
||||
.slide ul>li:lang(ru)::before{content:'—'}
|
||||
.slide ol>li::before{padding-right:.4em;counter-increment:list;content:counter(list) "."}
|
||||
.slide table{margin-left:-100px;margin-bottom:1em;width:calc(100% + 100px + 100px)}
|
||||
.slide table td:first-child,.slide table th:first-child{padding-left:96px}
|
||||
.slide table td:last-child,.slide table th:last-child{padding-right:96px}
|
||||
.slide table th{text-align:left;font-weight:700}
|
||||
.slide table tr:not(:last-of-type)>*{background:-webkit-linear-gradient(bottom,rgba(88,90,94,.5) .055em,transparent .055em) repeat-x;background:linear-gradient(to top,rgba(88,90,94,.5) .055em,transparent .055em) repeat-x}
|
||||
.slide table.striped tr:nth-child(even){background:rgba(88,90,94,.1)}
|
||||
.slide table.striped tr>*{background-image:none}
|
||||
.slide pre{margin-bottom:1em;counter-reset:code;white-space:normal}
|
||||
.slide pre code{display:block;margin-left:-100px;padding:0 0 0 100px;width:calc(100% + 100px + 100px);border-radius:0;background:0 0;line-height:2;white-space:pre;-moz-tab-size:4;-o-tab-size:4;tab-size:4}
|
||||
.slide pre code:not(:only-child).mark{background:rgba(88,90,94,.1)}
|
||||
.slide pre code:not(:only-child)::before{position:absolute;margin-left:-2em;color:#979a9e;counter-increment:code;content:counter(code,decimal-leading-zero) "."}
|
||||
.slide pre mark{position:relative;z-index:-1;margin:0 -.3em}
|
||||
.slide pre mark.important{background:#c00;color:#fff}
|
||||
.slide pre .comment{color:#999}
|
||||
.slide footer{position:absolute;right:0;bottom:-640px;left:0;display:none;padding:41px 100px 8px;background:#fbfbba;box-shadow:0 1px 0 #fafaa2 inset;-webkit-transition:bottom .3s;transition:bottom .3s}
|
||||
.slide footer mark{background:rgba(255,255,255,.8)}
|
||||
.slide:hover>footer{bottom:0}
|
||||
.slide.grid{background-image:url(../images/grid.png);-ms-interpolation-mode:nearest-neighbor;image-rendering:-webkit-optimize-contrast;image-rendering:-moz-crisp-edges;image-rendering:pixelated}
|
||||
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.slide.grid{background-image:url(../images/grid@2x.png);background-size:1024px auto}
|
||||
}
|
||||
.slide.black{background-color:#000}
|
||||
.slide.black::after,.slide.white::after{visibility:hidden}
|
||||
.slide.white{background-color:#fff}
|
||||
.slide .double,.slide .triple{-webkit-column-gap:75px;-moz-column-gap:75px;column-gap:75px;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}
|
||||
.slide .double{-webkit-column-count:2;-moz-column-count:2;column-count:2}
|
||||
.slide .triple{-webkit-column-count:3;-moz-column-count:3;column-count:3}
|
||||
.slide .shout{position:absolute;top:50%;left:0;width:100%;text-align:center;line-height:1;font-size:150px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
|
||||
.slide .shout a{background:-webkit-linear-gradient(bottom,currentColor .11em,transparent .11em) repeat-x;background:linear-gradient(to top,currentColor .11em,transparent .11em) repeat-x}
|
||||
.slide .cover{z-index:-1;max-width:100%;max-height:100%}
|
||||
.slide .cover.w,.slide .cover.width{width:100%;max-height:none}
|
||||
.slide .cover.h,.slide .cover.height{height:100%;max-width:none}
|
||||
.slide .cover+figcaption{position:absolute;bottom:20px;right:10px;font-size:12px;opacity:.7;-webkit-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:translateX(100%) rotate(-90deg);transform:translateX(100%) rotate(-90deg)}
|
||||
.slide .cover+figcaption.white{color:#fff}
|
||||
.slide .cover+figcaption a{color:currentcolor}
|
||||
.slide .cover,.slide .place{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
|
||||
.slide .place.b.l,.slide .place.b.r,.slide .place.bottom.left,.slide .place.bottom.right,.slide .place.t.l,.slide .place.t.r,.slide .place.top.left,.slide .place.top.right{-webkit-transform:none;transform:none}
|
||||
.slide .place.b,.slide .place.bottom,.slide .place.t,.slide .place.top{-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}
|
||||
.slide .place.l,.slide .place.left,.slide .place.r,.slide .place.right{-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}
|
||||
.slide .place.t,.slide .place.t.r,.slide .place.top,.slide .place.top.left,.slide .place.top.right{top:0}
|
||||
.slide .place.r,.slide .place.right{right:0;left:auto}
|
||||
.slide .place.b,.slide .place.b.l,.slide .place.b.r,.slide .place.bottom,.slide .place.bottom.left,.slide .place.bottom.right{top:auto;bottom:0}
|
||||
.slide .place.l,.slide .place.left{left:0}
|
||||
.progress{left:-20px;bottom:0;z-index:1;display:none;width:0;height:0;box-sizing:content-box;border:10px solid #4b86c2;border-right-color:transparent;-webkit-transition:width .2s linear;transition:width .2s linear;clip:rect(10px,1044px,20px,20px)}
|
||||
.progress[style*='100%']{padding-left:10px}
|
||||
.badge,.badge a,.progress{position:absolute}
|
||||
.badge{font-size:10px;top:0;z-index:1;overflow:hidden;display:none;width:9em;height:9em;right:0;visibility:hidden}
|
||||
@media (min-width:1174px){.badge{font-size:20px}
|
||||
}
|
||||
@media (min-width:2348px){.badge{font-size:40px}
|
||||
}
|
||||
.badge a{right:-50%;bottom:50%;left:-50%;visibility:visible;background:#4b86c2;color:#fff;text-align:center;line-height:2;-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
|
||||
.region{display:none}
|
||||
@media screen{.shower.list{padding-top:25px;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;background:#585a5e;position:absolute;clip:rect(0,auto,auto,0)}
|
||||
}
|
||||
@media screen and (min-width:1174px){.shower.list{padding-top:50px}
|
||||
}
|
||||
@media screen and (min-width:2348px){.shower.list{padding-top:100px}
|
||||
}
|
||||
@media screen{.shower.list .caption{display:block}
|
||||
.shower.list .slide{-webkit-transform-origin:0 0;transform-origin:0 0;margin:0 -768px -455px 25px;-webkit-transform:scale(.25);transform:scale(.25);border-radius:2px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
|
||||
}
|
||||
@media screen and (min-width:1174px){.shower.list .slide{margin:0 -512px -270px 50px;-webkit-transform:scale(.5);transform:scale(.5)}
|
||||
}
|
||||
@media screen and (min-width:2348px){.shower.list .slide{margin:0 0 100px 100px;-webkit-transform:scale(1);transform:scale(1)}
|
||||
}
|
||||
@media screen{.shower.list .slide:hover{box-shadow:0 0 0 20px rgba(0,0,0,.1),0 20px 50px rgba(0,0,0,.3)}
|
||||
.shower.list .slide:target{box-shadow:0 0 0 1px #376da3,0 0 0 20px #4b86c2,0 20px 50px rgba(0,0,0,.3)}
|
||||
.shower.list .slide *{pointer-events:none}
|
||||
.shower.list .badge,.shower.list .slide footer{display:block}
|
||||
.shower.full{position:absolute;top:50%;left:50%;overflow:hidden;margin:-320px 0 0 -512px;width:1024px;height:640px;background:#000}
|
||||
.shower.full .slide{position:absolute;top:0;left:0;margin-left:-150%;visibility:hidden}
|
||||
.shower.full .slide:target{margin:0;visibility:visible}
|
||||
.shower.full .slide pre code:not(:only-child).mark.next{visibility:visible;background:0 0}
|
||||
.shower.full .slide pre code:not(:only-child).mark.next.active{background:rgba(88,90,94,.1)}
|
||||
.shower.full .slide .next{visibility:hidden}
|
||||
.shower.full .slide .next.active{visibility:visible}
|
||||
.shower.full .slide .shout.grow,.shower.full .slide .shout.shrink{opacity:0;-webkit-transition:.4s ease-out;transition:.4s ease-out;-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}
|
||||
.shower.full .slide .shout.grow{-webkit-transform:scale(.1) translateY(-50%);transform:scale(.1) translateY(-50%)}
|
||||
.shower.full .slide .shout.shrink{-webkit-transform:scale(10) translateY(-50%);transform:scale(10) translateY(-50%)}
|
||||
.shower.full .slide:target .shout.grow,.shower.full .slide:target .shout.shrink{opacity:1;-webkit-transform:scale(1) translateY(-50%);transform:scale(1) translateY(-50%)}
|
||||
.shower.full .progress{display:block;-webkit-transform:translateZ(0);transform:translateZ(0)}
|
||||
.shower.full .region{position:absolute;clip:rect(0 0 0 0);overflow:hidden;margin:-1px;padding:0;width:1px;height:1px;border:none;display:block}
|
||||
}
|
21
doc/presentations/tbd/shower/themes/ribbon/LICENSE.md
Normal file
@ -0,0 +1,21 @@
|
||||
# The MIT License
|
||||
|
||||
Copyright © 2010–2016 Vadim Makeev, http://pepelsbey.net/
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 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–2016 Вадим Макеев, http://pepelsbey.net/
|
||||
|
||||
Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, добавление, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, также как и лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий:
|
||||
|
||||
Указанное выше уведомление об авторском праве и данные условия должны быть включены во все копии или значимые части данного Программного Обеспечения.
|
||||
|
||||
ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ ГАРАНТИЯМИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ ПРАВ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО ИСКАМ О ВОЗМЕЩЕНИИ УЩЕРБА, УБЫТКОВ ИЛИ ДРУГИХ ТРЕБОВАНИЙ ПО ДЕЙСТВУЮЩИМ КОНТРАКТАМ, ДЕЛИКТАМ ИЛИ ИНОМУ, ВОЗНИКШИМ ИЗ, ИМЕЮЩИМ ПРИЧИНОЙ ИЛИ СВЯЗАННЫМ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫМИ ДЕЙСТВИЯМИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ.
|
41
doc/presentations/tbd/shower/themes/ribbon/README.md
Normal file
@ -0,0 +1,41 @@
|
||||
# Ribbon theme for Shower [![Build Status](https://travis-ci.org/shower/ribbon.svg?branch=master)](https://travis-ci.org/shower/ribbon)
|
||||
|
||||
![Ribbon screen shot](pictures/canvas.png)
|
||||
|
||||
Default theme for the [Shower](https://github.com/shower/shower/) presentation engine. Doesn’t include engine itself. [See it in action](http://shwr.me/shower/themes/ribbon/). Follow [@shower_me](https://twitter.com/shower_me) for support and updates, [file an issue](https://github.com/shower/shower/issues/new) if you have any.
|
||||
|
||||
## Usage
|
||||
|
||||
Get the Shower template where Ribbon is already included. Download the [template archive](http://shwr.me/shower.zip) or install the package:
|
||||
|
||||
npm install shower
|
||||
|
||||
If you want to install Ribbon separately you can download the [theme archive](http://shwr.me/ribbon.zip) or install the package:
|
||||
|
||||
npm install shower-ribbon
|
||||
|
||||
## Features
|
||||
|
||||
All theme’s features are demonstrated in the [index.html](index.html) file. Use it as a reference while building your presentation. See more detailed [features overview](https://github.com/shower/shower/blob/master/docs/features-en.md).
|
||||
|
||||
## Ratios
|
||||
|
||||
Ribbon theme supports two slide ratios: wide 16×10 (default) and taller 4×3. To change the slide’s ratio include one of the pre-built `screen-16x10.css` or `screen-4x3.css` files in the `<head>` of your presentation.
|
||||
|
||||
## PDF
|
||||
|
||||
Ribbon could be exported to PDF by printing it from the list mode in Chrome or Opera browsers. See [printing documentation](https://github.com/shower/shower/blob/master/docs/printing-en.md) for more options.
|
||||
|
||||
## Development
|
||||
|
||||
If you want to adjust theme for your needs:
|
||||
|
||||
1. Fork this repository and clone it to your local machine.
|
||||
2. Install dependencies: `npm install`.
|
||||
3. Start a local server with watcher: `npm run dev` or just `gulp` if you have it installed globally.
|
||||
4. Edit your files and see changes in the opened browser.
|
||||
|
||||
To take part in Ribbon development please read [contributing guidelines](CONTRIBUTING.md) first and [file an issue](https://github.com/shower/shower/issues/new) before sending any pull request.
|
||||
|
||||
---
|
||||
Licensed under [MIT License](LICENSE.md).
|
304
doc/presentations/tbd/shower/themes/ribbon/index.html
Normal file
@ -0,0 +1,304 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Ribbon theme for Shower</title>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="stylesheet" href="styles/screen-16x10.css">
|
||||
</head>
|
||||
<body class="shower list">
|
||||
<header class="caption">
|
||||
<h1>Presentation Title</h1>
|
||||
<p><a href="">Yours Truly</a>, Famous Inc.</p>
|
||||
</header>
|
||||
<section class="slide">
|
||||
<h2>Slide Header</h2>
|
||||
<p>Echo Park 8-bit sustainable umami deep v Kickstarter. DIY cliche typewriter brunch, Odd Future sriracha pickled aesthetic. Farm-to-table bespoke fingerstache, kale chips umami brunch letterpress.</p>
|
||||
<p>Whatever authentic disrupt, you probably haven't heard of them direct trade mlkshk Etsy. Gluten-free roof party plaid four loko quinoa.</p>
|
||||
<p class="note">Echo Park 8-bit sustainable umami deep v Kickstarter.</p>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Inline Elements</h2>
|
||||
<p>Retro meh brunch <a href="">aesthetic</a> Cosby sweater Shoreditch. Banksy Tumblr <strong>sriracha</strong>, flexitarian pug chia master cleanse vinyl <em>wayfarers</em> fanny pack bespoke Helvetica <b>roof</b> party. Messenger bag retro cred <i>Portland</i> next level. Yr stumptown Schlitz Carles deep v small batch. Hella sustainable messenger bag, <mark>leggings</mark> skateboard literally<sup>1</sup> bicycle rights H<sub>2</sub>0 mumblecore banh mi DIY VHS. Semiotics four loko street art asymmetrical. Asymmetrical <code><paleo></code> you probably haven’t heard of.</p>
|
||||
<footer class="footer">
|
||||
<p>Retro meh brunch <a href="">aesthetic</a> Cosby sweater Shoreditch. Banksy Tumblr <strong>sriracha</strong>, flexitarian pug chia master cleanse vinyl <em>wayfarers</em> fanny pack bespoke Helvetica <b>roof</b> party. Messenger bag retro cred <i>Portland</i> next level. Yr stumptown Schlitz Carles deep v small batch. Hella sustainable messenger bag, <mark>leggings</mark> skateboard literally<sup>1</sup> bicycle rights H<sub>2</sub>0 mumblecore banh mi DIY VHS. Semiotics four loko street art asymmetrical. Asymmetrical <code><paleo></code> you probably haven’t heard of.</p>
|
||||
</footer>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Quotes</h2>
|
||||
<blockquote>
|
||||
<p>Flannel bicycle rights locavore selfies skateboard. Authentic fanny pack paleo four loko bespoke. Artisan tattooed chia XOXO ennui, lomo disrupt 8-bit art party Tumblr scenester.</p>
|
||||
</blockquote>
|
||||
<figure>
|
||||
<blockquote>
|
||||
<p>Post-ironic fashion axe flexitarian, Tonx narwhal messenger bag Tumblr. Portland gentrify deep v kale chips literally.</p>
|
||||
</blockquote>
|
||||
<figcaption>Yours Truly</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Nested Lists</h2>
|
||||
<ol>
|
||||
<li>Literally viral vegan, ugh drinking vinegar photo booth</li>
|
||||
<li>Wes Anderson chillwave Marfa pour-over Etsy banh mi</li>
|
||||
<li>Ethnic polaroid lo-fi iPhone ennui
|
||||
<ul>
|
||||
<li>Yr wayfarers before they sold out Kickstarter asymmetrical</li>
|
||||
<li>Irony flexitarian readymade quinoa, kogi bespoke meggings narwhal</li>
|
||||
<li>Skateboard Etsy twee artisan Echo Park</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Tonx kitsch fingerstache readymade, retro single-origin coffee</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Block Lists</h2>
|
||||
<ul>
|
||||
<li>Retro meh brunch aesthetic Cosby sweater Shoreditch. Banksy Tumblr sriracha, flexitarian pug chia master cleanse vinyl wayfarers fanny pack.</li>
|
||||
<li>Messenger bag retro cred Portland next level. Yr stumptown Schlitz Carles deep v small batch. Hella sustainable messenger bag.</li>
|
||||
<li>Leggings skateboard literally1 bicycle rights H20 mumblecore banh mi DIY VHS. Semiotics four loko street art asymmetrical. Asymmetrical paleo you probably haven’t heard of.</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Latin and Cyrillic List Bullets</h2>
|
||||
<ul lang="en">
|
||||
<li>Occupy locavore blog, mustache you probably haven't heard of them</li>
|
||||
<li>Skateboard pork belly aesthetic hoodie selfies brunch</li>
|
||||
<li>Food truck gluten-free disrupt Portland</li>
|
||||
</ul>
|
||||
<ul lang="ru">
|
||||
<li>Helvetica narwhal drinking vinegar chillwave, post-ironic ennui</li>
|
||||
<li>Cray pug paleo retro, Echo Park narwhal Wes Anderson</li>
|
||||
<li>Disrupt Williamsburg fixie, shabby chic bicycle rights hashtag kogi</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="slide grid">
|
||||
<h2>Two Columns</h2>
|
||||
<p class="double">Echo Park 8-bit sustainable umami deep v Kickstarter. DIY cliche typewriter brunch, Odd Future sriracha pickled aesthetic. Farm-to-table bespoke fingerstache, kale chips umami brunch American Apparel letterpress. Whatever authentic disrupt, you probably haven't heard of them direct trade mlkshk Etsy. Gluten-free roof party plaid American Apparel four loko quinoa. Echo Park 8-bit sustainable.</p>
|
||||
</section>
|
||||
<section class="slide grid">
|
||||
<h2>Three Columns</h2>
|
||||
<p class="triple">Echo Park 8-bit sustainable umami deep v Kickstarter. DIY cliche typewriter brunch, Odd Future sriracha pickled aesthetic. Farm-to-table bespoke fingerstache, kale chips umami brunch American Apparel letterpress. Whatever authentic disrupt, you probably haven't heard of them direct trade mlkshk Etsy. Gluten-free roof party plaid American Apparel four loko quinoa. Echo Park 8-bit sustainable.</p>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Simple Table</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<th scope="col">Gentrify</th>
|
||||
<th>Twee</th>
|
||||
<th>Artisan</th>
|
||||
<th>Banksy</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Messenger</th>
|
||||
<td>Mixtape</td>
|
||||
<td>Small batch</td>
|
||||
<td>Bicycle rights</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Meggings</th>
|
||||
<td>Freegan</td>
|
||||
<td>Retro biodiesel</td>
|
||||
<td>Slow-carb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Vegan</th>
|
||||
<td>Occupy</td>
|
||||
<td>Normcore</td>
|
||||
<td>Put a bird on it</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Next level</th>
|
||||
<td>Selfies</td>
|
||||
<td>Sustainable</td>
|
||||
<td>Organic</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Umami</th>
|
||||
<td>Asymmetrical</td>
|
||||
<td>Keytar</td>
|
||||
<td>Craft beer</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Biodiesel</th>
|
||||
<td>Haven’t heard</td>
|
||||
<td>Skateboard</td>
|
||||
<td>Farm-to-table</td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Striped Table</h2>
|
||||
<table class="striped">
|
||||
<tr>
|
||||
<th scope="col">Gentrify</th>
|
||||
<th>Twee</th>
|
||||
<th>Artisan</th>
|
||||
<th>Banksy</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Messenger</th>
|
||||
<td>Mixtape</td>
|
||||
<td>Small batch</td>
|
||||
<td>Bicycle rights</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Meggings</th>
|
||||
<td>Freegan</td>
|
||||
<td>Retro biodiesel</td>
|
||||
<td>Slow-carb</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Vegan</th>
|
||||
<td>Occupy</td>
|
||||
<td>Normcore</td>
|
||||
<td>Put a bird on it</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Next level</th>
|
||||
<td>Selfies</td>
|
||||
<td>Sustainable</td>
|
||||
<td>Organic</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Umami</th>
|
||||
<td>Asymmetrical</td>
|
||||
<td>Keytar</td>
|
||||
<td>Craft beer</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Biodiesel</th>
|
||||
<td>Haven’t heard</td>
|
||||
<td>Skateboard</td>
|
||||
<td>Farm-to-table</td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Plain Code Listing</h2>
|
||||
<pre><code><html lang="en">
|
||||
<mark><head></mark> <span class="comment"><!--Comment--></span>
|
||||
<title>Shower</title>
|
||||
<meta charset="<mark class="important">UTF-8</mark>">
|
||||
<link rel="stylesheet" href="screen.css">
|
||||
<script src="script.js"></script>
|
||||
<mark></head></mark></code></pre>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Numbered Code Listing</h2>
|
||||
<pre>
|
||||
<code><html lang="en"></code>
|
||||
<code><mark><head></mark> <span class="comment"><!--Comment--></span></code>
|
||||
<code> <title>Shower</title></code>
|
||||
<code> <meta charset="<mark class="important">UTF-8</mark>"></code>
|
||||
<code> <link rel="stylesheet" href="screen.css"></code>
|
||||
<code> <script src="script.js"></script></code>
|
||||
<code><mark></head></mark></code>
|
||||
</pre>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Highlighted Code Lines</h2>
|
||||
<pre>
|
||||
<code><html lang="en"></code>
|
||||
<code class="mark"><head> <span class="comment"><!--Comment--></span></code>
|
||||
<code> <title>Shower</title></code>
|
||||
<code> <meta charset="<mark class="important">UTF-8</mark>"></code>
|
||||
<code> <link rel="stylesheet" href="screen.css"></code>
|
||||
<code> <script src="script.js"></script></code>
|
||||
<code class="mark"></head></code>
|
||||
</pre>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Hidden Code Steps</h2>
|
||||
<pre>
|
||||
<code class="next"><html lang="en"></code>
|
||||
<code class="next"><mark><head></mark> <span class="comment"><!--Comment--></span></code>
|
||||
<code class="next"> <title>Shower</title></code>
|
||||
<code class="next"> <meta charset="<mark class="important">UTF-8</mark>"></code>
|
||||
<code class="next"> <link rel="stylesheet" href="screen.css"></code>
|
||||
<code class="next"> <script src="script.js"></script></code>
|
||||
<code class="next"><mark></head></mark></code>
|
||||
</pre>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2>Highlighted Code Steps</h2>
|
||||
<pre>
|
||||
<code class="mark next"><html lang="en"></code>
|
||||
<code><head> <span class="comment"><!--Comment--></span></code>
|
||||
<code class="mark next"> <title>Shower</title></code>
|
||||
<code> <meta charset="<mark class="important">UTF-8</mark>"></code>
|
||||
<code class="mark next"> <link rel="stylesheet" href="screen.css"></code>
|
||||
<code> <script src="script.js"></script></code>
|
||||
<code class="mark next"></head></code>
|
||||
</pre>
|
||||
</section>
|
||||
<section class="slide grid">
|
||||
<h2>Grid Slide</h2>
|
||||
</section>
|
||||
<section class="slide white">
|
||||
<h2>White Slide</h2>
|
||||
</section>
|
||||
<section class="slide black">
|
||||
<h2>Black Slide</h2>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2 class="shout">Shout</h2>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2 class="shout">Multiline<br>Shout</h2>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2 class="shout"><a href="">Linked Shout</a></h2>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2 class="shout grow">Growing Shout</h2>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<h2 class="shout shrink">Shrinking Shout</h2>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<figure>
|
||||
<img class="cover" src="pictures/exact.png" alt="">
|
||||
<figcaption class="white">Copyright © 2016 <a href="">Yours Truly</a>, Famous Inc.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<img class="cover" src="pictures/tall.png" alt="">
|
||||
</section>
|
||||
<section class="slide">
|
||||
<img class="cover" src="pictures/wide.png" alt="">
|
||||
</section>
|
||||
<section class="slide white">
|
||||
<img class="place top left" src="pictures/square.png" alt="">
|
||||
<img class="place top" src="pictures/square.png" alt="">
|
||||
<img class="place top right" src="pictures/square.png" alt="">
|
||||
<img class="place left" src="pictures/square.png" alt="">
|
||||
<img class="place" src="pictures/square.png" alt="">
|
||||
<img class="place right" src="pictures/square.png" alt="">
|
||||
<img class="place bottom left" src="pictures/square.png" alt="">
|
||||
<img class="place bottom" src="pictures/square.png" alt="">
|
||||
<img class="place bottom right" src="pictures/square.png" alt="">
|
||||
</section>
|
||||
<section class="slide" data-timing="00:03">
|
||||
<h2 class="shout">Timer</h2>
|
||||
</section>
|
||||
<section class="slide">
|
||||
<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>
|
||||
</ol>
|
||||
<p class="next">Before they sold out master</p>
|
||||
</section>
|
||||
<div class="progress"></div>
|
||||
<footer class="badge">
|
||||
<a href="https://github.com/shower/shower">Fork me on GitHub</a>
|
||||
</footer>
|
||||
<script src="../../shower.min.js"></script>
|
||||
<!-- Copyright © 2016 Yours Truly, Famous Inc. -->
|
||||
</body>
|
||||
</html>
|
BIN
doc/presentations/tbd/shower/themes/ribbon/pictures/canvas.png
Normal file
After Width: | Height: | Size: 98 KiB |
BIN
doc/presentations/tbd/shower/themes/ribbon/pictures/exact.png
Normal file
After Width: | Height: | Size: 174 B |
BIN
doc/presentations/tbd/shower/themes/ribbon/pictures/square.png
Normal file
After Width: | Height: | Size: 96 B |
BIN
doc/presentations/tbd/shower/themes/ribbon/pictures/tall.png
Normal file
After Width: | Height: | Size: 154 B |
BIN
doc/presentations/tbd/shower/themes/ribbon/pictures/wide.png
Normal file
After Width: | Height: | Size: 153 B |
@ -0,0 +1,2 @@
|
||||
http://www.slideshare.net/AlexeyMilovidov1/clickhouse-69616890/AlexeyMilovidov1/clickhouse-69616890
|
||||
file:///home/milovidov/work/Presentation/shower/index.html#cover
|
@ -0,0 +1,204 @@
|
||||
/**
|
||||
* Ribbon theme for Shower HTML presentation engine
|
||||
* shower-ribbon v2.0.8, https://github.com/shower/ribbon
|
||||
* @copyright 2010–2016 Vadim Makeev, http://pepelsbey.net/
|
||||
* @license MIT
|
||||
*/
|
||||
@charset "UTF-8";
|
||||
|
||||
@font-face {
|
||||
font-family: 'Yandex Sans Text Web';
|
||||
src: url(https://yastatic.net/adv-www/_/yy5JveR58JFkc97waf-xp0i6_jM.eot);
|
||||
src: url(https://yastatic.net/adv-www/_/yy5JveR58JFkc97waf-xp0i6_jM.eot?#iefix) format('embedded-opentype'),
|
||||
url(https://yastatic.net/adv-www/_/CYblzLEXzCqQIvrYs7QKQe2omRk.woff2) format('woff2'),
|
||||
url(https://yastatic.net/adv-www/_/pUcnOdRwl83MvPPzrNomhyletnA.woff) format('woff'),
|
||||
url(https://yastatic.net/adv-www/_/vNFEmXOcGYKJ4AAidUprHWoXrLU.ttf) format('truetype'),
|
||||
url(https://yastatic.net/adv-www/_/0w7OcWZM_QLP8x-LQUXFOgXO6dE.svg#YandexSansTextWeb-Bold) format('svg');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-stretch: normal
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Yandex Sans Text Web';
|
||||
src: url(https://yastatic.net/adv-www/_/LI6l3L2RqcgxBe2pXmuUha37czQ.eot);
|
||||
src: url(https://yastatic.net/adv-www/_/LI6l3L2RqcgxBe2pXmuUha37czQ.eot?#iefix) format('embedded-opentype'),
|
||||
url(https://yastatic.net/adv-www/_/z3MYElcut0R2MF_Iw1RDNrstgYs.woff2) format('woff2'),
|
||||
url(https://yastatic.net/adv-www/_/1jvKJ_-hCXl3s7gmFl-y_-UHTaI.woff) format('woff'),
|
||||
url(https://yastatic.net/adv-www/_/9nzjfpCR2QHvK1EzHpDEIoVFGuY.ttf) format('truetype'),
|
||||
url(https://yastatic.net/adv-www/_/gwyBTpxSwkFCF1looxqs6JokKls.svg#YandexSansTextWeb-Regular) format('svg');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-stretch: normal
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Yandex Sans Text Web';
|
||||
src: url(https://yastatic.net/adv-www/_/ayAFYoY8swgBLhq_I56tKj2JftU.eot);
|
||||
src: url(https://yastatic.net/adv-www/_/ayAFYoY8swgBLhq_I56tKj2JftU.eot?#iefix) format('embedded-opentype'),
|
||||
url(https://yastatic.net/adv-www/_/lGQcYklLVV0hyvz1HFmFsUTj8_0.woff2) format('woff2'),
|
||||
url(https://yastatic.net/adv-www/_/f0AAJ9GJ4iiwEmhG-7PWMHk6vUY.woff) format('woff'),
|
||||
url(https://yastatic.net/adv-www/_/4UDe4nlVvgEJ-VmLWNVq3SxCsA.ttf) format('truetype'),
|
||||
url(https://yastatic.net/adv-www/_/EKLr1STNokPqxLAQa_RyN82pL98.svg#YandexSansTextWeb-Light) format('svg');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-stretch: normal
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Yandex Sans Display Web';
|
||||
src: url(https://yastatic.net/adv-www/_/H63jN0veW07XQUIA2317lr9UIm8.eot);
|
||||
src: url(https://yastatic.net/adv-www/_/H63jN0veW07XQUIA2317lr9UIm8.eot?#iefix) format('embedded-opentype'),
|
||||
url(https://yastatic.net/adv-www/_/sUYVCPUAQE7ExrvMS7FoISoO83s.woff2) format('woff2'),
|
||||
url(https://yastatic.net/adv-www/_/v2Sve_obH3rKm6rKrtSQpf-eB7U.woff) format('woff'),
|
||||
url(https://yastatic.net/adv-www/_/PzD8hWLMunow5i3RfJ6WQJAL7aI.ttf) format('truetype'),
|
||||
url(https://yastatic.net/adv-www/_/lF_KG5g4tpQNlYIgA0e77fBSZ5s.svg#YandexSansDisplayWeb-Regular) format('svg');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-stretch: normal
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Yandex Sans Display Web';
|
||||
src: url(https://yastatic.net/adv-www/_/g8_MyyKVquSZ3xEL6tarK__V9Vw.eot);
|
||||
src: url(https://yastatic.net/adv-www/_/g8_MyyKVquSZ3xEL6tarK__V9Vw.eot?#iefix) format('embedded-opentype'),
|
||||
url(https://yastatic.net/adv-www/_/LGiRvlfqQHlWR9YKLhsw5e7KGNA.woff2) format('woff2'),
|
||||
url(https://yastatic.net/adv-www/_/40vXwNl4eYYMgteIVgLP49dwmfc.woff) format('woff'),
|
||||
url(https://yastatic.net/adv-www/_/X6zG5x_wO8-AtwJ-vDLJcKC5228.ttf) format('truetype'),
|
||||
url(https://yastatic.net/adv-www/_/ZKhaR0m08c8CRRL77GtFKoHcLYA.svg#YandexSansDisplayWeb-Light) format('svg');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-stretch: normal
|
||||
}
|
||||
|
||||
*,::after,::before{box-sizing:border-box}
|
||||
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}
|
||||
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}
|
||||
.caption p,body{line-height:1}
|
||||
p {line-height: 1}
|
||||
ol,ul{list-style:none}
|
||||
blockquote,q{quotes:none}
|
||||
blockquote::after,blockquote::before,q::after,q::before{content:none}
|
||||
table{border-collapse:collapse;border-spacing:0}
|
||||
a{text-decoration:none}
|
||||
@page{margin:0;size:1024px 640px}
|
||||
.shower{color:#000;counter-reset:slide;font:25px/2 Yandex Sans Display Web,sans-serif;-webkit-print-color-adjust:exact;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none}
|
||||
@media print{.shower{text-rendering:geometricPrecision}
|
||||
}
|
||||
.caption{font-size:25px;display:none;margin-top:-.2em;padding:0 1em .93em;width:100%;color:#3c3d40;text-shadow:0 1px 0 #8d8e90}
|
||||
@media (min-width:1174px){.caption{font-size:50px}
|
||||
}
|
||||
@media (min-width:2348px){.caption{font-size:100px}
|
||||
}
|
||||
.caption h1{padding-bottom:.15em;font:1em/2 Yandex Sans Display Web,sans-serif}
|
||||
.caption p{font-size:.6em}
|
||||
.caption a{color:#4b86c2;text-shadow:0 -1px 0 #1f3f60}
|
||||
.slide{position:relative;z-index:1;overflow:hidden;padding:20px 100px 0;width:1024px;height:640px;background:#fff;font-size:25px}
|
||||
|
||||
/*.slide::after{position:absolute;top:0;right:100px;padding-top:15px;width:50px;height:100px;background:url(../images/ribbon.svg) no-repeat;color:#fff;counter-increment:slide;content:counter(slide);text-align:center}*/
|
||||
|
||||
.slide h1{vertical-align:middle; color:#000;font:400 50px/2 Yandex Sans Display Web,sans-serif}
|
||||
.slide h2{margin-bottom:34px;color:#000;font:400 50px/2 Yandex Sans Display Web,sans-serif}
|
||||
.slide p{margin-bottom:1em}
|
||||
.slide p.note{color:#979a9e}
|
||||
.slide a{background:-webkit-linear-gradient(bottom,currentColor .09em,transparent .09em) repeat-x;background:linear-gradient(to top,currentColor .09em,transparent .09em) repeat-x;color:#4b86c2}
|
||||
.slide b,.slide strong{font-weight:700}
|
||||
.slide blockquote,.slide dfn,.slide em,.slide i{font-style:italic}
|
||||
.slide code,.slide kbd,.slide mark,.slide samp{padding:.1em .3em;border-radius:.2em}
|
||||
.slide code,.slide kbd,.slide samp{background:rgba(88,90,94,.1);line-height:1;font-family:PT Mono,monospace,monospace}
|
||||
.slide mark{background:#fafaa2}
|
||||
.slide sub,.slide sup{position:relative;line-height:0;font-size:75%}
|
||||
.slide sub{bottom:-.25em}
|
||||
.slide sup{top:-.5em}
|
||||
.slide blockquote::before{position:absolute;margin:-.15em 0 0 -.43em;color:#ccc;line-height:1;font-size:8em;content:'\201C'}
|
||||
.slide blockquote+figcaption{margin:-1em 0 1em;font-style:italic;font-weight:700}
|
||||
.slide ol,.slide ul{margin-bottom:0em;counter-reset:list}
|
||||
.slide ol li,.slide ul li{page-break-inside:avoid;text-indent:-2em}
|
||||
.slide ol li::before,.slide ul li::before{display:inline-block;width:2em;color:#979a9e;text-align:right}
|
||||
.slide ol ol,.slide ol ul,.slide ul ol,.slide ul ul{margin-bottom:0;margin-left:2em}
|
||||
.slide ul>li::before{padding-right:.5em;content:'•'}
|
||||
.slide ul>li:lang(ru)::before{content:'—'}
|
||||
.slide ol>li::before{padding-right:.4em;counter-increment:list;content:counter(list) "."}
|
||||
.slide table{margin-left:-100px;margin-bottom:1em;width:calc(100% + 100px + 100px)}
|
||||
.slide table td:first-child,.slide table th:first-child{padding-left:96px}
|
||||
.slide table td:last-child,.slide table th:last-child{padding-right:96px}
|
||||
.slide table th{text-align:left;font-weight:700}
|
||||
.slide table tr:not(:last-of-type)>*{background:-webkit-linear-gradient(bottom,rgba(88,90,94,.5) .055em,transparent .055em) repeat-x;background:linear-gradient(to top,rgba(88,90,94,.5) .055em,transparent .055em) repeat-x}
|
||||
.slide table.striped tr:nth-child(even){background:rgba(88,90,94,.1)}
|
||||
.slide table.striped tr>*{background-image:none}
|
||||
.slide pre{margin-bottom:1em;counter-reset:code;white-space:normal}
|
||||
.slide pre code{display:block;margin-left:-100px;padding:0 0 0 100px;width:calc(100% + 100px + 100px);border-radius:0;background:0 0;line-height:2;white-space:pre;-moz-tab-size:4;-o-tab-size:4;tab-size:4}
|
||||
.slide pre code:not(:only-child).mark{background:rgba(88,90,94,.1)}
|
||||
.slide pre code:not(:only-child)::before{position:absolute;margin-left:-2em;color:#979a9e;counter-increment:code;content:counter(code,decimal-leading-zero) "."}
|
||||
.slide pre mark{position:relative;z-index:-1;margin:0 -.3em}
|
||||
.slide pre mark.important{background:#c00;color:#fff}
|
||||
.slide pre .comment{color:#999}
|
||||
.slide footer{position:absolute;right:0;bottom:-640px;left:0;display:none;padding:41px 100px 8px;background:#fbfbba;box-shadow:0 1px 0 #fafaa2 inset;-webkit-transition:bottom .3s;transition:bottom .3s}
|
||||
.slide footer mark{background:rgba(255,255,255,.8)}
|
||||
.slide:hover>footer{bottom:0}
|
||||
.slide.grid{background-image:url(../images/grid.png);-ms-interpolation-mode:nearest-neighbor;image-rendering:-webkit-optimize-contrast;image-rendering:-moz-crisp-edges;image-rendering:pixelated}
|
||||
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.slide.grid{background-image:url(../images/grid@2x.png);background-size:1024px auto}
|
||||
}
|
||||
.slide.black{background-color:#000}
|
||||
.slide.black::after,.slide.white::after{visibility:hidden}
|
||||
.slide.white{background-color:#fff}
|
||||
.slide .double,.slide .triple{-webkit-column-gap:75px;-moz-column-gap:75px;column-gap:75px;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}
|
||||
.slide .double{-webkit-column-count:2;-moz-column-count:2;column-count:2}
|
||||
.slide .triple{-webkit-column-count:3;-moz-column-count:3;column-count:3}
|
||||
.slide .shout{position:absolute;top:50%;left:0;width:100%;text-align:center;line-height:1;font-size:150px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
|
||||
.slide .shout a{background:-webkit-linear-gradient(bottom,currentColor .11em,transparent .11em) repeat-x;background:linear-gradient(to top,currentColor .11em,transparent .11em) repeat-x}
|
||||
.slide .cover{z-index:-1;max-width:100%;max-height:100%}
|
||||
.slide .cover.w,.slide .cover.width{width:100%;max-height:none}
|
||||
.slide .cover.h,.slide .cover.height{height:100%;max-width:none}
|
||||
.slide .cover+figcaption{position:absolute;bottom:20px;right:10px;font-size:12px;opacity:.7;-webkit-transform-origin:0 100%;transform-origin:0 100%;-webkit-transform:translateX(100%) rotate(-90deg);transform:translateX(100%) rotate(-90deg)}
|
||||
.slide .cover+figcaption.white{color:#fff}
|
||||
.slide .cover+figcaption a{color:currentcolor}
|
||||
.slide .cover,.slide .place{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
|
||||
.slide .place.b.l,.slide .place.b.r,.slide .place.bottom.left,.slide .place.bottom.right,.slide .place.t.l,.slide .place.t.r,.slide .place.top.left,.slide .place.top.right{-webkit-transform:none;transform:none}
|
||||
.slide .place.b,.slide .place.bottom,.slide .place.t,.slide .place.top{-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}
|
||||
.slide .place.l,.slide .place.left,.slide .place.r,.slide .place.right{-webkit-transform:translate(0,-50%);transform:translate(0,-50%)}
|
||||
.slide .place.t,.slide .place.t.r,.slide .place.top,.slide .place.top.left,.slide .place.top.right{top:0}
|
||||
.slide .place.r,.slide .place.right{right:0;left:auto}
|
||||
.slide .place.b,.slide .place.b.l,.slide .place.b.r,.slide .place.bottom,.slide .place.bottom.left,.slide .place.bottom.right{top:auto;bottom:0}
|
||||
.slide .place.l,.slide .place.left{left:0}
|
||||
.progress{left:-20px;bottom:0;z-index:1;display:none;width:0;height:0;box-sizing:content-box;border:10px solid #4b86c2;border-right-color:transparent;-webkit-transition:width .2s linear;transition:width .2s linear;clip:rect(10px,1044px,20px,20px)}
|
||||
.progress[style*='100%']{padding-left:10px}
|
||||
.badge,.badge a,.progress{position:absolute}
|
||||
.badge{font-size:10px;top:0;z-index:1;overflow:hidden;display:none;width:9em;height:9em;right:0;visibility:hidden}
|
||||
@media (min-width:1174px){.badge{font-size:20px}
|
||||
}
|
||||
@media (min-width:2348px){.badge{font-size:40px}
|
||||
}
|
||||
.badge a{right:-50%;bottom:50%;left:-50%;visibility:visible;background:#4b86c2;color:#fff;text-align:center;line-height:2;-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
|
||||
.region{display:none}
|
||||
@media screen{.shower.list{padding-top:25px;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;background:#585a5e;position:absolute;clip:rect(0,auto,auto,0)}
|
||||
}
|
||||
@media screen and (min-width:1174px){.shower.list{padding-top:50px}
|
||||
}
|
||||
@media screen and (min-width:2348px){.shower.list{padding-top:100px}
|
||||
}
|
||||
@media screen{.shower.list .caption{display:block}
|
||||
.shower.list .slide{-webkit-transform-origin:0 0;transform-origin:0 0;margin:0 -768px -455px 25px;-webkit-transform:scale(.25);transform:scale(.25);border-radius:2px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
|
||||
}
|
||||
@media screen and (min-width:1174px){.shower.list .slide{margin:0 -512px -270px 50px;-webkit-transform:scale(.5);transform:scale(.5)}
|
||||
}
|
||||
@media screen and (min-width:2348px){.shower.list .slide{margin:0 0 100px 100px;-webkit-transform:scale(1);transform:scale(1)}
|
||||
}
|
||||
@media screen{.shower.list .slide:hover{box-shadow:0 0 0 20px rgba(0,0,0,.1),0 20px 50px rgba(0,0,0,.3)}
|
||||
.shower.list .slide:target{box-shadow:0 0 0 1px #376da3,0 0 0 20px #4b86c2,0 20px 50px rgba(0,0,0,.3)}
|
||||
.shower.list .slide *{pointer-events:none}
|
||||
.shower.list .badge,.shower.list .slide footer{display:block}
|
||||
.shower.full{position:absolute;top:50%;left:50%;overflow:hidden;margin:-320px 0 0 -512px;width:1024px;height:640px;background:#000}
|
||||
.shower.full .slide{position:absolute;top:0;left:0;margin-left:-150%;visibility:hidden}
|
||||
.shower.full .slide:target{margin:0;visibility:visible}
|
||||
.shower.full .slide pre code:not(:only-child).mark.next{visibility:visible;background:0 0}
|
||||
.shower.full .slide pre code:not(:only-child).mark.next.active{background:rgba(88,90,94,.1)}
|
||||
.shower.full .slide .next{visibility:hidden}
|
||||
.shower.full .slide .next.active{visibility:visible}
|
||||
.shower.full .slide .shout.grow,.shower.full .slide .shout.shrink{opacity:0;-webkit-transition:.4s ease-out;transition:.4s ease-out;-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}
|
||||
.shower.full .slide .shout.grow{-webkit-transform:scale(.1) translateY(-50%);transform:scale(.1) translateY(-50%)}
|
||||
.shower.full .slide .shout.shrink{-webkit-transform:scale(10) translateY(-50%);transform:scale(10) translateY(-50%)}
|
||||
.shower.full .slide:target .shout.grow,.shower.full .slide:target .shout.shrink{opacity:1;-webkit-transform:scale(1) translateY(-50%);transform:scale(1) translateY(-50%)}
|
||||
.shower.full .progress{display:block;-webkit-transform:translateZ(0);transform:translateZ(0)}
|
||||
.shower.full .region{position:absolute;clip:rect(0 0 0 0);overflow:hidden;margin:-1px;padding:0;width:1px;height:1px;border:none;display:block}
|
||||
}
|