Всем привет! Взялся верстать макет Pasco из последней рассылки (№60) практически закончил мобильную версию, перешел на десктоп и мой мозг взорвался от перестроений карточек. Решил спросить совета: верстается он в принципе без наполнения главного содержимого из JS или нет? Возможно я взялся за неподъемную задачу для моих навыков…
И еще один момент - размеры шрифтов на макете и в браузере не совпадают, почему… так и не понял. Фотошоп показывает, например, 16px, а в браузере 16 - слишком большой получается.
Кому интересно ссылка на гитхаб - Pasco.
P.S. Если что не так, просьба - сильно не пинать, это моё первое сообщение;)
Добавил Github Pages - Pasco.
И добавил css в исходники.
Сверстать можно. На мобильной версии конечно было проще - сверху вниз все карточки одинакового размера. На десктопной всё иначе и без дополнительный оберток не обойтись. Плюс ко всему есть блоки, которые в мобильной версии вообще отсутствуют.
Я бы хотела вам посоветовать сначала разобраться с перестройкой/отображением крупных блоков (контейнера с карточками и сайдбара), а уже потом браться за построение самой сетки с карточками.
Эмм… с перестроением крупных блоков я в общем разобрался, и даже попал в макет. Сложность у меня возникла в том, что там получается совсем разный состав карточек, то есть в идеале нужно отдавать разный html или при изменении разрешения менять классы на карточках, так как они совсем разные и даже их количество не одинаково. Например в мобильной версии часть карточек идут в 2 колонки, а на десктопе этих двух колонок нет, там просто flex-direction: row и wrap. То есть либо раздувать html, прописывая все карточки под оба разрешения и скрывать на разном разрешении разные карточки, либо… использовать динамическое наполнение из JS (подозреваю что какой-нибудь React идеально бы справился с этой задачей).
Хотя возможно мне просто надо отдохнуть и оценить задачу свежим взглядом.
