> Терминал, который не мешает читать

Чёрный фон, красный акцент, моноширинный шрифт, матрица и терминал. Это атмосфера. Но если из-за неё нельзя прочитать статью — атмосфера проиграла.

Задача: сайт как терминал, а не сайт про терминал

Мне хотелось, чтобы InIProject выглядел как место, где делают код и игры. Не «корпоративный портал», не «лендинг», а рабочая среда:

• чёрный #0A0A0A;
• красный #E63946;
• JetBrains Mono для кода и интерфейса;
• Inter для длинного текста;
• матрица, глитч, курсор, сканлайны — но дозированно.

Ключевое слово — дозированно. Эффект на первом экране — это атмосфера. Эффект в статье — это помеха.

Дизайн-система без дизайн-системы

У меня нет Figma-библиотеки и дизайнера. Есть CSS-переменные и набор компонентов.

База:

:root {
  --bg: #0A0A0A;
  --accent: #E63946;
  --accent-rgb: 230, 57, 70;
  --text: #E8E8E8;
  --muted: #8A8A8A;
}

Темы меняют акцент:

• красная (база);
• синяя;
• зелёная;
• фиолетовая;
• янтарная;
• монохромная.

Тема — это не отдельный CSS-файл, а набор значений в [data-theme=...]. Переключатель ставит атрибут на <html>, всё остальное подхватывает.

Грабля с --accent-rgb

Однажды на красной теме отвалились все обводки и свечения. Потому что --accent-rgb был объявлен только в темах, а в :root его не было. Все rgba(var(--accent-rgb), 0.2) стали невалидными.

Лечение: --accent-rgb обязан быть в :root, даже если он совпадает с базовым акцентом.

Урок: если используешь CSS-переменную в rgba(), проверь её на самой базовой теме, а не только на альтернативных.

Контраст и читаемость

Тёмная тема — это не «просто инвертировать цвета». На чёрном фоне красный текст может быть красивым, но нечитаемым. Особенно мелкий.

Что я стараюсь соблюдать:

• основной текст — не чисто белый, а мягкий светлый (#E8E8E8);
• вторичный — серый, но не на грани;
• акцент — для ссылок и кнопок, не для длинных абзацев;
• код — на фоне чуть светлее фона, с достаточным контрастом;
• фокус — видимый, не только цветом.

Проверяю контраст вручную и по инструментам. Идеала WCAG AAA нет, но AA для основного текста — ориентир.

Урок: атмосфера не отменяет контраст. Если текст надо щурить — это не стиль, это баг.

Анимации и prefers-reduced-motion

Матрица, глитч, курсор, частицы — всё это классно. Но не всем.

Есть prefers-reduced-motion. Если пользователь просит меньше движения, эффекты должны отключаться или упрощаться. Это не «для галочки»: у некоторых людей анимация вызывает реальный дискомфорт.

То же с музыкой: плеер по умолчанию выключен, тумблер в админке. Никто не должен получить звук при загрузке страницы.

Урок: эффект, который нельзя отключить, — это не эффект, а навязчивость.

Типографика: моноширинный не для всего

JetBrains Mono — красивый. Но длинный текст моноширинным читать тяжело. Поэтому:

• Inter — статьи, описания, абзацы;
• JetBrains Mono — код, метки, навигация, терминальные блоки, ASCII;
• заголовки — по настроению, но с ограничением длины;
• межстрочный интервал в статьях — больше, чем в интерфейсе;
• ширина колонки — около 70–80 символов.

В статьях есть .md-body: отдельные стили для h2, h3, списков, цитат, таблиц, кода. Это не «стили браузера по умолчанию».

Урок: шрифт — инструмент. Моноширинный подчёркивает код, но не заменяет читательский шрифт.

Компоненты и версии

Шапка и футер — отдельные HTML-фрагменты в components/. Они вставляются JS на каждой странице. Это удобно: одно место для правки. Но добавляет кэш-грабли: нужно бампать версию компонента и версию загрузчика.

CSS разбит по разделам: main.css, header.css, footer.css, article.css, project.css, visitors.css. Это не идеальная модульность, но проще, чем один файл на 3000 строк.

Урок: компонент без версии — это компонент, который пользователь может не увидеть.

Терминал, который не мешает

Терминальная эстетика — это:

• > перед цитатой;
• // перед заголовком;
• ASCII-таблицы в README;
• моноширинные блоки;
• курсор и подсветка;
• «консоль» на главной.

Но в статье это не должно превращаться в «текст внутри текста». Читатель пришёл за смыслом, а не за имитацией консоли.

Поэтому:

• терминальные блоки — для демо и кода;
• статья — обычный Markdown;
• README на странице проекта нормализуется: заголовки, списки, таблицы, код;
• ASCII-таблицы превращаются в читаемые блоки, а не в кашу.

Урок: терминал — это метафора, а не формат всех текстов.

Мобильная версия

320px — нижняя граница. На таком экране:

• меню сворачивается;
• таблицы скроллятся;
• код переносится или скроллится;
• карточки идут в одну колонку;
• эффекты упрощаются.

Проверяю не только в эмуляторе, но и на реальном телефоне. Эмулятор не показывает, как палец закрывает половину экрана.

Урок: адаптивность — это не «media query на 768px». Это проверка на маленьком экране с реальным контентом.

Доступность

Я не делаю вид, что сайт полностью соответствует WCAG. Но базовые вещи есть:

• семантические заголовки;
• alt у картинок;
• фокус с клавиатуры;
• контраст;
• aria-label у иконочных кнопок;
• отключаемые эффекты;
• нормальный порядок табов.

Это не «для проверки». Это для людей, которые читают сайт не так, как я.

Урок: доступность — это не отдельная фича. Это качество интерфейса.

Вместо вывода

Стиль — это инструмент, а не клетка. Атмосфера должна встречать на входе и не мешать дальше.

Мне нравится, что сайт не выглядит как шаблон. Но если читатель не может прочитать статью или найти кнопку — красивая матрица уже не помогает.

Лучший компромисс: эффекты на первом экране, спокойный текст в контенте, возможность отключить лишнее. Тогда и атмосфера есть, и пользоваться можно.

🐺

SkilinPurучастник InIProject