# Оформление

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

Поэтому здесь объявлен контракт — и главная мысль повторяется трижды:
**мы даём контракт, а не доступ к своим внутренностям**. Контракт обязуемся
не ломать; внутреннее устройство меняем свободно.

## С чего начать

Фирменный стиль закрывается **двумя строками**:

```css
:root {
  --brand: #C2185B;
  --font-sans-brand: "PT Sans";
}
```

Из `--brand` выводятся акцент, наведение, нажатие, подложка, рамка, цвет ссылки
и кольцо фокуса — отдельно для светлой и тёмной темы. Разобранная до конца задача —
рецепт [Перекрасить школу под фирменный стиль](/recipes/brand-colors/).

## Страницы раздела

| Страница | О чём |
|---|---|
| [Переменные оформления](/appearance/variables/) | Полный справочник: что делает, значение по умолчанию, где видно. Собран из `tokens.css` |
| [Свой CSS и JS школы](/appearance/themes/) | Куда писать, кто может, где действует и где нет, как откатить, граница с блоками кода |
| [Аварийный выключатель](/appearance/kill-switch/) | Что делать, если свой код сломал страницы: `?theme=off` и порядок восстановления |
| [Якоря](/appearance/anchors/) | Стабильные атрибуты `data-lms` на элементах, которые называют словами: карточка курса, тело урока, шапка кабинета |
| [Блоки кода](/appearance/code-blocks/) | HTML, CSS и JavaScript в конструкторе. **Пока нет** |

## Два слоя, а не документированные классы

**Переменные** меняют вид везде, где используются, и переживают любую нашу
перевёрстку. Работают сегодня.

**Якоря** — для случаев «уберите тень у карточки курса»: конкретный элемент,
а не цвет вообще. Первые семь — на кабинете ученика, уроке и страницах школы.

Цвета заголовков, текста и фона, скругление кнопок и полей, скругление карточек и значки
меню кабинета задаются без кода — «Настройки → Оформление», карточка «Вид страниц школы».
Скругление — заготовкой («прямые углы», «слегка скруглённые», «скруглённые», «круглые»)
или своим числом в пикселях от 0 до 999: заготовка подставляет своё число, вписанное число
важнее заготовки. Пусто у карточек — заводские 10 пикселей.

Чего мы не делаем — не документируем классы вёрстки. Объяснение, почему это
не скупость, а единственный способ не ломать вам оформление при каждом обновлении,
живёт на странице [Якоря](/appearance/anchors/), и его стоит прочитать до того,
как писать первый селектор.