last update 2014-10-28

haPages bay

Разработки скриптописателя spmbt
установить стили HabraDarkAge в браузер
(требуется расширение Stylish)

HabraDarkAge: тёмная тема

Для стилей ZenComment настали тёмные времена


В век засилья ноутбуков, смартфонов и планшетов большое значение для аккумулятора имеет то, в каком цвете ты показываешь фон сайта. Если ты не пользуешься ЭЛТ-монитором, то яркость LED-экрана влияет на потребление энергиии. Белые бизнес-стиляги начинают жрать ресурс - и проигрывают. У ограниченных в знаниях технической подоплёки белых воротничков одни за другими начинают гаснуть экраны в темноте, в застрявшем вагоне электрички, когда истинные гики, потешаясь над их попытками включить телефон, дочитывают последнюю статью с Хабра на 20 минут дольше, спокойно дожидаясь спасателей, чем все остальные. Если, конечно, они в своё время установили тёмную тему юзерстилей...

Поэтому тёмные темы пользуются заслуженной популярностью. Их возникло за последние годы несколько, но не все они дожили до синхронизации и гармонии с текущей версией сайта. Даже конец августа этого года для стилей "New Habr: night mode" не стал моментом истины: в сентябре грянула перестройка, geektimes и прочие наслоения вечно текущего мира.

Вышло расширение стилей HabraDarkAge. Его основой стали те самые стили "New Habr: night mode" как наиболее проработанные в плане "юзабилити теней". Судя по Гитхабу, его создавали 4 автора на протяжении 3 месяцев. Прежде чем внедрять параметризуемость в ZenComment, было решено сначала доработать Night mode до актуального состояния - это пришлось бы делать в любом случае, но, не примешивая скрипты на раннем этапе, мы получим востребованную многими пользователями актуальную тёмную тему.

        

Формат сайта в стилях HabraDarkAge в большой степени повторяет формат исходного сайта. Это будет просто всем привычная копия в тёмном исполнении с небольшими попутными улучшениями. Например, в подписях - шрифты чуть побольше и строчка соблюдается ровнее. Гиктаймовский заголовок не бросается в глаза и вообще не занимает места. Высоту полей ввода можно изменять вручную. Аватары - менее заметны. Кнопки номеров страниц - крупнее. Но есть и крупные дополнения, заимствованные из ZenComment.

Кнопки номеров страниц на боковой панели;
● убирание рекламы;
● подходящее форматирование "Похожих статей";
● визуальный разделитель между статьёй и обсуждением;
● форматирование кнопок и ссылок "Пожаловаться";
● (планируется) адаптивное постоянное меню на широких экранах;

Далее, ожидается, что в эти стили проберётся 3х7гъпъ, освоит свою автоматику мелких улучшений, которые недоступны стилям. Настройки скрипта научатся управлять стилями и включать их по требованиям. А в стили будет проникать всё больше функций ZenComment. Наконец, стили будут управляться настройками скрипта как его функции.

По сравнению с исходным кодом сделаны такие функции и работы:
● у лого убрана длинная тень, добавлена подсветка по наведению
● верхняя панель Geektimes - почти незаметная, с названиями по наведению, по вертикали уменьшена до 1px
● доработки - расцветка текстов меню в стиле темы и некоторых недоделанных ранее элементов по сайту
● тёмный фон во всех селектах
● тёмный блок "Похожих статей" при расположении под статьёй
● заметный (коричневый) разделитель статьи и комментариев (контрастный цвет и размер)
● убраны рекламные ссылки из навигаций меню и правой панели
● аватары - ещё более бледные; при наведении с задержкой - набирают цвет и растут по размеру вдвое
● кнопки над полем ввода - подстроены на новый размер кнопок на сайте
● Те же тёмные блоки в футере для "Фрилансим" и "Бр-сторадж", оформление их заголовков
● на странице подготовки статьи: раскраска кнопок, фонов и выделителей спадающих списков
● .comments_list .searched-item на стр. поиска
● на странице поиска и своих комментариев: возможность нормальной работы с подсказками из HabraKarmaView
● скрытие кнопок "пожаловаться, как в ZenComment
● попиксельное исправление адаптированных иконок (все, которые переведены в base64)
● кнопки номеров страниц - на виду слева, но частично покрываются верхними кнопками на низких экранах
● снята проблема низких экранов от высоты 290 пикс. (ниже - всё равно будут недоступны подменю): кнопки меню сжимаются, номера страниц приспускаются к нижней границе окна.

Что делает в это время ZenComment?

Модная левая панель стилям ZenComment авторитетом не была. Напротив, философией этих стилей был и оставался принцип "читать, а не скроллить", а мощные квадратные кнопки уменьшали площадь чтения, а значит, увеличивали протяжённость скроллбара. Инь и Янь между воздушными пустотами сайта и длиной тоннеля до конца статьи, преодолеваемого скроллом - есть тот же баланс, какой сейчас имеем между белизной экрана и сроком действия аккумуляторов. ZenComment принял и эту реальность баланса жизни и смерти - и погрузился в тёмные времена.

Если просто взять и смешать оба стиля, да ещё и наложить скрипты HabrAjax (впрочем, можно и без них), увидим, что есть много белых пятен - блоков, в которых были заранее прописаны светлые цвета. Поэтому просто пойти по рекомендации установить то и другое - не выйдет. Нужен ряд доработок. Они-то и составят изменения стилей ZenComment до стилей DarkAge. В результате, стили ZenComment будут существовать в 2 инкарнациях: ZenComment и DarkAge.

Тогда гики в вагоне метро получат ещё больше преимуществ перед белыми воротничками: они не только будут меньше светить экраном, но и меньше скроллить, а больше читать. Выход до конца тоннеля в каждой статье сократится, и он не будет таким ослепительно белым, как для всех.