1.9 KiB
1.9 KiB
Blog post layout spec
This document defines the shared layout and spacing for the blog post detail screen so that the blog-editor mobile preview and the Android app (BlogDetailScreen) match exactly.
Values (single source of truth)
| Element | Web (Tailwind) | Android (Compose) | Notes |
|---|---|---|---|
| Screen horizontal padding | px-4 (16px) |
16.dp |
Gutter for title, date, divider, body |
| Header block vertical padding | py-6 (24px) |
24.dp |
Top and bottom of header block |
| Gap between title and date | mb-3 (12px) |
12.dp |
|
| Divider | Full width, px-4 inset |
padding(horizontal = 16.dp) |
|
| Gap between divider and content | pt-6 (24px) |
24.dp |
|
| Content block vertical padding | 0 top, 0 bottom | None | Only horizontal padding on content |
| Paragraph / block spacing | mb-3 (12px) |
12.dp |
Between paragraphs and after blocks |
| Image block vertical margin | my-2 (8px) |
8.dp |
Top and bottom of image |
| Image caption gap | mt-1 (4px) |
4.dp |
Above caption text |
| Bottom padding (scroll) | h-8 (32px) |
32.dp |
|
| TopAppBar | px-4 py-3 |
Material TopAppBar | Back + "Blog Post" |
Image caption
- Only show caption when
titleis present and not the literal string"null"(case-insensitive). Both Web and Android must hide caption when title is null, blank, or"null"to avoid showing "null" on screen.
Where this is used
- blog-editor frontend: MobilePreview.jsx, TipTapContentRenderer.jsx
- Android app: BlogDetailScreen.kt, TipTapContentRenderer.kt
When changing layout or spacing, update both codebases and this spec.