73 lines
5.2 KiB
Markdown
73 lines
5.2 KiB
Markdown
# Пример кейса: демо элементов
|
||
|
||
- **Источник (разметка):** `src/pages/cases/template-elements-demo.html` → после сборки `public/cases/template-elements-demo.html`
|
||
- **eyebrow:** Демо · template
|
||
- **meta description:** Демо-страница кейса со всеми разработанными элементами: карточки ссылок и медиа-блоки.
|
||
- **Подзаголовок (h1 sub):** Рыба-текст и блоки для быстрой сборки лонгрида
|
||
|
||
*Источник шаблона (устаревшая ссылка в HTML): можно вести на этот файл — `texts/cases/template-elements-demo.md`.*
|
||
|
||
## Контекст
|
||
|
||
Этот раздел показывает пример рыбы для вступления. Здесь можно коротко описать продукт, аудиторию и ограничения проекта. Текст нейтральный: цель — быстро набросать структуру и проверить визуальный ритм страницы.
|
||
|
||
## Задача
|
||
|
||
Нужно собрать демонстрационный лонгрид с основными UI-элементами: карточками ссылок, медиа-блоками и примерами оформления контента. Дополнительно важно проверить, как блоки ведут себя на узких и широких экранах.
|
||
|
||
## Решение
|
||
|
||
Ниже собраны готовые примеры, которые можно копировать в реальные кейсы.
|
||
|
||
### Карточки ссылок
|
||
|
||
- **С превью** — [www.examples.com](https://www.examples.com/)
|
||
Короткая подпись: что пользователь увидит по ссылке. Превью: `assets/template-elements-demo/wallpaper-1.jpg`
|
||
- **С favicon** — [www.examples.com/docs](https://www.examples.com/docs)
|
||
Вариант для более лёгких ссылок без скриншота.
|
||
|
||
### Картинка: 50% от оригинала (без превью)
|
||
|
||
`assets/template-elements-demo/hello.gif` — демо GIF в натуральном размере, по центру.
|
||
|
||
*Подпись к figure:* Изображение в уменьшенном натуральном размере, по центру.
|
||
|
||
### Картинка: по ширине контента (с превью)
|
||
|
||
`assets/template-elements-demo/wallpaper-1.jpg` — клик открывает viewer (в UI).
|
||
|
||
*Подпись:* Изображение по ширине контента. Клик открывает viewer.
|
||
|
||
### Картинка: чуть шире контента (с превью)
|
||
|
||
Тот же ассет — изображение немного выходит за пределы контентной колонки.
|
||
|
||
### Длинный скрин: свёрнутая высота + развернуть
|
||
|
||
Разметка с `data-case-tall-media` и `data-case-tall-width` (`content` / `wide`): туман только в свёрнутом виде; кнопки под картинкой; после раскрытия туман скрывается. Исходник длинного кадра: `public/assets/template-elements-demo/img-long.png` → WebP командой `npm run optimize-images -- public/assets/template-elements-demo`. См. `public/assets/README.md`.
|
||
|
||
### Галерея: сетка по ширине контента
|
||
|
||
Семь файлов `assets/template-elements-demo/small-image-1.webp` … `small-image-7.webp` (рядом в той же папке лежат исходные PNG; WebP — `npm run optimize-images -- public/assets/template-elements-demo`). На `figure` задано `--case-gallery-cols: 3` для десктопа; ниже порогов ширины окна число колонок уменьшается (см. `docs/case-page-blocks.md`). Клик по ячейке открывает viewer.
|
||
|
||
### Галерея: сетка на ширину страницы (wide)
|
||
|
||
Те же `small-image-*.webp`, класс `case-media-gallery--wide`, `--case-gallery-cols: 2`.
|
||
|
||
### Callout: важный абзац с эмоджи
|
||
|
||
> Это пример акцентного callout-блока. Эмоджи вынесен влево и пульсирует, чтобы визуально усилить важную мысль. (в HTML: эмоджи 📌)
|
||
|
||
### Видео: карточка с тенью
|
||
|
||
`assets/template-elements-demo/video-1.webm` — пример видео-карточки в стиле кейса.
|
||
|
||
*Подпись:* Пример видео-карточки в стиле кейса.
|
||
|
||
## Результат
|
||
|
||
Шаблон готов для копирования в новый кейс: остаётся заменить рыбу на фактический текст, подставить реальные ссылки и медиа проекта.
|
||
|
||
---
|
||
|
||
*Новые картинки для демо и кейсов клади в `public/assets/…` (см. `public/assets/README.md`).* |