From 8c6ede75f496072bce6f56717e6997b521614c25 Mon Sep 17 00:00:00 2001 From: Vadim Makeev Date: Tue, 31 Jan 2017 10:35:42 +0300 Subject: [PATCH] Drop Russian docs --- docs/features-ru.md | 386 ------------------------- docs/{features-en.md => features.md} | 0 docs/printing-ru.md | 13 - docs/{printing-en.md => printing.md} | 0 docs/shortcuts-ru.md | 34 --- docs/{shortcuts-en.md => shortcuts.md} | 0 6 files changed, 433 deletions(-) delete mode 100644 docs/features-ru.md rename docs/{features-en.md => features.md} (100%) delete mode 100644 docs/printing-ru.md rename docs/{printing-en.md => printing.md} (100%) delete mode 100644 docs/shortcuts-ru.md rename docs/{shortcuts-en.md => shortcuts.md} (100%) diff --git a/docs/features-ru.md b/docs/features-ru.md deleted file mode 100644 index 7f0d1d3..0000000 --- a/docs/features-ru.md +++ /dev/null @@ -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. - -## Общие - -### Язык - -Основной язык презентации указан в корневом элементе документа, обратите на него внимание и выставите верный: - - - - -На основе этого тема использует подходящие типографские традиции. Атрибут `lang` можно также задавать отдельным слайдам или элементам. - -### Холст - -Корневой элемент презентации имеет основной класс `shower` и дополнительный класс режима: `list` для списка и `full` полного экрана. Режим `list` обычно указан по умолчанию, но если его нет, то он всё равно примет значение `list` и слайды откроются в режиме списка. Если вместо `list` задать `full`, то слайды откроются в полноэкранном режиме. - -Список: - - - … - - -Полный: - - - … - - -Архитектура темы опирается на договорённости, что все части презентации вложены в корневой элемент `shower`, а классы режимов скрывают или показывают нужные элементы, в зависимости от текущего режима. - -### Заглавие - -Заглавие презентации обозначено элементом `caption`, в котором предусмотрены следующие элементы: `

` для заголовка, `

` для описания, а также ссылки. - -

-

Presentation Title

-

Yours Truly, Famous Inc.

-
- -Заглавие видно только в режиме списка. Не забудьте также указать заголовок презентации в элементе `` документа. - -### Бейдж - -Бейдж со ссылкой «Форкни меня на Гитхабе» (или любым другим призывом) обозначен элементом `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> - -В заметках удобно хранить тезисы для отдельных слайдов. diff --git a/docs/features-en.md b/docs/features.md similarity index 100% rename from docs/features-en.md rename to docs/features.md diff --git a/docs/printing-ru.md b/docs/printing-ru.md deleted file mode 100644 index 708d8e2..0000000 --- a/docs/printing-ru.md +++ /dev/null @@ -1,13 +0,0 @@ -# Печать - -Вы можете экспортировать презентацию в PDF, отправив слайды из режима списка на печать в браузерах Chrome или Opera для компьютеров. - -1. Нажмите `Cmd P` или `Ctrl P` -2. Выберите формат PDF в списке целей -3. Сохраните получившийся файл - -![Диалог печати](images/ribbon-printing.png) - -## Другие варианты - -Вы также можете попробовать для печати консольные утилиты [Prince](http://princexml.com), [wkhtmltopdf](http://code.google.com/p/wkhtmltopdf) и подобные, однако неполная поддержка современных возможностей CSS и сложная настройка делают их менее удобными. diff --git a/docs/printing-en.md b/docs/printing.md similarity index 100% rename from docs/printing-en.md rename to docs/printing.md diff --git a/docs/shortcuts-ru.md b/docs/shortcuts-ru.md deleted file mode 100644 index 10d83e9..0000000 --- a/docs/shortcuts-ru.md +++ /dev/null @@ -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` diff --git a/docs/shortcuts-en.md b/docs/shortcuts.md similarity index 100% rename from docs/shortcuts-en.md rename to docs/shortcuts.md