Арсений Матыцин

SVG → dasharray. На чистом CSS никак (можно накрутить костылей на абсолютном позиционировании, но оно сломается на первом ресайзе).

Если есть скролл, то элемент\-ы больше размера вьюпорта в ширину. Соответственно, надо искать и фиксить.

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

Кнопку и картинку в обертку. Обертке position: relative, а кнопка position: absolute и выравниваешь. Ну и да, если пикча без условий и должна быть встроена в текст, то обертке еще и display: inline-block задай.

grid-template-columns: 1fr 1fr;, у тебя три колонки, а не две, должно быть: grid-template-columns: 1fr 1fr 1fr;, а лучше grid-template-columns: repeat(3, 1fr);, потому как если твоим шаблоном управляют вложенные элементы, то ты сам уже потерял контроль. А grid-column: 1/3 вот такую запись проще заменить на grid-column: 1/span 2;. Так наглядно будет видно, сколько занимает ячеек блок.

Крч, основная проблема в том, что вложенный блок никак не может видеть того, что происходит снаружи. Это CSS. Дешево и сердито — ограничивать текст под заголовком до такого уровня, что он прибитый к низу карточки не будет иметь большой разрыв с заголовком.

Вариант inFureal работает только в том случае, если ты верстаешь проект года 12-го, где про адаптив в глубинке еще не слышали. Потому что при переносе «карточек» вдруг окажется, что заголовки будут один под одним, в отрыве от текста под ними.

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

Но еще это можно сделать на dense гридах. Правда, ИМХО, проще повозиться со скриптами, чем сводить эту радость на сетках.

Внутри родительского блока (который можно абсолютно спозиционировать). Вложенным списком с отступами.

текст, который генерируется серверным скриптом

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

<span style="font-size:<?= 200 / strlen($string) ?>"><?= $string ?>...

Формула абстрактная, тебе точную врядли кто-то даст, так как привязку надо делать к метрикам шрифтов и подбирать на глаз, но пример о расчетах на выходе вон он, выше. Язык для примера — PHP.

То, что делает приведенный код — через сложности выполняет роль обычной ссылки. Поэтому просто заверни это в ссылку и их в выпадашку. Как работает и выглядит выпадашка → гугли dropdown.

Да, можно попробовать анимировать 2 линии через сдвиг stroke-dasharray. Т.е. наложить одну на другую и изменять параметры так, чтобы в одной появлялся пропуск тогда, когда в другой другой цвет.

Выстраиваешь элементы так, как они должны быть на мобилке, а для десктопа (да и таблетки тоже) пишешь стили на position:absolute.

Все работает, а вот пути у тебя забиты неправильно.

Таблицы рассчитываются исходя из контента, поэтому им и надо задавать размеры. В данном случае на медиа-запросах. Можно фиксировать в 50%. Ну и докрутить гайки можно с помощью table-layout: fixed.

Потому что гладиолус:

.header-green-media {
        ...
        background-color: #06d6a0; // ←
    }

И как минимум три переопределения самого .header-green.

Ммм... Скорее всего тебе будет проще, если картинка будет встроена в документ (HTML) или лежать в ассетах, куда ты будешь обращаться с помощью use и доставать спрайт. Если все сделать правильно, то геморроя минимальное количество и можно спокойно встраивать сколько угодно раз и как угодно.

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

То, что это просто цикл с последовательным включением opacity в значение 1 не смущает ни разу?

Такой эффект реализуется на transition-ах CSS при появлении элемента, на CSS-анимациях или в setTimeout (к примеру) на JS с переключением свойств (да, при активных транзишнах, если не использовать JS анимации).

С точки зрения JS (табы и все такое) абсолютно по барабану, что ты там наделаешь. Реакцию на табанье можно добавить.

С точки зрения адекватности:
1. Кнопки для того, что работает, как кнопка: клик → ответная реакция.
2. Ссылки для гиперссылок: нажал → попал на другую страницу (роут).

Или сейчас это делают с помощью ссылок?

Идиоты всегда бездумно использовали то, на что левая пятка зачешется. В целом button, как элемент, много удобнее input button.

1. source — «невидимый» узел. Его вообще трогать не надо.
2. picture тоже не выступает в роли ощутимого физического объекта. Он инлайновый, как и пикча.
3. img же подчиняется напрямую родителю, как если бы picture не было.

Чтобы это понять, достаточно просто взять и собрать демонстрацию.

4. Но все меняется, если начать использовать picture, как блончый, добавив ему display:block;