Hüppame siin vaid teismeliseeas. See on üsna põhjalik ekraanide seeria, kuid see on ainult umbes 40 tundi ja muidugi sarnaneb see tegelik projekt tegelikult pigem paarisajaga. Sel juhul pidi edasiminek kaheleheküljelist levikut veidi üles kujundama. Kõnnime need muutused alguses läbi.
Vasakul ja paremal lehel on üks jagatud ja üks erinev klassi nimi. See on väga tavaline, mida leian veebikujunduses paljudest erinevatest stsenaariumitest. Sel juhul on lehtedel sama gradient ja sama suurus. Kuid need erinevad CSS3 skew()teisenduse rakendamisel. See annab meile üsna korraliku "avatud raamatu" efekti. Kuna kõik need efektid on loodud CSS-iga, on need kenasti skaalal (nii, nagu pilt peaaegu kindlasti ei oleks).
Meil oli paigas nutikas võrdse kõrgusega lahendus, kuid kahjuks puruneb see meie nutika avatud raamatu kallutamise tõttu. Selle asemel kasutame lihtsalt JavaScripti.
Kõigepealt kirjutame JavaScripti vaadates rea, mis peidab kõik need tähed, millel pole lapsi. Näiteks pole ühtegi valijat, mis algaks tähega „Z”, kuid meil on avaldatud leht, mis on lihtsalt ülevaatlik. Avastame need (ja peidame siis) ülikasuliku jQuery :has()valija abil.
Võrdsete kõrguste jaoks mõõdame mõlemad veerud, otsustame, kumb on kõrgeim, ja seejärel määrame need mõlemad kõige kõrgemale. Selle õigeks toimimiseks peame kasutama veidi häkkivat komplekti TimeTime, kuna @ font-face'i laadimine võtab natuke aega ja mõjutab kõrgust. Lõppkokkuvõttes võiksime kasutada mingit fondilaaduri tagasihelistamist. (Või võib see olla üle jõu käiv).
Seejärel liigume üksikutele almanahhilehtedele. Nüüd sõidab kiiresti edasi! Oleme sellist asja nii palju kordi teinud, nüüd pole üllatav, et liigume kiiremini. Piitsutame selle malli sisuliselt samamoodi, nagu kujundasime ühe ajaveebipostituse või üldise lehe vms.
Kasutame leivapuru jaoks "musta riba", mis kinnitab seda kujundusmustrit millekski, mida kasutame saidil jaotises navigeerimiseks ikka ja jälle.