#Дизайн

Продолжаю тему кастомного допиливания дизайна Лиспублики. Напоминаю, что я использую дополнение Stylus, которое доступно для декстопных версий браузеров на базе Chrome, а также для Firefox. Для Safari есть аналог - Stylish. Сразу после выхода нового дизайна, я предложил несколько простых правок для изменения гаммы как светлой, так и тёмной темы. В основном они касались рыжих ссылок и кнопок, которые, стоит предположить, были сделаны именно такими для того, чтобы подчеркнуть "лисичность" нашего сайта, но в итоге вызвали сомнения. В общем, "не нравится - сделай сам", я и сделал. А заодно осуществил ещё несколько правок по аналогии с доработкой старого дизайна.

Предлагаю вашему вниманию скриншот:

Из ключевых изменений структуры: расширена основная зона контента (скриншот сделан на 2к разрешении), но при этом немного увеличен шрифт - опять же для комфорта на больших мониторах. Эту часть обладатели базового HD, то есть 1920х1080 могут проигнорировать, так как для них изменения будут не столь значимыми, но, в то же время, для понимания основной концепции модифицирования они будут полезны. В любом случае, в коде я сделал отметки какая часть за что отвечает.

Возвращаясь к изменениям: я решил передвинуть боковую панель вправо - мне так банально удобнее и не возникает ощущения "скованности", а также изменить формат блока с объявлениями, дабы он не кушал место, отведённое для контента. Этот блок теперь расположен сбоку, имеет вертикальную ориентацию и при этом продолжает нормально функционировать - кнопка "развернуть" всё также увеличивает картинки. И это ещё не всё...

Вчера в "лолке" зашёл разговор о форме комментирования, мол можно ли убрать фон сборку от неё. Я решил немного поколдовать и в итоге соорудил доработку, которую вы можете видеть на картинке выше. Форма ответа стала одновременно уже и шире... как так? Самое поле ввода сообщения увеличилось по ширине относительно занимаемой зоны, но при этом убрана заливка справа и слева от неё, что, исключительно на мой субъективный взгляд, создаёт эффект лёгкости. Особого прикладного смысла в этом нет: форма всё равно закрывает контент. Разве что боковую панель она теперь не перекрывает. Кстати, это единственное место, которое требует небольшого допиливания в зависимости от разрешения: в правиле для .v2-editor-panel в коде ниже указаны цифры для обычного разрешения, в то время как у меня стоят left: 13%; width: 61%;

В общем, вот код всех этих правок целиком:

:root {
--accent: #6770B1;

/* Блок правил для ширины */
--feed-max-width: 60%;
--content-max-width: 100%;
}

/* Правила, связанные с гаммой */

