Ми тут стрибаємо вперед лише трохи. Це досить вичерпна серія екранізацій, але це лише близько 40 годин, і, звичайно, цей фактичний проект насправді схожий на кілька сотень. У цьому випадку стрибок уперед мав трохи стилювати двосторінковий розворот. Ми проходимо через ці зміни спочатку.
На лівій і правій сторінках є одна загальна та одна інша назва класу. Це надзвичайно поширене явище у веб-дизайні. У цьому випадку сторінки мають однаковий градієнт і однаковий розмір. Але вони різняться, коли ми застосовуємо skew()перетворення CSS3 . Це дає нам певний ефект “відкритої книги”. Оскільки всі ці ефекти створюються за допомогою CSS, вони чудово масштабуються (таким чином, що зображення майже напевно не робить).
У нас було розумне рішення з рівною висотою, але, на жаль, через наші розумні відкриті книги, що перекошують речі, це ламається. Натомість ми просто використовуємо трохи JavaScript.
Спочатку, переглядаючи JavaScript, ми пишемо рядок, який буде приховувати будь-які «літери», у яких немає дітей. Наприклад, не існує селекторів, які починаються на “Z”, але у нас є опублікована сторінка, яка називається так, щоб бути вичерпною. Ми виявляємо їх (а потім приховуємо) за допомогою надзвичайно корисного :has()селектора jQuery .
Для рівних висот ми вимірюємо обидві колони, вирішуємо, яка є найвищою, а потім встановлюємо їх обидві на найвищу. Ми повинні використовувати трохи хакерський setTimeout, щоб він працював коректно, оскільки завантаження @ font-face займає трохи часу та впливає на висоту. Зрештою, ми могли б використовувати якийсь зворотний виклик завантажувача шрифтів. (Або це може бути надмірним).
Потім ми переходимо до окремих сторінок альманаху. Зараз вантажоперевезення швидко! Ми робили подібні речі вже стільки разів, тому не дивно, що ми рухаємося швидше. По суті, ми збиваємо цей шаблон у форму таким же чином, як ми створили одну публікацію в блозі, загальну сторінку чи щось подібне.
Ми використовуємо "чорну смужку" для сухарів, цементуючи цей шаблон дизайну як те, що ми будемо використовувати знову і знову для навігації по розділах сайту.