हम यहाँ सिर्फ एक किशोर सा आगे कूदते हैं। यह एक बहुत व्यापक स्क्रैन्कास्ट श्रृंखला है, लेकिन यह केवल 40 घंटे या तो है और निश्चित रूप से यह वास्तविक परियोजना कुछ सौ की तरह अधिक है। इस मामले में आगे कूदने के लिए दो-पेज को थोड़ा फैलाना था। हम शुरुआत में उन परिवर्तनों से गुजरते हैं।
बाएं और दाएं पृष्ठों में एक साझा और एक अलग श्रेणी का नाम है। यह सुपर आम है जो मुझे वेब डिज़ाइन में बहुत से अलग-अलग परिदृश्यों में मिलता है। इस मामले में, पृष्ठ समान ढाल और समान आकार साझा करते हैं। लेकिन जब हम CSS3 के skew()परिवर्तन को लागू करते हैं तो वे भिन्न होते हैं । यह हमें एक साफ सुथरी "खुली किताब" प्रभाव देता है। क्योंकि ये सभी प्रभाव CSS के साथ बनाए गए हैं, वे अच्छी तरह से स्केल करते हैं (इस तरह कि एक छवि लगभग निश्चित रूप से नहीं होगी)।
हमारे पास जगह में एक चतुर समान ऊंचाइयों का समाधान था, लेकिन दुर्भाग्य से हमारी चतुर खुली किताब तिरछा-वाई सामान के कारण, जो टूट जाता है। इसके बजाय, हम सिर्फ जावास्क्रिप्ट के एक स्पर्श का उपयोग करते हैं।
सबसे पहले, जावास्क्रिप्ट को देखते हुए, हम एक पंक्ति लिखते हैं जो किसी भी "अक्षर" को छिपाएगा जिसमें कोई बच्चे नहीं हैं। उदाहरण के लिए, ऐसे कोई चयनकर्ता नहीं हैं जो "Z" से शुरू होते हैं, लेकिन हमारे पास एक पृष्ठ प्रकाशित होता है जिसे केवल व्यापक होना कहा जाता है। हम अल्ट्रा-उपयोगी jQuery :has()चयनकर्ता के साथ उन (और फिर उन्हें छिपाते हैं) की खोज करते हैं ।
समान ऊंचाइयों के लिए, हम दोनों दो स्तंभों को मापते हैं, तय करते हैं कि कौन सा सबसे लंबा है, और फिर उन दोनों को सबसे लंबा सेट करें। @ फॉन्ट-फेस लोडिंग में थोड़ा समय लेने और हाइट को प्रभावित करने के लिए हमें इसे सही तरीके से काम करने के लिए थोड़ा हैकी सेटटाइमआउट का उपयोग करना होगा। हम अंततः कुछ प्रकार के फॉन्ट लोडर कॉलबैक का उपयोग कर सकते हैं। (या, यह ओवरकिल हो सकता है)।
फिर हम सिंगल पंचांग पृष्ठों पर जाते हैं। अब जल्दी से ट्रकिंग! हमने इस तरह का काम कई बार किया है अब यह कोई आश्चर्य की बात नहीं है कि हम तेजी से आगे बढ़ रहे हैं। हम अनिवार्य रूप से इस टेम्प्लेट को आकार में कोड़ा बनाते हैं, उसी तरह जैसे हमने किसी एक ब्लॉग पोस्ट या जेनेरिक पेज या उस जैसी किसी चीज़ को स्टाइल किया हो।
हम ब्रेडक्रंब के लिए "ब्लैक बार" का उपयोग करते हैं, इस डिज़ाइन पैटर्न को कुछ इस तरह से सीमेंट करते हैं कि हम साइट-सेक्शन नेविगेशन के लिए बार-बार उपयोग करेंगे।