# Возможности Все возможности темы продемонстрированы в файле [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` и расположен в правом верхнем углу: ### Прогресс Индикатор прогресса показывает сколько слайдов осталось до конца презентации, обозначается элементом `progress` и виден только в режиме показа:
Если вы хотите убрать его из презентации, просто удалите этот элемент из документа. Отключить его для отдельных слайдов не получится. ## Слайд Слайды обозначаются классом `slide`. Не вкладывайте слайды друг в друга и не теряйте закрывающие теги, это может плохо закончиться.
…
…
Тема поддерживает два соотношения сторон слайдов: 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`. В теме есть несколько встроенных типов, вы можете описать собственные типы для каждой презентации или добавить их в свою тему. #### Белый Белый тип задаёт белый фон и отключает ленточку с номером слайда. Используйте его, когда вам нужен абсолютно белый слайд:
…
#### Чёрный Чёрный тип задаёт чёрный фон и отключает ленточку с номером слайда. Используйте его, когда вам нужен абсолютно чёрный слайд:
…
Обратите внимание, что чёрный тип слайда не меняет цвет текста. #### Сетка Сетка задаёт слайду фон с двумя сетками: базовую розовую и дополнительную голубую с полями, строками и колонками.
…
Базовая единица сетки — 25 пикселей. Высота строки основного текста 2 единицы, расстояние между блоками содержимого 3, боковые поля 4, ширина содержимого 33, ширина одной колонки 15. Все элементы презентации выровнены по этой сетке и рекомендуется следовать ей при изменении или расширении темы. ### Содержимое Простое содержимое: заголовки, абзацы, списки. #### Заголовок Заголовок слайда обозначается элементом `

`:

Slide Header

Мы осознанно не стали вводить следующие уровни заголовков, чтобы не провоцировать иерархические сложности на слайде. #### Абзацы Абзацы текста обозначаются элементом `

`, которому также можно задать класс `note`, чтобы превратить текст в заметку.

Текст

Заметка

#### Строчные В теме предусмотрено оформление для следующих строчных элементов: - `` голубого цвета с подчёркиванием; - `` и `` полужирного начертания; - `` и `` курсивного начертания; - ``, `` и `` моноширинным шрифтом; - `` и `` для надстрочных и подстрочных индексов; - `` для выделения частей текста жёлтым. #### Цитаты Цитаты обозначаются элементом `
` в который помещается один или несколько абзацев:

Flannel bicycle rights locavore selfies.

Цитата оформляется курсивом и свешенной кавычкой. Если вам нужно добавить автора цитаты, мы рекомендуем обернуть цитату в элемент `
` и поместить подпись в `
`, который, следуя сразу за цитатой, станет полужирным.

Post-ironic fashion axe flexitarian

Yours Truly
#### Списки Списки обозначаются элементами `
    ` для нумерованных и `
      ` для ненумерованных. Списки можно произвольно вкладывать:
      1. Literally viral vegan
      2. Wes Anderson chillwave Marfa
        • Retro meh brunch aesthetic
        • Messenger bag retro cred
      Маркерами нумерованных списков становятся цифры, маркеры ненумерованных различаются в зависимости от указанного языка презентации: буллиты `•` для английского и тире `—` для русского языка. #### Колонки Содержимое на слайде можно разделить на две колонки с помощью класса `double`:

      Echo Park 8-bit sustainable umami deep v Kickstarter.

      Полезнее всего это будет для списков — на слайд тогда поместится не 7, а 14 коротких пунктов:
      • Occupy locavore blog
      • Mustache you haven’t heard of
      #### Таблицы Таблицы обозначаются элементами ``, `
      ` выделяет заголовки колонок или строк полужирным, а строки по умолчанию разделяются линейками:
      Gentrify Twee
      Messenger Mixtape
      Чтобы вместо линеек сделать полосатую таблицу, где каждая чётная строчка выделена серым фоном, добавьте таблице класс `striped`: #### Код Блоки кода обозначаются элементом `
      ` со вложенным ``, внутри которых сохраняется форматирование текста:

	
      function action() {
		// TODO
		return true;
	}
      

Чтобы пронумеровать строки, оберните каждую в `` и номер автоматически появится слева:

	
      		function action() {
			// TODO
			return true;
		}
	
      

Шовер не подсвечивает код автоматически, но мы рекомендуем вам выделять значимые части кода вручную с помощью элемента ``. В этом случае будет не просто красиво, но понятно на что обратить внимание.

	
      function action() {
		// TODO
		return true;
	}
      

По умолчанию `` выделяет фрагмент кода жёлтым, а если добавить класс `important`, то красным. Для оформления комментариев используйте ``.

### Элементы

Элементы для вставки специального содержимого.

#### Обложка

Чтобы вставить на слайд картинку-обложку, которая займёт весь слайд и не будет мешать содержимому, используйте `` с классом `cover`:

	
      
		
	
      

Картинка позиционируется на слайде и становится позади любого содержимого. Это удобно, если вы хотите сделать подложку для текста или скомбинировать обложку и заголовок.

Вставленная картинка вписывается в размеры слайда по ширине и высоте. Это не заметно, когда картинка и слайд имеют одинаковые пропорции. Если же картинка выше или шире слайда, то она встанет по центру и упрётся самой длинной стороной в края слайда.

Этим поведением можно управлять с помощью дополнительных классов `width` и `height`, которые определяют как впишется непропорциональная картинка: по ширине или по высоте.

	
	

Также можно использовать сокращённые классы `w` и `h`:

	
	

Чтобы добавить подпись с автором картинки, ссылкой или другой информацией, оберните обложку в `
      ` и вставьте подпись в `
      `. По умолчанию цвет подписи чёрный, но её можно сделать белой, добавив к `
      ` класс `white`.

	
      
		
		
      
			© Yours Truly
		
      
	
      

### Шаут

Чтобы обозначить раздел презентации, добавьте к заголовку `
      ` класс `shout`, тогда он станет больше и встанет посередине:

	
      
		
      Shout
      
	
      

Чтобы заголовок плавно вырастал, добавьте к нему класс `grow`:

	
      
		
      Growing Shout
      
	
      

Или класс `shrink`, чтобы он плавно уменьшался:

	
      
		
      Shrinking Shout
      
	
      

### Вставка

Чтобы вставить на слайд элемент в заданном месте, используйте класс `place`, по умолчанию элемент расположится ровно посередине:

	
      
		
	
      

Указав дополнительный класс, можно прикрепить элемент посередине к одной из сторон, также можно использовать сокращения `t`, `r`, `b`, `l`:

	
	
	
	

Если скомбинировать классы сторон, то элемент встанет в соответствующий угол, например, `top right` для верхнего правого:

	
	
	
	

### Заметка

Чтобы вставить на слайд заметку, которую не видно во время презентации, но видно при наведении на слайд в режиме списка, используйте элемент с классом `footer`:

	
      
		
      Retro meh brunch aesthetic.
      
		
      
			
      Cosby sweater Shoreditch.
      
		
      
	
      

В заметках удобно хранить тезисы для отдельных слайдов.