Hier sind einige Screenshots:
- Standardkategorien mit hervorgehobenen Themen
Übrigens sind die Logos hier etwas zu groß, was viel verschwendeten Platz verursacht – ich würde sie lieber auf eine Höhe von 75 px reduzieren. - Standardboxen mit Unterkategorien
Beachten Sie, dass einige meiner Unterkategorien hier Logobilder haben, die angezeigt werden.
Das Layout ist sehr platzineffizient – das Kategorie-Logo ist auf 40 px begrenzt, aber über dem Titel zentriert. Die Unterkategorie-Logos halten ihr Seitenverhältnis nicht ein (die Berechnungen für --aspect-image funktionieren nicht und sind ohnehin unnötig, wenn man einfach eine Höhe festlegt; das Seitenverhältnis wird dann automatisch eingehalten, wenn Platz vorhanden ist.).
Die Unterkategorie-Logos sind ebenfalls etwas zu groß, was zusätzlichen Abstand zwischen den Zeilen erzwingt. - Meine Modifikation, Schritt eins
Das Logo schwebt links vom Titel, der im verbleibenden Raum zentriert ist.
Die Unterkategorien werden je eine pro Zeile mit Farbstreifen und Schlosssymbol angezeigt, aber die Unterkategorie-Logos werden nicht gezeigt (was konsistent mit der Standardansicht ist).
In einer Box finde ich es nicht sinnvoll, zwei kurze Unterkategorietitel auf eine Zeile zu zwängen, wenn Platz vorhanden ist. Es sieht besser aus, wenn jeder Titel eine eigene Zeile bekommt, auch wenn andere es vorziehen könnten, sie bei vielen Unterkategorien enger zu packen. - Meine endgültigen Modifikationen:
Die Unterkategorie-Logos werden mit 18 px Höhe und dem korrekten Seitenverhältnis am Ende des Titels angezeigt. Dies ist optional; sie könnten auch zwischen dem Schlosssymbol und dem Text positioniert werden, aber ich bevorzuge es, wenn die Streifen und Titel bündig ausgerichtet sind.
Es wäre auch sinnvoll, die Option zu haben, Unterkategorie-Logos in den anderen Standardlayouts zu verwenden, aber ich habe mich darum nicht gekümmert.
Hier verwende ich zudem die Komponente Category Icons (ein Symbol ist nur bei der Unterkategorie „Niki Test



