Задание — сверстать сайт на свободную тему с собственным логотипом, шапкой, меню, контентом и подвалом. Тема этого сайта — устройство движка DOOM, а сама вёрстка подчинена идее «страница — это уровень игры».

Идея и макет

Главная страница — лендинг, разбитый на главы-уровни E1M1…E1M8. Каждая глава собрана из одних и тех же деталей: заголовок уровня на всю ширину, две-три плашки с текстом, картинки, интерактивная схема и выключатель в конце. Выключатель включает новый слой мини-движка, который рисует поверх страницы автокарту, BSP-дерево, свет, монстров. Поэтому макет делался сразу с оглядкой на движок. Между блоками оставлены широкие промежутки в 44–48 пикселей: на «карте» это коридоры, по которым ходит курсор-игрок.

Макет рисовался прямо в SVG — так его можно хранить вместе с сайтом и править как обычный текст. Сначала была определена сетка: 12 колонок с максимальной шириной 1240 пикселей. Плашка с основным текстом занимает 7 колонок, соседняя — 5, схемы и выключатели растянуты на все 12. Затем были выбраны цвета и шрифты, и только после этого макет превратился в HTML.

Страницы заданий устроены проще: та же шапка, тот же статус-бар, а между ними одна светлая плашка с текстом, картинками и самой работой. Меню «Работы» в шапке и цифры 1–4 в статус-баре ведут на задания, логотип и пункт «Главная» — на главную.

Физическая и логическая структура

Site_Romankov/
├── index.html          главная: энциклопедия-«карта»
├── layout.html         задание 1 (эта страница)
├── picture.html        задание 2: CSS-рисунок
├── flexbox.html        задание 3: flexbox-ролик
├── dom-test.html       задание 4: DOM-тест
├── coursework.html     курсовая (заготовка)
├── css/   style.css · article.css · engine.css · test.css · pic.css · flexbox.css
├── js/    common.js · test.js
│   ├── engine/         core, bsp, render3d, pagemap, layers, monsters, hud, wad_data
│   └── diagrams/       интерактивные схемы глав
└── images/
    ├── freedoom/       графика из Freedoom (BSD-3)
    ├── renders/        карты и кадры, отрисованные скриптами
    ├── pages/          скриншоты и макеты для страниц заданий
    └── flexbox/        картинки задания 3

Каждая страница размечена семантическими тегами: header с логотипом и навигацией nav, основная часть main, подвал footer. Главы на главной — элементы section со своими заголовками header, текстовые плашки — article и aside, картинки с подписями — figure и figcaption. Табличная вёрстка не используется нигде: шапка и статус-бар собраны на flexbox, главы — на CSS Grid, а картинки обтекаются текстом через float.

У вёрстки есть второй, «машинный» слой разметки. Блоки, которые должны стать частью карты, помечены атрибутом data-sector: plate — приподнятая площадка, high — высокий заголовок уровня, room — комната с потолком, solid — колонна. Мини-движок читает эти атрибуты и координаты блоков (getBoundingClientRect) и строит из них линии и секторы. Если поменять вёрстку, карта перестроится сама.

Логотип только на CSS

Логотип — зелёная стрелка игрока с автокарты DOOM в тёмном квадрате 48×48 пикселей. Его геометрия взята прямо из исходника am_map.c: стрелка там описана семью отрезками в долях радиуса R — древко, два отрезка наконечника и два двойных пёрышка оперения. Каждый отрезок — элемент i высотой 2 пикселя, повёрнутый вокруг своего левого конца через transform-origin: 0 50%. Стены автокарты в углах — это блоки с одной-двумя видимыми сторонами рамки в цветах REDS, YELLOWS и BROWNS. При наведении стрелка делает оборот, как игрок, который осматривается. Логотип выражает идею сайта: вы — это стрелка на карте.

Цвета, шрифты и адаптивность

Палитра повторяет техбазу из первого эпизода DOOM: серо-синий металл, светлые панели, оранжевый и жёлтый, как на предупреждающих полосах. Текст лежит на светлых плашках, а тёмным остаётся только окружение — так сайт выглядит как игра, но не становится мрачным и читается легко. Заголовки набраны массивным Arial Black, основной текст — системным шрифтом без засечек, код и цифры движка — моноширинным. Числа в статус-баре нарисованы настоящим шрифтом STTNUM из WAD-файла: двенадцать символов в одной картинке, а нужная цифра выбирается через background-position.

Адаптивность сделана медиа-запросами. До 980 пикселей все блоки глав растягиваются на 12 колонок из 12. До 760 пикселей уменьшаются отступы и шрифт, плавающие картинки встают на всю ширину, панель слоёв движка сворачивается. До 600 пикселей выключатель переходит в вертикальную раскладку, а статистика интермиссии сжимается. Окно вида от первого лица на телефоне уменьшается до 240 пикселей. Для тех, кто отключил анимации в системе (prefers-reduced-motion), переходы и экран «melt» не проигрываются.