Hyppäämme eteenpäin vain teini-ikäisenä täällä. Tämä on melko kattava kuvaruutusarja, mutta se on vain noin 40 tuntia, ja tietysti tämä varsinainen projekti on enemmän kuin muutama sata. Tässä tapauksessa edistysaskel oli kahden sivun levityksen tyylikkyys hieman. Käymme läpi nämä muutokset alussa.
Vasemmalla ja oikealla sivulla on yksi jaettu ja yksi erilainen luokan nimi. Tämä on erittäin yleistä, mitä löydän monista erilaisista skenaarioista web-suunnittelussa. Tällöin sivuilla on sama kaltevuus ja sama koko. Mutta ne eroavat toisistaan, kun käytämme CSS3- skew()muunnosta. Tämä antaa meille melko siistin "avoimen kirjan" vaikutuksen. Koska kaikki nämä tehosteet luodaan CSS: llä, ne skaalautuvat hienosti (tavalla, jota kuva melkein varmasti ei).
Meillä oli fiksu tasavertaiset ratkaisut paikoillaan, mutta valitettavasti älykkään avoimen kirjan vino-y-tavaramme takia se hajoaa. Sen sijaan käytämme vain ripaus Java-koodia.
Ensinnäkin, kun tarkastelemme JavaScriptiä, kirjoitamme rivin, joka piilottaa kaikki "kirjaimet", joilla ei ole lapsia. Esimerkiksi ei ole valitsimia, jotka alkavat "Z": llä, mutta meillä on julkaistu sivu, jonka nimi on vain kattava. Löydämme ne (ja piilotamme ne) erittäin hyödyllisen jQuery- :has()valitsimen avulla.
Yhtäläisten korkeuksien osalta mitataan molemmat sarakkeet, päätetään korkein ja asetetaan sitten molemmat korkeimpaan. Meidän on käytettävä hieman hakkerointia setTimeout, jotta se toimii oikein, koska @ font-face -kuormitus vie vähän aikaa ja vaikuttaa korkeuksiin. Voisimme lopulta käyttää jonkinlaista kirjasimen lataussoittoa. (Tai, se voi olla ylimielisyyttä).
Sitten siirrymme yksittäisille almanakkasivuille. Kuorma nyt nopeasti! Olemme tehneet tällaista asiaa niin monta kertaa nyt, että ei ole yllätys, että siirrymme nopeammin. Me käytännössä piiskaamme tämän mallin muotoon samalla tavalla kuin me tyylimme yhden blogikirjoituksen tai yleisen sivun tai vastaavan.
Käytämme leivänmuruissa “mustaa palkkia”, joka vahvistaa tätä suunnittelukuviota sellaisena, jota käytämme yhä uudelleen sivuston osioissa liikkumiseen.