# Карточки секции «Активность»: как подобрать настройки Кратко о том, какие атрибуты и классы влияют на вид карточки и как не ломать сетку. Живой каталог всех вариантов — **[`public/cases/mini-projects-showcase.html`](../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 строк описания**. - Ссылка наружу: обёртка `**`**. В `**h3.mp-card__title`** добавьте `****` (иконка внешней ссылки появляется при ховере, как в блоке «Опыт работы»). ### `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**`, без лишнего интерактива.