Ora che abbiamo lottato per ottenere il contenuto corretto sulla homepage di Almanac, possiamo scavare in uno stile reale con CSS.
Abbiamo deciso di utilizzare un font per la scrittura a mano per alcuni pezzi di questo design. Sfogliamo alcuni caratteri su Dafont e finiamo per scaricare Shadows Into Light. Il download viene fornito con il carattere in un formato che funzionerà sul desktop, ma non tutti i formati necessari per @ font-face. Quindi, lo esaminiamo tramite Font Squirrel.
Spostiamo i caratteri nella nostra struttura di directory dove dovrebbero essere. Quindi copiamo e inseriamo la sintassi @ font-face da altre parti del progetto nel nostro CSS specifico di Almanac e cambiamo i nomi dei caratteri e del resto.
Passiamo il resto del tempo a cercare e sollecitare il CSS per ottenere il layout corretto, impostare i colori e quant'altro. In realtà è una sfida CSS piuttosto divertente e interessante ottenere tutto correttamente disposto. Dopo tutto, abbiamo pochissimo controllo sull'output HTML. Sono solo elenchi annidati. Quindi dobbiamo indirizzare e fluttuare le cose nel modo giusto per ottenere il layout esatto che avevamo immaginato in Photoshop.
