xdevelx

Садись, будем с тобой учиться программированию.

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

Программирование начинается тогда, когда твой код престаёт работать.
Процесс выявления участка, который не работает, и что надо исправить, называется отладкой. И это и есть на самом деле программирование.
Для отладки нужно две вещи:
1. В принципе понимать, что делает твой код. причём не в целом, а каждый оператор в отдельности. Какие данные он должен получать на вход, что с ними делать, что должно быть на выходе.
2. Трассировка. Которая заключается тупо в выводе промежуточных результатов.

поэтому после кода добавляем строчку

var_dump($_SERVER['QUERY_STRING'], $addGet,$config['http_home_url'],$_SERVER['REDIRECT_SCRIPT_URL']);

и смотрим, где чего не хватает.

И только после этого идём на тостер задавать конкретный вопрос, "а почему у меня такая-то переменная пустая"

UPD:
Вышел Chrome 88 и там ввели свойство aspect-ratio.

Стилям оверлея допишите pointer-events: none; - можно будет взаимодействовать с картой.
А дизайнеру двойка, любой креатив не должен идти вразрез с юзабилити.

1. Чтобы иметь возможность ловить события именно объектов, а не квадрата картинки, используй SVG.
2. Тень рисовать можно ее же средствами.
3. Используй svg-спрайты, это позволит снизить фактор жопоболи при перестройке.
4. В чем сложность использовать медиазапросы при постройке я, если честно не понял, располагаешь элементы (острова) один под одним (тупо дивы), а на десктопе позиционируешь абсолютно. Главное не накосячить с z-index-ом.

Добрый день.
Используйте не миксин, а функцию - и будет вам счастье.

background-size: cover;
https://codepen.io/5h4dy_s/pen/yLYeGLx

можно попробовать поиграться с css mix-blend-mode

0. a11y (ну и еще сюда можно заглянуть)
Притом доступность - это не только версия для слепых (вообще это не отдельная версия должна быть, а сам сайт должен поддерживать скринридер), бывает еще ограниченность движений, в том числе временная (перелом руки, ребенок на руках).

1. Семантика
По словам одного очень крутого верстальщика, divатоз очень опасная болезнь с огромным количеством побочек...

2. Адекватная работа с клавиатуры
Про клавиатуру. Вот реально бесит, но браузер это почти единственная утилита где я тянусь за мышкой... (хотя есть еще мак ось, но там эпл умный, а юзеров считают тупым быдлом, ну и адекватный трекпад это сглаживает). У меня нет особых проблем не с мышкой не с тачпадом, но клавиатура тупо позволяет мне управлять компом быстрее, а мое время дорого.
А причиной всему простой факт - интерфейсы делают макаки, которые даже сочетаний своей IDE не знают...
Что самое интересное, выполнив предыдущие пункты, Вы уже получите вполне вменяемую работу с клавиатурой, просто и абсолютно бесплатно. Но вслед за divатозом как правило развивается хз-где-фокус, ескейп-для-трусов, не-пашут-стрелки и еще куча мелких заболеваний, приводящих к неспособности купить в инете мышку не имея этой самой мышки (попробуйте, очень интересный челендж, покупать с телефона в зачет не идет). Ну и больше всего бесит, когда на сочетания ОС или браузера сайт вешает что-то свое...

3. Интуитивно понятный интерфейс
Люди не любят, когда их заставляют думать. Мозг вообще сжигает энергии больше всего остального тела, а если его еще и заставлять активно работать... И это не просто про знакомые иконки, узнаваемое их положение. Это вообще про возможность выполнять большинство действий на автомате. Почему у модалок кнопка закрытия в правом углу? Это привычно большинству, ведь на винде окна закрываются так же. Вот только никто не мешает отследить, что мы на макоси, где вообще-то привычнее, когда крестик слева...

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

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

Зачем флекс? Это обычная таблица или таблица описание dl dd dt
https://codepen.io/Anton_Eridani/pen/QWbJvPB

Если svg - то иконка - currentColor, самому svg - boreder-radius и background-color.
Чтобы currentColor работал - svg надо подключать как svg, а не img: либо всем кодом, либо через use href.
По hover, соответственно для svg меняется color и background-color.

Если используешь img - то менять тебе придётся две img местами.

Ещё, как извращение, можно заюзать filter: invert(1) на картинке самолёта.)

MDN