Wir sind fast fertig mit dem Aufbau der Homepage des Snippets-Bereichs der Website. Sofort beginnen wir mit dem Anpassen von Dingen und dem besseren Gestalten weiterer Elemente.
Wir haben eine seltsame Erfahrung gemacht, bei der das absolut positionierte Pseudoelement nicht auf einen negativen linken Rand reagierte, aber mit einem positiven rechten Rand in Ordnung war. Wer hätte das gedacht.
Dann gehen wir dazu über, eine „aktive“ Klasse für das linke Menü der Snippet-Kategorien zu erstellen. Du durchsuchst immer nur eine davon (und siehst eine Liste zugehöriger Snippets auf der rechten Seite). Angenommen, "HTML" ist aktiv und du klickst auf "CSS", dann wird rechts eine neue Liste nur mit CSS-bezogenen Snippets angezeigt. Es muss eine entsprechende Formatierung vorhanden sein, um anzuzeigen, welches aktiv ist. Das Ändern des z-index bei einer aktiven Klasse reicht für uns aus (damit sie über dem Schatten liegt).
Für die Liste auf der rechten Seite ist es verlockend, die Links als `display: block` darzustellen – aber das ist fast zu viel klickbare Fläche. Es ist seltsam, das zu denken, aber ich glaube, es stimmt. Du möchtest nicht, dass versehentliche Klicks weit weg vom Text des Links selbst diesen Link aktivieren. Das wäre überraschend und seltsam. Daher können die Links selbst als `inline-block` gestaltet werden, damit sie etwas Polsterung haben, aber nicht die gesamte Breite ausfüllen, wie es das Listenelement tut.
Für die Links selbst entscheiden wir, dass die Farbgebung des Titels der Snippets in der Farbe der Kategorie, zu der sie gehören, zu stark ist. Stattdessen werden die Links grau sein, aber die Übernahme-Farbe kann diese spezielle Farbe annehmen.
Wir entscheiden uns auch dafür, dass die gerade nach unten gerichtete Einspaltenliste vorerst funktioniert, aber wenn das Scrollen zu lächerlich wird, können wir vielleicht eines Tages auf zwei Spalten aufteilen und sie kürzer machen.