Zde skočíme jen o maličkost. Toto je docela obsáhlá série screencastů, ale je to jen asi 40 hodin a samozřejmě se tento skutečný projekt vlastně podobá několika stovkám. V tomto případě bylo skokem vpřed trochu upravit dvoustránkové rozložení. Těmito změnami procházíme na začátku.
Levá a pravá stránka mají jeden sdílený a jeden odlišný název třídy. To je velmi běžné, najdu ho v mnoha různých scénářích webového designu. V tomto případě stránky sdílejí stejný přechod a stejnou velikost. Liší se ale, když použijeme skew()transformaci CSS3 . To nám dává docela pěkný efekt „otevřené knihy“. Protože všechny tyto efekty jsou vytvářeny pomocí CSS, mají pěkné měřítko (způsobem, který by obrázek téměř jistě neudělal).
Měli jsme zavedeno chytré řešení ve stejné výšce, ale bohužel se to kvůli našim chytrým otevřeným knihám naklonilo. Místo toho používáme nádech JavaScriptu.
Nejprve při pohledu na JavaScript napíšeme řádek, který skryje všechna „písmena“, která nemají žádné děti. Například neexistují žádné selektory, které začínají na „Z“, ale máme publikovanou stránku, která se nazývá komplexně. Objevíme je (a poté je skryjeme) pomocí velmi užitečného :has()selektoru jQuery .
Pro stejné výšky změříme oba dva sloupce, rozhodneme, který je nejvyšší, a pak je nastavíme oba na nejvyšší. Aby to správně fungovalo, musíme použít mírně hackovaný setTimeout, protože načítání @ font-face trvá trochu času a ovlivňuje výšky. Nakonec bychom mohli použít nějaký druh zpětného volání zavaděče písem. (Nebo to může být přehnané).
Poté přejdeme na jednotlivé almanachové stránky. Nákladní doprava hned teď! Takové věci jsme už udělali tolikrát, že není překvapením, že se pohybujeme rychleji. Tuto šablonu v podstatě zašleháme do tvaru stejným způsobem, jakým jsme stylizovali jeden blogový příspěvek nebo obecnou stránku nebo něco podobného.
Pro strouhanku používáme „černou lištu“, která tento návrhový vzor upevňuje jako něco, co budeme znovu a znovu používat pro navigaci v sekci webů.