Siamo abbastanza vicini alla creazione della home page dell'area Snippets del sito. Immediatamente, iniziamo a modificare le cose e mettere più cose in forma.
Abbiamo una strana esperienza in cui lo pseudo elemento posizionato in modo assoluto non rispondeva a un margine sinistro negativo ma andava bene con un margine destro positivo. Chi lo sapeva.
Quindi passiamo alla creazione di una classe "attiva" per il menu di sinistra delle categorie di frammenti. Ne sfogli solo uno alla volta (vedendo un elenco di frammenti correlati sulla destra). Dì che "HTML" è attivo e fai clic su "CSS", a destra viene visualizzato un nuovo elenco di soli frammenti di codice CSS. È necessario disporre di uno stile per mostrare quale è attivo. Cambiare z-index su una classe attiva è sufficiente per noi (facendolo stare sopra l'ombra).
Per l'elenco a destra, si è tentati di visualizzare i collegamenti: blocco, ma è quasi un'area selezionabile troppo. Sembra strano pensarlo, ma penso che sia vero. Non vuoi che clic accidentali siano molto lontani dal testo del link stesso per attivare quel link. Sarebbe sorprendente e strano. Quindi, i collegamenti stessi possono essere inline-block in modo che possano avere un po 'di riempimento, ma non riempire l'intera larghezza come è l'elemento dell'elenco in cui si trovano.
Per i link stessi, decidiamo che colorare il titolo degli snippet nel colore della categoria a cui appartengono è troppo forte. Invece, i collegamenti saranno grigi ma il colore di rollover può assumere quel colore speciale.
Decidiamo anche che l'elenco di una colonna verso il basso funziona per ora, ma se lo scorrimento diventa troppo ridicolo forse un giorno possiamo dividere in due colonne e accorciarlo.