Стили оформления

Данная страница предоставляет собой схему стилей, которые используются «по умолчанию» для оформления публикаций блога и страниц сайта. Можно использовать как справочник.

Типографика

В этом шаблоне уделено особое внимание стилю оформления текста и обработке типов текста, что подчеркнет особенности вашего контента на всех устройствах.

Заголовок H1

Заголовок H2

Заголовок H3

Заголовок H4

Заголовок H5

Заголовок H6

Цитата

Этот блок используется для обозначения большого фрагмента текста из другого источника.

Через 20 лет вы будете больше разочарованы теми вещами, которые вы не делали, чем теми, которые вы сделали. Так отчальте от тихой пристани. Почувствуйте попутный ветер в вашем парусе. Двигайтесь вперед, действуйте, открывайте!
Марк Твен

Списки

Элемент ненумерованного списка
Элемент ненумерованного списка
1. Элемент нумерованного списка
2. Элемент нумерованного списка
  - Элемент ненумерованного списка
  - Элемент ненумерованного списка
    1. Элемент нумерованного списка
    2. Элемент нумерованного списка
    3. Элемент нумерованного списка
  - Элемент ненумерованного списка
3. Элемент нумерованного списка
Элемент ненумерованного списка

Форматирование кода

pre {
    position: relative;
    background: #f7f7f7;
    font-family: "Courier 10 Pitch", Courier, monospace;
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 1.6em;
    padding: 1.6em;
    overflow: auto;
    max-width: 100%;
    tab-size: 4;
}

Таблица

Beatles	Инструмент	Песня
Джон Леннон	Гитара	A Day In the Life
Джордж Харрисон	Гитара	Old Brown Shoe
Пол Маккартни	Басс	Helter Skelter
Ринго Старр	Барабаны	Don’t Pass Me By

Цветные блоки

Чтобы использовать цветные блоке нужно выбрать цвет фона для текста, а так же возможно цвет самого текста. Смотрите пример:

Этот черный текст подсвечен синим

Этот белый текст подсвечен красным

Этот текст подсвечен зеленым

Выделение

Чтобы использовать выделение, вам необходимо добавить класс highlight. Это можно сделать в режиме текстового редактора. Смотрите пример ниже:

<span class="highlight">необходимо добавить классом highlight</span>

Стилизованные цитаты

Чтобы использовать стилизованную цитату, вам просто нужно добавить класс pull-right или pull-left к вашему контенту. Это можно сделать в правой колонке текстового редактора. Смотрите пример ниже:

<span class="pull-right">Pull this text right.</span>

Эта цитата притянута к правой стороне поста.

Размещение цитаты на странице может быть определено в стиле публикации. Такое типографское устройство может быть выровнено или не выровнено по столбцу на странице.

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

И эта текст этой цитаты притянут влево.

Такие цитаты не обязательно должны быть дословной копией. Они могут быть сокращены и/или перефразированы для ясности, с указанием или без указания автора.

Изображения

Размеры изображений

Посмотрим правде в глаза: не имеет смысла создавать отдельные изображения для сайта и для Instagram. Поэтому изображения шаблона для использования на сайте имеют размеры, которые оптимизированны для публикации в Instagram.

Обычный пост

Портретный

Пейзажный

Выравнивание изображений

Изображение с выравнением по правому краю

Изображения могут быть двухмерными, например фотография, картинка на экране дисплея.

А также иметь трехмерность, например статуя или голограмма это тоже изображние.

Они могут быть захвачены оптическими приборами — такими как камеры, зеркала, линзы, телескопы, микроскопы и т. д.

Изображение с выравниванием по левому краю

Слово изображение также используется в более широком смысле для любой двумерной фигуры, такой как карта, график, круговая диаграмма или абстрактная картина.

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

И конечно отрисованы автоматически с помощью технологии печати или компьютерной графики.