ummmmmm........

4df5100d · vrnnncl · a7c87ee0 · a7c87ee0 · a7c87ee0 · a7c87ee0
Commit 4df5100d authored Mar 24, 2022 by vrnnncl
19 changed files
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
-# Contributing to Shower
-You’re always welcome to contribute! Before contributing to Shower, please read through unified [issues list](https://github.com/shower/shower/issues) to see open bugs and feature requests. If you have any feature to add to Shower or found a bug and want to fix it, please make sure you [file an issue](https://github.com/shower/shower/issues/new) first.
-## Process
-Fork needed repository, create a branch for each feature or issue you’re dealing with and start making changes. Make sure you code doesn’t break tests if there are any. Once you’re finished, send pull request back to original repository: one feature or bug fix — one pull request, please don’t combine non-relevant changes into one pull request. Supply clear description of your changes and a link to existing issue.
-## Code style
-Please preserve existing code style while contributing to Shower and be ready for code review by Shower maintainers. It’s strongly recommended to install [EditorConfig](http://editorconfig.org) extension to your editor and validate your JavaScript changes using [JSHint](http://jshint.com/).
-## Language
-English is the main language for Shower project. All discussions and commit messages should be in English, no matter if it’s good or bad. The second language of Shower is Russian. Official Shower themes are always compatible with Cyrillic and Russian typography. All documentation to Shower is always localized to Russian.
---
-Licensed under [MIT License](LICENSE.md).
--- a/LICENSE.md
+++ b/LICENSE.md
-# The MIT License
-Copyright © 2010–2021 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–2021 Вадим Макеев, http://pepelsbey.net/
-Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, добавление, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, также как и лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий:
-Указанное выше уведомление об авторском праве и данные условия должны быть включены во все копии или значимые части данного Программного Обеспечения.
-ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ ГАРАНТИЯМИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ ПРАВ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО ИСКАМ О ВОЗМЕЩЕНИИ УЩЕРБА, УБЫТКОВ ИЛИ ДРУГИХ ТРЕБОВАНИЙ ПО ДЕЙСТВУЮЩИМ КОНТРАКТАМ, ДЕЛИКТАМ ИЛИ ИНОМУ, ВОЗНИКШИМ ИЗ, ИМЕЮЩИМ ПРИЧИНОЙ ИЛИ СВЯЗАННЫМ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫМИ ДЕЙСТВИЯМИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ.
--- a/README.md
+++ b/README.md
-# Shower Presentation Template
-[![Test status](https://github.com/shower/shower/workflows/Test/badge.svg)](https://github.com/shower/shower/actions/workflows/test.yml)
-<img src="pictures/logo.png" width="250" alt="Shower logo">
-> Shower ['ʃəuə] noun. A person or thing that shows.
-1. Built on HTML, CSS and vanilla JavaScript.
-2. Works in all modern browsers.
-3. Themes are separated from engine.
-4. Fully keyboard accessible.
-5. Printable to PDF.
-[See it in action](https://shwr.me/). Includes [Ribbon](https://github.com/shower/ribbon/) and [Material](https://github.com/shower/material/) themes, and [core](https://github.com/shower/core/) with plugins.
-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.
-## Quick Start
-1. Download and unzip [shower.zip](http://shwr.me/shower.zip) template archive.
-2. Open `index.html` in any text editor and start creating your presentation.
-## Quick Start via CLI
-You’ll need [Node.js](https://nodejs.org/) installed on your computer.
-1. Install Shower CLI utility: `npm install -g @shower/cli`.
-2. Create your presentation: `shower create`.
-Read more on [shower/cli](https://github.com/shower/cli/) page.
-## Quick Start with Hosting
-You’ll need [Node.js](https://nodejs.org/) installed on your computer.
-1. Copy this repository to your account via GitHub.
-    1. Open [import page](https://github.com/new/import).
-    2. Use `https://github.com/shower/shower` for the repository URL
-    3. Use your presentation name.
-    4. Clone the resulted repository to your computer.
-2. Install dependencies `npm install` and start a local server `npm start`.
-3. Start editing your slides with live-reload.
-Once you’re done you can build a clean copy of your slides:
-    npm run bundle
-You’ll find your presentation in `bundled` folder. You can also run `npm run archive` to get the same files in `presentation.zip`.
-Publish your presentation online by running:
-    npm run publish
-You’ll have your slides published to `https://USER.github.io/REPO/`.
-## Deploy to Netlify
-By clicking the button below you can fork this repo and deploy it to Netlify.
-[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/shower/shower)
-By doing this you would get a GitHub repo linked with Netlify in a way any change to the repo would trigger a Shower rebuild and deploy to Netlify servers, which allows for an easy way to create and share Shower presentation without the need to install anything locally.
-## Browser Support
-Latest stable versions of Chrome, Edge, Firefox, and Safari are supported.
-## Contributing
-You’re always welcome to contribute. Fork project, make changes and send it as pull request. But it’s better to file an [issue](https://github.com/shower/shower/issues) with your idea first. Read [contributing rules](CONTRIBUTING.md) for more details.
-Main contributors in historical order: [pepelsbey](https://github.com/pepelsbey), [jahson](https://github.com/jahson), [miripiruni](https://github.com/miripiruni), [kizu](https://github.com/kizu), [artpolikarpov](https://github.com/artpolikarpov), [tonyganch](https://github.com/tonyganch), [zloylos](https://github.com/zloylos), [zloylos](https://github.com/zloylos), [shvaikalesh](https://github.com/shvaikalesh).
---
-Licensed under [MIT License](LICENSE.md).
--- a/docs/features.md
+++ b/docs/features.md
-# Features
-All theme’s features are demonstrated in the [index.html](../index.html) file. Use it as a reference while building your presentation. More detailed features overview follows below.
- [Anatomy](#anatomy)
- [Common](#common)
-    - [Language](#language)
-    - [Canvas](#canvas)
-    - [Title](#title)
-    - [Badge](#badge)
-    - [Progress](#progress)
- [Slide](#slide)
-    - [Number](#number)
-    - [Types](#types)
-        - [White](#white)
-        - [Black](#black)
-        - [Grid](#grid)
-    - [Content](#content)
-        - [Header](#header)
-        - [Paragraphs](#paragraphs)
-        - [Inline](#inline)
-        - [Quotes](#quotes)
-        - [Lists](#lists)
-        - [Columns](#columns)
-        - [Tables](#tables)
-        - [Code](#code)
-    - [Elements](#elements)
-        - [Cover](#cover)
-        - [Notes](#notes)
-        - [Place](#place)
-        - [Shout](#shout)
-        - [Spotlight](#spotlight)
-## Anatomy
-Theme package consists of the following folders and files:
-2. `fonts` folder with fonts in WOFF format.
-3. `images` folder with decoration images.
-4. `pictures` folder with sample pictures.
-5. `styles` folder with built styles in 16×10 and 4×3 ratios.
-6. `index.html` file with demonstration of all features.
-In addition to files theme’s repository contains source files:
-1. `source` folder with font source files in TTF and design in [Sketch](http://bohemiancoding.com/sketch/).
-2. `styles` folder also contains source styles in SCSS format.
-## Common
-### Language
-The main presentation language is set on the root element of the document, please note it and set the right one:
-    <html lang="en">
-    <html lang="ru">
-Appropriate typography traditions are used based on this value. `lang` attribute could also be set on separate slides or elements.
-### Canvas
-The root presentation element has the main `shower` class and additional mode class: `list` for the list and `full` for the full screen. `list` mode is usually set by default, but if there’s no one, it’ll be set to `list` anyway and slides will be opened in the list mode. If `full` is set instead of `list` then slides will be opened in the full screen mode.
-List:
-    <body class="shower list">
-Full:
-    <body class="shower full">
-Theme’s architecture is based on agreement that all presentation elements are nested in `shower` element and mode classes are hiding or showing needed elements depending on current mode.
-### Caption
-Presentation title is marked with the `caption` element, which has following elements provided: `<h1>` for the header, `<p>` for the description and also links.
-    <header class="caption">
-        <h1>Presentation Title</h1>
-        <p><a href="">Yours Truly</a>, Famous Inc.</p>
-    </header>
-Caption is visible only in the list mode. Don’t forget to also specify presentation title in document’s `<title>` element.
-### Badge
-Badge with “Fork me on GitHub” link (or any other call to action) is marked with `badge` element.
-    <footer class="badge">
-        <a href="…">Fork me on Github</a>
-    </footer>
-Badge is visible only in the list mode.
-### Progress
-Progress bar shows how much is left until presentation end and marked with `progress` element visible only in full screen mode:
-    <div class="progress"></div>
-To remove it from presentation just remove this element from document. There’s no way to hide it for specific slides.
-## Slide
-Slides are marked with `slide` class. Please don’t nest slides and don’t forget closing tags, things could go wrong.
-    <section class="slide">
-        …
-    </section>
-    <section class="slide">
-        …
-    </section>
-There are two slide ratios supported: 16×10 and 4×3. To enable needed one include appropriate file `screen-4x3.css` or `screen-16x10.css`. Wide screen 16×10 format is included by default.
-Slide width is 1024 px for the both ratios, for 16×10 height is 640 px, for 4×3 it’s 768. Bear in mind these sizes while preparing presentation pictures. In list mode slides are scaled down 2 or 4 times and in full screen mode they are scaled dynamically based on window size.
-### Number
-Slide numbers help audience to remember slides for questions and open needed slide by changing number in address field. Numbers are generated automatically using CSS counters and could be turned off for specific slides.
-You can hide number manually:
-    <section class="slide" id="off">
-        <style>
-            #off::after {
-                visibility: hidden;
-            }
-        </style>
-    </section>
-Slide type `clear` could also hide slide number.
-### Types
-Types are changing slide’s look. You can set type by adding class to the main `slide`. There are few built-in types available in the theme, you could also describe custom types for each presentation or add it to your theme.
-#### White
-White type sets white background.
-    <section class="slide white">
-#### Black
-Black type sets black background.
-    <section class="slide black">
-Please note that black slide type doesn’t change text color.
-#### Clear
-Clear type turns off slide number. Use it when you need a pure slide. May be mixed with `white` or `black` type.
-    <section class="slide clear">
-#### Grid
-Grid set a background with two guide types: main magenta guides and additional cyan guides, setting margins, rows and columns.
-    <section class="slide grid">
-        …
-    </section>
-All theme elements are aligned by this grid and it’s recommended to follow it while changing or extending a theme.
-### Content
-Simple content: headers, paragraphs, lists.
-#### Header
-Slide header is marked with `<h2>` element:
-    <section class="slide">
-        <h2>Slide Header</h2>
-    </section>
-We haven’t introduced next heading levels to not provoke slides complexity.
-#### Paragraphs
-Paragraphs are marked with `<p>` element. You could also make a note, less important part of a slide, by adding a `note` class to a paragraph:
-    <section class="slide">
-        <p>Text</p>
-        <p class="note">Note</p>
-    </section>
-#### Inline
-There are following inline elements styled in the theme:
- `<a>` is underlined;
- `<strong>` and `<b>` are bold;
- `<em>` and `<i>` are italic;
- `<code>`, `<samp>`, and `<kbd>` are monospaced;
- `<sup>` and `<sub>` make superscript and subscript indexes;
- `<mark>` highlights text with background color.
-#### Quotes
-Quotes are marked with `<blockquote>` element which contains one or more paragraphs:
-    <blockquote>
-        <p>Flannel bicycle rights locavore selfies.</p>
-    </blockquote>
-To add a quote’s author wrap a quote to a `<figure>` element and put a caption in the `<figcaption>` right after:
-    <figure>
-        <blockquote>
-            <p>Post-ironic fashion axe flexitarian</p>
-        </blockquote>
-        <figcaption>Yours Truly</figcaption>
-    </figure>
-#### Lists
-For creating list you must use `ul` (`ol` for numerical list).
-    <ol>
-        <li>Literally viral vegan</li>
-        <li>Wes Anderson chillwave Marfa
-            <ul>
-                <li>Retro meh brunch aesthetic</li>
-                <li>Messenger bag retro cred</li>
-            </ul>
-        </li>
-    </ol>
-You can also create list with inner navigation by adding `next` class to each elements following after element from each you want start navigation:
-    <h2>Inner navigation</h2>
-    <ol>
-        <li>I'll be seen right away.</li>
-        <li>Just navigate to next slide and you'll see others.</li>
-        <li class="next">Hey! It's all okay ?</li>
-        <li class="next"> ... </li>
-    </ol>
-And even so:
-    <h2>Benefits</h2>
-    <ol>
-        <li class="next">The most important advantage</li>
-        <li class="next">Less important advantage</li>
-    </ol>
-    <h2 class="next">Disadvantages</h2>
-    <ol class="next">
-        <li class="next">There's nothing here</li>
-        <li class="next"> ... </li>
-    </ol>
-#### Columns
-If you want to form text in two or three columns use `double` or `triple` class
-    <p class="double">
-        Echo Park 8-bit sustainable umami deep v Kickstarter.
-    </p>
-Also work with lists:
-    <ul class="triple">
-        <li>Occupy locavore blog</li>
-        <li>Mustache you haven’t heard of</li>
-        <li>Something else</li>
-    </ul>
-#### Tables
-Create table by using usual `table`, `tr`, `th`
-    <table>
-        <tr>
-            <th scope="col">Gentrify</th>
-            <th>Twee</th>
-        </tr>
-        <tr>
-            <th scope="row">Messenger</th>
-            <td>Mixtape</td>
-        </tr>
-    </table>
-Class `striped` stylizes your table: even rows will turn gray background
-    <table class="striped">
-#### Code
-`Code` tag define your program code
-    <pre><code>function action() {
-        // TODO
-        return true;
-    }</code></pre>
-If you want to add lines numbers use next construction:
-    <pre>
-        <code>function action() {</code>
-        <code>    // TODO</code>
-        <code>    return true;</code>
-        <code>}</code>
-    </pre>
-When necessary emphasize that code is commented, you need to use span element with `comment` class;
-If you want to color part of code, wrap this part with `mark` to add yellow background and `mark` with `important` class to add red background;
-    <pre><code>function <mark>action()</mark> {
-        <span class="comment">// TODO</span>
-        return <mark class="important">true</mark>;
-    }</code></pre>
-### Elements
-…
-#### Cover
-`Cover` class on img attribute indicates that picture will be background for slide
-    <section class="slide">
-        <img class="cover" src="picture.png">
-    </section>
-To stretch the picture in width or height, you need to set a `width` or `height` class respectively;
-Use both classes `width height`, if you want to stretch the picture in width and height
-    <img class="cover width" src="picture.png">
-    <img class="cover height" src="picture.png">
-    <img class="cover width height" src="picture.png">
-Shortcut for `width`, `height`:
-    <img class="cover w" src="picture.png">
-    <img class="cover h" src="picture.png">
-To insert an image description, links to the author's site or other information use `figure` tag with `figcaption`
-    <figure>
-        <img class="cover" src="picture.png">
-        <figcaption class="white">
-            © Yours Truly
-        </figcaption>
-    </figure>
-#### Notes
-When necessary to add some notes for a slide, you may use `footer` class, that hide your notes at all time and show them when you hover to slide:
-    <section class="slide">
-        <p>Retro meh brunch aesthetic.</p>
-        <footer class="footer">
-            <p>Cosby sweater Shoreditch.</p>
-        </footer>
-    </section>
-#### Place
-Use `place` class on img attribute give same effect as `cover` class - set background image
-    <section class="slide">
-        <img class="place" src="picture.png">
-    </section>
-If you want collocate picture at a certain side, you need to use `top` / `right` / `bottom` / `left` class as shown below
-    <img class="place top" src="picture.png">
-    <img class="place right" src="picture.png">
-    <img class="place bottom" src="picture.png">
-    <img class="place left" src="picture.png">
-You can also combine classes for location in corners:
-    <img class="place top left" src="picture.png">
-    <img class="place top right" src="picture.png">
-    <img class="place bottom left" src="picture.png">
-    <img class="place bottom right" src="picture.png">
-#### Shout
-There are slides, which need to be described in only a few words. Usually they display a call for action, define common themes, link to project or something else. To stylize this text, use the `shout` class.
-    <section class="slide">
-        <h2 class="shout">Shout</h2>
-    </section>
-Add `grow` class to animate text from small to big size
-    <section class="slide">
-        <h2 class="shout grow">Growing Shout</h2>
-    </section>
-Or, on the contrary, for animate text size from big to small add `shrink` class.
-    <section class="slide">
-        <h2 class="shout shrink">Shrinking Shout</h2>
-    </section>
-#### Spotlight
-When necessary, to spotlight some part of the slide, you may use the `spotlight` class:
-    <section class="slide">
-        <h2>Round spotlight</h2>
-        <div class="spotlight"></div>
-    </section>
-It can be combined with `place` class and `top` / `right` / `bottom` / `left` classes:
-    <section class="slide">
-        <h2>Round spotlight in the corner</h2>
-        <div class="spotlight place top right"></div>
-    </section>
-You can also use the `next` class for inner navigation:
-    <section class="slide">
-        <h2>Spotlight with inner navigation</h2>
-        <ol>
-            <li>I'll be seen right away.</li>
-            <li>Just navigate to next slide and you'll see others.</li>
-            <li class="next">Hey! It's all okay ?</li>
-            <li class="next"> ... </li>
-        </ol>
-        <div class="spotlight next"></div>
-    </section>
-You can create custom `style` for the spotlight element, e.g., stripe spotlight:
-    <section class="slide">
-        <h2>Stripe spotlight</h2>
-        <style>
-            .stripe {
-                --spotlight-radius: 0;
-                --spotlight-opacity: 0.2;
-                --spotlight-width: 1024px;
-                --spotlight-height: 48px;
-            }
-            .stripe.line-4 {
-                --spotlight-top: 37px;
-            }
-        </style>
-        <div class="spotlight stripe line-4"></div>
-    </section>
-You can also create CSS animation:
-    <section class="slide">
-        <h2>Spotlight with animation</h2>
-        <style>
-            @keyframes one-line {
-                0%   {height:100%}
-                100% {height:50px}
-            }
-            .one-line {
-                animation-name: one-line;
-                animation-duration: 3s;
-                animation-delay: 2s;
-                --spotlight-radius: 0;
-                --spotlight-opacity: 0.2;
-                --spotlight-width: 1024px;
-                --spotlight-height: 48px;
-                --spotlight-top: 37px;
-            }
-        </style>
-        <div class="spotlight next one-line"></div>
-    </section>
-> Please remember that you should duplicate slides with and without a spotlight for the PDF version because PDF format doesn't support animation.
--- a/docs/images/logitech.png
+++ b/docs/images/logitech.png
--- a/docs/images/material-canvas.png
+++ b/docs/images/material-canvas.png
--- a/docs/images/material-printing.png
+++ b/docs/images/material-printing.png
--- a/docs/images/ribbon-canvas.png
+++ b/docs/images/ribbon-canvas.png
--- a/docs/images/ribbon-printing.png
+++ b/docs/images/ribbon-printing.png
--- a/docs/logitech.md
+++ b/docs/logitech.md
-# Logitech Spotlight
-There’s a brand new [Logitech Spotlight](http://www.logitech.com/en-us/product/spotlight-presentation-remote) presentation remote, which is already fully compatible with Shower: you can switch between slides, hover and click your presentation. But you can make the most of it by enabling two additional shortcuts in Logitech Presentation application, available for macOS and Windows.
-1. [Download](http://support.logitech.com/en_us/software/logi-presentation) and install an app.
-2. Go to the main menu and locate additional shortcuts options.
-3. Change _Hold Next Button_ to `Cmd Enter` for macOS or `Shift F5` for Windows (just press it).
-4. Change _Hold Back Button_ to `Esc` (just press it).
-<img src="images/logitech.png" width="300" alt="Logitech Presenter application">
-You might have to enable accessibility access on macOS in order to use this features. App will ask you once it’s needed.
-Now when all is set you can:
- Start your presentation by holding next button: from the first slide (if none selected) or from the current slide (if there’s one).
- Exit full screen mode by holding back button. It might be useful when you need to find a certain slide and navigate the list.
--- a/docs/pdf.md
+++ b/docs/pdf.md
-# Export to PDF
-Though publishing your HTML slides as they are is always a better idea, you can export your presentation to PDF to upload it to a service like [SlideShare](https://www.slideshare.net/) or [Notist](https://noti.st/).
-There are two ways of doing this: via browser print dialog or via console. Exporting via browser seems like the most convenient option, but in some cases it might take too much time or even freeze your browser if your slides are too heavy or there are too many of them.
-## Browser
-To export your slides to PDF using a browser, you’ll need a browser that’s capable of reading page size from `@page` CSS rule. Chromium-based browsers such as Chrome, Opera, Yandex work the best.
-Open you presentation in a browser and send it to print:
-1. Press <kbd>Cmd P</kbd> or <kbd>Ctrl P</kbd>.
-2. Select PDF as a target instead of printer.
-3. Save resulted file.
-![Printing dialog](images/ribbon-printing.png)
-## Console
-To export your slides to PDF via console, you’ll need [Node.js](https://nodejs.org/) with npm installed. Once you have it, you can install Shower CLI package that’ll take care of export:
-```sh
-npm install -g @shower/cli
-```
-Once it’s installed, it becomes globally available as `shower` command. Run it in your presentation’s folder like this to get your PDF:
-```sh
-shower pdf
-```
-Run `shower --help` for more options. But if it’s a one-time thing and you don’t want to install it globally, you can use built-in command coming with Shower main repository:
-```sh
-npm install
-npm run pdf
-```
-You’ll find `index.pdf` next to your slides.
--- a/docs/shortcuts.md
+++ b/docs/shortcuts.md
-# Keyboard Shortcuts
-You can navigate between slides, start and stop presentation using keyboard shortcuts.
- [Start and Stop](#start-and-stop)
- [Forward](#forward)
- [Backward](#backward)
- [First and Last](#first-and-last)
-## Start and Stop
- Start from the current slide: `Cmd Enter`, `Shift F5`, `Cmd Option P`
- Start from the first slide `Cmd Shift Enter`
- Stop: `Esc` key
-## Forward
- `Right` and `Down` arrows
- `Page Down` key or `Fn Down` on Mac
- `N` for “next”, `J` or `L` keys
- `Enter` key
- `Space` key during presentation
-## Backward
- `Left` and `Up` arrows
- `Page Up` key or `Fn Up` on Mac
- `P` for “previous”, `K` or `H` keys, like in vim
- `Shift Enter` key
- `Shift Space` key during presentation
-## First and Last
- First slide: `Home` key or `Fn Left` on Mac
- Last slide: `End` key or `Fn Right` on Mac
--- a/netlify.toml
+++ b/netlify.toml
-[build]
-  publish = "bundled"
-  command = "npm run bundle"
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
 {
-  "name": "@shower/shower",
+  "private": true,
-  "description": "Shower HTML presentation engine",
-  "version": "3.3.0",
-  "author": {
-    "name": "Vadim Makeev",
-    "url": "https://pepelsbey.net/"
-  },
-  "homepage": "https://github.com/shower/shower",
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/shower/shower.git"
-  },
-  "bugs": {
-    "url": "https://github.com/shower/shower/issues"
-  },
-  "license": "MIT",
-  "keywords": [
-    "shower",
-    "presentation",
-    "template"
-  ],
-  "files": [
-    "pictures/**",
-    "index.html",
-    "LICENSE.md",
-    "README.md"
-  ],
-  "dependencies": {
-    "@shower/core": "^3.3.0",
-    "@shower/material": "^2.5.0",
-    "@shower/ribbon": "^3.5.0"
-  },
-  "devDependencies": {
-    "@shower/cli": "^0.3.1",
-    "path-exists-cli": "^2.0.0"
-  },
  "scripts": {
    "pdf": "shower pdf",
-    "start": "shower serve",
+    "serve": "shower serve",
-    "bundle": "shower bundle --files '**' --files '!{docs,node_modules,bundled}{,/**}' --files '!*.{md,toml,json}'",
+    "archive": "shower archive",
-    "archive": "shower archive --files '**' --files '!{docs,node_modules,bundled}{,/**}' --files '!*.{md,toml,json}'",
+    "bundle": "shower bundle",
-    "publish": "shower publish --files '**' --files '!{docs,node_modules,bundled}{,/**}' --files '!*.{md,toml,json}'",
+    "publish": "shower publish"
-    "test": "npm run bundle && ls bundled && npm run archive && path-exists presentation.zip"
+  },
+  "devDependencies": {
+    "@shower/cli": "^0.3.1"
  }
 }
--- a/pictures/cover.jpg
+++ b/pictures/cover.jpg
--- a/pictures/logo.png
+++ b/pictures/logo.png
--- a/pictures/logo.svg
+++ b/pictures/logo.svg
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><path fill="#4b86c2" d="M327.5 273.5l17.7-17.7L500 410.7v-35.4L362.8 238.1l17.7-17.7L500 339.9v-35.4L398.2 202.8l17.7-17.7 84.1 84.1V50c0-27.6-22.4-50-50-50H50C22.4 0 0 22.4 0 50v400c0 27.6 22.4 50 50 50h214.3c4.9-20.5-.7-42.9-16.7-58.9L186 379.5 124.5 318c-53.9-53.9-54.1-141.1-.4-194.8 53.7-53.7 140.9-53.6 194.8.3l8.5 8.5h106.1L274 291.1v-106l-8.3-8.5c-24.5-24.5-64-24.6-88.4-.2s-24.3 64.1.2 88.5l61.5 61.5 61.5 61.5c30.6 30.6 43.9 72.1 39.8 112H450c27.6 0 50-22.4 50-50v-4L327.5 273.5z"/></svg>
\ No newline at end of file
--- a/pictures/picture.jpg
+++ b/pictures/picture.jpg