В «Советах» и на сайте бюро используется один и тот же текстовый движок. Можно, например, взять исходный код этого совета и вставить в любую статичную страницу. При этом ничего не сломается. Сам исходный код пишется с использованием шаблонизатора Паг.

Одно из самых важных требований к движку — любой сотрудник бюро должен иметь возможность собрать или отредактировать страницу практически любой сложности сам, не обращаясь при этом за помощью к программистам.

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

Маргиналии полностью автоматизированы. Автору нужно просто поставить модуль +sidenote перед абзацем, справа от которого должна появиться маргиналия. Внутри +sidenote может быть всё что угодно.

Препроцессор высчитает отступы для position: absolute, чтобы модуль встал в нужное место, и скомпилирует весь код страницы из Пага в ХТМЛ. Затем постпроцессор ХТМЛ скопирует код маргиналии и поставит его после абзаца, чтобы показывать его в узком окне. Таким образом, в широком окне маргиналия покажется справа от абзаца, в узком — после.

Кусок исходного кода с маргиналией выше:

Необязательно делать именно так. На сайте бюро использован подход, при котором вся вёрстка для всех размеров окна сразу есть в коде. Но есть и другой подход — отдавать браузеру вёрстку, заточенную под конкретный размер экрана, устройство, плотность точек и так далее. Выбирайте тот способ, который лучше подходит в конкретном случае.