2026-05-06 — Blog reverse-chrono list layout (parked for Mike review)

Source

Basecamp todo 517063224. Jan: "Make blog be reverse chronological." https://basecamp.com/1766591/projects/20132740/todos/517063224

Comment thread: Eric explained that posts ARE sorted DESC, but the asymmetric big/small card grid makes reading order feel jumbled. Pitched an alternative layout that reads cleanly top-to-bottom with less visual variety. Jan replied "Do the latter please."

Pre-existing assets we found

1. category-archive.php on main — compact top-to-bottom list (title + excerpt + date, divider lines), already live at /category/archive/.
2. Branch fix/blog-reverse-chrono-layout (Apr 30, parked) — row-band approach (groups of 3 alternating large+2small / 3-equal). Different direction, kept intact for reference.

What we built today

Branch: fix/blog-list-layout (commit 36d59da, pushed to origin, NO PR).

Ported the archive-list pattern into home.php and added an image column on the left of each row. Each row: - Image left, ~256px wide on desktop (md:w-64), pb-[66%] aspect (3:2 landscape) - Title (h4) + 28-word excerpt center - Formatted date right - Divider lines top, bottom, between rows - bg-linen when post has a thumbnail - bg-sky / bg-sand alternating fallback when no thumbnail (counter only ticks on misses, same logic as the previous card grid) - Stacks vertically on mobile (image full-width on top) - Image link is aria-hidden tabindex="-1" so the title link is the single accessible target per row

Filter pills (National / Local / All), query exclusions, pagination, and the parked archive link comment block are all unchanged.

css/tailwind-output.css rebuilt to compile new classes (md:w-64, md:gap-6, md:shrink-0).

Verified

• /blog/ desktop 1280px — strict DESC reading order, image-left rows render
• /blog/ mobile 375px — vertical stack, full-width image above text
• /blog/?type=all — same pattern with bg-sky/bg-sand fallbacks visible on no-thumb rows
• No PHP errors in markup
• Screenshots at /tmp/blog-desktop.png, /tmp/blog-mobile.png, /tmp/blog-all.png (regenerable via /tmp/cf-shot.py)

Why parked

Eric checking with Mike on design direction. Open questions for Mike: - Image width (currently 256px) - Aspect ratio (currently pb-[66%]) - Gap between image and text - Fallback colors and whether no-thumb rows should look the same as thumb rows or visually distinct

To resume

cd "~/Local Sites/californiaforever/app/public/wp-content/themes/california-forever"
git checkout fix/blog-list-layout

Lesson learned

First pass shipped without running npm run build. New Tailwind classes (md:w-64, md:gap-6, md:shrink-0) weren't in tailwind-output.css, so the image column had zero width and rows looked empty. Always rebuild Tailwind when adding classes that weren't already in the project.

Files changed (committed on branch)

• home.php
• css/tailwind-output.css

2026-05-07 — Resolved with Mike's redesign

Mike sent back an updated Figma (node 7210:2758) — same image-left + title/excerpt + date-right pattern, same sky/linen/sand palette as the parked branch, refined into rounded cards (12px) with internal padding, vertical divider before the date column, category label under the date, and a Material-style arrow_outward icon at the bottom-right.

Built directly on the existing fix/blog-list-layout branch (per Eric — keep history continuous). Six commits on top of the original parked work:

• 79d8835 — initial re-skin to rounded cards
• f68ce6e — fix arrow placement on short cards
• 4ba278c — Material SVG arrow + image fill + title hover
• cb23bd7 — md:h-auto so image stretches with card height
• 20458f4 — stretch right column on linen variant so arrow pins to bottom
• 69a9bfb — min-h-[229px] floor + line-clamp-3 excerpts

PR opened for client review: https://github.com/grainandmortar/california-forever/pull/16

Pushed to Flywheel production same session and FlyCache cleared. Eric to share with client.

Polish round (same evening, post-prod)

After the first prod push, Eric reviewed and asked for refinement on the linen (image) card variant only:

• a8e7875 — image moved inside the card padding with fixed aspect ratio (337×229 locked, no longer stretches with card height)
• ba7f754 — 16px breathing room on all sides of the image
• d65198f — dropped the inner content md:py-12 so all linen cards lock at exactly 261px uniform height (image 229 + 16 top + 16 bottom)
• d46e0a0 — rotated the corner arrow +45° via CSS so it points straight right (→) instead of diagonal up-right (↗)

All four shipped to Flywheel prod same session. Final state on prod has every linen card at 261px with uniform 16px breathing, no stretching, arrow pointing right.

Judgment calls worth remembering

• Used inline Material SVG instead of FA — the project's loaded fa-sharp fa-solid fa-arrow-up-right reads visually heavier than Mike's spec, even at 18px. Eric explicitly approved breaking the "FA-only" rule for this glyph.
• Linen cards have an inner content wrapper (image + content split) that swallows mt-auto unless you md:items-stretch it — sky/sand variants don't, which is why the arrow misalignment showed up only on linen cards.
• <img> inside the linen card had to be absolute-positioned in a relative wrapper. Without that, tall source images (like card #6's 352px-natural) drove the wrapper height past the card's intended floor.