Kami melompat ke depan sedikit di sini. Ini adalah seri screencast yang cukup komprehensif, tetapi hanya sekitar 40 jam dan tentu saja proyek aktual ini sebenarnya lebih mirip beberapa ratus. Dalam hal ini lompatan ke depan adalah untuk menata dua halaman terbentang sedikit. Kami menjalani perubahan itu di awal.
Halaman kiri dan kanan memiliki satu bersama dan satu nama kelas yang berbeda. Ini sangat umum yang saya temukan di banyak skenario berbeda dalam desain web. Dalam kasus ini, halaman memiliki gradien yang sama dan ukuran yang sama. Tetapi mereka berbeda ketika kita menerapkan skew()transformasi CSS3 . Ini memberi kita efek "buku terbuka" yang agak rapi. Karena semua efek ini dibuat dengan CSS, mereka menskalakan dengan baik (dengan cara yang hampir pasti tidak akan dilakukan oleh gambar).
Kami memiliki solusi pintar untuk ketinggian yang sama, tetapi sayangnya karena buku terbuka kami yang cerdik, hal itu rusak. Sebagai gantinya, kami hanya menggunakan sentuhan JavaScript.
Pertama, saat melihat JavaScript, kami menulis baris yang akan menyembunyikan "huruf" yang tidak memiliki anak. Misalnya, tidak ada penyeleksi yang dimulai dengan "Z" tetapi kami memiliki halaman yang diterbitkan yang disebut hanya agar komprehensif. Kami menemukannya (dan kemudian menyembunyikannya) dengan :has()pemilih jQuery yang sangat berguna .
Untuk ketinggian yang sama, kami mengukur kedua kolom, memutuskan mana yang tertinggi, dan kemudian mengatur keduanya ke yang tertinggi. Kami harus menggunakan setTimeout yang sedikit diretas agar berfungsi dengan benar karena pemuatan @ font-face memerlukan sedikit waktu dan memengaruhi ketinggian. Kami pada akhirnya dapat menggunakan semacam callback pemuat font. (Atau, itu mungkin berlebihan).
Lalu kami pindah ke satu halaman almanak. Cepat naik truk sekarang! Kami telah melakukan hal semacam ini berkali-kali sekarang, tidak mengherankan jika kami bergerak lebih cepat. Kami pada dasarnya membuat template ini menjadi bentuk dengan cara yang sama kami menata satu posting blog atau halaman umum atau semacamnya.
Kami menggunakan "bilah hitam" untuk remah roti, memperkuat pola desain ini sebagai sesuatu yang akan kami gunakan berulang kali untuk navigasi bagian situs.