Semantic.Moscow

https://habr.com/ru/post/467049/

font-size-adjust наверное?

но это такое себе, странное.

ну нет, точно нет.

не очень понимаю суть вопроса.

если в момент формирования документа размер картинки передаётся в тег,
то и в юрл тега должен передаваться какой-то параметр (такой же)

т.е.:

$size = '200';
$name = 'image_1223';
$alt = 'описание картинки';
echo '<img width="'.$size.'" src="/images.php?'.$name.'&'.$size.'" alt="'.$alt.'"/>

ну а в images.php уже принимаете значения из $_GET и в ответ отдаёте нужный файл

ну а про "https://domain.com/img-id/<ширина>" это уже софистика и имеет отношение только к .htaccess

добавлю в контексте PHP: можно пропихнуть в ответ произвольный заголовок,
из которого в JS так же получить некоторые данные,
и самое вкусное: можно на PHP непосредственно в сам ответ начать сессию и пропихнуть кукис, заголовки и данные, в том числе блоб (звук или видео к примеру)

это какой-то подкаталог относительно корня?

тогда, вместо fetch("mail.php", {
писать fetch("./mail.php", {

или, где и в какой момент у вас 404?
может дело в

<meta http-equiv='refresh' content='10; url=http://thecode.local/'>

этот адрес в браузере доступен?

можно просто в логи сервера заглянуть и понять кто куда ломится перед ответом 404

добавить :after который будет расположен под углом?

если данные необходимо накапливать, а потом отправить всё скопом,
то можно использовать локальное хранилище.
или сессию, куда записывать получаемые по одному ответы из формы.

а сайт будет через свой VPN работать с API и данными?

xhr через таймауты.

через xhr можно принимать почти всё.
ставить кукисы, принимать произвольные заголовки, принимать текст или json, блобы (например музыку в проигрыватель или видео)

JS как раз по минимуму - только отправить запрос,
если получил маркер "что-то новое", то обновить блок (заранее заданный или по имени из полученных данных)

всё это на нативном JS, несколько строк и без библиотек.

можно на чистом HTML обойтись ;)
курить маны по details + summary

вероятно через caseBtn.dataset.data-case

граница, в том смысле, что margin: [нцать]px;?
или отступ не указан вовсе,
или где-то ниже этот отступ определяется ещё раз и равен нулю.

про transform: translateY(-50%); вообще не понятно - это к чему и зачем?

в моём мобильном хроме ссылки в меню работают.

2. добавить к ссылкам по событию onclick="func()" выполнение функции, которая будет делать меню display:none

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

градиент по определению имеет направление,
т.е. координаты начала и окончания действия.

а следовательно достаточно просто изменить это направление:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="50%" height="50%" viewBox="0 0 1 1">
 <defs>
  <linearGradient id="l1" x1="50%" y1="0%" x2="50%" y2="100%">
	<stop offset="0%"  stop-color="green"/>
	<stop offset="100%" stop-color="red"/>
  </linearGradient>

  <linearGradient id="l2" xlink:href="#l1"
  x1="50%" y1="100%" x2="50%" y2="0%"/>
 </defs>
 <rect x="0" y="0" width="0.5" height="0.5" fill="url(#l1)"/>
 <rect x="50%" y="50%" width="0.5" height="0.5" fill="url(#l2)"/>
</svg>

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