Temos todo o conteúdo de que precisamos na saída desta página e temos o cabeçalho no lugar. Agora podemos começar a aplicar CSS no conteúdo no design que temos no Photoshop.
Uma coisa que fizemos foi tornar estática a lista de sete categorias. É apenas uma chamada a menos wp_list_pages () e, portanto, um pouco mais eficiente. Se alguma vez mudarmos as categorias, isso é tão grande que não é grande coisa revisitar este código.
Precisamos essencialmente de um projeto de duas colunas aqui. Isso é fácil de fazer apenas flutuando alguns divs (ou mais provavelmente, usando nossa estrutura de grade existente). Mas isso não nos ajuda a fazer colunas de “alturas iguais” como nosso projeto determina aqui. Afinal, divs sem alturas definidas são tão altas quanto o conteúdo dentro delas. Definir uma altura em um div geralmente é uma má ideia.
Para obter colunas de altura igual, fingimos com uma pequena ideia elegante de usar um grande envoltório div (que é tão alto quanto a mais alta das colunas que ele contém) e definimos um fundo gradiente. Não um gradiente de esmaecimento de uma cor para outra, mas um gradiente com paradas rígidas exatamente onde a coluna se quebra. Isso nos dá as cores cinza na esquerda e branco na direita de que precisamos.
Aplicamos as diferentes cores de fundo a cada link de categoria na coluna da esquerda com uma série de seletores: nth-child (). Decidimos fazer dessa forma, em vez de classes, porque a ordem das cores é mais importante do que combinar a cor com a categoria (é bastante arbitrário).
Antes de terminarmos com este screencast, fazemos o efeito de sombra acontecer (uma separação enfática entre colunas), aplicando um pseudo elemento à navegação que se estende de cima para baixo da página. Este pseudo elemento tem seu próprio gradiente de preto para transparente, que o faz parecer uma sombra.