Если у вас в проекте уже используется jquery, то использовать fancybox. Если нет, то найти подходящий аналог на js.
Написать самостоятельно не буду предлагать.
MashutaKlencheva, довольно странное поведение для пользователя - не иметь возможности нажать на саму стрелочку.
И в связи с этим вопрос: зачем стрелка вынесена из кнопки и зачем ей pointer-events?
olenafront097,
1. Зачем для svg класс hidden, если он в отдельном файле?
2. Чтобы фон показывался, хотя бы у чего-то должен быть размер, у символа или bg size.
Кнопки делать div'ами и подписывать в комментарии, что это кнопка - точно не нормально.
<!-- nav -->
<nav>
Не могу придумать как такой комментарий поможет здоровому человеку.
Кстати, nav это основная навигация на странице. Тегов nav может быть несколько, но он не подходит для повторения меню в футере.
Иногда да, для наглядности можно отделять блоки строкой комментария, чтобы было видно начало конец больших блоков.
Но и это по большому счету лишнее, потому что есть горячие кнопки для выделения блока целиком.
Используйте семантические теги и разумно называйте классы, так чтобы другому сразу было понятно, о чем речь. (БЭМ-подобные именования в этом смысле хороши)
olenafront097, с css не будет.
Но поверьте, даже 200 и даже руками вы бы написали за то время, что висит этот вопрос.
А если проявить смекалку и пользоваться автозаменой в столбце из имен файлов, так и вовсе несколько минут.
Spaceoddity, рехнуться можно. Там файлик, конечно минифицирован, но вы попробуйте привести его в божеский вид и посмотреть что и в каком порядке в нем написано.
Если бы media повышал специфичность, то квадратик становился бы красным, а он остается всегда зеленым, на любой ширине. https://jsfiddle.net/w7udzjmx/
@mediaникак не влияют на специфичность.
И именно поэтому их пишут в конце файла или после основных стилей.