Вадим

поменять v-model на :value

https://developer.mozilla.org/ru/docs/Web/CSS/:target

https://qna.habr.com/q/879393#answer_1791997

низкомолекулярный макрос, Вот тут можно посмотреть реализацию на сайте (через эмуляцию или на реальном мобильном, нужно нажать на зелёную кнопку снизу):
https://svoefermerstvo.ru/catalog/root
На яндекс картах в мобильной версии так же есть такая "шторка"

Работает как по кнопке, так и свайпом.

Набросал на скорую руку css only вариант, просто потому что стало интересно.
Это не продакшен реди решение.
Используются современные свойства, которые моут плохо поддерживаться или бить по производительности. Нужно замерят.
Тут есть что оптимизировать.
Вам стоит воспринять это как возможное направления куда копать и как минимальный образец\прототип.

Использование сеток позволяет упростить расположение блоков а так же их адаптив для других размеров экрана.
Если есть сетка - легко перейти к расположению элементов, скажем, от 4 в строке к 2 в строке и на совсем маленьких 1 элемент в строк(то есть там, где на десктопе показывается 4 в строке, на мобильных всё будет в одну колонку)

Как правило, дизайн так же отталкивается о такой же сетки, как и вёрстка, либо одна подстраивается под другую.

Если в дизайне нарисован блок, который имеет дробное значение по занимаемым колонкам, например, 2.5, то тут 2 варианта:
1) Дизайнер не знает\забил на сетку
2) Это намеренное решение.

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

Наличие сетки, как правило, способствует модульности и сокращает время на вёрстку.
Но уникальный дизайн, или супер пупер дизайнерское решение, аля сайт для awwwwards скорее всего будет без сетки, но не обязательно.

Вот как один из вариантов (ios 14.6) - скрола не видно, но скролл есть


Альтернативный вариант - сделать так, чтобы скролл был у дочернего блока, высота дочернего блока больше блока обёртки, у блока обёртки - overflow:hidden.
Тогда скролл будет, но его не будет видно.
Этот вариант Вам не очень подходит, потому что скролл в ios поверх контента, но если сделать дополнительный отступ снизу у дочернего блока - то вполне.

Шаблонные строки: https://developer.mozilla.org/ru/docs/Web/JavaScri...
Или сделать вычисляемое свойство, которое будет возвращать строку.

как свойство sold попадает в аргументы colA и colB функции

По ссылке. У Вас массив объектов. Объекты передаются по ссылке. Тык. То есть на каждом вызове функции colA и colB это будут объекты из массива, на котором вызван sort.

Насколько я знаю, передать аргументы в функцию можно только с помощью вызова функции, а у меня тут просто передача

Вы вызываете нативный метод sort, у которого первым аргументом может быть функция, которая может влиять на то, как будут отсортированы элементы массива. Функция sort под капотом вызывает эту функцию(так же по ссылке), которую Вы указали в качестве аргумента метода sort и передаёт в неё аргументы.

Таким образом, метод sort берёт текущий и следующий элемент массива и вызывает указанную функцию, в данном случае, compareSold, передавая в неё эти самые элементы.

куда return возвращет colA.sold - colB.sold?

Во внутреннюю реализацию метода sort.

Ссылка по второму и третьему пункту: https://learn.javascript.ru/native-prototypes

P.s. скорее всего, если не бросите, придёте сюда за вопрос ещё ни раз. В таком случае было бы не лишним почитать правила сервиса, в частности подготовки к заданию вопроса и его оформлению.

В целом, вроде всё легально(кроме семантики :-) ).
Но зависит от того, как Вы дальше стили пропишите.
https://ru.bem.info/methodology/key-concepts/#%D0%...
https://en.bem.info/forum/4/

то есть header__btn никак не должен зависеть от right-lite.
header__right - про позиционирование внутри header, никак не должно быть связанно с right-lite

<div class="header__right right-lite"> - яркий пример классического бэм микса. То есть по факту Вам нужен блок right-lite, но для позиционирования внутри header Вы миксуете его как элемент header__right

Да, можно. Например, с помощью filter.
Вот реализация, где меняется с помощью hue-rotate.
https://jsfiddle.net/mrdecoy711/tdbL7jrc/16/

Тут не будет идеального ответа, так как всё зависит от конкретного дизайна и его идеи.

Но если так издалека начать накидывать, то конечно же:

@dragstop="(x, y) => dragged(id, x, y)"

dragged(id, x, y) {
  console.log(id, x, y);
}

Ну, в Вашем случай, как один из вариантов: задать ширину тултипу.
Например:

.tooltipster-box {
    flex: 1 1 auto;
    width: max-content; // или любое другое значение вместо max-content, которое Вам больше подходит
}

Другой вариант - поменять вёрстку внутри тултипа, чтоб не переносилось на другую строку, в случае не хватки по ширине.

подскажите пожалуйста библиотеку

https://scrollmagic.io/

Как сделать

https://github.com/janpaepke/ScrollMagic/wiki/Gett...

У Вас скорее всего в главном шаблоне, условном index.html\index.php, стоит meta тэг viewport вида:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Чтобы было так, как на указанном сайте - уберите его или сделайте значение атрибута content пустым.

Статья на эту тему: https://timeweb.com/ru/community/articles/metateg-...

.main-menu .trim-trimb1-01 li.active > a
А что это за селектор? Ко скольки элементам он применяется?
Я вот ввижу что ни к одному.
Где у вас последовательность элементов такая?

В вашем случае должно быть что то вроде того:
.menu li.active .pro2-sturman { color: red }

Можно как обратиться к тегу по чести ссылки из src?

img[src^="//cdn"] { display: none } /* src начинается с //cdn */
img[src*="//cdn"] { display: none } /* src содержит //cdn */

filter: drop-shadow(20px 14px 6px red);


Свойство относительно современное, а так же может бить по производительности(на слабых устройствах, при наличии динамики, при использовании на большом количестве элементов и тд). Других вариантов с учётом всех вводных - нет.
Либо векторный аналог картинки, либо на самой картинке.

Так?

console.log('/off\n/off\n'.replaceAll('\n', ' test\n')) 
// /off test
// /off test

p.s. ну или вариант "по старше"

console.log('/off\n/off\n'.replace(/\n/g, ' test\n'))