[Техническое][Не официально] Альтернативные стили от 17.05.2020

Аватар пользователя Великий Кукурузо

Неофициальные стили обновлены. 

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

 

 
Изменения 17.05.2020

 

Типографика

  • Уменьшено межбуквенное расстояние (-0.01em)
  • Увеличен размер заголовков h1,h2

Статьи

  • Изображения и видео центрированы

Структура

  • Ширина контента ограничена максимумом в 1180px
  • Увеличины отступы статьи от боковых колонок
  • Колонки контента переведены на grid представление, вместо табличного

Тёмная тема

  • Исправлены стили для скрытых веток
  • Исправлен цвет "закреплённой" новости в ленте
  • Добавлены стили для виджета google поиска

 

 
Изменения 29.04.2020
 
Изменения 25.04.2020

 

Подключение

Для подключения стилей можно использовать любое расширение, позволяющее подключать "кастомные" стили для сайтов. Я, к примеру, использую User CSS для Chrome. 

Светлая тема (с авто переключением в тёмную согласно настройкам системы)

@import url('https://romanchuk.github.io/aftershock/custom.css?v=17.05.2020');

Только тёмная тема:

@import url('https://romanchuk.github.io/aftershock/custom.dark.css?v=17.05.2020');

Приставка '?v=17.05.2020' нужна только для того чтобы браузер перезапросил файл, который был обновлён, а не брал его из кэша.

 

Авторство: 
Авторская работа / переводика

Комментарии

Аватар пользователя Эпиграмма
Эпиграмма(8 лет 3 месяца)

В только темной теме в окне "Comment" редактора набираемый текст настолько бледно-серый, что его практически не видно. Это только у меня или вообще? Если только у меня - то буду разбираццца)))

Аватар пользователя Великий Кукурузо

У меня не бледно серый... Но посмотрю в чём может быть дело

Аватар пользователя Великий Кукурузо

Кажется понял в чём дело, залил исправление.

@import url('https://romanchuk.github.io/aftershock/custom.dark.css?v=17.05.2020_2');

Обнови ссылку и попробуй

Аватар пользователя Эпиграмма
Эпиграмма(8 лет 3 месяца)

Нет, у меня всё так же. "светло-серо". Вполне возможно, что мне надо что-то "у себя" довтыкать.

Аватар пользователя atorn
atorn(6 лет 9 месяцев)
Непонятно - ничего ведь не обновилось в коде страницы.
Вставьте в dark.css строчку, будет фон окошка тёмным:
body {
    color: var(--aft-base__color);
    background-color: var(--aft-input__background-color);
}

(как на скриншоте будет; хотя тут ещё есть, над чем работать. Страница закачки файлов белая, поля редактора, спадающий список, фон у кода
Аватар пользователя atorn
atorn(6 лет 9 месяцев)

UPD: подкрасил форму ввода в тёмной теме, чтобы лучше выглядела - как на скриншоте:

См. CSS для поля ввода - DARK (кликнуть, чтобы раскрыть)
 

Аватар пользователя atorn
atorn(6 лет 9 месяцев)

И ещё 1 финт есть для тёмных тем для картинок - потускнение при ненаведённой мыши, что позволяет сгладить яркие цвета и не потерять исходный вид фото в комментах.

.field-item.even img {
    opacity: 0.81;
    transition: opacity ease-in-out 0.23s;
}
.field-item.even img:hover {
    opacity: 1;
}
.field-item.even blockquote {
    background: #6d6f71;
}

Аватар пользователя atorn
atorn(6 лет 9 месяцев)

+ есть мнение, что надо поаккуратнее шрифт внедрять, убрать из него всё лишнее. Каждый файл там на 11-15 КБ, но их там десятки лишних и 12 нужных (можно оставить 9) https://web-panda.ru/post/kak-pravilno-podklyuchit-shrift

Аватар пользователя Великий Кукурузо

Да я знаю прекрасно как шрифт подключать))) Мы же тут сейчас не production ready продукт обсуждаем smile171.gif

Аватар пользователя alexsword
alexsword(13 лет 1 месяц)

Слушай, а если людям нравится, возьмёшься их для аш покрутить? 

Аватар пользователя Великий Кукурузо

Почему бы и нет)

Скрытый комментарий alexsword (c обсуждением)
Аватар пользователя alexsword
alexsword(13 лет 1 месяц)

style.css достаточно будет?  двух точнее (десктоп + мобильная)

Аватар пользователя Великий Кукурузо

Я в личку напишу

Аватар пользователя Эпиграмма
Эпиграмма(8 лет 3 месяца)

Вот когда отсюда коммент пишу - прямо со страницы, с корня, то нормально - черное. А если с "Ответить", или с "изменить", то светло-серое

Аватар пользователя ИЮЛь Майский
ИЮЛь Майский(8 лет 9 месяцев)

Великий Кукурузо!

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

Аватар пользователя alexsword
alexsword(13 лет 1 месяц)

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

Аватар пользователя Remchik
Remchik(12 лет 9 месяцев)

В мобильном Спутнике панели редактора нет. Встроенная резалка есть. В десктопном Спутнике со встроенной резалкой нормально все.

Аватар пользователя alexsword
alexsword(13 лет 1 месяц)

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

Аватар пользователя Великий Кукурузо

Если Вы не используете мои стили - то точно не причастен.

Также обратите внимание, что под текстовым редактором есть кнопка/ссылка "Переключить на простой текстовый редактор". Если её нажать, то панель инструментов уберётся. Нажмите на неё второй раз и она вернётся

Аватар пользователя HepBo-Xupypr
HepBo-Xupypr(7 лет 6 месяцев)

Скрины в новость впилил-бы как выглядит АШык со скинами.

Аватар пользователя atorn
atorn(6 лет 9 месяцев)

Напоминаю также о наличии многоколоночных стилей, которыми пользуюсь последние года 2 и подпиливаю, когда надо. https://userstyles.org/styles/142209/aftershock-news-cleaning (открывается сайт медленно в последнее время, а чтобы установить стили через него, нужно установить расширение браузера Stylus).

За прошедшие с анонса 2 года крупных дополнений не произошло. Добавлена удобная работа со встроенными видео в узких колонках и дополняю скрытия (серым фоном, убирающимся по наведению мыши) комментариев не читаемых мною нескольких авторов (аналог скрытия комментариев у расширенных аккаунтов).

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

На ноуте, например, обычно 2 колонки, на 2 мониторах - 3, и окно размещаю так, чтобы 2 колонки попали в первый монитор, а одна и правый сайдбар - на второй. Стиль чтения "по колонкам" может показаться специфичным, но это дело вкуса.

Если бы они были тоже на сайте, то галочками в аккаунте можно: включать колоночность, включать тёмную тему (от стиля Кукурузо), скрывать комменты по настройкам юзера, а не жёстко вписывать, как у меня сейчас. При адаптации понадобится совместимость между стилями, потому что, естественно, стили разных авторов могут конфликтовать, если тестировались раздельно, а потом включены вместе. Полное отключение стилей возвращает сайт к "классике" - 1 колонка и сайдбары.

Пример того, как выглядит страница на 3 колонки сейчас (Firefox или Хром обычно).

Аватар пользователя Великий Кукурузо

test