Сетка карточек (card-grid)
Общая адаптивная сетка карточек-ссылок на главных и индексных страницах разделов.
Зачем
Одинаково показывать списки страниц и записей ленты на разных ширинах экрана. Сетка подстраивается под ширину области контента, а не только под ширину окна браузера (важно при боковом меню и узкой колонке).
Где используется
- главная potyk.io (
/) — лента заметок; - главная potyk-mu (
/mu/) — лента блога; - индекс исполнителей (
/mu/artists/); - страница исполнителя (
/mu/artists/<slug>) — блоки «Albums» и «Videos»; - potyk-travel (
/travel/,/travel/memories/,/travel/plans/) — списки поездок и планов; - potyk-art (
/art/) — проекты с обложками.jpg; - potyk-food (
/food/tasting/sweets) — сладости по категориям; - potyk-food (
/food/restaurants) — отзывы о ресторанах (четыре колонки); - potyk-cinema (
/cinema/) — фильмы в подборках (сетка с четырьмя колонками на широком); - potyk-reads (
/reads/) — книги (четыре колонки на широком, на мобилке сразу две).
В ячейках сетки — текстовая или контент-карточка. Подробнее про ленту (обложки, превью, догрузка) — в feed.md.
Сценарии
Два режима отображения: обычный и «четыре колонки». Число колонок зависит от ширины основной колонки (мобилка / планшет / десктоп).
| Экран (ширина колонки) | Обычный | Четыре колонки |
|---|---|---|
| мобилка (меньше ~495px) | 1 | 2 |
| планшет (~495–767px) | 2 | 4 |
| десктоп (от ~768px) | 3 (сетка по центру) | 4 |
По умолчанию (1 → 2 → 3)
Обычный режим без явного «четырёхколоночного» варианта.
Четыре колонки (2 → 4 → 4)
Когда: для сетки явно включён режим четырёх колонок (например подборки на /cinema/ или книги на /reads/).
Ожидаемый результат: на мобилке сразу две колонки (постеры не в одну узкую ленту); с планшетной ширины — четыре.
Карточка в сетке
Каждый элемент — ссылка. При наведении — лёгкая тень и сдвиг вверх. Вид и пропорции — у текстовой и контент-карточки.
Пустой список (travel)
Если в разделе travel ещё нет страниц, вместо карточек — сообщение «Пока пусто» на всю ширину сетки.
Догрузка ленты
На страницах с лентой (не travel-списки) при прокрутке к концу подгружается следующая порция карточек; строка догрузки занимает всю ширину сетки. Поведение догрузки — в feed.md.