fix: render people headshots at consistent 220x220 with float clear#55
Merged
Conversation
Two issues on /about/people/ after #54: 1. Sizes were inconsistent because the rule set width but not height — Steven's 800x1011 portrait source rendered 220x278, Ian's 800x800 square rendered 220x220. 2. On the listing page Ian's float-right image landed beside Steven's bio because nothing cleared the previous float. Fix: pin a 220x220 square frame on the .person-headshot class and use object-fit: cover with object-position: center 20% so both faces stay in frame regardless of source aspect ratio. Add clear: right so each new headshot starts below the previous one. Mobile rule keeps the same 220x220 square and centers it above the bio. [AI-assisted - Claude]
sanity
added a commit
that referenced
this pull request
May 27, 2026
After #55 each bio's float-right image bled past the next h2 because the listing template emitted h2 and content as bare siblings — Steven's tall photo extended past his own paragraph and Ian's image with clear:right floated past the entire content area, ending up next to the footer instead of beside Ian's bio. Wrap each child page in <section class="child-entry"> in list.html (the actual template used for section pages — single.html was a red herring) and set display: flow-root so floats are contained per bio. Shrink the headshot to 160x160 (180x180 on mobile) so it fits next to short summary text. [AI-assisted - Claude]
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.
Two issues on `/about/people/` after #54:
Fix: pin a 220×220 square frame on `.person-headshot` and use `object-fit: cover; object-position: center 20%` so both faces stay in frame. Add `clear: right` so each new headshot starts below the previous. Mobile rule keeps the same 220×220 centered above the bio.
Verified at 375 / 600 / 768 / 1024 / 1280 / 1600 px on a local Hugo build.
[AI-assisted - Claude]