Все возможности темы продемонстрированы в файле [index.html](index.html), используйте его как руководство для создания презентации. Ниже представлено более подробное описание.
Корневой элемент презентации имеет основной класс `shower` и дополнительный класс режима: `list` для списка и `full` полного экрана. Режим `list` обычно указан по умолчанию, но если его нет, то он всё равно примет значение `list` и слайды откроются в режиме списка. Если вместо `list` задать `full`, то слайды откроются в полноэкранном режиме.
Архитектура темы опирается на договорённости, что все части презентации вложены в корневой элемент `shower`, а классы режимов скрывают или показывают нужные элементы, в зависимости от текущего режима.
### Заглавие
Заглавие презентации обозначено элементом `caption`, в котором предусмотрены следующие элементы: `<h1>` для заголовка, `<p>` для описания, а также ссылки.
Поддерживаюся два соотношения сторон слайдов: 16×10 и 4×3. Для переключения в нужный, подключите подходящий файл: `screen-4x3.css` или `screen-16x10.css`. По умолчанию подключается широкоформатный 16×10.
Ширина слайдов в обоих форматах 1024 пикселя, высота 640 пикселей для 16×10 и 768 пикселей для 4×3. Рассчитывайте на эти размеры, когда готовите картинки для презентации. В режиме списка слайды уменьшаются в 2 или 4 раза, а в полноэкранном режиме масштабируются динамически, в зависимости от размеров окна.
Нумерация на слайдах помогает слушателям запоминать слайды для вопросов, а также открывать нужный слайд, меняя его номер в адресной строке. Нумерация генерируется автоматически с помощью CSS-счётчиков и может быть отключена для отдельных слайдов.
Типы слайда меняют его внешний вид. Тип задаётся дополнительным классом к основному `slide`. В теме есть несколько встроенных типов, вы можете описать собственные типы для каждой презентации или добавить их в свою тему.
Списки обозначаются элементами `<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`:
<pclass="double">
Echo Park 8-bit sustainable umami deep v Kickstarter.
</p>
Полезнее всего это будет для списков — на слайд тогда поместится не 7, а 14 коротких пунктов:
<ulclass="double">
<li>Occupy locavore blog</li>
<li>Mustache you haven’t heard of</li>
</ul>
#### Таблицы
Таблицы обозначаются элементами `<table>`, `<th>` выделяет заголовки колонок или строк полужирным, а строки по умолчанию разделяются линейками:
<table>
<tr>
<thscope="col">Gentrify</th>
<th>Twee</th>
</tr>
<tr>
<thscope="row">Messenger</th>
<td>Mixtape</td>
</tr>
</table>
Чтобы вместо линеек сделать полосатую таблицу, где каждая чётная строчка выделена серым фоном, добавьте таблице класс `striped`:
<tableclass="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> {
<spanclass="comment">// TODO<span>
return <markclass="important">true</mark>;
}</code></pre>
По умолчанию `<mark>` выделяет фрагмент кода жёлтым, а если добавить класс `important`, то красным. Для оформления комментариев используйте `<span class="comment">`.
### Элементы
Элементы для вставки специального содержимого.
#### Обложка
Чтобы вставить на слайд картинку-обложку, которая займёт весь слайд и не будет мешать содержимому, используйте `<img>`с классом `cover`:
<sectionclass="slide">
<imgclass="cover"src="picture.png">
</section>
Картинка позиционируется на слайде и становится позади любого содержимого. Это удобно, если вы хотите сделать подложку для текста или скомбинировать обложку и заголовок.
Вставленная картинка вписывается в размеры слайда по ширине и высоте. Это не заметно, когда картинка и слайд имеют одинаковые пропорции. Если же картинка выше или шире слайда, то она встанет по центру и упрётся самой длинной стороной в края слайда.
Этим поведением можно управлять с помощью дополнительных классов `width` и `height`, которые определяют как впишется непропорциональная картинка: по ширине или по высоте.
<imgclass="cover width"src="picture.png">
<imgclass="cover height"src="picture.png">
Также можно использовать сокращённые классы `w` и `h`:
<imgclass="cover w"src="picture.png">
<imgclass="cover h"src="picture.png">
Чтобы добавить подпись с автором картинки, ссылкой или другой информацией, оберните обложку в `<figure>` и вставьте подпись в `<figcaption>`. По умолчанию цвет подписи чёрный, но её можно сделать белой, добавив к `<figcaption>` класс `white`.
Чтобы обозначить раздел презентации, добавьте к заголовку `<h2>` класс `shout`, тогда он станет больше и встанет посередине:
<sectionclass="slide">
<h2class="shout">Shout</h2>
</section>
Чтобы заголовок плавно вырастал, добавьте к нему класс `grow`:
<sectionclass="slide">
<h2class="shout grow">Growing Shout</h2>
</section>
Или класс `shrink`, чтобы он плавно уменьшался:
<sectionclass="slide">
<h2class="shout shrink">Shrinking Shout</h2>
</section>
### Вставка
Чтобы вставить на слайд элемент в заданном месте, используйте класс `place`, по умолчанию элемент расположится ровно посередине:
<sectionclass="slide">
<imgclass="place"src="picture.png">
</section>
Указав дополнительный класс, можно прикрепить элемент посередине к одной из сторон, также можно использовать сокращения `t`, `r`, `b`, `l`:
<imgclass="place top"src="picture.png">
<imgclass="place right"src="picture.png">
<imgclass="place bottom"src="picture.png">
<imgclass="place left"src="picture.png">
Если скомбинировать классы сторон, то элемент встанет в соответствующий угол, например, `top right` для верхнего правого:
<imgclass="place top left"src="picture.png">
<imgclass="place top right"src="picture.png">
<imgclass="place bottom left"src="picture.png">
<imgclass="place bottom right"src="picture.png">
### Заметка
Чтобы вставить на слайд заметку, которую не видно во время презентации, но видно при наведении на слайд в режиме списка, используйте элемент с классом `footer`:
<sectionclass="slide">
<p>Retro meh brunch aesthetic.</p>
<footerclass="footer">
<p>Cosby sweater Shoreditch.</p>
</footer>
</section>
В заметках удобно хранить тезисы для отдельных слайдов.
