Ahora que hemos luchado para obtener el contenido adecuado en la página de inicio del Almanaque, podemos profundizar en algunos estilos reales con CSS.
Decidimos usar una fuente de escritura a mano para algunas partes de este diseño. Examinamos algunas fuentes en Dafont y terminamos descargando Shadows Into Light. La descarga viene con la fuente en un formato que funcionará en el escritorio, pero no todos los formatos necesarios para @ font-face. Entonces, lo ejecutamos a través de Font Squirrel.
Movimos las fuentes a nuestra estructura de directorios donde se supone que deben estar. Luego copiamos y pasamos la sintaxis @ font-face de otra parte del proyecto a nuestro CSS específico de Almanac y cambiamos los nombres de las fuentes y demás.
Pasamos el resto del tiempo hurgando y pinchando el CSS para que el diseño sea correcto, establezca colores y todo eso. En realidad, es bastante divertido, un desafío de CSS interesante que lo presenta todo correctamente. Después de todo, tenemos muy poco control sobre la salida HTML. Son solo listas anidadas. Así que tenemos que apuntar y hacer flotar las cosas correctamente para obtener el diseño exacto que imaginamos en Photoshop.
