feat: lay out the latest blog posts as cards - #220
Merged
Conversation
Each post on /blog/ becomes a full-width card, the same shape the FAQ gives each question. It was the one listing on the site not in a box. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Puts each of the three latest posts on
/blog/in a card, stacked full width. It was the last listing on the site rendered as bare text:/documentation,/contribute,/vscode,/principlesand/faqall put their items in a box, and this page did not.The shape is the FAQ's —
FAQ/QA.astrois a.card mb-3per question — rather than a three-across grid like/contribute's Projects row. The grid fills the width better with summaries this short, but it would be tied to the post count:recentPosts()defaults to three (blogPosts.js), and raising that to four would leave a row of three plus an orphan. A stack takes any number.What the markup does
The card class goes on the
<li>itself. A wrapper<div class="card">inside the item would only restate what the list item already is, and.cardisdisplay: flexin Bootstrap, so the element carrying it stops being a marker box either way.The heading moves from
.h5to.card-title, which is what every other card on the site labels itself with (vscode.astro,contribute.astro). It resolves to 1.2rem throughglobal.cssinstead of Bootstrap's 1.25rem — 0.05rem smaller, and now one class rather than a heading level chosen by eye.mb-1still overrides the title's own spacer so the date line stays tucked under it, and the summary picks up.card-text.The date, the author, and the middot that separates them are untouched.
No CSS
.cardresolves to--bs-body-bg, the same surface.pagepaints, so a card here is a hairline border and padding rather than a second background colour. Nothing to define, and dark mode was already covered by the border and body tokens.The comment above the list is rewritten:
list-unstyledwas there because markers sat oddly against multi-line entries, and the reason is now that a marker would sit outside the box entirely, level with the border instead of the text it belongs to.Checked
npx astro buildpasses and the emitted/blog/index.htmlcarries the intended structure. The dark-mode claim above is read off the tokens, not off a screenshot.🤖 Generated with Claude Code