Tu skočíme len o maličkosť. Toto je celkom komplexná séria screencastov, ale je to len asi 40 hodín a samozrejme, tento skutočný projekt je v skutočnosti skôr ako niekoľko stoviek. V tomto prípade bolo skokom vpred trochu upraviť dvojstranovú stránku. Na začiatku prechádzame týmito zmenami.
Ľavá a pravá stránka majú jeden zdieľaný a jeden odlišný názov triedy. Toto je úplne bežné, čo nájdem v mnohých rôznych scenároch webového dizajnu. V takom prípade majú stránky rovnaký gradient a rovnakú veľkosť. Ale líšia sa, keď použijeme skew()transformáciu CSS3 . To nám dáva trochu úhľadný efekt „otvorenej knihy“. Pretože všetky tieto efekty sú vytvárané pomocou CSS, majú peknú mierku (tak, aby to obrázok takmer určite nebol).
Mali sme pripravené inteligentné riešenie rovnakých výšok, ale bohužiaľ sa to kvôli našim šikovným otvoreným knižným skew-y veciam pokazí. Namiesto toho používame iba dotyk jazyka JavaScript.
Najskôr pri prezeraní JavaScriptu napíšeme riadok, ktorý skryje všetky „písmená“, ktoré nemajú žiadne deti. Napríklad neexistujú žiadne selektory, ktoré by začínali na „Z“, ale máme zverejnenú stránku, ktorá sa volá komplexne. Tie odhalíme (a potom skryjeme) pomocou veľmi užitočného :has()selektora jQuery .
Pre rovnakú výšku zmeriame oba dva stĺpce, rozhodneme, ktorý je najvyšší, a potom ich nastavíme obidva na najvyšší. Aby to správne fungovalo, musíme použiť mierne hackovaný setTimeout, pretože načítanie @ font-face trvá trochu času a ovplyvňuje výšky. Nakoniec by sme mohli použiť nejaký druh spätného volania načítača fontov. (Alebo to môže byť prehnané).
Potom prejdeme na jednotlivé almanachové stránky. Autodoprava teraz rýchlo! Takéto veci sme už robili toľkokrát, že nie je prekvapením, že sa pohybujeme rýchlejšie. Túto šablónu v podstate zašľaháme do tvaru rovnakým spôsobom, ako sme vytvorili jeden blogový príspevok alebo všeobecnú stránku alebo čokoľvek podobné.
Pre strúhanku používame „čiernu lištu“, ktorá stmeľuje tento návrhový vzor ako niečo, čo budeme opakovane používať pri navigácii v sekciách po stránkach.