Nous sommes sur le point d'avoir terminé la création de la page d'accueil de la zone Snippets du site. Tout de suite, nous commençons à peaufiner les choses et à mettre plus de choses en forme.
Nous avons une expérience étrange où le pseudo élément absolument positionné ne répondait pas à une marge gauche négative mais fonctionnait bien avec une marge droite positive. Qui savait.
Ensuite, nous passons à la création d'une classe «active» pour le menu de gauche des catégories d'extraits de code. Vous n'en parcourez qu'un seul à la fois (voir une liste d'extraits connexes sur la droite). Dites que «HTML» est actif et que vous cliquez sur «CSS», une nouvelle liste d'extraits de code CSS uniquement apparaît à droite. Il doit y avoir un style en place pour montrer ce qui est actif. Changer le z-index sur une classe active est suffisant pour travailler pour nous (le faire reposer au-dessus de l'ombre).
Pour la liste de droite, il est tentant de faire afficher les liens: block - mais c'est presque trop de zone cliquable. Cela semble bizarre de penser cela, mais je pense que c'est vrai. Vous ne voulez pas que des clics accidentels soient très éloignés du texte du lien lui-même pour activer ce lien. Ce serait surprenant et bizarre. Ainsi, les liens eux-mêmes peuvent être des blocs en ligne afin qu'ils puissent avoir un peu de remplissage, mais ne remplissent pas toute la largeur comme l'élément de liste dans lequel ils se trouvent.
Pour les liens eux-mêmes, nous décidons que la coloration du titre des extraits dans la couleur de la catégorie à laquelle ils appartiennent est trop forte. Au lieu de cela, les liens seront gris mais la couleur de survol peut prendre cette couleur spéciale.
Nous décidons également que la liste d'une colonne descendante fonctionne pour l'instant, mais si le défilement est devenu trop ridicule, peut-être qu'un jour nous pourrons nous diviser en deux colonnes et le raccourcir.