Categories Plus Último Layout Como Usar Largura Total da Tela?

Dev
1

Estou tentando fazer com que a visualização Categorias + Mais Recentes no desktop use a largura total da tela disponível.
width

Todo o resto do site pode permanecer o mesmo — eu só quero que este layout específico (categorias à esquerda, tópicos mais recentes à direita) se expanda para a largura total em vez de permanecer em uma coluna central de largura fixa.

Eu tentei substituir os contêineres de muitos elementos (.wrap, .container, #main-outlet, etc.), mas esta visualização específica ainda permanece restrita, então acredito que haja outro wrapper ou grade controlando sua largura.

Alguém poderia me indicar o CSS correto que controla a largura do layout Categorias + Mais Recentes?

Obrigado.

3

Olá,

você precisará de uma combinação de alterar o layout da coluna grid no main-outlet-wrapper + alterar as variáveis --d-max-width e --topic-body-width para atender às suas necessidades.

4

Obrigado. Isso resolveu.

.badge-category__wrapper .badge-category__name {
    font-size: 1.3em;
}
table.category-list {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 1rem;
  box-sizing: border-box;
  border-collapse: separate;
  border-spacing: 0;
}

table.category-list thead th {
  padding: 0.5rem 0;
  border-bottom: 1px solid #e0e0e0;
}

table.category-list tbody tr td {
  padding: 0.75rem 0;
  border-bottom: 1px solid #e0e0e0;
}

table.category-list tbody tr:last-of-type td {
  border-bottom: none;
}


.latest-topic-list {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 1rem;
  box-sizing: border-box;
}

.latest-topic-list-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid #e0e0e0;
}

.latest-topic-list-item:last-of-type {
  border-bottom: none;
}
5

Algo mudou em atualizações mais recentes do Discourse, porque este CSS não faz nada no nosso site, além de adicionar bordas. (Criei um novo componente, adicionei o código na aba de CSS e ativei o componente.)

É assim que o Meta (e o nosso próprio site) aparecem no meu monitor por padrão. Seria bem-vindo o uso de parte desse espaço.

image
image1920×835 106 KB