Aqui estão algumas capturas de tela:
- Categorias Padrão com Tópicos em Destaque
A propósito, os logotipos aqui estão realmente um pouco grandes, forçando muito espaço desperdiçado — prefiro reduzi-los para 75px de altura. - Caixas Padrão com Subcategorias
Note que algumas das minhas subcategorias têm imagens de logotipo definidas e elas são exibidas.
O layout é bastante desperdiçador de espaço: o Logotipo da Categoria é restrito a 40px, mas é centralizado acima do título. Os logotipos das subcategorias não estão respeitando sua proporção (os cálculos de --aspect-image não estão funcionando e, de qualquer forma, são desnecessários; se você apenas definir uma altura, a proporção será respeitada se houver espaço.).
Os logotipos das subcategorias também estão um pouco grandes, forçando espaço entre as linhas. - Minha modificação, passo um
O logotipo flutua à esquerda do título, que está centralizado no espaço restante.
As subcategorias aparecem uma por linha com faixa de cor e ícone de bloqueio, mas os logotipos das subcategorias não são exibidos (o que é consistente com o padrão).
Em uma caixa, não acho que faz sentido tentar espremer dois títulos curtos de subcategoria em uma única linha se houver espaço; fica melhor com uma linha separada para cada um, na minha opinião, mas outros podem preferi-los comprimidos se houver muitas subcategorias. - Minhas modificações finais:
Os logotipos das subcategorias são exibidos com 18px de altura e a proporção correta no final do título. Isso é opcional e eles poderiam ser posicionados entre o ícone de bloqueio e o texto, mas prefiro que as faixas e os títulos fiquem alinhados.
Faria sentido também ter a opção de usar logotipos de subcategoria nos outros layouts padrão, mas não me preocupei com aqueles.
Aqui estou também usando o componente Category Icons (um ícone foi definido apenas na subcategoria Niki Test), então a posição da faixa está ligeiramente deslocada para alinhar o ícone com ela, e a cor do ícone é a cor da faixa, então ele é efetivamente usado no lugar da faixa — mas essas são modificações nesse componente, não no núcleo. - Finalmente, aqui está como é renderizado quando as caixas de subcategoria são mostradas acima dos tópicos da categoria pai, se configurado.
Obviamente, no momento, não há categorias netas para mostrar, mas isso precisará ser acomodado. Também pode ser melhor flutuar o logotipo verticalmente quando houver um título muito longo — talvez seja melhor apenas manter os títulos das categorias curtos!
Então, uma mistura de HTML text/x-handlebars em /head para o tema, efetivamente substituindo “components/categories-boxes” e SCSS. Estou feliz em enviar o código para qualquer pessoa competente para testar e inseri-lo no GitHub.
Isso funciona bem para o meu site, mas pode haver outras consequências que eu não notei.