site-portfolio/docs/mini-projects-cards.md

Карточки секции «Активность»: как подобрать настройки

Кратко о том, какие атрибуты и классы влияют на вид карточки и как не ломать сетку. Живой каталог всех вариантов — public/cases/mini-projects-showcase.html (исходник src/pages/cases/mini-projects-showcase.html). Разметка главной — src/partials/mini-projects-section.html, раскладка — [public/js/modules/mini-projects/masonry.js](../public/js/modules/mini-projects/masonry.js), стили — [public/css/main.css](../public/css/main.css) (классы mini-projects-*, mp-card*).

Как устроена сетка

• Каждая карточка — элемент **li.mini-projects-grid__item** внутри **ol#mini-projects-list.mini-projects-grid**.
• Ширина в «клетках» задаётся атрибутом **data-mp-cells** со значением от 1 до 3 — это максимум на карточку; в JS значение дополнительно ограничивается (readDeclaredCells в masonry.js).
• Фактическое число клеток в ряду (rowCells) зависит от ширины списка (контейнера сетки), не от всего экрана целиком:
  • ≥ 1180px — 6 клеток в ряду
  • ≥ 880px — 4
  • ≥ 520px — 2
  • иначе — 1
    Пороги заданы в rowCellsForWidth() в masonry.js; при необходимости их можно сдвинуть под макет.
• Если **data-mp-cells** больше, чем rowCells (например, на телефоне ряд из одной клетки), скрипт подставит эффективную ширину min(объявленное, rowCells), карточка займёт всю строку.

Итог: **data-mp-cells** выбирайте в диапазоне 1–3 относительно широкого ряда; самая широкая карточка занимает половину шестиклеточной строки или меньше.

Когда какой модификатор карточки

Базовый блок — **mp-card**. Дальше — комбинации модификаторов.

mp-card--stack (+ опционально mp-card--link)

• Превью на всю ширину карточки, вплотную к верхнему и боковым краям; под ним — текст с внутренними отступами.
• Удобно для сильного визуала (скрин, обложка) и 2–4 строк описания.
• Ссылка наружу: обёртка **<a class="mp-card mp-card--link mp-card--stack">. В **h3.mp-card__title добавьте **<span class="mp-card__ext">** (иконка внешней ссылки появляется при ховере, как в блоке «Опыт работы»).

mp-card--horizontal (+ опционально mp-card--link)

• Превью слева, текст справа (колонка превью ~22% ширины карточки, не шире 6rem); на ширине до ~519px колонки складываются в столбик (превью сверху), см. медиазапрос в CSS.
• Подходит, когда картинка не главный герой, но нужна миниатюра; текст может быть длиннее, чем в узкой колонке stack.
• У горизонтальной карточки без ссылки превью и текст те же классы **mp-card__media** / **mp-card__body, но без **mp-card--link и **mp-card__ext**.

mp-card--horizontal + mp-card--hor-image (+ mp-card--link)

• Как horizontal, но логотип/иконка: **object-fit: contain** в превью, без обрезки по краям. На узком экране превью не растягивается на всю ширину — до 6rem.
• Превью с обводкой и скруглением как у portfolio-card__image (см. main.css, .mp-card__image).
• Пример на главной: Figma Community, data-mp-cells="2", превью assets/misc/figma_logo.webp.

mp-card--compact

• Только текстовый блок (mp-card__body), без **mp-card__media**.
• Имеет смысл для заметок, чеклистов, коротких описаний без скрина.
• Ссылка: **mp-card mp-card--link mp-card--compact; без ссылки — обёртка **article или **div** с теми же классами без **mp-card--link**.

mp-card--decor

• Не проект, а визуальная заглушка в сетке (ровная подложка, паттерн).
• Внутри: **span.mp-card__decor-pattern**; без тела проекта и без ссылки.
• Задаётся тем же **data-mp-cells**, что и у обычных карточек, чтобы заполнить «дыру» в masonry.

Теги типа проекта

• Список **ul.mp-card__tags** (можно **aria-label="Тип проекта"**).
• Элементы — **li.mp-card__tag** с коротким словом (плагин, скрипт, веб-сайт и т.д.).
• Обычно один тег; несколько допустимы, строка тегов переносится.

Свёрнутый блок «Показать все»

• Карточки, которые не должны учитываться в ограниченной высоте до раскрытия: на **li** добавьте **data-mp-extra** и атрибут **hidden** (скрипт снимает hidden для измерения, высота списка в свёрнутом режиме считается только по карточкам без data-mp-extra).
• Кнопка с **data-mp-toggle** уже есть в разметке; логика — [expand.js](../public/js/modules/mini-projects/expand.js).

Практические подсказки по красоте раскладки

1. **data-mp-cells="3"** — самая широкая карточка в сетке (на десктопе помещается до двух таких в один ряд при rowCells === 6). Для акцента и крупного превью в **stack**.
2. **2 + 2 + 2** или **3 + 3** на шести клетках часто выглядят ровнее случайного набора — masonry всё равно упакует по высоте; меняйте порядок **li** в HTML.
3. Горизонтальный шаблон на **data-mp-cells="2"** даёт плотный блок «иконка + текст»; длинный текст чаще уместнее в **stack** с **data-mp-cells="3"**.
4. **mp-card--compact** и **data-mp-cells="1"** — узкая текстовая колонка; хорошо рядом с **stack** на 2–3 клетки.
5. После смены картинок или текста высота пересчитывается на **resize** и при **load** изображений; если верстка «прыгнула», проверьте размеры превью и порядок элементов в DOM.

Мини-чеклист перед коммитом

• У каждой **li** задан осмысленный **data-mp-cells** (1–3).
• Для ссылки есть **mp-card--link** и **mp-card__ext** в заголовке.
• У **stack/horizontal** с картинкой есть **mp-card__media** + **mp-card__image** (например, placeholder.webp или свой файл).
• **data-mp-extra** только у карточек, которые должны скрываться до «Показать все».
• Декоративная ячейка — **mp-card--decor**, без лишнего интерактива.