Оформление

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

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

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

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

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

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

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

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

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

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

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

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