Почему svg с серой полосой по середине?

Сергей delphinpro, конечно, нужно добавлять и хоть из jpg.

Как сделать "прилегание" элементов к друг другу?

Dmitry,

Не знаю, актуален ли ещё вопрос

Вам виднее, ведь это ваш вопрос.

у меня мистика

Нет никакой мистики. Все картинки работают одинаково.
Все позиционируются относительно.fixed-overlay-modal.
По высоте
top у них задан в px.
top родителя тоже.
Поэтому верхний мальчик всегда прибит к верху .fixed-overlay-modal, а остальные съезжают при изменении высоты.
По ширине
left у всех картинок задан в vw.
Ширина родителя при этом равна вьюпорту.
При изменении размеров окна все картинки двигаются. И верхний мальчик тоже.

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

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

Вывод:
Если нужно, чтобы что-то позиционировалось относительно блока с классом .modal, то так и делайте, а не от .fixed-overlay-modal. Иначе вычисляйте значения через calc и/или используйте clamp, min, max.

Альтернатива (пока немножко из будущего) - position-anchor — позиционирование от якоря.
https://sitist.ru/position-anchor.html

P.s.
1. Эти ваши "мальчики" это не контентные изображения. Если по какой-то причине не получается сделать их псевдоэлементами, то нужно убрать у них альты и скрыть от скринридеров aria-hidden="true".
2. Имеет смысл пересмотреть ваш код и перестать позиционировать блоки с помощью text-align.
Для этого есть банальный margin-inline: auto и флексы с гридами.

Всё, хватит, а то там целый разбор получится.

Почему svg с серой полосой по середине?

Adamos, если дизайнер использует только иконки из шрифта, то почему бы и нет.

чем каждый раз возня со спрайтами

Какая ещё возня?
Даже если руками вставлять, то это copy as svg в фигме и ctrl + v в спрайте и дописать id. Не говоря уж про автоматизации.

Почему svg с серой полосой по середине?

Adamos,
1. Мусор в разметке при использовании большинством пользователей.
2. Тянется весь шрифт, а используют обычно десяток иконок.
Либо нужно чистить от лишнего.
3. Сложности с добавлением других иконок.
2 и 3 => проще собрать спрайт.
4. Ведет себя как шрифт, line-height и т.д.
5. Некоторое время назад читала про доступность контента псевдоэлементов для скринридеров.

Т.е. шрифт - это целая коллекция svg иконок, плюс к ним файл стилей + к ним мусор в разметке.

Вместо просто набора из только нужных иконок, которые можно использовать везде, хоть в стилях, хоть в разметке. Либо этот же набор в кастомках, если не нужны use или img.

Да, когда были проблемы с использованием svg, иконочный шрифт выглядел соблазнительным и удобным. Сама использовала и радовалась. Но теперь это превратилось в архаизм, про который рассказываю студентам лишь для того, чтобы не удивились и понимали, что происходит, если попадутся такие сайты с таким способом вставки иконок в поддержку.

Почему svg с серой полосой по середине?

FavnAristotel, сохранять эту иконку вот в таком виде вообще не имеет смысла, она всё равно привязана к шрифту.
Либо возьмите шрифт (хуже) либо скачайте иконку в правильном svg, где она вектор (лучше).
Сейчас нет смысла использовать иконочные шрифты типа fontawesome. Сейчас спокойно можно использовать маски, инлайнить в кастомные свойства или спрайты (из svg, не из symbol!).

Почему svg с серой полосой по середине?

FavnAristotel, где результат?
Либо наоборот, исходник.

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

Умение верстать откуда угодно это, конечно, хорошо, но
1. Фигма всё таки актуальнее.
2. Сами макеты в фотошопе скорее всего устаревшие, а навыки и приемы имеет смысл прокачивать актуальные. По крайней мере в первую очередь.

Как найти и удалить дубликаты файлов в двух папках через TotalCommander?

Вася Пупкин,

когда нужно было найти недостающие файлы при сравнении каталогов

Инвертировать он не может?

Как найти и удалить дубликаты файлов в двух папках через TotalCommander?

Есть какая-то причина, по которой эту задачу нужно решать непременно Тотал командером?
Полно же всяких приложений, которые это делают. И они не сложно гуглятся.

если бы я умел писать скрипты

ИИ это вполне по силам.

