From ab4689bd2b149b579e44d7d2ac15874d7d655ceb Mon Sep 17 00:00:00 2001 From: Alexey S Date: Tue, 21 Apr 2026 23:27:50 +0300 Subject: [PATCH] current status --- about.html | 268 +------ article-guidelines.html | 268 +------ assets/js/components.js | 13 + bottle-cards.html | 268 +------ catalog.html | 268 +------ components/head.js | 17 + contacts-auth.html | 268 +------ contacts.html | 268 +------ docs/design-audit-followup.md | 131 ++++ docs/elementor-token-handoff.md | 1238 ++++++++++++++++++++----------- index.html | 268 +------ news-villa-raiano-v2.html | 268 +------ news-villa-raiano.html | 268 +------ product.html | 268 +------ src/_includes/layouts/base.njk | 6 + ui-kit.html | 4 +- 16 files changed, 1031 insertions(+), 3058 deletions(-) create mode 100644 assets/js/components.js create mode 100644 components/head.js create mode 100644 docs/design-audit-followup.md diff --git a/about.html b/about.html index 0a3273c..f7efd70 100644 --- a/about.html +++ b/about.html @@ -1,201 +1,12 @@ - - + DP Trade — О компании -
-
-
- - -
- +7 (495) 937-94-60 - - - - - - -
-
- -
+
@@ -237,79 +48,8 @@
- +
+ diff --git a/article-guidelines.html b/article-guidelines.html index ec13ee1..257f26e 100644 --- a/article-guidelines.html +++ b/article-guidelines.html @@ -1,201 +1,12 @@ - - + DP Trade — Article Guidelines -
-
-
- - -
- +7 (495) 937-94-60 - - - - - - -
-
- -
+
@@ -303,79 +114,8 @@
- +
+ diff --git a/assets/js/components.js b/assets/js/components.js new file mode 100644 index 0000000..5d8086d --- /dev/null +++ b/assets/js/components.js @@ -0,0 +1,13 @@ +(function () { + async function load(id, url) { + var el = document.getElementById(id); + if (!el) return; + var r = await fetch(url); + if (!r.ok) return; + el.outerHTML = await r.text(); + } + document.addEventListener('DOMContentLoaded', function () { + load('site-header', 'components/menu.html'); + load('site-footer', 'components/footer.html'); + }); +})(); diff --git a/bottle-cards.html b/bottle-cards.html index 9d8dbb7..b29536d 100644 --- a/bottle-cards.html +++ b/bottle-cards.html @@ -1,201 +1,12 @@ - - + DP Trade — Bottle Card Variants -
-
-
- - -
- +7 (495) 937-94-60 - - - - - - -
-
- -
+
@@ -423,79 +234,8 @@
- +
+ diff --git a/catalog.html b/catalog.html index da88156..fea282e 100644 --- a/catalog.html +++ b/catalog.html @@ -1,201 +1,12 @@ - - + DP Trade — Catalog -
-
-
- - -
- +7 (495) 937-94-60 - - - - - - -
-
- -
+
@@ -271,79 +82,8 @@
- +
+ diff --git a/components/head.js b/components/head.js new file mode 100644 index 0000000..ed3001c --- /dev/null +++ b/components/head.js @@ -0,0 +1,17 @@ +(function () { + var css = document.currentScript.getAttribute('data-css') || 'css/site.css'; + document.currentScript.insertAdjacentHTML('beforebegin', + '' + + '' + + '' + + '' + + '' + + '' + + ' DP Trade — Контакты / Auth Gate -
-
-
- - -
- +7 (495) 937-94-60 - - - - - - -
-
- -
+
@@ -252,79 +63,8 @@
- +
+ diff --git a/contacts.html b/contacts.html index 70ccf56..c8772d8 100644 --- a/contacts.html +++ b/contacts.html @@ -1,201 +1,12 @@ - - + DP Trade — Контакты -
-
-
- - -
- +7 (495) 937-94-60 - - - - - - -
-
- -
+
@@ -241,79 +52,8 @@
- +
+ diff --git a/docs/design-audit-followup.md b/docs/design-audit-followup.md new file mode 100644 index 0000000..63a9cc9 --- /dev/null +++ b/docs/design-audit-followup.md @@ -0,0 +1,131 @@ +# DP Trade - разбор предложений дизайнера + +Источник: `/Users/lexx/Downloads/Аудит сайт дп-трейд.pdf` +Дата разбора: 2026-04-21 + +## Короткий вывод + +Предложения дизайнера в основном подтверждаются текущей версткой. Главная системная проблема - сайт все еще построен на retail/B2B-визуальном языке: Montserrat/Inter, жирные uppercase-заголовки, холодный серо-голубой фон, конкурирующие синий и бордовый акценты, тяжелые CTA и градиентные карточки товара. Для премиального винного каталога нужно сместить систему к более спокойной editorial-подаче: Cormorant Garamond для заголовков и названий вин, Manrope для текста, теплый белый/кремовый фон, один основной бордовый акцент. + +Часть аудита уже не полностью совпадает с текущей реализацией: на главной CTA в hero присутствуют (`Смотреть каталог`, `Открыть UI-kit`), а заголовки в исходных HTML не набраны капсом руками. Но CSS принудительно включает uppercase и тяжелый вес, поэтому визуально замечание дизайнера остается актуальным. + +## Ключевые замечания + +### 1. Типографика + +- В `tokens.css` основными токенами стоят `Montserrat` для заголовков и `Inter` для body. Дизайнер предлагает заменить на `Cormorant Garamond` + `Manrope`, оба шрифта уже подключены. +- В CSS много `font-weight: 800` и `text-transform: uppercase` для hero, H2, карточек, меню, контактов и карточек преимуществ. Это создает ощущение "крика" и снижает премиальность. +- Важное уточнение: проблема не в текстах шаблонов, а в стилях. Например, `src/about.njk` содержит нормальный регистр, но `.page-hero h1` принудительно делает uppercase. +- Минимальный размер текста должен быть не ниже 12px. Текущий 8px встречается в `.brand-logo small`; если этот элемент реально используется или вернется, его надо поднять до 12px. + +### 2. Цвет и палитра + +- Сейчас системные цвета: бордовый `#4b0f24`, фон `#f4f6f9`, синий акцент `#1f3476`. Дизайнер предлагает: основной бордовый `#7D021D`, теплый белый `#FFFDFA`, теплый карточный фон `#F5F0E8`, синий оставить только в логотипе. +- Синий телефон в шапке конкурирует с бордовым CTA. +- Холодные фоны `#f4f6f9`, `#eef2f6`, `#f8fafc` встречаются во многих секциях и выглядят чужими для винной темы. +- Градиенты в карточках товара выглядят случайными и конкурируют с этикетками бутылок. Нужен единый нейтральный фон под товар. + +### 3. Карточка товара + +- На главной карточки рекомендаций используют разноцветные градиенты под бутылками. +- Название товара в карточке визуально становится жирным uppercase через CSS. Рекомендация: normal case, Cormorant Garamond, 16-18px. +- Цена и кнопка стоят в одной строке как равнозначные элементы. Лучше выстроить вертикальную иерархию: регион, название, мета, разделитель, цена, full-width outlined CTA. +- Основной CTA сейчас темный залитый. Для карточек дизайнер предлагает более легкую outlined-кнопку на всю ширину. + +### 4. Mega-menu + +- Заголовки mega-menu слишком крупные и тяжелые: 26px, 800, uppercase. +- Фото занимает целую колонку и перетягивает внимание с навигации. Лучше уменьшить изображение до декоративного акцента или вынести в промо-блок в конце меню. +- В апелласьонах страна и регионы недостаточно различаются по иерархии. Страна должна быть золотой, 11px, caps; апелласьоны - 14px normal case с отступом. +- Чипы популярных регионов имеют разную ширину. Лучше задать единый min-width или вытянуть в ровную горизонтальную строку. + +### 5. Главная + +- Hero сейчас уже содержит явные CTA, поэтому замечание из аудита про отсутствие CTA неактуально. +- Остается актуальным: hero H1 слишком тяжелый из-за Montserrat, 800 и uppercase. Нужно перевести в Cormorant Garamond, normal case, более спокойный вес. +- H2 в секциях тоже надо убрать из uppercase и снизить визуальный вес. + +### 6. Страница продукта + +- Нет хлебных крошек. Для каталога это важно для ориентации и SEO. +- Описание продукта пока короткое, но для будущего длинного описания нужен текстовый блок с `max-width: 65-72ch`. +- Есть большой разрыв между метаданными и кнопками из-за сетки и отступов. Нужно проверить вертикальную композицию после добавления breadcrumbs и описания. +- H1 товара также наследует тяжелый uppercase. + +### 7. "О нас" + +- Hero-паттерн похож на остальные внутренние страницы: темная фотография, большой H1, белая карточка справа. Это снижает ощущение перехода между разделами. +- H1 спокойнее сделать serif, 48-56px, normal case, без давления. +- Правая карточка в hero сейчас работает как приклеенный светлый прямоугольник. Ее стоит смягчить: меньше кегль, обычный текст, меньше uppercase. +- Основной текст ограничен `max-width: 860px`, дизайнер предлагает 600-640px или около 66ch. +- Подзаголовки внутри статьи слишком крупные и uppercase. +- Карточки 01-04 имеют жесткую высоту 210px и `align-content: space-between`, из-за чего контент искусственно растянут. +- Цитата в CSS оформлена цветной левой границей и холодным фоном. Если блокquote используется в контенте, его лучше сделать через italic serif и тонкую нейтральную линию. +- Финальный muted-section на холодном фоне надо перевести в теплый кремовый. + +### 8. "Контакты" + +- Для контактов полноэкранный/крупный hero с темной фотографией слишком тяжелый. Контакты должны быстрее показывать телефон, email и форму. +- Телефон в карточке слишком крупный и тяжелый, выбивается из общей иерархии. +- Юридическая информация стоит рядом с телефоном и email как равнозначная карточка. Ее лучше перенести ниже формы или в конец страницы мелким справочным блоком. +- Заголовок формы крупный и uppercase, labels слишком жирные. +- Поле "Телефон или email" неоднозначно. Лучше разделить на два поля или дать понятную подсказку. +- Нет видимого success-state после отправки формы. + +## Расхождения с аудитом + +- CTA в hero главной уже есть: `src/index.njk` содержит две кнопки в первом экране. Значит пункт "отсутствует явный CTA" стоит закрыть как неактуальный или переформулировать в "сделать CTA визуально легче/элегантнее". +- В исходных шаблонах многие заголовки набраны нормальным регистром. Капс появляется из CSS. Исправлять надо в основном CSS-токены и правила `text-transform`, а не тексты. +- В аудите упоминается Playfair Display как почти неиспользуемый шрифт, но итоговая рекомендация дизайнера - Cormorant Garamond + Manrope. Лучше не распыляться на Playfair и зафиксировать одну пару. +- В карточках каталога (`product-card--list`) названия уже без uppercase, но слишком тяжелые и крупные. Замечание про uppercase точнее относится к карточкам рекомендаций/общим `.product-card h3`. +- Страница продукта пока очень короткая. Замечание про ширину описания надо учесть как требование к будущему расширенному описанию, а не как текущий критический баг. + +## План доработок + +### Этап 1. Системные токены и базовая типографика + +1. Обновить `src/css/tokens.css`: `--font-heading` на Cormorant Garamond, `--font-body` на Manrope, основной бордовый на `#7D021D`, фон на теплый `#FFFDFA`, surface/card background на теплую белую/кремовую шкалу. +2. Синхронизировать те же токены в `src/css/ui-kit.css`, чтобы витрина UI-kit не расходилась с сайтом. +3. Убрать uppercase с H2-H4, product titles, news titles, page hero titles, form titles. Caps оставить только для eyebrow/meta labels. +4. Пересобрать шкалу весов: H1 может быть крупным, но не обязательно 800; H2-H4 сделать 500-600 или доступный локальный эквивалент с текущими файлами шрифтов. +5. Проверить минимальные размеры: не использовать текст ниже 12px. + +### Этап 2. Карточки и CTA + +1. Заменить градиентные product media на единый теплый нейтральный фон `#F5F0E8`. +2. Перестроить карточку рекомендаций: region label, serif title 16-18px, gray meta 13px, разделитель, цена 22-24px, outlined full-width CTA. +3. Смягчить primary/secondary buttons: новый бордовый, меньше "B2B-тяжести", четкие hover/focus states. +4. Проверить карточки каталога отдельно: сохранить плотность B2B-списка, но снизить вес заголовков и цены. + +### Этап 3. Header и mega-menu + +1. Убрать синий цвет телефона в шапке, оставить синий только внутри логотипа. +2. Уменьшить и облегчить заголовки mega-menu: 16-18px, normal case, semibold. +3. Переделать визуальную колонку mega-menu: уменьшить изображение или вынести его в небольшой промо-блок. +4. Настроить иерархию апелласьонов: страна как meta label, регионы с отступом и normal case. +5. Выровнять popular chips: единый min-width или одна строка с равномерным ритмом. + +### Этап 4. Страницы + +1. Главная: обновить hero-типографику, H2 секций, карточки рекомендаций и холодные фоны новостей. +2. Продукт: добавить breadcrumbs, расширенный description-блок с `max-width: 65-72ch`, пересобрать вертикальную иерархию metadata/price/CTA. +3. О нас: сделать hero спокойнее, смягчить правую карточку, сузить основной текст до 66ch, облегчить подзаголовки, убрать жесткую высоту feature-card, заменить холодный muted-section. +4. Контакты: сделать компактный hero без тяжелой фотографии, вывести телефон/email в первый экран, юридический текст перенести ниже, облегчить форму, разделить контактные поля или добавить подсказку, добавить success-state. + +### Этап 5. Проверка + +1. Прогнать `npm run build`. +2. Проверить страницы минимум на desktop и mobile: `index.html`, `catalog.html`, `product.html`, `about.html`, `contacts.html`, `ui-kit.html`. +3. Отдельно проверить, что длинные русские заголовки и телефоны не ломают сетку. +4. Сверить UI-kit с сайтом: токены, кнопки, карточки, hero, формы. + +## Приоритет + +P0: токены, шрифты, uppercase, фон, основной бордовый. Без этого остальные правки будут точечными и визуально не соберутся. + +P1: карточки товара, CTA, header/mega-menu. Это самые заметные пользовательские интерфейсы и они прямо влияют на восприятие каталога. + +P2: страницы "О нас", "Контакты", "Продукт". Здесь много композиционных улучшений, но они лучше лягут после системной смены визуального языка. + +P3: финальная полировка UI-kit, состояния формы, hover/focus, адаптивные проверки. + diff --git a/docs/elementor-token-handoff.md b/docs/elementor-token-handoff.md index dc8d7ed..20bd159 100644 --- a/docs/elementor-token-handoff.md +++ b/docs/elementor-token-handoff.md @@ -1,145 +1,255 @@ -# Перенос UI-kit токенов и элементов в Elementor +# Перенос UI-kit в WordPress + Elementor -Документ описывает безопасный перенос дизайн-токенов и базовых элементов DP Trade UI-kit в Elementor WordPress. Главная цель: внедрить новую дизайн-систему постепенно, не ломая текущие страницы и глобальные настройки сайта. +Документ описывает безопасный перенос дизайн-системы и всех макетов DP Trade UI-kit на WordPress с Elementor. Цель: внедрить дизайн-систему поэтапно, не ломая существующие страницы, Header, Footer и WooCommerce, если он используется. -## 1. Базовый принцип переноса +Документ построен в три слоя: -Не заменяйте существующие настройки Elementor сразу. Сначала добавьте новые токены рядом со старыми, соберите тестовую страницу, проверьте визуально, затем постепенно переводите реальные шаблоны и страницы на новые значения. +1. **Аудит исходников** — какие страницы, компоненты и паттерны есть в макете и что из этого дорого/опасно переносить на Elementor. +2. **Декомпозиция работ** — список Elementor-элементов (Global Styles, CSS-слой, глобальные шаблоны, страницы) с оценкой сложности и зависимостями. +3. **Пошаговый план** — 6 этапов с QA и планом отката. + +> Основной источник дизайна: `index.html`, `catalog.html`, `product.html`, `bottle-cards.html`, `about.html`, `contacts.html`, `contacts-auth.html`, `news-villa-raiano.html`, `news-villa-raiano-v2.html`, `article-guidelines.html`, `ui-kit.html` плюс `css/tokens.css`, `css/site.css`, `css/ui-kit.css`. + +--- + +## 1. Базовый принцип + +Не заменяйте существующие настройки Elementor сразу. Сначала добавляйте новые токены рядом со старыми, собирайте тестовую страницу, проверяйте визуально, и только потом переводите реальные шаблоны и страницы на новые значения. Рекомендуемый порядок: -1. Сделать backup сайта и базы данных. -2. Работать на staging-копии или тестовой странице. -3. Добавить новые Global Colors. -4. Добавить новые Global Fonts. -5. Настроить базовые элементы: кнопки, поля, карточки, теги. -6. Создать страницу `UI Kit Preview` в WordPress. -7. Проверить desktop, tablet, mobile. -8. Только после проверки применять к Header, Footer, каталогу и страницам. +1. Backup сайта и базы данных. +2. Работа на staging-копии или на новой странице. +3. Новые Global Colors с префиксом `DP`. +4. Новые Global Fonts с префиксом `DP`. +5. Тонкий базовый CSS-слой с переменными `--dp-*` и утилитарными классами `dp-*`. +6. Базовые компоненты: кнопки, поля, карточки, теги, хедер/футер (draft-копии). +7. Страница `UI Kit Preview` как живая витрина. +8. Проверка desktop / tablet / mobile. +9. Поэтапная замена Header, Footer, catalog, product, news, about, contacts. -## 2. Источники токенов в проекте +--- -Основные файлы: +## 2. Аудит: что в макете и чего в нём нет -- `css/tokens.css` — базовые дизайн-токены сайта. -- `css/site.css` — стили реальных страниц, header, footer, карточек, каталога, форм. -- `css/ui-kit.css` — витрина UI-kit, состояния и примеры компонентов. -- `ui-kit.html` — живая HTML-витрина дизайн-системы. +### 2.1 Карта страниц -В Elementor переносите не весь CSS целиком, а роли и значения: цвета, шрифты, отступы, радиусы, тени и повторяемые компоненты. +| Страница | Что демонстрирует | Шаблон Elementor | +|---|---|---| +| `index.html` | Hero, mega-menu, блок «Производители», блок «Новости», блок «Рекомендации» | Home Template (Single Page) | +| `catalog.html` | Toolbar, sort select, list-карточки, sidebar-фильтры | Archive Template (WooCommerce или CPT `product`) | +| `product.html` | Галерея + карточка товара, meta-list (4 пары label/value), CTA | Single Product Template | +| `bottle-cards.html` | Все варианты карточки бутылки (grid, mix, compact, horizontal, по регионам) | Showcase внутри UI Kit Preview | +| `about.html` | Page hero, 2-col layout (article + feature grid), карточки с номерами | Page Template «About» | +| `contacts.html` | Page hero, контактная форма, info-panel | Page Template «Contacts» | +| `contacts-auth.html` | То же с авторизацией/аккаунтом | Page Template «Account» или `My Account` endpoint | +| `news-villa-raiano.html`, `news-villa-raiano-v2.html` | Editorial hero, тело статьи, две редакционные верстки | Single Post Template (2 варианта) | +| `article-guidelines.html` | Редакционные правила, структурный контент | Single Post / CPT `guideline` | +| `ui-kit.html` | Живая витрина с sidebar-навигацией и превью компонентов | Не копировать в production, это витрина для дизайнеров и QA | -## 3. Карта цветов для Elementor Global Colors +### 2.2 Карта компонентов -Перейдите в: +Сложность указана относительно «чистого» Elementor без hand-coded HTML виджетов. -`Elementor -> Site Settings -> Global Colors` +| Компонент | Ключевые селекторы | Где встречается | Сложность | +|---|---|---|---| +| Primary / Secondary / Small button | `.button`, `.button--primary`, `.button--secondary`, `.button--sm` | везде | Лёгко | +| Input, search bar, catalog sort | `.input`, `.search-bar`, `.catalog-sort` | header, catalog | Средне | +| Tag / Chip / Status | `.tag`, `.tag--filled`, `.tag--outline`, gold-вариант | каталог, карточки | Лёгко | +| Primary hero (home) | `.hero`, `.hero-copy`, `.hero-actions` | `index.html` | Сложно | +| Page hero (about / contacts / guidelines / news) | `.page-hero`, `.page-hero--about`, `.page-hero--contacts`, `.page-hero--guidelines`, `.page-hero__inner`, `.page-hero__meta` | 5 страниц | Средне | +| Mega menu | `.mega-menu`, `.menu-grid`, `.menu-column`, `.visual-column`, `.appellations`, `.appellation-group`, `.country-link` | header | **Сложно** | +| Header sticky + blur | `.site-header`, `position: sticky`, `backdrop-filter: blur(18px)` | все страницы | Средне | +| Producer card | `.producer-card` | home | Лёгко | +| News card (3 варианта фоновых изображений) | `.news-card`, `.news-card__image` | home | Лёгко | +| Product card grid | `.product-card`, `.product-media`, `.product-photo`, `.product-footer` | home, catalog, product | Средне | +| Product card list | `.product-card--list` (3 колонки: image / info / actions) | catalog | Сложно | +| Product card compact list | `.product-card--list-compact` | ui-kit | Средне | +| Product card B2B | `.product-card--list-b2b`, `.product-params` | ui-kit | Сложно | +| Bottle card + 5 вариантов | `.bottle-card`, `.bottle-card--tuscany/--mosel/--clean/--compact/--horizontal`, `.bottle-card__media`, `.bottle-card__photo` | bottle-cards | Средне | +| CSS-бутылка (два `::before`/`::after`) | `.bottle`, `.bottle::before` (пробка), `.bottle::after` (этикетка) | ui-kit, catalog showcase | **Сложно** (требует HTML-виджет) | +| Section heading (split) | `.section-heading`, `.section-heading--split` | все секции | Лёгко | +| Feature card с номером | `.feature-card` + `01..04` | about | Лёгко | +| Info card / contact panel / contact form | `.info-card`, `.contact-panel`, `.contact-form` | about, contacts | Лёгко | +| Meta list (4 пары label/value) | `.meta-list`, `.meta-list div`, `.meta-list span` | product | Лёгко | +| Article body (editorial) | `.article-body`, `.article-body .lead`, `.article-body h2/h3/p/ul` | news, guidelines | Средне | +| Footer | `.site-footer`, `.footer-container`, `.footer-main`, `.footer-brand-block`, `.nav-group`, `.contacts-card`, `.social-links` | все страницы | Лёгко | +| Breadcrumbs | отсутствуют в макете | — | нужно добавить отдельно | +| Pagination | отсутствует в макете | — | нужно добавить отдельно | -Добавьте новые цвета. Старые цвета пока не удаляйте. +### 2.3 Проблемные места для Elementor -| Elementor name | CSS token | Value | Role | -|---|---:|---:|---| -| DP Wine 100 | `--color-primary-wine-100` | `#4b0f24` | Основной брендовый цвет, primary buttons, hover menu, акценты | -| DP Wine 80 | `--color-primary-wine-80` | `#6d1c36` | Hover для primary, вторичный винный оттенок | +Ниже — паттерны, которые **нельзя** просто перетащить в стандартные виджеты. Каждый пункт требует либо custom CSS-класса, либо HTML-виджета, либо отдельного Elementor-шаблона. + +1. **Mega menu с 4-колоночным асимметричным гридом и мостом-ховером.** + `css/site.css:242-369`. Grid `1.05fr 0.82fr 1.25fr 0.88fr`, вложенная секция `.appellations` на 2 колонки, позиционирование `position: absolute; transform: translateX(-50%); width: min(var(--container), calc(100vw - 40px))`, ховер-мост через `::after` высотой 34px, `backdrop-filter: blur(18px)`. Стандартный Elementor Nav Menu/Mega Menu такое не даёт. Решение: **custom HTML виджет** + CSS-классы `dp-megamenu-*` либо Crocoblock JetMenu. +2. **Sticky header с backdrop-filter blur.** + `.site-header { position: sticky; top: 0; backdrop-filter: blur(18px); background: rgba(248, 250, 252, 0.94); }`. В Elementor Pro есть `Effects → Sticky`, но blur и alpha-фон задаются только CSS. +3. **CSS-бутылка на `::before`/`::after`.** + `.bottle { width: 54px; height: 152px; ... }`, плюс псевдо-пробка и этикетка. Elementor виджет Image такого не даст — нужен HTML-виджет с фиксированной разметкой `
`. +4. **Псевдоэлементы как структурная часть карточек.** + `.type-card.is-selected::before` (бейдж), градиентные fond-блоки `.bottle-card__media` с разными заливками под `--tuscany/--mosel/--clean/--compact`. Решение: пять CSS-классов-модификаторов, в Elementor подключать через поле `CSS Classes`. +5. **CSS Grid с асимметричными колонками.** + Примеры: `.page-hero__inner` (`0.72fr / 0.28fr`), `.article-layout` (`0.68fr / 0.32fr`), `.about-grid` (`0.58fr / 0.42fr`), `.product-card--list` (`210px / 1fr / 220px`), `.footer-main` (`210px / 1fr / 250px`), `.meta-list` (в product — de-facto 2 колонки). Elementor Container с `display: flex` справится только с простыми кейсами. Для сложных — либо Container c `CSS display: grid` через custom CSS, либо принять, что колонки останутся фиксированной ширины через `%`. +6. **Responsive через `clamp()`.** + `h1 { font-size: clamp(40px, 5.6vw, 76px) }` и подобные. Elementor работает через три брейкпоинта. Решение: в Elementor задавайте отдельные desktop/tablet/mobile значения, либо пропишите `clamp()` в Custom CSS для `h1`/`h2` с префиксом `dp-`. +7. **Кастомный select (`.catalog-sort`).** + Элементу ` - -
- +7 (495) 937-94-60 - - - - - - -
- - - +
@@ -283,79 +94,8 @@
- + + diff --git a/news-villa-raiano-v2.html b/news-villa-raiano-v2.html index 9ff3de8..67f34e8 100644 --- a/news-villa-raiano-v2.html +++ b/news-villa-raiano-v2.html @@ -1,201 +1,12 @@ - - + DP Trade — Villa Raiano editorial -
-
-
- - -
- +7 (495) 937-94-60 - - - - - - -
-
- -
+
@@ -269,79 +80,8 @@
- +
+ diff --git a/news-villa-raiano.html b/news-villa-raiano.html index ebbda7c..5ec63cb 100644 --- a/news-villa-raiano.html +++ b/news-villa-raiano.html @@ -1,201 +1,12 @@ - - + DP Trade — Villa Raiano -
-
-
- - -
- +7 (495) 937-94-60 - - - - - - -
-
- -
+
@@ -244,79 +55,8 @@
- +
+ diff --git a/product.html b/product.html index 9bae2f5..86d15dd 100644 --- a/product.html +++ b/product.html @@ -1,201 +1,12 @@ - - + DP Trade — Product -
-
-
- - -
- +7 (495) 937-94-60 - - - - - - -
-
- -
+
@@ -218,79 +29,8 @@
- +
+ diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk index 0729250..69178c1 100644 --- a/src/_includes/layouts/base.njk +++ b/src/_includes/layouts/base.njk @@ -5,6 +5,12 @@ {{ title }} + + + {{ content | safe }} diff --git a/ui-kit.html b/ui-kit.html index 7ee7294..a8eb161 100644 --- a/ui-kit.html +++ b/ui-kit.html @@ -1,10 +1,8 @@ - - + DP Trade — Design System -