Fix mobile post-list layout and normalise cover art - #6
Merged
Conversation
The cover thumbnail grid only kicked in at >=550px, so on phones PaperMod rendered list covers full-bleed at their natural aspect ratio — a screen-filling logo above two lines of text. Apply the grid at every width with an 88px thumbnail column below 550px, and switch the thumbnail to object-fit: contain so the centred logos these posts use stay whole instead of being cropped into. The masthead logo had the opposite problem: PaperMod scales .profile img to 0.85 under 768px, leaving the mark undersized above a title that wraps to nearly the full viewport. Undo that scale and size the sprite explicitly to 165x220 — width and height must move together, since the visible half is a 3:4 crop window over the 3:2 two-up sprite. Also exclude .tag-entry from the grid. It hides its cover, so it was reserving an empty thumbnail column and squeezing the text. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Bbts4wHCUyWRaBK4eNH5cW
Mobile keeps PaperMod's stacked order — cover above the text, where there is no horizontal room to spare — and caps the cover at 92px tall so it reads as a logo rather than a hero. The side-thumbnail grid now starts at 550px instead of applying at every width. Cover art was also unnormalised. All twelve covers already shared a 1200x1000 canvas, but the artwork inside varied from 25% to 48% of it, so VS Code rendered 1.31x the linear size of PyTorch and nearly 2x the area. Rescale each logo to a common optical weight, measured as the geometric mean of its ink bounding box so square icons, tall stacks and wide wordmarks are treated fairly, with width/height caps for the extremes. Ink is measured at alpha >= 128 so drop shadows don't inflate the box, and logos are recentred on the ink rather than the shadow. scripts/normalize-cover.py keeps this reproducible for future posts. It is idempotent and reads cover paths from post frontmatter, so it can't wander into body screenshots. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Bbts4wHCUyWRaBK4eNH5cW
92px read as undersized against the post title and excerpt. Desktop is unaffected — the side-thumbnail rule above 550px sets its own height. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Bbts4wHCUyWRaBK4eNH5cW
The cover's black "SymPy" wordmark was near-invisible against the dark theme background (#0a0c11) — 15% of the artwork's ink sat below a 2:1 contrast ratio, and it was the part carrying the name. SymPy publishes no light-on-dark variant, and generate_logos.py exposes no colour options, so there is nothing to theme-swap. What it does publish is a no-text variant, generated by hiding the SymPy_text group in doc/src/logo/sympy.svg. Their logo guide recommends exactly that here: "The text version should be preferred unless the SymPy name is already present separately" — the post title carries the name. So this is the official variant rather than an edited logo: rendered from upstream sympy.svg with SymPy_text hidden, the same transformation generate_logos.py applies, then placed on the 1200x1000 cover canvas and run through scripts/normalize-cover.py. Logos are BSD licensed, same as SymPy itself. Side benefit: it is a clean vector render, so it is sharper than the previous raster and drops its baked-in drop shadow. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Bbts4wHCUyWRaBK4eNH5cW
Desktop still carried the original 135px mark while mobile had been raised to 165px, so the brain read small against its own title on wide screens. The earlier change was scoped to max-width:768px because the bug it fixed (PaperMod's scale(0.85)) was mobile-only; the base size was never revisited. Height moves with it: the visible half is a 3:4 crop window over the 3:2 two-up sprite, so 156px needs an explicit 208px or the night half bleeds in from the right. Verified the ratio holds at 1280/900/700/430px. The h1's negative top margin scales to match the sprite's taller transparent footer. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Bbts4wHCUyWRaBK4eNH5cW
156px read heavy against the title on desktop. Down ~8% on both: desktop 156->144, mobile 165->153, keeping the two a step apart since the mobile title wraps to nearly the full viewport. Heights follow the 3:4 sprite crop window (192 / 204) and the h1's negative top margin scales with them. Ratio verified at 1280/900/700/430. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Bbts4wHCUyWRaBK4eNH5cW
|
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
2 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.
On a phone the post list rendered covers full-bleed at their natural aspect ratio — a screen-filling logo above two lines of text — while the masthead logo read undersized above its own title. Fixing that surfaced a second issue: the cover art was never optically normalised, so some logos were nearly twice the visual weight of others.
Post list
The cover thumbnail grid was wrapped in
@media (min-width: 550px), so below that PaperMod's default (width: 100%; height: auto) took over. Mobile now keeps the stacked order — cover above the text, where there's no horizontal room to spare — with the height capped at 116px so it reads as a logo rather than a hero. The side-thumbnail grid starts at 550px.Thumbnails also switch from
object-fit: covertocontain. Every cover is a centred logo, andcoverwas cropping into them.Cover art normalisation
All twelve covers already shared a 1200x1000 canvas, but the artwork inside ranged from 25% to 48% of it, so VS Code rendered 1.31x the linear size of PyTorch and nearly 2x the area.
Each logo is rescaled to a common optical weight, measured as the geometric mean of its ink bounding box — that treats square icons, tall stacks and wide wordmarks fairly, where fitting everything to a common height would blow a wordmark up. Width and height caps handle the extremes. Ink is measured at alpha >= 128 so drop shadows don't inflate the box (the Python logo's shadow was adding 19% to its measured height), and logos are recentred on the ink rather than the shadow.
scripts/normalize-cover.pykeeps this reproducible. It's idempotent and reads cover paths from post frontmatter, so it can't wander into body screenshots — those are sized by their content and are deliberately untouched. Verified: the twelve changed image files are exactly the twelve covers named in frontmatter.SymPy cover
The black "SymPy" wordmark was near-invisible on the dark theme background — 15% of the artwork's ink below a 2:1 contrast ratio, and it was the part carrying the name.
SymPy publishes no light-on-dark variant and
generate_logos.pyexposes no colour options, so there was nothing to theme-swap. It does publish a no-text variant, produced by hiding theSymPy_textgroup indoc/src/logo/sympy.svg, and their logo guide recommends exactly that here: "The text version should be preferred unless the SymPy name is already present separately" — the post title carries the name. This is that official variant, rendered from upstream and run through the normalise script, not an edited logo. Side benefit: a clean vector render, so it's sharper and drops its baked-in drop shadow.Masthead
PaperMod shrinks
.profile imgwithtransform: scale(0.85)under 768px, leaving the mark undersized above a title that wraps to nearly the full viewport. That scale is undone and the sprite sized explicitly — 153x204 on mobile, 144x192 on desktop.Width and height have to move together here: the visible half is a 3:4 crop window over the 3:2 two-up day/night sprite, so widening alone lets the other half bleed in from the right.
Also fixed
.tag-entryhides its cover, so it was reserving an empty thumbnail column and squeezing tag-page text to ~75% width. It's now excluded from the grid. This predates the branch — it was live on desktop tag pages.Verification
Built and screenshotted at 360 / 430 / 549 / 550 / 700 / 900 / 1024 / 1280 / 1440px, light and dark, across the home page, a post page and a tag page. The sprite crop ratio was checked at each breakpoint, since that's the failure that lets the night brain bleed into the day one.
Desktop is unchanged apart from two improvements: covers are no longer cropped, and the tag-page gutter bug is gone.
Not included
og:imageand are transparent PNGs on a mostly-empty canvas, so shared links render a small logo on whatever the platform composites onto. Pre-existing; a proper fix means real share cards.