Facciamo un balzo in avanti solo un po 'qui. Questa è una serie di screencast piuttosto completa, ma sono solo 40 ore o giù di lì e ovviamente questo progetto reale è in realtà più simile a poche centinaia. In questo caso il salto in avanti è stato quello di modellare un po 'le due pagine. Camminiamo attraverso questi cambiamenti all'inizio.
Le pagine sinistra e destra hanno un nome di classe condiviso e uno diverso. Questo è molto comune che trovo in molti scenari diversi nel web design. In questo caso, le pagine condividono la stessa sfumatura e le stesse dimensioni. Ma differiscono quando applichiamo una skew()trasformazione CSS3 . Questo ci dà un effetto un po 'pulito "libro aperto". Poiché tutti questi effetti sono creati con CSS, si ridimensionano bene (in un modo che quasi certamente un'immagine non farebbe).
Avevamo una soluzione intelligente per le altezze uguali in atto, ma sfortunatamente a causa della nostra roba skew-y intelligente del libro aperto, che si rompe. Invece, usiamo solo un tocco di JavaScript.
Per prima cosa, mentre guardiamo il JavaScript, scriviamo una riga che nasconderà tutte le "lettere" che non hanno figli. Ad esempio, non ci sono selettori che iniziano con "Z" ma abbiamo una pagina pubblicata chiamata così solo per essere esaustiva. Li scopriamo (e poi li nascondiamo) con l'utilissimo :has()selettore jQuery .
Per le altezze uguali, misuriamo entrambe le due colonne, decidiamo qual è la più alta e poi le impostiamo entrambe su quella più alta. Dobbiamo usare un setTimeout leggermente hacker perché funzioni correttamente a causa del caricamento di @ font-face che richiede un po 'di tempo e influisce sulle altezze. Alla fine potremmo usare una sorta di callback del caricatore di caratteri. (Oppure, potrebbe essere eccessivo).
Quindi passiamo alle singole pagine dell'almanacco. Muoviti velocemente ora! Abbiamo fatto questo genere di cose così tante volte ora che non sorprende che ci stiamo muovendo più velocemente. In sostanza, modelliamo questo modello nello stesso modo in cui abbiamo disegnato un singolo post del blog o una pagina generica o qualcosa del genere.
Usiamo una "barra nera" per i breadcrumb, cementando questo modello di progettazione come qualcosa che useremo più e più volte per la navigazione nelle sezioni del sito.