Тук скачаме напред само малко. Това е доста изчерпателна поредица от скрийнкасти, но това е само около 40 часа и разбира се този действителен проект всъщност е по-скоро няколкостотин. В този случай скокът напред трябваше да оформи малко разпространението на две страници. В началото преминаваме през тези промени.
Лявата и дясната страница имат едно споделено и едно различно име на клас. Това е изключително често срещано в много различни сценарии в уеб дизайна. В този случай страниците споделят същия градиент и еднакви размери. Но те се различават, когато приложим CSS3 skew()трансформация. Това ни дава доста изискан ефект на „отворена книга“. Тъй като всички тези ефекти са създадени с CSS, те се мащабират добре (по начин, който изображение почти сигурно не би направило).
Имахме интелигентно решение с еднакви височини, но за съжаление, поради нашите умни неща, които се отклоняват, това се проваля. Вместо това ние просто използваме докосване на JavaScript.
Първо, докато разглеждаме JavaScript, ние пишем ред, който ще скрие някое от „буквите“, които нямат деца. Например, няма селектори, които започват с „Z“, но имаме публикувана страница, наречена така, за да бъде изчерпателна. Ние ги откриваме (и след това ги скриваме) с изключително полезния :has()селектор jQuery .
За равни височини измерваме и двете колони, решаваме коя е най-високата и след това ги настройваме на най-високата. Трябва да използваме малко хакерски setTimeout, за да работи правилно, тъй като зареждането @ font-face отнема малко време и влияе на височината. В крайна сметка бихме могли да използваме някакъв обратно извикване на шрифт loader. (Или това може да е прекалено много).
След това преминаваме към отделни страници на алманаха. Бързо превозване сега! Правили сме подобни неща толкова много пъти, че не е изненадващо, че се движим по-бързо. Ние по същество размахваме този шаблон във форма по същия начин, по който оформяме една публикация в блог или обща страница или нещо подобно.
Използваме „черна лента“ за галета, затвърждавайки този модел на проектиране като нещо, което ще използваме отново и отново за навигация в секцията на сайта.