Agora que lutamos para obter o conteúdo adequado na página inicial do Almanac, podemos nos aprofundar em alguns estilos reais com CSS.
Decidimos usar uma fonte manuscrita para alguns pedaços desse design. Navegamos por algumas fontes no Dafont e acabamos baixando Shadows Into Light. O download vem com a fonte em um formato que funcionará na área de trabalho, mas nem todos os formatos necessários para @ font-face. Então, nós o executamos através do Font Squirrel.
Nós movemos as fontes em nossa estrutura de diretório onde elas deveriam estar. Em seguida, copiamos e colocamos a sintaxe @ font-face de outro lugar no projeto em nosso CSS específico do Almanaque e alteramos os nomes das fontes e outras coisas.
Passamos o resto do tempo mexendo e cutucando o CSS para obter o layout correto, definir cores e outros enfeites. Na verdade, é um desafio CSS muito divertido e interessante ter tudo organizado corretamente. Afinal, temos muito pouco controle sobre a saída HTML. São apenas listas aninhadas. Portanto, temos que direcionar e flutuar as coisas da maneira certa para obter o layout exato que imaginamos no Photoshop.
