Главные 22.08.2026 14:52

2 18 просмотров

План адаптивной оптимизации верстки и цветовой схемы (Mobile & Tablet UI)

Отчет о выполненных работах по улучшению читаемости хлебных крошек и текста

Описание задачи

Проработка мобильной и планшетной верстки (адаптива), оптимизация контрастности фонов и текстов, а также устранение визуальных дефектов отображения в светлой и тёмной темах.

Основные выявленные проблемы:

Критический баг с картами на мобильных (<768px): В style.css была установлена жесткая замена фона .card, .navbar и .user-top-bar на rgba(15, 23, 42, 0.95) на мобильных экранах. В светлой теме это приводило к отображению темно-синего фона с темным текстом, из-за чего текст становился нечитаемым.
Мобильное навигационное меню (<992px): Выпадающие списки .dropdown-menu имели принудительный прозрачно-белый фон rgba(255, 255, 255, 0.05), из-за чего в светлой теме текст сливался с белым фоном, а в темной не имел чётких границ и визуального выделения.
Неоптимальные тени и цвета в category-bl.css и hero.css: Использование устаревших жестко закодированных цветных теней (красных/желтых text-shadow) и фиксированных шрифтов 2.2rem !important, которые ломали верстку на смартфонах шириной 320px–480px.
Низкий контраст второстепенного текста (--color-text-muted, --color-text-dim): При солнечном свете или сниженной яркости экрана телефона приглушенные тексты становились сложночитаемыми.
Отступы и Bento-сетки: Большие отступы карт padding: 1.75rem скрадывали полезную ширину экрана на смартфонах.

Предлагаемые изменения

Design Tokens & Базовые цвета (`root.css`)

[MODIFY]

