Vi hoppar fram bara en tonårig bit här. Detta är en ganska omfattande screencast-serie, men det är bara 40 timmar eller så och det här projektet är naturligtvis mer som ett par hundra. I det här fallet var hoppet framåt att utforma den tvåsidiga spridningen lite. Vi går igenom dessa förändringar i början.
Vänster och höger sida har ett delat och ett annat klassnamn. Det här är super vanligt jag hittar i många olika scenarier inom webbdesign. I det här fallet delar sidorna samma lutning och samma storlek. Men de skiljer sig åt när vi använder en CSS3- skew()transform. Detta ger oss en ganska snygg "öppen bok" -effekt. Eftersom alla dessa effekter skapas med CSS, skala de snyggt (på ett sätt som en bild nästan säkert inte skulle).
Vi hade en smart lösning för lika höjder på plats, men tyvärr på grund av våra smarta öppna bokförvrängningar grejer det. Istället använder vi bara en touch av JavaScript.
Först, medan vi tittar på JavaScript, skriver vi en rad som döljer alla "bokstäver" som inte har några barn. Till exempel finns det inga väljare som börjar med “Z” men vi har en publicerad sida som heter bara för att vara heltäckande. Vi upptäcker dem (och döljer dem sedan) med den extremt användbara jQuery- :has()väljaren.
För lika höjder mäter vi båda de två kolumnerna, bestämmer vilken som är högst och sätter sedan dem båda till den högsta. Vi måste använda en lite hackig setTimeout för att den ska fungera korrekt på grund av att @ font-face-laddningen tar lite tid och påverkar höjderna. Vi kan i slutändan använda någon form av återuppringning av font-loader. (Eller det kan vara överdrivet).
Sedan går vi över till enstaka almanaksidor. Fortsätter snabbt nu! Vi har gjort den här typen av saker så många gånger nu, det är ingen överraskning att vi går snabbare. Vi piskar i huvudsak den här mallen i form på samma sätt som vi utformade ett enda blogginlägg eller en generisk sida eller något liknande.
Vi använder en “svart stapel” för brödsmulorna och cementerar detta designmönster som något som vi kommer att använda om och om igen för navigering på webbplatsen.