Как сверстать подобный заголовок?

Question

[Андрей]

Desktop
Adaptive

Подскажите, как сверстать этот заголовок? На десктопе я сделал его с двух частей через p, второму p дал text-align: right и добавил разделитель через ::before. И в принципе тут проблем у меня не возникло (думаю это не лучший вариант, но сделал как смог). Вот уже когда этот заголовок нужно сделать адаптивным, то тут появляется сложность.
Я убрал у второго p text-align и просто дал им разные padding-left, чтобы добиться такого результата как на скриншоте, но этот отступ часто приходится корректировать в media, чтобы он всегда оставался примерно таким как на скриншоте. Плюс еще и разделителю тоже постоянно нужно корректировать позицию.

Извините за мое нубство, надеюсь поможете и разъясните как такое верстать более профессионально.
Вот ссылка на гитхаб с этим заголовком https://github.com/Fotoz/surface

p.s доп. вопрос: "когда адаптируешь макет, то достаточно пройтись по основным точкам 1200px,. 992px и т.д. или нужно чтобы везде все было идеально?"

Answer 1

[alvvi]

На десктопе я сделал его с двух частей через p, второму p дал text-align: right и добавил разделитель через ::before.

А чем вам h1 не угодил? Внутри можно span-ами разделить с display: block, и все будет семантично.
Вариант со второй картинки делается с помощью max-width, без паддингов. ::before нужно спозиционировать только один раз, а родителю добавить position: relative.

p.s доп. вопрос: "когда адаптируешь макет, то достаточно пройтись по основным точкам 1200px,. 992px и т.д. или нужно чтобы везде все было идеально?"

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

Comments

[Андрей]

Не понял чему нужно давать max-width?
То есть по хорошему не должно быть рандомных контрольных точек, а все должно уложится от первого брейкпоинта ко второму? Если написал медиа для max-width: 1200px, то к 992px ничего не должно поехать, чтобы не пришлось создавать еще один медиа запрос?

Спасибо за помощь!!!

[alvvi]

Андрей,

Не понял чему нужно давать max-width?

h1

То есть по хорошему не должно быть рандомных контрольных точек, а все должно уложится от первого брейкпоинта ко второму? Если написал медиа для max-width: 1200px, то к 992px ничего не должно поехать, чтобы не пришлось создавать еще один медиа запрос?

Да

Answer 2

[dom1n1k]

Не надо верстать, надо двумя растровыми картинками, переключаемыми по медиа-выражению.

Comments

[IIIu6ko]

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

[dom1n1k]

А ещё лучше не пытаться петросянить, а вникнуть в задачу и понять, что смысла в верстке (в данном конкретном случае) ровно ноль.
И что заморочиться можно, конечно, но качественный результат будет недостижим.

[IIIu6ko]

dom1n1k, Что тут недостижимого? Заголовок из двух частей и after посередине? Ну и по медиа-запросам подстраиваешь как нужно их. Не вижу ничего сложного.

[dom1n1k]

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

Но если подходить к делу всерьез, то тут нужно видеть не тупо 2 дива, а художественную задачу. Очевидно же: чтобы эта типографическая композиция хорошо работала, она должна быть тщательно выверена. Строки должны быть согласованы друг с другом, сиреневая палка должна пересекать буквы в определенных местах. Несколько пикселей смещения - и всё сразу выглядит ощутимо "дешевле". Добиться этой точности на винде, маках, андроидах и линуксах - практически невозможно. В фотошопе же можно всё подогнать и откернить идеально.

А главное, что и незачем верстать. Ну сделаем мы это html-ом. Что это даст? Семантику? Это декоративный хиро-блок, ему похрен - альта или ариа-атрибута достаточно.