Docs moved to Shower

8ef61e38 · Vadim Makeev · d0116444 · 8ef61e38 · 8ef61e38 · 8ef61e38
Commit 8ef61e38 authored Apr 09, 2016 by Vadim Makeev
9 changed files
--- a/docs/features-en.md
+++ b/docs/features-en.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)
+		- [Shout](#shout)
+		- [Place](#place)
+		- [Notes](#notes)
+
+## Anatomy
+
+Final theme package consists of the following folders and files:
+
+1. `docs` folder with usage documentation, including this manual.
+2. `fonts` folder with fonts in WOFF compressed 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 above 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="ru">
+	<html lang="en">
+
+Appropriate typography traditions are used based on this value. `lang` attribute could also be set to separate slides and even 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 presentation will be opened in the list mode. If `full` is set instead of `list` then presentation will be opened in the full screen mode.
+
+List:
+
+	<body class="shower list">
+		…
+	</body>
+
+Full screen:
+
+	<body class="shower full">
+		…
+	</body>
+
+Theme’s architecture is based on agreement that all presentation elements are nested in `shower` element and mode classes are hiding or showing needed element depending on current mode.
+
+### Title
+
+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>
+
+### Badge
+
+Badge with “Fork me on GitHub” link (or any other call to action) is marked with `badge` element and placed to the top right corner.
+
+	<footer class="badge">
+		<a href="…">Fork me on Github</a>
+	</footer>
+
+### Progress
+
+Progress bar shows how many slides left until presentation end and marked with `progress` element visible only in full screen mode:
+
+	<div class="progress"></div>
+
+If you want to remove it from presentation just delete this element from document. It’s not possible to hide it only for the certain slides.
+
+## Slide
+
+Slides are marked with `slide` class. Please don’t nest slides and don’t forget closing tags, this 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 style 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, height for 16×10 is 640 px and 768 px for 4×3. Bare 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 in window size.
+
+### Number
+
+…
+
+### Types
+
+…
+
+#### White
+
+…
+
+#### Black
+
+…
+
+#### Grid
+
+…
+
+### Content
+
+…
+
+#### Header
+
+…
+
+#### Paragraphs
+
+…
+
+#### Inline
+
+…
+
+#### Quotes
+
+…
+
+#### Lists
+
+…
+
+#### Columns
+
+…
+
+#### Tables
+
+…
+
+#### Code
+
+…
+
+### Elements
+
+…
+
+#### Cover
+
+…
+
+#### Shout
+
+…
+
+#### Place
+
+…
+
+#### Notes
+
+…
--- a/docs/features-ru.md
+++ b/docs/features-ru.md
+# Возможности
+
+Все возможности темы продемонстрированы в файле [index.html](../index.html), используйте его как руководство для создания презентации. Ниже представлено более подробное описание.
+
+- [Анатомия](#Анатомия)
+- [Общие](#Общие)
+	- [Язык](#Язык)
+	- [Холст](#Холст)
+	- [Заглавие](#Заглавие)
+	- [Бейдж](#Бейдж)
+	- [Прогресс](#Прогресс)
+- [Слайд](#Слайд)
+	- [Номер](#Номер)
+	- [Типы](#Типы)
+		- [Белый](#Белый)
+		- [Чёрный](#Чёрный)
+		- [Сетка](#Сетка)
+	- [Содержимое](#Содержимое)
+		- [Заголовок](#Заголовок)
+		- [Абзацы](#Абзацы)
+		- [Строчные](#Строчные)
+		- [Цитаты](#Цитаты)
+		- [Списки](#Списки)
+		- [Колонки](#Колонки)
+		- [Таблицы](#Таблицы)
+		- [Код](#Код)
+	- [Элементы](#Элементы)
+		- [Обложка](#Обложка)
+		- [Шаут](#Шаут)
+		- [Вставка](#Вставка)
+		- [Заметки](#Заметки)
+
+## Анатомия
+
+Готовый пакет темы состоит из следующих папок и файлов:
+
+1. Папка `docs` с документацией по использованию, включая это руководство.
+2. Папка `fonts` со шрифтами в сжатом формате WOFF.
+3. Папка `images` с картинками для оформления.
+4. Папка `pictures` с примерами картинок.
+5. Папка `styles` с собранными стилями в размерах 16×10 и 4×3.
+6. Файл `index.html` с демонстрацией всех возможностей.
+
+Дополнительно к этим файлам, в репозитории содержатся исходные файлы:
+
+1. Папка `source` с исходными файлами шрифта в TTF и макетом для [Sketch](http://bohemiancoding.com/sketch/).
+2. Папка `styles` также содержит исходные стили в формате SCSS.
+
+## Общие
+
+### Язык
+
+Основной язык презентации указан в корневом элементе документа, обратите на него внимание и выставите верный:
+
+	<html lang="ru">
+	<html lang="en">
+
+На основе этого тема использует подходящие типографские традиции. Атрибут `lang` можно также задавать отдельным слайдам или даже элементам.
+
+### Холст
+
+Корневой элемент презентации имеет основной класс `shower` и дополнительный класс режима: `list` для списка и `full` для показа слайдов. Режим `list` обычно указан по умолчанию, но если его нет, то он всё равно примет значение `list` и презентация откроется в режиме списка. Если вместо `list` задать `full`, то презентация откроется в режиме показа.
+
+Список:
+
+	<body class="shower list">
+		…
+	</body>
+
+Показ:
+
+	<body class="shower full">
+		…
+	</body>
+
+Архитектура темы опирается на договорённости, что все части презентации вложены в корневой элемент `shower`, а классы режимов скрывают или показывают нужные элементы, в зависимости от текущего режима.
+
+### Заглавие
+
+Заглавие презентации обозначено элементом `caption`, в котором предусмотрены следующие элементы: `<h1>` для заголовка, `<p>` для описания, а также ссылки.
+
+	<header class="caption">
+		<h1>Presentation Title</h1>
+		<p><a href="">Yours Truly</a>, Famous Inc.</p>
+	</header>
+
+### Бейдж
+
+Бейдж со ссылкой «Форкни меня на Гитхабе» (или любым другим призывом) обозначен элементом `badge` и расположен в правом верхнем углу:
+
+	<footer class="badge">
+		<a href="…">Fork me on Github</a>
+	</footer>
+
+### Прогресс
+
+Индикатор прогресса показывает сколько слайдов осталось до конца презентации, обозначается элементом `progress` и виден только в режиме показа:
+
+	<div class="progress"></div>
+
+Если вы хотите убрать его из презентации, просто удалите этот элемент из документа. Отключить его для отдельных слайдов не получится.
+
+## Слайд
+
+Слайды обозначаются классом `slide`. Не вкладывайте слайды друг в друга и не теряйте закрывающие теги, это может плохо закончиться.
+
+	<section class="slide">
+		…
+	</section>
+	<section class="slide">
+		…
+	</section>
+
+Тема поддерживает два соотношения сторон слайдов: 16×10 и 4×3. Для переключения в нужный, подключите подходящий файл стилей: `screen-4x3.css` или `screen-16x10.css`. По умолчанию подключается широкоформатный 16×10.
+
+Ширина слайдов в обоих форматах 1024 пикселя, высота 640 пикселей для 16×10 и 768 пикселей для 4×3. Рассчитывайте на эти размеры, когда готовите картинки для презентации. В режиме списка слайды уменьшаются в 2 или 4 раза, а в режиме показа масштабируются динамически, в зависимости от размеров окна.
+
+### Номер
+
+Нумерация на слайдах помогает слушателям запоминать слайды для вопросов, а также открывать нужный слайд, меняя его номер в адресной строке. Нумерация генерируется автоматически с помощью CSS-счётчиков и может быть отключена для отдельных слайдов.
+
+Красная ленточка с номером слайда по умолчанию видна на всех слайдах, кроме белого и чёрного типов. Что скрыть номер слайда, добавьте к классу `slide` ещё один: `white` или `black`. Подробнее о типах читайте в следующей части.
+
+### Типы
+
+Типы слайда меняют его внешний вид. Тип задаётся дополнительным классом к основному `slide`. В теме есть несколько встроенных типов, вы можете описать собственные типы для каждой презентации или добавить их в свою тему.
+
+#### Белый
+
+Белый тип задаёт белый фон и отключает ленточку с номером слайда. Используйте его, когда вам нужен абсолютно белый слайд:
+
+	<section class="slide white">
+		…
+	</section>
+
+#### Чёрный
+
+Чёрный тип задаёт чёрный фон и отключает ленточку с номером слайда. Используйте его, когда вам нужен абсолютно чёрный слайд:
+
+	<section class="slide black">
+		…
+	</section>
+
+Обратите внимание, что чёрный тип слайда не меняет цвет текста.
+
+#### Сетка
+
+Сетка задаёт слайду фон с двумя сетками: базовую розовую и дополнительную голубую с полями, строками и колонками.
+
+	<section class="slide grid">
+		…
+	</section>
+
+Базовая единица сетки — 25 пикселей. Высота строки основного текста 2 единицы, расстояние между блоками содержимого 3, боковые поля 4, ширина содержимого 33, ширина одной колонки 15.
+
+Все элементы презентации выровнены по этой сетке и рекомендуется следовать ей при изменении или расширении темы.
+
+### Содержимое
+
+Простое содержимое: заголовки, абзацы, списки.
+
+#### Заголовок
+
+Заголовок слайда обозначается элементом `<h2>`:
+
+	<section class="slide">
+		<h2>Slide Header</h2>
+	</section>
+
+Мы осознанно не стали вводить следующие уровни заголовков, чтобы не провоцировать иерархические сложности на слайде.
+
+#### Абзацы
+
+Абзацы текста обозначаются элементом `<p>`, которому также можно задать класс `note`, чтобы превратить текст в заметку.
+
+	<section class="slide">
+		<p>Текст</p>
+		<p class="note">Заметка</p>
+	</section>
+
+#### Строчные
+
+В теме предусмотрено оформление для следующих строчных элементов:
+
+- `<a>` голубого цвета с подчёркиванием;
+- `<strong>` и `<b>` полужирного начертания;
+- `<em>` и `<i>` курсивного начертания;
+- `<code>`, `<samp>` и `<kbd>` моноширинным шрифтом;
+- `<sup>` и `<sub>` для надстрочных и подстрочных индексов;
+- `<mark>` для выделения частей текста жёлтым.
+
+#### Цитаты
+
+Цитаты обозначаются элементом `<blockquote>` в который помещается один или несколько абзацев:
+
+	<blockquote>
+		<p>Flannel bicycle rights locavore selfies.</p>
+	</blockquote>
+
+Цитата оформляется курсивом и свешенной кавычкой. Если вам нужно добавить автора цитаты, мы рекомендуем обернуть цитату в элемент `<figure>` и поместить подпись в `<figcaption>`, который, следуя сразу за цитатой, станет полужирным.
+
+	<figure>
+		<blockquote>
+			<p>Post-ironic fashion axe flexitarian</p>
+		</blockquote>
+		<figcaption>Yours Truly</figcaption>
+	</figure>
+
+#### Списки
+
+Списки обозначаются элементами `<ol>` для нумерованных и `<ul>` для ненумерованных. Списки можно произвольно вкладывать:
+
+	<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>
+
+Маркерами нумерованных списков становятся цифры, маркеры ненумерованных различаются в зависимости от указанного языка презентации: буллиты `•` для английского и тире `—` для русского языка.
+
+#### Колонки
+
+Содержимое на слайде можно разделить на две колонки с помощью класса `double`:
+
+	<p class="double">
+		Echo Park 8-bit sustainable umami deep v Kickstarter.
+	</p>
+
+Полезнее всего это будет для списков — на слайд тогда поместится не 7, а 14 коротких пунктов:
+
+	<ul class="double">
+		<li>Occupy locavore blog</li>
+		<li>Mustache you haven’t heard of</li>
+	</ul>
+
+#### Таблицы
+
+Таблицы обозначаются элементами `<table>`, `<th>` выделяет заголовки колонок или строк полужирным, а строки по умолчанию разделяются линейками:
+
+	<table>
+	<tr>
+		<th scope="col">Gentrify</th>
+		<th>Twee</th>
+	</tr>
+	<tr>
+		<th scope="row">Messenger</th>
+		<td>Mixtape</td>
+	</tr>
+	</table>
+
+Чтобы вместо линеек сделать полосатую таблицу, где каждая чётная строчка выделена серым фоном, добавьте таблице класс `striped`:
+
+	<table class="striped">
+
+#### Код
+
+Блоки кода обозначаются элементом `<pre>` со вложенным `<code>`, внутри которых сохраняется форматирование текста:
+
+	<pre><code>function action() {
+		// TODO
+		return true;
+	}</code></pre>
+
+Чтобы пронумеровать строки, оберните каждую в `<code>` и номер автоматически появится слева:
+
+	<pre>
+		<code>function action() {</code>
+		<code>	// TODO</code>
+		<code>	return true;</code>
+		<code>}<code>
+	</pre>
+
+Шовер не подсвечивает код автоматически, но мы рекомендуем вам выделять значимые части кода вручную с помощью элемента `<mark>`. В этом случае будет не просто красиво, но понятно на что обратить внимание.
+
+	<pre><code>function <mark>action()</mark> {
+		<span class="comment">// TODO<span>
+		return <mark class="important">true</mark>;
+	}</code></pre>
+
+По умолчанию `<mark>` выделяет фрагмент кода жёлтым, а если добавить класс `important`, то красным. Для оформления комментариев используйте `<span class="comment">`.
+
+### Элементы
+
+Элементы для вставки специального содержимого.
+
+#### Обложка
+
+Чтобы вставить на слайд картинку-обложку, которая займёт весь слайд и не будет мешать содержимому, используйте `<img>` с классом `cover`:
+
+	<section class="slide">
+		<img class="cover" src="picture.png">
+	</section>
+
+Картинка позиционируется на слайде и становится позади любого содержимого. Это удобно, если вы хотите сделать подложку для текста или скомбинировать обложку и заголовок.
+
+Вставленная картинка вписывается в размеры слайда по ширине и высоте. Это не заметно, когда картинка и слайд имеют одинаковые пропорции. Если же картинка выше или шире слайда, то она встанет по центру и упрётся самой длинной стороной в края слайда.
+
+Этим поведением можно управлять с помощью дополнительных классов `width` и `height`, которые определяют как впишется непропорциональная картинка: по ширине или по высоте.
+
+	<img class="cover width" src="picture.png">
+	<img class="cover height" src="picture.png">
+
+Также можно использовать сокращённые классы `w` и `h`:
+
+	<img class="cover w" src="picture.png">
+	<img class="cover h" src="picture.png">
+
+Чтобы добавить подпись с автором картинки, ссылкой или другой информацией, оберните обложку в `<figure>` и вставьте подпись в `<figcaption>`. По умолчанию цвет подписи чёрный, но её можно сделать белой, добавив к `<figcaption>` класс `white`.
+
+	<figure>
+		<img class="cover" src="picture.png">
+		<figcaption class="white">
+			© Yours Truly
+		</figcaption>
+	</figure>
+
+### Шаут
+
+Чтобы обозначить раздел презентации, добавьте к заголовку `<h2>` класс `shout`, тогда он станет больше и встанет посередине:
+
+	<section class="slide">
+		<h2 class="shout">Shout</h2>
+	</section>
+
+Чтобы заголовок плавно вырастал, добавьте к нему класс `grow`:
+
+	<section class="slide">
+		<h2 class="shout grow">Growing Shout</h2>
+	</section>
+
+Или класс `shrink`, чтобы он плавно уменьшался:
+
+	<section class="slide">
+		<h2 class="shout shrink">Shrinking Shout</h2>
+	</section>
+
+### Вставка
+
+Чтобы вставить на слайд элемент в заданном месте, используйте класс `place`, по умолчанию элемент расположится ровно посередине:
+
+	<section class="slide">
+		<img class="place" src="picture.png">
+	</section>
+
+Указав дополнительный класс, можно прикрепить элемент посередине к одной из сторон, также можно использовать сокращения `t`, `r`, `b`, `l`:
+
+	<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">
+
+Если скомбинировать классы сторон, то элемент встанет в соответствующий угол, например, `top right` для верхнего правого:
+
+	<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">
+
+### Заметка
+
+Чтобы вставить на слайд заметку, которую не видно во время презентации, но видно при наведении на слайд в режиме списка, используйте элемент с классом `footer`:
+
+	<section class="slide">
+		<p>Retro meh brunch aesthetic.</p>
+		<footer class="footer">
+			<p>Cosby sweater Shoreditch.</p>
+		</footer>
+	</section>
+
+В заметках удобно хранить тезисы для отдельных слайдов.
--- 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/printing-en.md
+++ b/docs/printing-en.md
+# Printing
+
+You can export your presentation to PDF by sending it to print in list mode in Chrome and Opera desktop browsers.
+
+1. Press `Cmd P` or `Ctrl P`
+2. Select PDF in targets list
+3. Save resulted file
+
+![Printing dialog](images/printing.png)
+
+## Other options
+
+You could also try [Prince](http://princexml.com), [wkhtmltopdf](http://code.google.com/p/wkhtmltopdf) and such console utilities for printing, although not complete modern CSS features support and complicated configuration make them less convenient.
--- a/docs/printing-ru.md
+++ b/docs/printing-ru.md
+# Печать
+
+Вы можете экспортировать презентацию в PDF, отправив слайды из режима списка на печать в браузерах Chrome или Opera для компьютеров.
+
+1. Нажмите `Cmd P` или `Ctrl P`
+2. Выберите формат PDF в списке целей
+3. Сохраните получившийся файл
+
+![Диалог печати](images/printing.png)
+
+## Другие варианты
+
+Вы также можете попробовать для печати консольные утилиты [Prince](http://princexml.com), [wkhtmltopdf](http://code.google.com/p/wkhtmltopdf) и подобные, однако неполная поддержка современных возможностей CSS и сложная настройка делают их менее удобными.
--- a/docs/shortcuts-en.md
+++ b/docs/shortcuts-en.md
@@ -41,4 +41,4 @@ You can navigate between slides, enter slide mode and exit to list mode using va

 ## Keynote

- `Cmd Option P` combo for starting slide mode from the current slide.
\ No newline at end of file
+- `Cmd Option P` combo for starting slide mode from the current slide.