Перед тем как писать медиа-выражения, обновила схему в Excalidraw — отметила, что именно меняется по сравнению с десктоп-версией: карточки образования и проектов выстраиваются в одну колонку, ссылки на контакты — тоже вертикально, а полное описание проекта, которое на десктопе показывается только в модалке, на мобильном решила показывать сразу под скриншотом . Чтобы не разбросать магические числа по всему CSS, записала breakpoint в файл css переменных.

variables.css /* Договорённость о брейкпоинте — везде пишем @media (max-width: 768px) */ --breakpoint-mobile: 768px;

Сами изменения по большей части свелись к перестройке гридов в одну колонку:

@media (max-width: 768px) { .education__grid, .projects__grid { grid-template-columns: 1fr; } } Но с карточками проектов пришлось повозиться больше: сделала описание видимым сразу (display: block), убрала декоративные псевдоэлементы у тамбнейла, и — важный момент — сбросила hover-анимацию translateY на карточках: на мобильном нет наведения как такового, поэтому карточки теперь статичны:

И по мелочам: перевела шрифты на clamp(), чтобы они плавно масштабировались, и сделала аватарку резиновой.

В понедельник расскажу про сборку, деплой и поделюсь ссылкой на сайт.

Хорошей всем пятницы и выходных!

#pet_project #frontend #CSS #adaptive