Drop Russian docs
This commit is contained in:
Vadim Makeev
parent
49f2f15485
commit
8c6ede75f4
|
|
@ -1,386 +0,0 @@
|
||||||
# Возможности
|
|
||||||
|
|
||||||
Все возможности темы продемонстрированы в файле [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>
|
|
||||||
|
|
||||||
Заглавие видно только в режиме списка. Не забудьте также указать заголовок презентации в элементе `<title>` документа.
|
|
||||||
|
|
||||||
### Бейдж
|
|
||||||
|
|
||||||
Бейдж со ссылкой «Форкни меня на Гитхабе» (или любым другим призывом) обозначен элементом `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-счётчиков и может быть отключена для отдельных слайдов.
|
|
||||||
|
|
||||||
Вы можете скрыть номер вручную:
|
|
||||||
|
|
||||||
<section class="slide" id="off">
|
|
||||||
<style>
|
|
||||||
#off::after {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
Либо поменяйте тип слайда: добавьте `white` или `black` к `slide`. Подробнее о типах читайте в следующей части.
|
|
||||||
|
|
||||||
### Типы
|
|
||||||
|
|
||||||
Типы слайда меняют его внешний вид. Тип задаётся дополнительным классом к основному `slide`. В теме есть несколько встроенных типов, вы можете описать собственные типы для каждой презентации или добавить их в свою тему.
|
|
||||||
|
|
||||||
#### Белый
|
|
||||||
|
|
||||||
Белый тип задаёт белый фон и отключает номер слайда. Используйте его, когда вам нужен абсолютно белый слайд:
|
|
||||||
|
|
||||||
<section class="slide white">
|
|
||||||
…
|
|
||||||
</section>
|
|
||||||
|
|
||||||
#### Чёрный
|
|
||||||
|
|
||||||
Чёрный тип задаёт чёрный фон и отключает номер слайда. Используйте его, когда вам нужен абсолютно чёрный слайд:
|
|
||||||
|
|
||||||
<section class="slide black">
|
|
||||||
…
|
|
||||||
</section>
|
|
||||||
|
|
||||||
Обратите внимание, что чёрный тип слайда не меняет цвет текста.
|
|
||||||
|
|
||||||
#### Сетка
|
|
||||||
|
|
||||||
Сетка задаёт фон с двумя типами направляющих: базовые розовые и дополнительные голубые, обозначающие поля, строки и колонки.
|
|
||||||
|
|
||||||
<section class="slide grid">
|
|
||||||
…
|
|
||||||
</section>
|
|
||||||
|
|
||||||
Все элементы темы выровнены по этой сетке и рекомендуется следовать ей при изменении или расширении темы.
|
|
||||||
|
|
||||||
### Содержимое
|
|
||||||
|
|
||||||
Простое содержимое: заголовки, абзацы, списки.
|
|
||||||
|
|
||||||
#### Заголовок
|
|
||||||
|
|
||||||
Заголовок слайда обозначается элементом `<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>
|
|
||||||
|
|
||||||
В заметках удобно хранить тезисы для отдельных слайдов.
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
# Печать
|
|
||||||
|
|
||||||
Вы можете экспортировать презентацию в PDF, отправив слайды из режима списка на печать в браузерах Chrome или Opera для компьютеров.
|
|
||||||
|
|
||||||
1. Нажмите `Cmd P` или `Ctrl P`
|
|
||||||
2. Выберите формат PDF в списке целей
|
|
||||||
3. Сохраните получившийся файл
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Другие варианты
|
|
||||||
|
|
||||||
Вы также можете попробовать для печати консольные утилиты [Prince](http://princexml.com), [wkhtmltopdf](http://code.google.com/p/wkhtmltopdf) и подобные, однако неполная поддержка современных возможностей CSS и сложная настройка делают их менее удобными.
|
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
# Горячие клавиши
|
|
||||||
|
|
||||||
Вы можете передвигаться между слайдами, начинать и заканчивать презентацию используя горячие клавиши.
|
|
||||||
|
|
||||||
- [Вперёд](#Вперёд)
|
|
||||||
- [Назад](#Назад)
|
|
||||||
- [Первый и последний](#Первый-и-последний)
|
|
||||||
- [Начало и конец](#Начало-и-конец)
|
|
||||||
|
|
||||||
## Вперёд
|
|
||||||
|
|
||||||
- Стрелки `Right` или `Down`
|
|
||||||
- Клавиша `Page Down` или `Fn Down` на Mac
|
|
||||||
- Клавиши `J` или `L`, как в консоли
|
|
||||||
- Клавиша `Enter`
|
|
||||||
- Клавиша `Space` во время презентации
|
|
||||||
|
|
||||||
## Назад
|
|
||||||
|
|
||||||
- Стрелки `Left` или `Up`
|
|
||||||
- Клавиша `Page Up` или `Fn ↑` на Mac
|
|
||||||
- Клавиша `K` или `H`, как в консоли
|
|
||||||
- Комбинация `Shift Space` во время презентации
|
|
||||||
|
|
||||||
## Первый и последний
|
|
||||||
|
|
||||||
- Первый слайд: клавиша `Home` или `Fn Left` на Mac
|
|
||||||
- Последний слайд: клавиша `End` или `Fn Right` на Mac
|
|
||||||
|
|
||||||
## Начало и конец
|
|
||||||
|
|
||||||
- Начать презентацию с текущего слайда: `Cmd Enter`, `Cmd Option P`, `Shift F5`
|
|
||||||
- Начать презентацию с первого слайда: `Cmd Shift Enter` или `F5`
|
|
||||||
- Остановить презентацию: клавиша `Esc` или `F5`
|
|
||||||
Loading…
Reference in New Issue