Developer Page Specifications

Responsive Rules

Reading-first responsive. Body widths, font sizes, line-heights, sidebar collapse, Arabic line-height bumps. 4-col grids on xl to fill the right side.

مكتمل

القراءة هي حالة-الاستخدام المهيمنة. كل قرار responsive يُحَسِّن لذلك — عرض الجسم، حجم الخط، line height، انطواء الشريط الجانبي. 3 breakpoints (موبايل ≤640 / تابلت 641-1024 / سطح المكتب ≥1025).

القائمة / الفئة / الموضوع / المؤلِّف

سطح المكتب: 2-عمود (الخلاصة 8/12 يساراً، شريط جانبي sticky 4/12 يميناً). شبكة الفئات 3-عمود.
تابلت: 2-عمود كروت. الشريط الجانبي يَنتقل تحت الخلاصة.
موبايل: 1-عمود. شريط most-read يُصبح inline بين الخلاصة والنشرة.

تفاصيل المقالة — قراءة-أوّلاً

سطح المكتب ≥1025px: جسم max-width 720px مُتوسَّط + شريط جانبي 280px يميناً (sticky). الخط 18px / line-height 1.7 LTR / 1.85 RTL.
تابلت 641-1024: عمود واحد، جسم max-width 640px. الشريط الجانبي يَنتقل تحت الجسم.
موبايل ≤640: عمود واحد، padding-inline 1rem. الخط 16px / line-height 1.75 LTR / 1.9 RTL.
الصورة المميَّزة: 16:9 سطح المكتب، 4:3 موبايل (aspect-ratio CSS).
الإشارات المتّصلة: شبكة 3-عمود سطح المكتب، scroll-snap أفقي موبايل.
أزرار share/save: شريط-أسفل sticky على الموبايل بعد 25% scroll.