Улучшить контрастность переменных --color-text-muted (#cbd5e1 в тёмной теме, #475569 в светлой) и --color-text-dim (#94a3b8 в тёмной).
Скорректировать стеклянные токены --color-glass и --color-glass-border для более чистого слоистого UI на мобильных экранах.

Глобальные стили & Адаптивные исправления (`style.css`)

[MODIFY]

Исправление бага мобильных карт: Заменить принудительный тёмный фон rgba(15, 23, 42, 0.95) на семантическую переменную темы var(--color-dark-surface). Теперь в светлой теме карточки остаются светлыми, а в тёмной — тёмными.
Оформление мобильного бургер-меню (<992px):
- Настроить выпадающие меню .navbar-collapse .dropdown-menu с плавным фоном на основе переменных темы, выразительной плашкой акцента при наведении/клике и скругленными углами.
- Добавить аккуратный внутренний padding (padding: 1rem 1.25rem) для развернутого гамбургер-меню, чтобы пункты не прилипали к краю экрана.
Адаптивные карточки и Bento-сетки (<768px и <576px):
- Сделать отступы card-body флюидными: clamp(1rem, 4vw, 1.5rem).
- Оптимизировать сетку бенто (bento-grid-portfolio, bento-grid-news, bento-grid-reviews) для мобильных устройств, снизив отступы между карточками для максимизации полезного пространства.
Сенсорные зоны (Touch Targets): Обеспечить минимальную высоту 44px для всех кнопок и полей ввода на смартфонах.

Стили Шапки & Мобильной Навигации (`header.css`)

[MODIFY]

Скорректировать стили .premium-header и .action-btn для мобильных экранов: четкие границы, адаптивный размер аватара и иконок.
Добавить стилизацию активного состояния для кнопки гамбургера (.navbar-toggler).

Блок Героя / Промо-секция (`hero.css`)

[MODIFY]

Заменить устаревшие желтые тени text-shadow: 0 2px 10px rgba(226, 202, 105, 0.795) на глубокие аккуратные нейтральные тени 0 2px 12px rgba(0, 0, 0, 0.6).
Сделать размер заголовка .title-hero, .sl_1, .sl_2 полностью адаптивным через clamp() для комфортного чтения без переноса одиночных букв.

Карточки Категорий (`category-bl.css`)

[MODIFY]

Убрать разноцветные тени (красные hsla(0, 100%, 50%, 0.364), зеленые rgba(183, 219, 4, 0.214)).
Заменить жесткий размер шрифта 2.2rem !important на адаптивный clamp(1.2rem, 3.5vw, 1.75rem).
Применить темы-зависимые переменные цвета текста вместо принудительного белого var(--color-white) !important, чтобы в светлой теме карточки выглядели элегантно и контрастно.

Стили Портфолио & Прайсов (`portfolio.css`)

[MODIFY]

Улучшить мобильное отображение заголовков, изображений проектов (ограничение высоты на смартфонах) и мета-блоков portfolio-meta-detail.

План проверки (Verification Plan)

Автоматическая проверка

Синтаксическая валидация CSS и запуск Django системных проверок: python mysite/manage.py check

Ручная проверка верстки (Mobile / Tablet / Desktop)

Проверка разрешения 360px - 480px (Мобильные смартфоны):
- Проверить открытие бургер-меню в шапке сайта. Меню должно иметь четкий контрастный фон в тёмной и светлой теме, кнопки вложенных списков читаемые и удобные для нажатия пальцем.
- Проверить карточки новостей, услуг, отзывов и категорий на главной странице. Отсутствие перекрытия текста темным фоном в светлой теме.
Проверка разрешения 768px - 991px (Планшеты):
- Проверить bento-сетку (2 колонки) и карточки портфолио.
- Проверить контрастность заголовков и второстепенного текста.
Переключение Тем (Dark / Light mode):
- Переключить тему с помощью кнопки на шапке сайта, убедиться в безупречном контрасте фона и текста во всех разделах.

Хронология событий за 22.08.2026

Оптимизация мобильной/планшетной верстки и цветовой гаммы

Другое событие 16:51

Была проведена комплексная оптимизация мобильной и планшетной верстки (адаптива), устранение проблем контрастности фонов и текстов в тёмной и светлой темах оформления.

Что сделано

1. Исправление критического бага карточек в Светлой теме на смартфонах (`style.css`)

Проблема: На экранах <768px применялось правило @media (max-width: 768px) { .card, .glass-card ... { background: rgba(15, 23, 42, 0.95) !important; } }. В светлой теме это приводило к тёмно-синему фону с темно-синим/черным текстом (полная нечитаемость).
Решение: Удален жесткий цвет rgba(15, 23, 42, 0.95). Использованы токены темы var(--color-dark-surface) в тёмной теме и #ffffff с микро-границей rgba(15, 23, 42, 0.1) в светлой теме.

2. Мобильное бургер-меню и Выпадающие списки (`style.css`, `header.css`)

Стилизовано выпадающее меню .navbar-collapse при раскрытии на смартфонах и планшетах (<992px):
- Добавлены скругления углов border-radius: var(--radius-lg), тень box-shadow и комфортные отступы 1.25rem 1rem.
- В тёмной теме меню получило фон var(--color-dark-surface) и границы var(--color-glass-border).
- В светлой теме меню получило чисто-белый фон #ffffff с контрастными текстами и аккуратной границей rgba(15, 23, 42, 0.12).
- Кнопка гамбургера .navbar-toggler получила подсветку активного состояния при открытии.

3. Рефакторинг Карточек Категорий (`category-bl.css`)

Удалены резкие жесткие разноцветные тени (text-shadow красного, желтого и зеленого оттенков).
Фиксированный шрифт 2.2rem !important заменен на флюидный адаптивный размер clamp(1.1rem, 2.5vw, 1.5rem).
Использованы переменные темы var(--color-text-main) и var(--color-text-muted) вместо принудительного белого текста, что обеспечивает идеальный контраст в любой теме.

4. Оптимизация Секции Героя / Промо-баннера (`hero.css`)

Заменены желтые тени заголовков на элегантные глубокие тени rgba(0, 0, 0, 0.5-0.6).
Заголовки .title-hero, .sl_1, .sl_2 переведены на адаптивный clamp(), исключая некрасивый перенос слов на экранах шириной 320px–480px.

5. Повышение Контрастности и Читаемости (`root.css`, `portfolio.css`, `style.css`)

Переменная --color-text-muted в тёмной теме повышена до #cbd5e1, а --color-text-dim — до #94a3b8 (стандарт WCAG AA).
Исправлено правило body.light-mode .text-white, чтобы текст на кнопках с градиентом (.btn-primary, .badge) сохранял белый цвет и не становился темным.
На смартфонах (<768px) установлены удобные размеры сенсорных зон (минимальная высота кнопок и полей ввода 44px).

Проверка работы

1. Django System Check

Выполнена команда python mysite/manage.py check:

text

System check identified no issues (0 silenced).

2. Тестирование Режимов

Смартфоны (360px - 480px): Бургер-меню открывается плавно, текст на карточках и в блоках категорий контрастный и легко читаемый.
Планшеты (768px - 991px): Bento-сетка адаптивно перестраивается в 2 колонки с комфортными межстрочными отступами.
Светлая / Тёмная Тема: Все элементы гармонично адаптируются без смешения цветов.

Отчет о выполненных работах по улучшению читаемости хлебных крошек и текста

Другое событие 18:01

Выполненные изменения

1. Оптимизация верстки и стилей хлебных крошек (Breadcrumbs)

Файл : Заменен внешний тег <nav class="hero-breadcrumbs"> на <div class="hero-breadcrumbs">, устранивший невалидную вложенность тегов <nav> внутри <nav>.
Файл : Ручная разметка хлебных крошек с жесткими классами text-white-50 и text-white заменена на динамический тег {% load breadcrumbs %}{% breadcrumbs %}.
Файл :
- Правила .hero-breadcrumbs переведены с жесткого белого цвета (rgba(255, 255, 255, 0.6) / #fff) на универсальные семантические переменные темы (var(--color-text-muted), var(--color-text-main), var(--color-primary)).
- Блок .breadcrumb-fon применен с подложкой backdrop-filter: blur(12px) и оптимизированной прозрачностью.
- Добавлены адаптивные правила для светлой темы (body.light-mode), гарантирующие четкую видимость крошек при любом переключении темы.

2. Устранение глобального размытия текста (`-webkit-text-stroke`)

Файл : Удалено правило -webkit-text-stroke: 0.3px rgba(0, 0, 0, 0.5) !important; у глобального селектора *.
- Результат: Шрифты на всем сайте перестали обводиться черным контуром, исчезло размытие и растровые артефакты, текст стал резким, чистым и легко читаемым.

3. Исправление контраста и текста на странице корзины

Файл : Удалено принудительное задание сплошного светлого фона rgba(249, 249, 249, 0.905) с текстом #000000 и rgba(255,255,255,0.75) на .glass-card.
- Результат: Устранен критический баг "белый текст на белом фоне" в корзине и на этапе оформления заказа.

4. Улучшение читаемости в услугах и личной панели

Файл :
- Исправлен градиент кнопки .btn-gradient-primary и бэйджа .plan-badge-popular (устранена опечатка #ffff), цвет текста сделан четким белым #ffffff с подложкой высококонтрастного градиента.
Файл :
- Настроены контрастные состояния наведения и активного пункта меню профиля (.profile-nav a.active) для светлой и темной тем.

Результаты проверки

Диагностика Django:
- Выполнена команда python mysite/manage.py check — 0 ошибок.
Сборка статических ресурсов:
- Выполнена команда python mysite/manage.py collectstatic --noinput — успешно собрано 382 файла.
Проверка работоспособности:
- Страницы /, /news/, /services/, /portfolio/, /cart/, /cart/checkout/, /accounts/login/ работают корректно со статусом 200 OK.