Aquí tienes algunas capturas de pantalla:
- Categorías predeterminadas con temas destacados
Por cierto, los logotipos aquí son realmente un poco grandes, lo que genera mucho espacio desperdiciado; prefiero reducirlos a 75px de altura. - Cuadros predeterminados con subcategorías
Nota que algunas de mis subcategorías tienen imágenes de logotipos configuradas y se muestran.
El diseño desperdicia bastante espacio: el logotipo de la categoría está limitado a 40px, pero se centra sobre el título. Los logotipos de las subcategorías no respetan su relación de aspecto (los cálculos de --aspect-image no funcionan y, de todos modos, son innecesarios; si simplemente estableces una altura, la relación de aspecto se respetará si hay espacio).
Los logotipos de las subcategorías también son un poco grandes, lo que fuerza espacio entre las líneas. - Mi modificación, paso uno
El logotipo flota a la izquierda del título, que está centrado en el espacio restante.
Las subcategorías aparecen una por línea con una franja de color y un icono de candado, pero los logotipos de las subcategorías no se muestran (lo cual es consistente con la configuración predeterminada).
En un cuadro, no creo que tenga sentido intentar comprimir dos títulos cortos de subcategorías en una sola línea si hay espacio; me parece mejor tener una línea separada para cada una, aunque otros podrían preferir agruparlos si hay muchas subcategorías. - Mis modificaciones finales:
Los logotipos de las subcategorías se muestran con 18px de altura y la relación de aspecto correcta al final del título. Esto es opcional y podrían colocarse entre el icono de candado y el texto, pero prefiero que las franjas y los títulos queden alineados.
También tendría sentido tener la opción de usar logotipos de subcategorías en otros diseños predeterminados, pero no me he molestado en implementarlo allí.
Aquí también estoy utilizando el componente Category Icons (solo se ha configurado un icono en la subcategoría Niki Test), por lo que la posición de la franja se desplaza ligeramente para alinear el icono con ella, y el color del icono coincide con el de la franja, por lo que efectivamente se usa en lugar de la franja; pero esos son ajustes a ese componente, no al núcleo. - Finalmente, así es como se renderiza cuando se muestran los cuadros de subcategorías arriba de los temas de la categoría principal, si esa opción está activada.
Obviamente, en este momento no hay categorías de nietos que mostrar, pero eso deberá tenerse en cuenta. Además, podría ser mejor flotar el logotipo verticalmente cuando el título sea muy largo; aunque quizás sea mejor simplemente mantener los títulos de las categorías cortos.
En resumen, es una mezcla de HTML text/x-handlebars en /head para el tema, que efectivamente reemplaza “components/categories-boxes”, junto con SCSS. Estoy encantado de enviar el código a cualquier persona competente que pueda probarlo y subirlo a GitHub.
Esto funciona bien para mi sitio, pero podría haber otras consecuencias que no he detectado.