Вёрстка

Сложно сосредоточиться

Лонгрид о внимании с переключением тем День / Авто / Неон и вёрсткой от телефона до десктопа.

HTML
CSS
JavaScript
BEM
CSS Grid

Задача и назначение

Нужно было сверстать длинный текст так, чтобы он держал характер: неон, моноширинный шрифт и смена настроения день/ночь без потери читаемости.

Что реализовано

Три темы: День, Неон и Авто, которая следует системной схеме
Адаптив: контейнер от 375 до 1440px, сетка с 768px и 1024px
Статья: почему сложно сосредоточиться, что мешает и пять советов
Галерея кадров и декоративный REC в тёмной теме

Особенности реализации

Стили на CSS-переменных, светлая и тёмная темы в отдельных файлах. Переключатель пишет выбор в localStorage, режим Авто смотрит на prefers-color-scheme. Сетка на Grid и Flex, заголовки через clamp, картинки с lazy-загрузкой.

Результат

Адаптивный лонгрид с тремя режимами оформления и узнаваемым неоновым героем «no focus».