Только бэкапы не забудьте, чтобы не было мучительно больно.

Как сделать swiper слайдер непрерывно движущимся?

Хорошо бы сначала узнать откуда там вообще рывки.
Просто потому что вы забыли убрать задержку между анимациями или используете функцию отличную от линейной или почему-то ещё.

Как сделать вращение текста вокруг svg?

ssawyer,

Вот сейчас вроде по центру, только не понятно теперь как распределить слова по окружности

Посчитать.
Например, в образце выше всё посчитано.

Как прижать элемент div class bl вниз Boostrap 5?

Сильно

Как сделать вращение текста вокруг svg?

ssawyer,

может, ещё упростим, чтобы совсем понятно стало

Попасть-то вы попали буквами куда надо. Но это же не центр.

Может вам поможет https://codepen.io/michellebarker/pen/oNXyJxv
https://css-irl.info/positioning-text-along-a-path...

Как сделать вращение текста вокруг svg?

Так, думаю, будет понятнее, что там с центром

Форматтеры SCSS разбивают короткие строки. Как вылечить?

Как вылечить?

Я бы рекомендовала не лечить.

1. Лучше подумайте о том, что так гораздо удобнее дописывать новые правила или вложенные селекторы. И не придется ручками ещё и переносы скобок исправлять.
2. В первом варианте больше шанс потерять скобки или сотворить двойную.
И соответственно, во втором варианте сразу видно, что есть обе скобки.
3. При второй записи все свойства начинаются на одном уровне и большинству так легче читать и воспринимать.

В программировании вообще приветствуется единообразие. Именно так и появились кодгайды и форматтеры для них.
А ваш подход это единообразие нарушает.

Как прижать элемент div class bl вниз Boostrap 5?

У родителя должен быть флекс колонками.
У bl margin-top auto.

Альтернатива - flex-grow 1 для параграфа.

Есть ли какие-то общепринятые инварианты для размещения страниц по интуитивной составляющей?

Верстальщику удобно, когда рядом расположены все версии вьюпортов одной страницы/блока. А не в разных углах Фигмы.
Клиенту или самому дизайнеру при разработке, скорее удобен другой вариант, похожий ваш или типа того.
Вот уже появились два варианта близких к "хорошо и правильно".

Какие принципы нужно соблюдать при разработке фреймворков по типу Bootstrap/Tabler, UIKit и прочих?

Все ИИ обосновывают и всё звучит логично, причём разные по сути решения, но хочется услышать мнение от живых людей

А по-вашему, ИИ на основе чего вам всё это насоветовал?

Спрашивал у разных ИИ — советы у разных моделей иногда противоположные:

Да, люди ответят вам тоже самое.
Только в вашем перечне ещё перепутались исходники и конечный код - это раз.
Сейчас появился нативный нестинг в CSS - это два.

mobile-first vs desktop-first

Ну логично, целевые аудитории разные, задачи разные. Откуда возьмется один ответ "делай только так"?
В большинстве случаев сейчас будет mibile-first.

чтобы потом не пришлось ничего ломать и переделывать в будущем?

Вроде называете себя разработчиком, а мечтаете о какой-то утопии.

+Базово только 2 брейкпоинта, до 768 и после.

Вообще страшно, но возможно, под ваши проекты подходит. Мы их не видим.

Всё оформление в отдельный файл аля theme.css потом переопределяя другим файлом по необходимости, в т.ч это касается и темных тем.

Не понятно зачем в отдельный файл. А при наличии кастомок, так совсем.
При разработке чаще всего удобно, когда стили одного блока в одном месте и не надо скакать по файлам (речь про файлы исходников, а не в билде).

модульность

В целом логично.

Есть интересные ресурсы с HTML-сниппетами?

NeKt0, верно.
И кастомные свойства тое помогают уменьшить вложенность.

Есть интересные ресурсы с HTML-сниппетами?

Natalia Baženova, да, в чужих проектах или при использовании сторонних плагинов, такое может быть, если кто-то изначально её повысил просто так и приходится перебивать.

Есть интересные ресурсы с HTML-сниппетами?

NeKt0, да, хорошо бы обходится вообще без вложенности. Если нужно, то один уровень, максимум два.

Тут body вообще идиотизм, потому что нет тегов не в body и не имеет смысла повышать специфичность. С wrapper аналогично.
details не в article тоже нет, нет смысла уточнять.