Details
Live demo (English)
·
Live demo (Arabic, RTL)
·
Documentation
Built for reading on a phone.
Every page is designed at 390 px and widened with container queries: a bottom tab bar, a horizontally scrolling
section rail, compact story rows with inline-end thumbnails, and a story bar that slides away as you read and comes
back when you scroll up. Hierarchy comes from story type and typography rather than from colour. Dense, but calm.
Five kinds of story, one column.
Standard report; photo essay with a snap gallery and lightbox; video story with captions and a transcript; long-read
on a warm paper background with a table of contents and a CSS-only progress hairline;
The template assembly can include the following files: HTML, CSS, JavaScript, Fonts, Icons, Images.
If the description indicates otherwise, this is just an example as a template can be used.
Details
Live demo (English) · Live demo (Arabic, RTL) · Documentation Built for reading on a phone. Every page is designed at 390 px and widened with container queries: a bottom tab bar, a horizontally scrolling section rail, compact story rows with inline-end thumbnails, and a story bar that slides away as you read and comes back when you scroll up. Hierarchy comes from story type and typography rather than from colour. Dense, but calm. Five kinds of story, one column. Standard report; photo essay with a snap gallery and lightbox; video story with captions and a transcript; long-read on a warm paper background with a table of contents and a CSS-only progress hairline;