Nu we hebben gestreden om de juiste inhoud op de startpagina van de Almanac te krijgen, kunnen we met CSS wat echte styling onderzoeken.
We hebben besloten om voor sommige delen van dit ontwerp een handgeschreven lettertype te gebruiken. We bladeren door enkele lettertypen op Dafont en downloaden uiteindelijk Shadows Into Light. De download wordt geleverd met het lettertype in een formaat dat geschikt is voor het bureaublad, maar niet alle formaten die nodig zijn voor @ font-face. Dus we halen het door Font Squirrel.
We verplaatsen de lettertypen naar onze directorystructuur waar ze horen te zijn. Vervolgens kopiëren we de @ font-face-syntaxis van elders in het project naar onze Almanac-specifieke CSS en wijzigen we de namen van de lettertypen en zo.
We besteden de rest van de tijd aan het porren en prikken in de CSS om de lay-out correct te krijgen, kleuren in te stellen en zo meer. Het is eigenlijk best een leuke en interessante CSS-uitdaging om alles correct op te maken. We hebben tenslotte heel weinig controle over de HTML-output. Het zijn gewoon geneste lijsten. We moeten de dingen dus precies goed richten en laten zweven om de exacte lay-out te krijgen die we voor ogen hadden in Photoshop.