.sidebar-profile { background: #1f2131; }

.sidebar-nav { background: #1f2131; }

.post-card-panel { background: #1f2131; }

.post-collapse-toggle {
min-height: 42px;
background: linear-gradient(180deg,rgb(var(--bg-card-rgb)/0) 20%,rgb(var(--bg-card-rgb)/.7) 62%,var(--bg-card) 100%);
}

.post-content-shell.is-collapsed::after { display: none; }

.btn-primary { background: #444864; }

.v2-tabs--pill .v2-tabs__item.active {
color: var(--text-bright);
background: #444864;
border: none;
}

.v2-comment__body { background: #1f2131; }

.sidebar-quick-settings__input:checked ~ .sidebar-quick-settings__track {
background: #444864;
border-color: #fff0;
}

.nav-tab.active { background: none; }

.nav-menu-item.active {
background: #323548;
color: white;
}

.post-collapsible-content.is-collapsed::after {background:unset;}

/* Правила, связанные с шириной контента */

.content { margin: 0 auto; }

.v2-profile { max-width: unset; }

/* Размер шрифта в постах */

.post-content {font-size: 115%;}

/* Правила, связанные с объявлениями */

.v2-pinned__list {display: flex !important;
flex-direction: column !important;
gap: 8px !important;
flex: 1 !important;
overflow-y: auto !important;
margin: auto;
padding: unset;}

.v2-pinned {margin-top: 15px;
position: fixed !important;
top: 70px !important;
left: 20px !important;
max-height: calc(100vh - 120px) !important;
overflow-y: auto !important;
z-index: 999 !important;
border-radius: 12px !important;
padding: 12px !important;
display: flex !important;
flex-direction: column !important;}

.v2-pinned.is-collapsed {width: 100px !important;}

.v2-pinned:not(.is-collapsed) { width: 150px !important;}

.v2-pinned__title {display: none;}

.v2-pinned__header {flex-shrink: 0 !important;
font-size: 14px !important;
padding-bottom: 8px !important;
margin-bottom: 8px !important;
border-bottom: 1px solid var(--border-color, #e0e0e0) !important;
cursor: default !important;
display: unset;
padding: unset;}

.v2-pinned__toggle {padding: unset;}

/* Правила, связанные с формой комментирования */

.v2-editor-panel__inner {max-width:unset}

.v2-editor-panel {left: 11%; width: 60%; box-shadow: 0 0 6px rgb(0, 0, 0); background: #23263e;}

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

Новое - это круто, однако довольно часто новое оказывается непривычным, из-за чего вызывает отторжение. А ещё новое - это эксперименты, к которым ты ещё не привык. Но, благо, у нас есть инструменты, позволяющие немного допилить сайт так, чтобы он субъективно стал приятнее глазу.

В одном из своих постов я уже писал каким образом с помощью браузерных расширений можно изменить практически любой сайт. Сегодня у нас будет ещё одно практическое применение этих знаний. Напоминаю как использовать: качаем расширение для правки CSS на строне браузера, например, Stylus, создаём правило (как правило, нужно кликнуть на иконку расширения при открытой странице нужного сайта и выбрать "+"), вставляем мой код, сохраняем.

Светлая тема

Немного подправлен базовый фон, чтобы контент лучше с ним контрастировал, оранжевые кнопки заменены на синие, фон элемента "развернуть" стал менее агрессивным, исправил баг с потерянной иконкой поиска (думаю, скоро его поправят и разработчики самого сайта, но пока так), слегка выделил тенью посты.

body {
  background: #d0dadf;
}

.btn-primary {
  background: #223363;
  color: white;
}

.v2-tabs--pill .v2-tabs__item.active {
  background: #223363;
  border: none;
}

.post-collapse-toggle {
  min-height: 42px;
  background: linear-gradient(180deg,rgb(var(--bg-card-rgb)/0) 20%,rgb(var(--bg-card-rgb)/.7) 62%,var(--bg-card) 100%);   
}

.v2-comment-rail__line {
  background: #fff9;
}

.sidebar-quick-settings__input:checked ~ .sidebar-quick-settings__track {
  background: #444864;
  border-color: #fff0;
}

.header-search {
  background: #223363;
  border-radius: 10px;
}

.post-card {
  box-shadow: 0px 1px 3px #b0b8bb;
}

Тёмная

Изменён фон отдельных элементов (постов, плашек), оранжевые кнопки заменены на фиолетовые, фон элемента "развернуть" стал менее агрессивным.

.sidebar-profile {
  background: #1f2131;
}

.sidebar-nav {
  background: #1f2131;
}

.post-card-panel {
  background: #1f2131;
}

.post-collapse-toggle {
  min-height: 42px;
  background: linear-gradient(180deg,rgb(var(--bg-card-rgb)/0) 20%,rgb(var(--bg-card-rgb)/.7) 62%,var(--bg-card) 100%);   
}

.post-content-shell.is-collapsed::after {
  display: none;
}

.btn-primary {
  background: #444864;
}

.v2-tabs--pill .v2-tabs__item.active {
  color: var(--text-bright);
  background: #444864;
  border: none;
}

.v2-comment__body {
  background: #1f2131;
}

.sidebar-quick-settings__input:checked ~ .sidebar-quick-settings__track {
  background: #444864;
  border-color: #fff0;
}

.nav-menu-item.active {
  background: #323548;
  color: white;
}

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

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

:root {--accent: #6770B1;}

Бонус2: убрать обводку у активной вкладки в верхнем меню:

.nav-tab.active {background: none;}

Ответ на пост Неделя Стимпанка-Дизельпанка

Прошла специально ради недели стимпанка по этой улице. Есть у нас такое здание, раньше там был ресторан Морской конёк, потом он сто раз менял название (но помнят его все как морского конька), а потом совсем закрылся уже под каким-то грузинским названием. Дизайн здания я бы назвала "взрыв на тракторном заводе", но на стимпанк тоже похоже

И сбоку почему-то лодочный винт

Приветули, народ.

Я UX/UI дизайнер сайта Лиспублики, сейчас занимаюсь редизайном текущего вида сайта, до этого дизайнила капибару.

Коммент от @Linda_M в этом посте всколыхнул очередные волны споров в Совете, я как человек, который занимается впихиванием тыщи кнопочек в новый дизайн, решила предложить переработать механику «авторского».

Сейчас на сайте теги «моё» и «авторское» работают так:

— Автор может поставить тег «моё», если пост написан им.

— Также он может поставить «авторское», если считает, что пост создан им через труд, сбор информации, творчество и т.д.
Пользователи могут проголосовать «за» или «против» этого тега, и он может быть снят при отрицательных голосах.

☠️ Проблема — не все понимают, чем «авторское» отличается от «моё», и почему сообщество может снимать тег, поставленный автором. Из-за этого появляются обиды и путаница.

Варианты:

1. Оставить как есть. Автор сам решает, считать ли пост авторским. Сообщество может поддержать или отменить тег голосованием.
   
   плюсики варианта:
   ✅ привычно, понятно;
   
   минусики:
   ❌ Остаются споры и непонимание.
2. Моё предложение — передать решение сообществу. У автора остаётся только тег «моё».
   Читатели могут проголосовать «за авторское» — это как ачивка, знак признания. Если за сутки наберётся, скажем, 60% положительных голосов — пост попадёт в отдельную ленту «Авторское» (или «Ценное» / «Сокровищница» / «Ясделяль» и т.п., название тоже может поменяться, ваше мнение в комментарии, пжлста).
   
   плюсики:
   ✅ авторы просто ставят тег «моё» и не запариваются с авторским;
   ✅ сообщество решает, какой пост достоин отдельной ленты;
   ✅ формируются «рыцари авторского» (может тоже ачивку придумаем какую-нибудь особо активным);
   
   минусики:
   ❌ Есть риск, что пользователи будут лениться голосовать.
3. Компромиссный вариант — автор может номинировать свой пост на «авторское».
   Тег появится не сразу, а после того, как за него проголосует какое-то количество человек.
   
   плюсики:
   ✅ Учитывает инициативу автора и мнение аудитории.
   
   минусики:
   ❌ Сложнее по логике и восприятию.

Чтобы улучшения были не просто от балды и не с высоты мнения пары лиц, а на основе реального опыта, мне важно услышать мнение сообщества — как пользователей, так и авторов.
Какой вариант кажется вам наиболее честным и удобным?

1. Оставить всё как есть.
2. Пусть решает сообщество.
3. Сделать номинацию.

Ну и свои варианты, давайте обсудим тег, авторское, моё, своё и всё на свете остальное.

Мнение в комментах этого поста реально повлияет на дизайн и механику новой версии сайта. Я не хочу ориентироваться на своё личное мнение и мнение администрации. Чем больше откликов — тем лучше получится система, в которой и авторам приятно, и читателям понятно.