Ещё несколько шагов к сайту в цветах летнего дня
Что ж, сегодня я сделал ещё несколько шагов в сторону мечты о личном сайте в цветах летнего дня: поменял цветовую гамму на главной странице на предложенную Perplexity, добавил значки для разделов и убрал форму «Задать вопрос». Теперь сижу и привыкаю к тому, насколько иначе стал восприниматься сайт.
Путь к этим изменениям был весьма непрост. Сначала я никак не мог определиться с цветом шапки: с одной стороны, она должна контрастировать с основной частью сайта, с другой — если использовать там слишком тёмно-синий цвет, то он будет ассоциироваться, скорее, с ночью. Кроме того, вечером, когда на компьютере включается режим смещения баланса белого для улучшения сна (так называемый red shift), цвет шапки воспринимается совсем иначе, чем днём (что не удивительно, так как именно синий цвет больше всего подвергается коррекции). Сначала я это не учитывал, и встав утром, недоумевал, почему ночью выбрал такой цвет. Потом вспомнил про цветокоррекцию, и стал подбирать уже с её учётом. Точнее, подбирал я не оттенок, а просто добавлял/убавлял прозрачность от того исходного цвета, который предложил Perplexity. В итоге остановился на показателе в 90%.
Потом на ровном месте вылезла вторая проблема: значки. Изначально я задумал, что они должны быть монохромными и по цвету совпадающими с цветом названия раздела. Но оказалось, что большинство подходящих значков — цветные, да ещё не всегда хорошо стыкуются с фоном (больше всего было проблем с жёлтой лампочкой на зелёном фоне). В какой-то момент казалось, что решение нашлось — CSS-свойство font-variant-emoji. Но оказалось, что оно не работает в Firefox, да и вообще появилось только в 2024 году (по моим антиускорительским меркам — слишком новое).
Тут я начал метаться: то пытался всё-таки найти подходящие монохромные значки, то как-то привести их к желаемому виду с помощью CSS-фильтров, то был готов сдаться и вместо Unicode использовать символы из Font Awesome (от которого на самом деле постепенно хочу избавляться в целях облегчения страницы). Но и Font Awesome у меня достаточно старой версии, и там тоже некоторых значков не хватало. В какой-то момент уже согласился было на «костыльное» смешанное решение: часть значков из Unicode (самолёт, инь-ян и ещё что-то), остальные — из FA. Но тут вспомнил, как Google AI при поиске упоминал что-то о том, что можно добавить специальный Unicode-код (кому интересно, он равен U+FE0E), чтобы сделать принудительное монохромное отображение. Причём я пытался это сделать в самом начале, но неправильно заэкранировал код (по привычке написал \uFE0E вместо просто \FE0E), поэтому не сработало.
В итоге просто забил в диалог с ИИ «преврати эти символы в монохромные» и отправил нужные значки. Он справился! После того, как я скопировал то, что он вернул, в CSS, значки стали монохромными и в Chrome, и в Firefox. Впрочем, нужно будет ещё под Windows проверить…
UPD. Проверил с помощью онлайн-сервиса под Windows и Mac — относительно приемлемо, только значок с компьютерами отображается некорректно.