Добавляет адаптив в демки DOMContentLoaded

[skorobaeus]

Описание

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

[skorobaeus]

Не могу же я ревьюить сама себя :D

[github-actions]

Превью контента из опубликовано.

[vitya-ne]

Света, привет!
Демка классная. С адаптивностью теперь всё ок.

У меня несколько предложений по UI:

добавить font-variant-numeric: tabular-nums;

Тогда строчки с временем будет смотреться ровнее:

    #domloaded-time,
    #load-time,
    #difference {
      color: #FFFFFF;
      font-size: 3rem;
      line-height: 1.1;
      font-variant-numeric: tabular-nums;
    }

добавить разделитель для большой разницы.

    function countDiff(currentTime) {
      if (!diff) {
        diff = currentTime
      } else {
        diff -= currentTime
        return Math.abs(diff).toLocaleString('ru-RU')
      }
    }

Для больших чисел по-моему красивее смотрится с разделителем тысяч:

при тестировании в 3g видно что надписи появляются слишком рано:

Я предлагаю сделать их постепенное появление:

сейчас	предлагаю

[Inventoris]

Классно, что добралась до адаптива ;-)

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

[StarHamster]

Меня не звали, а я сам пришёл 🫡

[StarHamster]

В демке скроллы есть, их бы покрасить

Suggested change

	html {
	color-scheme: dark;
	}

[StarHamster]

Скролл появляется даже на десктопе. При чём при первой загрузке всё ок, а при перезагрузке он появлется. Тут либо айфрем увеличить на 10 пикселей, либо чуть-чуть подрезать воздух кнопке

Suggested change

	margin-block-start: 35px;

Часть демки с подписями и кнопкой имеет высоту 430.56. Если кто-то знает, почему при первой загрузке браузер не обращает внимание на эти полпикселя, а потом начинает, объясните мне, пожалуйста 🥹

[StarHamster]

На экранах меньше 420 пояляется скролл. А так не появится даже на самых маленьких 💅

Suggested change

	.scrollable {
	margin-inline-start: 0;
	margin-block-start: 40px;
	height: 100px;
	}
	.tip {
	margin-top: 30px;
	}
	.scrollable {
	margin-inline-start: 0;
	margin-block-start: 30px;
	height: 100px;
	}

[StarHamster]

В демке скроллы есть, их бы покрасить

Suggested change

	html {
	color-scheme: dark;
	}

[StarHamster]

Скролл появляется даже на десктопе. При чём при первой загрузке всё ок, а при перезагрузке он появлется. Тут либо айфрем увеличить на 10 пикселей, либо чуть-чуть подрезать воздух кнопке

Suggested change

	margin-block-start: 40px;
	margin-block-start: 35px;

Часть демки с подписями и кнопкой имеет высоту 430.56. Если кто-то знает, почему при первой загрузке браузер не обращает внимание на эти полпикселя, а потом начинает, объясните мне, пожалуйста 🥹

[StarHamster]

На экранах меньше 420 пояляется скролл. А так не появится даже на самых маленьких 💅

Suggested change

	.scrollable {
	margin-inline-start: 0;
	margin-block-start: 40px;
	height: 100px;
	}
	.tip {
	margin-top: 30px;
	}
	.scrollable {
	margin-inline-start: 0;
	margin-block-start: 30px;
	height: 100px;
	}

[StarHamster]

Давай в обоих демках поменяем на логические?

Suggested change

	margin-block-start: 25px;