redesign: mobile readability — smaller reading text, contained preview grid #19

Merged

michalvankodev merged 6 commits from redesign/10-mobile-readability into main 2026-09-10 22:10:26 +02:00

Conversation 1 Commits 6 Files changed 4 +36 -10

michalvankodev commented 2026-09-10 21:22:55 +02:00

Owner

Copy link

Mobile readability fixes

Two phone-width problems from reviewing the current foundation on a real device:

1. Reading text was oversized on mobile

--text-read was fixed at 1.25rem (20px) on all viewports — at 320–390 px that measures only 4–6 words per line (article bodies, About section, lead story).

Now steps down to 1.0625rem (17px) below md, back to 1.25rem at ≥48rem. A breakpoint step (not vw scaling) keeps the rem semantics — browser font-size preference still controls the size (the "no viewport scaling for reading text" decision from the feature set spec is preserved, phones just get a smaller step).

2. Article preview list: wrapped text + rules under the text only

The thumbnail floated on mobile, so the <article> box didn't contain it:

• the <hr> between items rendered only under the text, thumbnail hanging outside the border
• text wrapped around the image into a ~150 px column (2–4 words per line)

Fix in blog_post_preview.html:

• grid at every viewport (thumbnail column never floats) → the article box contains the whole item, the rule spans the entire preview including the thumbnail, and text sits beside the image instead of snaking around it
• thumbnail steps down to w-24 (96px) on phones, 180px from sm up (w-24 h-auto sm:w-[180px] passed to the picture generator; default-letter thumbnail scales to match)
• post_list.html drops w-fit from the list so rules always span the full rail

Verification

• cargo test --all-features — 36 passed
• Screenshots at 390 px (index, /blog, article) before/after: about paragraph ~5 words/line → ~9–10; preview items go from squeezed float layout to clean thumbnail + text grid with full-width rules
• Desktop (1280 px) unchanged: 180 px thumbnails, text right, 20 px reading voice

## Mobile readability fixes Two phone-width problems from reviewing the current foundation on a real device: ### 1. Reading text was oversized on mobile `--text-read` was fixed at 1.25rem (20px) on all viewports — at 320–390 px that measures only **4–6 words per line** (article bodies, About section, lead story). Now steps down to **1.0625rem (17px)** below `md`, back to 1.25rem at ≥48rem. A breakpoint step (not vw scaling) keeps the rem semantics — browser font-size preference still controls the size (the "no viewport scaling for reading text" decision from the feature set spec is preserved, phones just get a smaller step). ### 2. Article preview list: wrapped text + rules under the text only The thumbnail **floated** on mobile, so the `<article>` box didn't contain it: - the `<hr>` between items rendered only under the text, thumbnail hanging outside the border - text wrapped around the image into a ~150 px column (2–4 words per line) Fix in `blog_post_preview.html`: - grid at **every** viewport (thumbnail column never floats) → the article box contains the whole item, the rule spans the entire preview including the thumbnail, and text sits beside the image instead of snaking around it - thumbnail steps down to `w-24` (96px) on phones, 180px from `sm` up (`w-24 h-auto sm:w-[180px]` passed to the picture generator; default-letter thumbnail scales to match) - `post_list.html` drops `w-fit` from the list so rules always span the full rail ## Verification - `cargo test --all-features` — 36 passed - Screenshots at 390 px (index, /blog, article) before/after: about paragraph ~5 words/line → ~9–10; preview items go from squeezed float layout to clean thumbnail + text grid with full-width rules - Desktop (1280 px) unchanged: 180 px thumbnails, text right, 20 px reading voice

michalvankodev added 1 commit 2026-09-10 21:22:55 +02:00

redesign: mobile readability — smaller reading text, contained preview grid ... 33e43a3679

- text-read steps down to 1.0625rem below md: 1.25rem measures only
  4-6 words per line on phone-width screens (article bodies, about
  section, lead story). Breakpoint step keeps rem semantics, browser
  font-size preference still rules
- blog/broadcast previews: grid at every viewport, thumbnail never
  floats — the item rule now spans the whole preview including the
  thumbnail, and text no longer wraps around the image
- preview thumbnails step down to 6rem on phones (6rem x 8rem)
- post list drops w-fit so rules span the full rail

forgejo-actions commented 2026-09-10 21:24:20 +02:00

Copy link

🪦 Live preview

removed (PR closed)

<!-- preview-link --> ## 🪦 Live preview removed (PR closed)

michalvankodev changed target branch from redesign/00-foundation to main 2026-09-10 21:28:40 +02:00

michalvankodev added 1 commit 2026-09-10 21:36:01 +02:00

redesign: preview excerpt smaller — more description in the clamp ... ec80ae5e73

excerpt was text-base md:text-xl (16/20px); now text-sm md:text-base
(14/16px) with leading 6/7. Same line-clamp-4 window, noticeably more
description per item; items get more compact on phones too

michalvankodev added 1 commit 2026-09-10 21:41:33 +02:00

redesign: preview excerpt — keep desktop at text-xl, shrink mobile only ... 0891a00da4

desktop returns to the original 20px/28px; the 14px step stays a
phone-width refinement

michalvankodev added 1 commit 2026-09-10 21:53:40 +02:00

redesign: phone previews — float the thumbnail top-left, text wraps under ... 0d841a6994

flow-root on the article keeps the item box containing the float, so
the rule still spans the whole preview (incl. the thumbnail). sm+
keeps the two-column grid with the vertically centered thumbnail

michalvankodev added 1 commit 2026-09-10 22:00:09 +02:00

redesign: year header spacing matches the between-articles rhythm ... 16ff22af49

mb-3 under the year rule measured 12px while hr my-5/my-8 on both
sides gave 40px/64px between previews — the first article now sits
mb-10/md:mb-16 below the rule for the same total gap

michalvankodev added 1 commit 2026-09-10 22:05:37 +02:00

redesign: year header gap = one hr margin, not the between-articles total ... 73d4e489d8

64px of empty space under the year rule read much larger than the
32px halves around the between-article hr; match the rule-to-content
distance instead (mb-5/md:mb-8) so every divider behaves the same

michalvankodev merged commit 5be69bf2c1 into main 2026-09-10 22:10:26 +02:00

michalvankodev referenced this pull request from a commit 2026-09-10 22:10:28 +02:00

Merge pull request 'redesign: mobile readability — smaller reading text, contained preview grid' (#19) from redesign/10-mobile-readability into main

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

2 participants

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

michalvankodev/michalvankodev-site!19

No description provided.