🎨 Мини-гайд по твоей дизайн-системе

Этот документ описывает все основные классы, сетки и эффекты, которые доступны в твоем едином файле стилей style.css.

1. Ссылки и цвета

Ссылки автоматически подтягивают цвета из твоей темы (--mirai-blue для обычных, --nana-purple для посещенных и --sakura-red при наведении).

Пример: Это обычная ссылка

2. Блоки (.callout)

Используются для заметок, предупреждений и дополнений.

Заметка (.callout.note): Фиолетовый акцент для важных примечаний.

Предупреждение (.callout.warn): Красный акцент для критически важной информации.

Приложение (.callout.appendix): Голубой акцент для второстепенных материалов.

3. Сетки и обтекание картинками

Сплит-сетка (.split-grid)

Делит блок на картинку слева (фиксированную) и текст справа.

Здесь идет основной текст описания, который гармонично выстраивается рядом с изображением без разъезжания верстки на мобильных устройствах.

Газетная верстка (.gazette-figure.left / .right)

Классическое обтекание текста картинкой с аккуратной рамкой для подписи.

Слева с обтеканием

Этот абзац текста будет обтекать картинку слева. Очень удобно для иллюстраций внутри лонгридов, гайдов и статей, создавая ощущение старого доброго печатного издания.

4. Эффекты для картинок и карточек

.img-card

.img-static-polaroid

.img-sticker-pop

5. Горизонтальная галерея (.image-gallery)

Скроллится горизонтально, идеально для скриншотов: