Новое оформление: антиква, сноски на полях и тёмная тема

Сегодня сайт сменил оформление. Началось с QR-кода в подвале, который я увидел на マリウス.com¹, а закончилось новой типографикой, сносками на полях, светлыми шапкой и подвалом и тёмной темой. Образцом для текста стала статья Давида Альвареса Росы². От первого коммита до последнего прошло чуть больше двух часов: 17 коммитов в шести PR³. Делал вместе с Claude Code.

Текст

Основной текст теперь набран антиквой Alegreya⁴, заголовки — капителью Alegreya SC в нижнем регистре. Раньше был Open Sans 16 px. Кегль текста 20 px при интервале 29 px, на телефоне 18 на 27. Включены переносы: lang="ru" у сайта был и раньше, браузеру оставалось только разрешить.

У Alegreya по умолчанию цифры старого стиля, разной высоты. В тексте они смотрятся хорошо, в столбцах таблиц плохо, поэтому в таблицах и в списке статей стоят выравненные.

Шрифты лежат на самом сайте: восемь файлов woff2, кириллица и латиница, около 200 КБ. Сначала я подключил их с fonts.gstatic.com, как раньше Open Sans. В браузере с блокировкой сторонних шрифтов текст показался в Georgia, а она при том же кегле заметно крупнее. Если веб-шрифты запрещены совсем, теперь текст показывается Times New Roman, подогнанным под метрики Alegreya через size-adjust. Переносы строк при этом остаются те же.

Ссылки стали тёмно-синими без подчёркивания, инлайн-код и номера сносок — тёмно-красными. Обратные кавычки вокруг кода остались.

Под заголовком теперь дата по-русски, время чтения и теги капителью. У сайта нет русской локали, поэтому месяц в родительном падеже берётся из маленького шаблона со списком месяцев.

По дороге нашёлся старый баг: после каждой ссылки в тексте стоял пробел, «juev/freshgo , список». Шаблон рендера ссылок заканчивался переводом строки, и он попадал в HTML. Так было как минимум с июля 2025 года.

Сноски на полях

На широком экране, от 1280 px, сноски стоят справа, напротив ссылки на них. Оглавление переехало в левое поле.

Раньше все сноски собирались списком в конце статьи.

Hugo выводит сноски только списком внизу, хука для их рендера нет. Поэтому их переносит небольшой скрипт: копирует каждую сноску к её первой ссылке, а CSS выносит копию в поле, как в Tufte CSS⁵. Если ссылка стоит в таблице, заметка встаёт перед таблицей. Список внизу скрывается, только когда все сноски нашли место. На узком экране и без JavaScript всё остаётся как было. Скрипт я прогнал по всем 29 постам со сносками.

Шапка и подвал

Тёмные полосы сверху и снизу ушли. Шапка и подвал стоят на фоне страницы и отделены от текста тонкой линией, вместо иконки дома — ссылка «главная».

В подвале появился QR-код со ссылкой на страницу. Hugo рисует его при сборке функцией images.QR⁶, на сайт это около тысячи картинок по килобайту. Маленький QR открывается крупно поверх страницы. Это popover⁷, JavaScript для него не нужен. Ссылки на Markdown-версию страницы и на её исходник стоят под QR.

На скриншоте «до» видно ещё одну старую проблему: длинное название предыдущей статьи налезало на ссылку на следующую. Теперь оно обрезается многоточием, а полное видно в подсказке.

Страница с рекомендациями 2014 года ушла, вместо неё появилась now-страница⁸. Это список того, чем я занимаюсь сейчас. Дата обновления берётся из последнего коммита в файл страницы.

Тёмная тема

Все цвета стали переменными CSS, их 14. Тёмный набор включается по системной настройке, кнопка в шапке переключает тему и запоминает выбор. Сохранённую тему маленький скрипт в <head> ставит до отрисовки, так что светлая не мигает. Код в тёмной теме подсвечивается палитрой monokai, диаграммы Mermaid тоже рисуются тёмными.

Телефон

На узком экране сносок на полях нет, остальное то же.

Проверял я в Chromium и Firefox. Если что-то выглядит не так в вашем браузере, напишите.