Blog page reevamp - #295
Open
muskanhashim wants to merge 5 commits into
Open
Conversation
The listing was a wall of date/title/description rows that all carried the same weight, and it gave the posts' own figures nowhere to appear. Each post is now a card whose shape comes from its own cover image, so figures are shown whole rather than letterboxed into a fixed box; the covers here range from 1.46:1 to 7.5:1 and no single ratio serves them. The cover is the first locally hosted image in the post, found at build time. Remote images are skipped on purpose, so a post cannot hotlink a third party from the index. Dimensions come from images.Config, except for SVGs, which that function does not read, so those are taken from the root element instead. A picture only earns a cover slot if it reads at card size. Panoramas and dense multi-panel figures shrink to illegible strips, so those posts and the ones with no image at all get a type card coloured from $eco-hues, the same cycle the ecosystem cards and people monograms already use. That way the grid never shows an empty frame. The newest post spans two columns. Cards stretch to their row so every row ends level, and each one reserves ground beneath its picture so the text never lands on the artwork. Titles and descriptions are clamped to two lines, since the descriptions run from six words to twenty-five. An archive rail lists every post by year alongside the grid, and drops away below 62rem. .page-item-author goes with the old markup; nothing else referenced it. /events and the landing page keep using .page-item, which is untouched.
Conditional classes go inline on one attribute, the way the ecosystem cards already write them, rather than split across lines. A type card has no picture to give it height, so its text sits in the flow and the card grows to fit a long title instead of clipping it.
The longest title on a type card slid under the "scverse blog" mark, so the text block now clears it. One column means much narrower cards, so the same words wrap onto more lines than they do on a wide screen and outgrew the ground reserved beneath the picture; on the lead card the title sat across the diagram at 375px. The lead carries a kicker the others do not and was a line short of room for it. Checked at 375, 820 and 1280: no card's text crosses its picture, nothing overflows its column, nothing is clipped, and there is no horizontal scroll.
✅ Deploy Preview for jade-cajeta-1bcca0 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
for more information, see https://pre-commit.ci
Member
|
too bad this isn’t stable yet: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Grid_lanes I like it but I think the black-to-white gradient is too harsh that appears for posts that have diagrams as central graphic |
Contributor
|
I think it looks good, I checked both MacOS and Android Mobile. |
Philipp and José both found the black-to-white gradient too harsh on the posts whose cover is a diagram, and they were right: the stops were percentages of the card, so on a tall card the dark washed most of the way up a white figure. The stops are in rem now, measured from the bottom, so the dark covers the ground already reserved for the text and feathers out over the 2.5rem above it. How far it reaches no longer depends on how tall the picture is. It holds flat across the text rather than fading through it. Fading looked softer but put white titles on a pale wash over a white figure: measured against white, contrast was 2.1:1 on the BioContextAI card and 4.2:1 on the lead, both under the 4.5:1 AA threshold. Flat brings the worst case to 13.8:1 on wide screens and 7.1:1 at 375px, where the taller text zone needs the flat part to reach further.
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
3 participants
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.
No description provided.