Мы возились с CSS, касающимся ширины постов, и остановились на следующем (основано на этом коде от @Alex_P), который работает практически для всего:
/*Альтернирует фоны постов темы и увеличивает ширину постов*/
//Корректируем размеры цветов для экранов шириной менее 1260 пикселей на 60 пикселей
@media screen and (max-width: 1150px)
{
//Добавляем цвет четным постам плюс 60 пикселей
div.topic-post:nth-child(2n), div.small-action:nth-child(2n)
{
background: linear-gradient(90deg, #F8F8FA calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{60px}), #FFFFFF calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{60px}));
}
//Добавляем цвет нечетным постам плюс 60 пикселей
div.topic-post:nth-child(2n+1), div.small-action:nth-child(2n+1)
{
background: linear-gradient(90deg, #EBECEE calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{60px}), #FFFFFF calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{60px}));
}
//Корректируем размер действия на 61 пиксель
div.small-action
{
max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{61px});
}
//Корректируем размер уведомления на 61 пиксель
div.post-notice
{
max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{61px});
}
}
//Корректируем размеры цветов для экранов шириной более 1260 пикселей на 180 пикселей, корректируем другие элементы на 120 пикселей
@media screen and (min-width: 1150px)
{
//Неиспользуемая устаревшая команда
.topic-post:not(.d-toc-post)
{
//width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{120px});
}
//Корректируем размер экрана на 120 пикселей
.topic-body
{
width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{120px});
}
//Корректируем размер статуса на 120 пикселей
.topic-status-info, .onscreen-post
{
max-width: calc(758px + #{120px});
}
//Корректируем размер ответа на 120 пикселей * 2
#reply-control
{
max-width: calc(1475px + (#{120px} * 2));
}
//Корректируем размер всплывающего окна композера на 120 пикселей * 2
.composer-popup-container
{
max-width: calc(1500px + (#{120px} * 2));
}
//Корректируем размер композера на 120 пикселей (обратите внимание, что он не будет точно совпадать, но и по умолчанию тоже не совпадает)
.composer-popup
{
max-width: calc(724px + #{120px});
}
//Корректируем размер действия на 135 пикселей
div.small-action
{
max-width: calc(758px + #{135px});
}
//Корректируем размер уведомления на 135 пикселей
div.post-notice
{
max-width: calc(758px + #{135px});
}
//Добавляем цвет четным постам плюс 180 пикселей
div.topic-post:nth-child(2n)
{
background: linear-gradient(90deg, #F8F8FA calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{180px}), #FFFFFF calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{180px}));
}
//Добавляем цвет нечетным постам плюс 180 пикселей
div.topic-post:nth-child(2n+1)
{
background: linear-gradient(90deg, #EBECEE calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{180px}), #FFFFFF calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{180px}));
}
//Добавляем цвет четным действиям плюс 180 пикселей
div.small-action:nth-child(2n)
{
background: linear-gradient(90deg, #F8F8FA calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{600px}), #FFFFFF calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{600px}));
}
//Добавляем цвет нечетным действиям плюс 180 пикселей
div.small-action:nth-child(2n+1)
{
background: linear-gradient(90deg, #EBECEE calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{600px}), #FFFFFF calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{600px}));
}
}
Однако есть две вещи, которые не работают: синяя анимация свечения для новых постов, которую мы просто отключили, и уведомления о постах, то есть синие блоки, которые появляются, когда происходит что-то особенное (например, первый пост пользователя на сайте или после долгого перерыва).
Поэтому мы также добавили следующий код, чтобы протестировать его независимо перед объединением с нашими вышеуказанными случаями широких и сжатых постов:
/* Уведомления о постах требуют особого внимания и все еще кое-где ломаются */
//Корректируем размер уведомлений о постах для экранов менее 1150 пикселей
@media screen and (max-width: 1150px)
{
//Корректируем размер уведомления на 35 пикселей
.post-notice
{
max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{35px});
}
}
//Корректируем размер уведомлений о постах для экранов более 1150 пикселей
@media screen and (min-width: 1150px)
{
//Корректируем размер уведомления на 180 пикселей
.post-notice
{
max-width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{180px});
}
}
Это работает в основном как задумано — однако мы не можем расширить уведомления о постах за пределы остальной части поста, как можно увидеть здесь:
Всё остальное имеет нашу желаемую ширину, но уведомления о постах не могут расширяться дальше (правый край самого «поста» — это граница, где они останавливаются; это легко заметить, если посмотреть на оранжевую рамку поста ниже).
Хотя такое поведение, когда содержимое поста немного не доходит до края цветного блока, именно то, что нам нужно, это оставляет некрасивый кусок фонового цвета видимым рядом с синими уведомлениями о постах, и мы не можем придумать хорошего способа заставить этот единственный элемент выходить за пределы самого поста.
Любые советы о том, как лучше всего этого достичь, будут очень признательны!
(Бонусные баллы, если у вас есть простое предложение добавить похожую цветную отступ слева от поста, слева от аватара — у нас сейчас слишком много других дел, чтобы даже рассматривать это, но если это будет тривиально сделать, указание, с чего начать, очень поможет.)