Antowa Kartowa

В css есть свойство `background`. Которое включает в себя 'background-color`, `background-image`, `background-position` и другие подмножества свойства 'background`. Все значения этих подмножеств можно указать в одну строку через запятую в качестве значения этого самого 'background`. Но каждое отдельное свойство подмножества 'background` отвечает и соответственно принимает только соответствующие ему значения. 'background-image` отвечает только за указание на фоновое изображение. А на его позиционирование влияют другие свойства подмножества 'background-position`, `background-size`, `background-repeat` и тд.

Предложу так навскидку. Может и не работать, могут нюансы полезть, но я бы начинал в таком направлении работать. У вас две колонки. Во второй колонке по очереди слоями идут блоки хлебных крошек, заголовка, блок с фото и какими-то ссылками, потом секция с основным текстом. Секция с фото и ссылками разбита на две колонки - одна для фото, другая для текста и ссылок. У секции с фото и ссылками есть свойство position: relative. Так же внутри секции с фото и ссылками должен быть блок который будет играть белый фон с желтой рамкой. У него например position: absolute, z-index: -1, top: -15px; left: 150px, right: 0px; bottom: - 125px;

https://jsfiddle.net/AntowaKartowa/Lh7bdef0/

Приходилось работать тупо с jpg. Надо ли говорить, что много неудобств. Ни размер шрифта нормально посмотреть, ни какие-то графические элементы в отдельную картинку получить без наложения других элементов страницы.

Скорее всего говорят о таких сервисах типа https://zeplin.io/ На последнем проекте дизайнер в него выкладывал как дизайны страниц так и сборки например всех возможных стилей кнопок, инпутов. Все это шариться. Идея ок. Во многом удобно. Показывает размеры, цвета. Позволяет определенные элементы скачать в виде отдельного файла. Но было нужно измерить какое-то растояние которое сервис сам не показывает. И непонятно что делать. Бывало нужно было иконку сукачать и нужно было просить дизайнера чтоб он что-то там в настройках сделал чтоб иконка стала скачиваемым элементом. Короче есть минусы, но идея ок. И это не один такой сервис. Думаю через пару лет большинство через них работать и будет.

Мне кажется если попап всегда встречает посетителей, то имеет смысл его добавить сразу в базовую верстку и его стили в базовый цсс, а джаваскрипт чтоб уже после загрузки подхватывал, делал кнопку в попапе активной, вешал обработчик и тд.

Если бы это был логин попап, то контент на фоне я б сразу не рендерил. Есть куча умников умеющих в девтулс удалить попап и смотреть контент. Если контент подгружается джаваскриптом, то загружаете в фоне сохраняете в переменную, но не рендерите пока пользователь не кликнет на кнопку в попапе.

Оно не должно мешать загрузке остальной страницы и ее скриптов.

Не очень ясно. Ну если попап часть лендинг пейджи, то как разметка и стили для попапа могут блокировать загрузку лендинг пейджи. Ну могут совсем немного увеличить время за счет того что увеличится размер разметки и стилей.

Другое дело джаваскрипт. Его загрузка и выполнение блокируют обработку и рендеринг страницы. Потому рекомендуется объявление джаваскрипта размещать или в самом низу страницы - начнет загрузку скрипта после загрузки страницы. Но кажется это не всегда гарантирует хороший результат.

Лучше добавить в теги скрипт атрибуты async или defer. Первый не блокирует рендеринг страницы, но начинает свое исполнение сразу как только загружен. Это потенциально может привести к проблемам. Например попап еще не отрендерен, а скрипт уже начал выполнение и не нашел в разметке попапа, не смог повесить обработчики событий и все нерабочий попап получится. Из-за этого же этот атрибут не гарантирует, что скрипты будут выполнятся в том порядке в котором объявлены. Опять же одни скрипты могут зависить от других и это может привести к неработающему функционалу.

Дефер же гарантирует, что исполнение скрипта начнется только после полной загрузки страницы и что скрипты будут исполнятся в порядке их объявления. Потому он самый предпочтительный.

Вообще есть бесплатный курс по оптимизации загрузки страницы от гугла. https://www.udacity.com/course/website-performance...

Кажется я в итоге не на ваш вопрос ответил.

Кнутом его кнутом ну и пряником немного.

Посмотрел. Эээ так у тебя каждый h2 в отдельном блоке значит каждый из них это первый чайлд. И других нет)

Поменяй
.brand-menu:nth-child(even) h2

Все очень просто. У тебя флекбокс ячейка остается той же высоты как ты и ожидаешь. Но рамка цветовая у тебя установлена не на флексбокс блок, а на блок который становиться абсолютным. И его размеры никак не привязаны к родительскому флексбок блоку. Достаточно просто добавить about__card min-height: 100% и все.

flex-box где-то так
я там ширину, высоту не сетал

.bigboard-container {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  flex: 0 0 100vw; //full screen width is minimum
}

.bigboard-text { //set font-size, width or max-width}

.bigboard-button {...}

Можно еще более старым традиционным методом с помощью vertical-align: middle выравнивать блок в самом центре. Можно изучить стили вот тут чтоб понять как попап выравнивается по центру. https://jsfiddle.net/AntowaKartowa/H2N5R/

Ключевые моменты это .popup__overlay:after (фоллбек для старых ие браузеров .popup__valignfix)
и .popup { display: inline-block; ... vertical-align: middle }

Надеюсь ответ понятен и релевантен.