הכותרת העליונה והתחתונה נפרשות כעת לכל הרוחב

שינוי קטן שגלוי בכל דף כאן: הפס הכהה בראש הדף והכותרת התחתונה בתחתיתו נפרשים כעת לכל רוחב החלון.

עד היום הם נמצאו באותה עמודה ברוחב 1180 פיקסלים כמו כל השאר, כך שבמסך רחב הדף היה רצועת תוכן שצפה ברקע ריק. הכותרת התחתונה בדפי הסטטיסטיקה כבר נפרשה לכל הרוחב – היא הייתה היחידה, וחוסר העקביות הזה הוא מה שהתחיל את העבודה.

מה לא השתנה

התוכן בתוך הפסים האלה. טקסט, כפתורים ומספרים עדיין מיושרים לאותם 1180 פיקסלים כמו האזורים שמתחתיהם, כך שהפס רחב והכתיבה אינה רחבה. איש אינו קורא שורות של מאה תווים, וכותרת שנמתחת על פני צג בגודל 27 אינץ׳ אינה עיצוב, אלא חוסר תשומת לב.

למה לא הטריק הרגיל

הדרך המקובלת להוציא רכיב מעמודה ממורכזת היא שוליים שליליים ביחס לערך 100vw. יש בה פגם שקל לפספס במחשב שבו סרגל הגלילה כבוי: vw כולל את סרגל הגלילה. הבלוק נעשה רחב יותר מהשטח הגלוי בדיוק ברוחב הזה, ואפשר לגרור את הדף כולו הצידה בכמה פיקסלים – ובטלפון פירוש הדבר הוא פריסה שמתנדנדת מתחת לאגודל באמצע הקריאה.

לכן הפס אינו נמתח החוצה, אלא מתחיל רחב ומקבל ריפוד פנימה:

padding-inline: max(20px, calc((100% - 1180px) / 2))

האחוזים מחושבים ביחס לרכיב האב, שכאן הוא גוף הדף ואינו כולל את סרגל הגלילה. מתחת ל־1180 פיקסלים הערך הראשון גובר והפס שומר על שוליים סבירים של 20 פיקסלים במקום שוליים שליליים. אין מעטפת שנייה, אין JavaScript ואין מה למדוד בזמן ריצה.

היכן זה חל

דף הבית, דף האודות וכל דף סטטיסטיקה. אותו מבנה בכל השלושה, וזאת הייתה המטרה.