Vi hopper fremover bare en tenåring. Dette er en ganske omfattende screencast-serie, men det er bare rundt 40 timer, og selvfølgelig er dette faktiske prosjektet faktisk mer som noen få hundre. I dette tilfellet var hoppet fremover å style opp tosiderspredningen litt. Vi går gjennom disse endringene i begynnelsen.
Venstre og høyre side har ett delt og et annet klassenavn. Dette er veldig vanlig jeg finner i mange forskjellige scenarier innen webdesign. I dette tilfellet har sidene samme gradient og samme størrelse. Men de er forskjellige når vi bruker en CSS3- skew()transformasjon. Dette gir oss en ganske fin "åpen bok" -effekt. Fordi alle disse effektene er opprettet med CSS, skaleres de pent (på en måte som et bilde nesten ikke vil).
Vi hadde en smart løsning med like høyder på plass, men dessverre på grunn av våre smarte, åpne bokforskjellige ting, går det i stykker. I stedet bruker vi bare et snev av JavaScript.
Først, mens vi ser på JavaScript, skriver vi en linje som vil skjule noen av "bokstavene" som ikke har barn. For eksempel er det ingen velgere som starter med “Z”, men vi har en publisert side som heter det bare for å være omfattende. Vi oppdager dem (og skjuler dem) med den ultra-nyttige jQuery- :has()velgeren.
For like høyder måler vi begge de to kolonnene, bestemmer hvilken som er høyest, og setter dem begge til den høyeste. Vi må bruke en litt hacky setTimeout for at den skal fungere riktig på grunn av at @ font-face loading tar litt tid og påvirker høyder. Vi kan til slutt bruke en slags tilbakeringing av fontlader. (Eller det kan være for mye).
Så går vi over på enkeltalmanaksider. Går raskt videre nå! Vi har gjort denne typen ting så mange ganger nå, og det er ingen overraskelse at vi beveger oss raskere. Vi pisker i hovedsak denne malen i form på samme måte som vi utformet et enkelt blogginnlegg eller en generisk side eller noe sånt.
Vi bruker en “svart stang” for brødsmulene, og sementerer dette designmønsteret som noe vi vil bruke om og om igjen for navigering i nettstedsseksjoner.