Podskoczyliśmy trochę do przodu. To dość obszerna seria screencastów, ale to tylko około 40 godzin, a ten rzeczywisty projekt to właściwie kilkaset. W tym przypadku krok do przodu polegał na nieco podkręceniu dwustronicowej rozkładówki. Na początku przechodzimy przez te zmiany.
Lewa i prawa strona mają jedną wspólną nazwę i inną nazwę klasy. Jest to bardzo powszechne, które spotykam w wielu różnych scenariuszach projektowania stron internetowych. W tym przypadku strony mają ten sam gradient i taką samą wielkość. Ale różnią się, gdy zastosujemy skew()transformację CSS3 . Daje nam to ładny efekt „otwartej książki”. Ponieważ wszystkie te efekty są tworzone za pomocą CSS, ładnie się skalują (w sposób, w jaki obraz prawie na pewno by tego nie zrobił).
Mieliśmy sprytne rozwiązanie równych wysokości, ale niestety z powodu naszego sprytnego, skośnego rozwiązania otwartej książki, które się psuje. Zamiast tego używamy tylko odrobiny JavaScript.
Najpierw, patrząc na JavaScript, piszemy linię, która ukryje wszystkie „litery”, które nie mają dzieci. Na przykład nie ma selektorów zaczynających się od „Z”, ale mamy opublikowaną stronę o nazwie, która ma być tylko wyczerpująca. Odkrywamy je (a następnie ukrywamy) za pomocą niezwykle przydatnego :has()selektora jQuery .
Dla jednakowych wysokości mierzymy obie kolumny, decydujemy, która jest najwyższa, a następnie ustawiamy obie na najwyższą. Musimy użyć nieco hacky setTimeout, aby działał poprawnie, ponieważ ładowanie @ font-face zajmuje trochę czasu i wpływa na wysokość. Ostatecznie moglibyśmy użyć jakiegoś wywołania zwrotnego modułu ładującego czcionki. (Albo to może być przesada).
Następnie przechodzimy do pojedynczych stron almanachu. Szybka dostawa! Robiliśmy to już tyle razy, teraz nic dziwnego, że poruszamy się szybciej. Zasadniczo nadamy temu szablonowi kształt w taki sam sposób, w jaki stylizowaliśmy pojedynczy post na blogu lub ogólną stronę lub cokolwiek w tym rodzaju.
Używamy „czarnego paska” jako bułki tartej, utrwalając ten wzorzec projektowy jako coś, czego będziemy używać wielokrotnie do nawigacji po sekcjach witryny.