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.

Complete

Reading is the dominant use-case. Every responsive decision optimises for that — body width, font size, line height, sidebar collapse. 3 breakpoints (mobile ≤640 / tablet 641-1024 / desktop ≥1025).

Listing / category / topic / author

Desktop: 2-col layout (feed 8/12 left, sticky sidebar 4/12 right). Categories grid 3-col.
Tablet: 2-col feed cards. Sidebar moves below feed.
Mobile: 1-col. Most-read sidebar becomes inline section between feed and newsletter.

Article details — reading-first

Desktop ≥1025px: body max-width 720px centered + sidebar 280px right (sticky on scroll). Font 18px / line-height 1.7 LTR / 1.85 RTL.
Tablet 641-1024: single column, body max-width 640px. Sidebar moves below body.
Mobile ≤640: single column, padding-inline 1rem. Font 16px / line-height 1.75 LTR / 1.9 RTL.
Featured image: 16:9 desktop, 4:3 mobile (aspect-ratio CSS).
Connected signals: 3-col grid desktop, horizontal scroll-snap mobile (1.2-card peek).
Share/save buttons: sticky bottom-bar on mobile after 25% scroll.