Estamos quase terminando a construção da página inicial da área de Snippets do site. Imediatamente, começamos a ajustar as coisas e colocar mais coisas em forma.
Tivemos uma experiência estranha em que o pseudo-elemento posicionado absolutamente não respondeu a uma margem esquerda negativa, mas funcionou bem com uma margem direita positiva. Quem sabia.
Em seguida, passamos a fazer uma classe “ativa” para o menu esquerdo de categorias de trechos. Você só navega em um deles por vez (vendo uma lista de trechos relacionados à direita). Digamos que “HTML” está ativo e você clica em “CSS”, uma nova lista de apenas trechos relacionados a CSS aparece à direita. É necessário que haja algum estilo para mostrar qual está ativo. Alterar o Z-index em uma classe ativa é suficiente para funcionar para nós (fazendo com que fique acima da sombra).
Para a lista à direita, é tentador fazer os links exibirem: bloquear - mas é quase uma área clicável demais. Parece estranho pensar isso, mas acho que é verdade. Você não quer cliques acidentais muito longe do texto do link em si para ativá-lo. Seria surpreendente e estranho. Portanto, os próprios links podem ser inline-block para que possam ter algum preenchimento, mas não preencham toda a largura como o item da lista em que estão.
Para os próprios links, decidimos que colorir o título dos snippets com a cor da categoria a que pertencem é muito forte. Em vez disso, os links serão cinza, mas a cor de rollover pode assumir essa cor especial.
Também decidimos que a lista de uma coluna direta funciona por enquanto, mas se a rolagem ficar muito ridícula, talvez um dia possamos dividir em duas colunas e encurtá-la.