Donate page iteration 1: new 2x2 layout, larger title, more amounts, cleaner buttons - #4
Merged
Merged
Conversation
Layout
- Replace stacked hero + form sections with a single 2x2 grid:
top row: title (left) + photo (right)
bottom row: encouragement paragraph (left) + form (right)
- Collapses to single column below 820px
Title and type
- Bump hero h1 to clamp(44, 6vw, 68)
- Tighten the page's type scale to ~5 distinct sizes; document the
scale in a comment block at the top of the donate CSS
Amounts
- Add £50 and £100 suggested amounts (now £3/5/10/25/50/100/Other)
- Switch grid from 5-up to 3-up, with Other spanning the full row
- Increase amount-button font weight and add accent-bg hover state
Buttons
- Drop the sub-labels ('Lower fees · Helps us plan ahead',
'Apple Pay & Google Pay supported') — single-line CTAs
- Move the Apple/Google Pay note into the form footnote
Toggle
- Active frequency pill now uses accent colour for the label
Photo
- New donate-intro-photo block using <img> + object-fit: cover with
object-position: 50% 65% to crop the top ~10% of the frame
- Uses an existing community photo as a stand-in; user will replace
with their chosen photo at site/images/donate/community.jpg
Copy
- Remove 'via Manifund' from US-donors card (relationship not
confirmed)
Username-Matilda
pushed a commit
that referenced
this pull request
May 25, 2026
Claude/add shop link 1 qn1 k
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.
What changed
Iteration on the donate page based on user feedback. Same scope: HTML + CSS only, no Stripe wiring yet.
Layout
Type
clamp(44, 6vw, 68).Amounts
Buttons
Toggle
Other
Photo
Temporary stand-in: using
images/letter-writing/G2DG8xBXMAABxmR.jpeg(an existing community photo). When the user uploads their preferred photo:site/images/donate/community.jpg<img src="…">insite/donate/index.htmlobject-positionin.donate-intro-photo imgif the crop isn't sitting rightMerge & deploy
After merging, manually trigger the Deploy workflow (the auto-deploy fix in PR #3 is still open — feel free to merge that too if you want future merges to deploy automatically).
Generated by Claude Code