# Новое оформление: антиква, сноски на полях и тёмная тема Сегодня сайт сменил оформление. Началось с QR-кода в подвале, который я увидел на マリウス.com[^marius], а закончилось новой типографикой, сносками на полях, светлыми шапкой и подвалом и тёмной темой. Образцом для текста стала статья Давида Альвареса Росы[^alvarez]. От первого коммита до последнего прошло чуть больше двух часов: 17 коммитов в шести PR[^prs]. Делал вместе с Claude Code. ![Начало статьи до изменений](https://static.juev.org/2026/10/redesign-top-before.png) ![Начало статьи после изменений](https://static.juev.org/2026/10/redesign-top-after.png) ## Текст Основной текст теперь набран антиквой Alegreya[^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, сноски стоят справа, напротив ссылки на них. Оглавление переехало в левое поле. ![Поля до изменений: сноски внизу, оглавление справа](https://static.juev.org/2026/10/redesign-margins-before.png) ![Поля после: оглавление слева, сноски справа](https://static.juev.org/2026/10/redesign-margins-after.png) Раньше все сноски собирались списком в конце статьи. ![Список сносок в конце статьи](https://static.juev.org/2026/10/redesign-notes-before.png) Hugo выводит сноски только списком внизу, хука для их рендера нет. Поэтому их переносит небольшой скрипт: копирует каждую сноску к её первой ссылке, а CSS выносит копию в поле, как в Tufte CSS[^tufte]. Если ссылка стоит в таблице, заметка встаёт перед таблицей. Список внизу скрывается, только когда все сноски нашли место. На узком экране и без JavaScript всё остаётся как было. Скрипт я прогнал по всем 29 постам со сносками. ## Шапка и подвал Тёмные полосы сверху и снизу ушли. Шапка и подвал стоят на фоне страницы и отделены от текста тонкой линией, вместо иконки дома — ссылка «главная». В подвале появился QR-код со ссылкой на страницу. Hugo рисует его при сборке функцией `images.QR`[^qr], на сайт это около тысячи картинок по килобайту. Маленький QR открывается крупно поверх страницы. Это popover[^popover], JavaScript для него не нужен. Ссылки на Markdown-версию страницы и на её исходник стоят под QR. ![Подвал до изменений](https://static.juev.org/2026/10/redesign-bottom-before.png) ![Подвал после](https://static.juev.org/2026/10/redesign-bottom-after.png) ![Крупный QR поверх страницы](https://static.juev.org/2026/10/redesign-qr.png) На скриншоте «до» видно ещё одну старую проблему: длинное название предыдущей статьи налезало на ссылку на следующую. Теперь оно обрезается многоточием, а полное видно в подсказке. Страница с рекомендациями 2014 года ушла, вместо неё появилась [now-страница](/now/)[^now]. Это список того, чем я занимаюсь сейчас. Дата обновления берётся из последнего коммита в файл страницы. ![Страница «Сейчас»](https://static.juev.org/2026/10/redesign-now.png) ## Тёмная тема Все цвета стали переменными CSS, их 14. Тёмный набор включается по системной настройке, кнопка в шапке переключает тему и запоминает выбор. Сохранённую тему маленький скрипт в `` ставит до отрисовки, так что светлая не мигает. Код в тёмной теме подсвечивается палитрой monokai, диаграммы Mermaid тоже рисуются тёмными. ![Тёмная тема](https://static.juev.org/2026/10/redesign-dark-top.png) ![Код в тёмной теме](https://static.juev.org/2026/10/redesign-dark-code.png) ## Телефон На узком экране сносок на полях нет, остальное то же. ![Телефон до изменений](https://static.juev.org/2026/10/redesign-mobile-before.png) ![Телефон после](https://static.juev.org/2026/10/redesign-mobile-after.png) Проверял я в Chromium и Firefox. Если что-то выглядит не так в вашем браузере, напишите. [^marius]: [マリウス.com](https://xn--gckvb8fzb.com/now/): QR-код «Share this page» в подвале и now-страница. [^alvarez]: [Self-Hosting on the Dark Web](https://david.alvarezrosa.com/posts/self-hosting-on-the-dark-web/), Давид Альварес Роса. [^prs]: PR [#23](https://github.com/juev/juev.org/pull/23)–[#28](https://github.com/juev/juev.org/pull/28) в juev/juev.org. [^alegreya]: [Alegreya](https://github.com/huertatipografica/Alegreya), Huerta Tipográfica, лицензия SIL Open Font License. [^tufte]: [Tufte CSS](https://edwardtufte.github.io/tufte-css/), раздел о sidenotes. [^qr]: [images.QR](https://gohugo.io/functions/images/qr/) в документации Hugo. [^popover]: [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) на MDN. [^now]: [nownownow.com/about](https://nownownow.com/about): что такое now-страница.