Ovdje skočimo naprijed samo malo. Ovo je prilično sveobuhvatna serija ekranizacije, ali traje samo 40-ak sati i naravno, ovaj stvarni projekt zapravo više sliči na nekoliko stotina. U ovom je slučaju skok naprijed trebao malo stilizirati širenje na dvije stranice. Prolazimo kroz te promjene na početku.
Lijeva i desna stranica imaju jedno zajedničko i jedno različito ime razreda. To je vrlo često i nalazim u puno različitih scenarija u web dizajnu. U ovom slučaju, stranice dijele isti gradijent i isto dimenzioniranje. Ali oni se razlikuju kada primijenimo CSS3 skew()transformaciju. To nam daje nekako uredan efekt "otvorene knjige". Budući da su svi ti efekti stvoreni s CSS-om, oni se lijepo prilagođavaju (na način na koji slika gotovo sigurno ne bi).
Imali smo pametno rješenje za jednake visine, ali nažalost, zbog naših pametnih stvari s otvorenim knjigama, to se lomi. Umjesto toga, koristimo samo dodir JavaScript-a.
Prvo, dok gledamo JavaScript, napišemo redak koji će sakriti bilo koje "slovo" koje nema djece. Na primjer, nema selektora koji započinju s "Z", ali imamo objavljenu stranicu koja se zove samo da bi bila sveobuhvatna. Otkrivamo ih (i zatim ih sakrivamo) pomoću izuzetno korisnog jQuery :has()selektora.
Za jednake visine mjerimo oba dva stupca, odlučujemo koji je najviši, a zatim ih oba postavljamo na najviši. Moramo koristiti pomalo nesretni setTimeout da bi ispravno radio, jer učitavanje @ font-face traje malo vremena i utječe na visinu. U konačnici bismo mogli koristiti neku vrstu povratnog poziva učitača fontova. (Ili, to bi moglo biti pretjerano).
Zatim prelazimo na pojedinačne stranice almanaha. Odmah kamionom! Već smo puno puta radili ovakve stvari, ne čudi što se brže krećemo. U osnovi bičamo ovaj predložak u obliku na isti način na koji smo oblikovali jedan post na blogu ili generičku stranicu ili bilo što slično.
Za krušne mrvice koristimo "crnu traku", cementirajući ovaj obrazac dizajna kao nešto što ćemo uvijek iznova koristiti za navigaciju u odjeljcima web mjesta.