Семантическая вёрстка на CSS Grid
Рецепты Пререндеринг Рецепты [PersistentState]
Каркас страницы собран из тегов
<header>, <nav>,
<main>, <aside> и
<footer> внутри одного Grid-контейнера.
Переключение цветовой схемы выполняется автоматически
через light-dark() и color-scheme.
Grid-раскладка
Области заданы через grid-template-areas:
шапка и подвал занимают обе колонки, панель и контент делят
вторую строку.
Без JavaScript
Мобильное меню открывается связкой
input[type="checkbox"] + label
и селектором :has(). Работает с клавиатуры.
Доступность
Есть skip-link, ARIA-подписи у навигации, видимый фокус
и поддержка prefers-reduced-motion.