Redesign

[jarvis394]

Сюда буду скидывать прогресс редизайна.

[jarvis394]

Скринкаст нового приложения:

https://photos.app.goo.gl/b3ahZWnQ5YpqECxD6

[jarvis394]

Теперь редизайн хостится онлайн здесь.
habra.vercel.app

Можно посмотреть, потыкать, поизучать. Предупрждаю, это ещё далеко не финальный вариант! Если у вас лагает сайт, это из-за того, что я не оптимизировал компоненты и также из-за того, что сайт запущен в development режиме.

[jarvis394]

Сайт переехал на новый хост: habra.vercel.app

[jarvis394]

Не очень мне нравится текущая домашняя страница, т.к. её очень сложно оптимизировать под десктоп :(
Вот и переделал.

панель снизу старая, если что :p

[LencoDigitexer]

Может, сделать строку заголовка белой в белой, а темную в темной?

<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black">

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color

[jarvis394]

Может, сделать строку заголовка белой в белой, а темную в темной?

Не совсем понял, что к чему 😟
Может, картинкой объясните?

[jarvis394]

Оформление окна вроде как нельзя менять (я по крайней мере в спецификации не видел). Windows скма похоже находит ключевые цвета и красит окно.

[LencoDigitexer]

Можно попробовать на jquery сделать(знаю, что не используешь его, но на StackOverFLow вроде было решение https://stackoverflow.com/questions/48330535/dynamically-add-meta-description-based-on-route-in-angular)

$("meta[name='theme-color']").attr("content", "#000");
$("meta[name='msapplication-navbutton-color']").attr("content", "#000");
$("meta[name='viewport']").attr("content", "ya-title=#000,ya-dock=fade");

Либо на чистом JS -
https://developer.mozilla.org/ru/docs/Web/API/Element/setAttribute

P.S. Только что внедрил эту фичу на свой сайт, поэтому вспомнил про хабру

[LencoDigitexer]

Вариант, если используются cookie

    <!--theme chrome for browser-->
    <meta name="theme-color" content="#FFFFFF" />
    <meta name="msapplication-navbutton-color" content="#FFFFFF" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-transcluent" />
    <meta name="viewport" content="ya-title=#FFFFFF,ya-dock=fade" />
    <script>
        function getCookie(name) { // функция, которая берет значение куки по имени
            let matches = document.cookie.match(new RegExp(
                "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
            ));
            return matches ? decodeURIComponent(matches[1]) : undefined;
        }
        var theme = getCookie("dark") //берём куки вида dark=on (темная тема), или dark=off (светлая тема)
        if(theme == "on"){ // если тёмная тема, то меняем значение
            document.getElementsByName("theme-color")[0].setAttribute("content", "#101924");
            document.getElementsByName("msapplication-navbutton-color")[0].setAttribute("content", "#101924");
            document.getElementsByName("viewport")[0].setAttribute("content", "ya-title=#101924,ya-dock=fade");
        } // иначе значение будет неизменным, которое прописано в meta
 

[jarvis394]

https://www.figma.com/file/YxGtGOEkmWyJA32OjhG5KG/geekr

[LencoDigitexer]

Отличный дизайн. В тренде, прям как Яндекс, например

[jarvis394]

пока что надо подумать, как это оптимизировать под десктоп 🤔