Closed machikoyasuda closed 1 year ago
So question for @srhhnry: Should the margin-top be set by percentage (like 60% page height, for example) or a set pixel? Or we could do a mix like "Center the whole container vertically, and then add a cusion of an extra 16px, 32px, 48px (or preferably a margin that is divisible by 4 or 8).
Here's how it looks with "vertically centered plus 64px total padding and margin top":
Gonna go with 72px + centered, to match Figma as close as possible. The other visual factor is how close the 2nd line of the header gets to the contactless symbol.
"vertically centered plus 64px total padding and margin top" looks great--the extra padding reduces the block-y feel of the previous iteration (more rectangular, less square). The headline also reads more nicely. We still have that line length issue (e.g. on Figma the second line is the longest; this is to create phrases).....buuuuuuut I think this more rectangular spacing is a fine solution and I'm good with this approach.
Just saw your new comment on 72px. Sounds fine.
@srhhnry Re: line-length issue for any page - We can't really change that. Plus it wouldn't really work with Spanish translation. If I added a forced, hard-coded line-break, it would then create 4-line headlines at narrower widths. Plus it's.. not even possible to render what's on Figma to the browser at most widths. This is what happens when I:
when
on
, which achieves the Figma line breaks at this exact browser width.
But at narrower widths, it'll break into 4 lines:
If this was calitp.org with only 1 language, I'd be more willing to add and test hard-coded line-break hacks, but with this site, we can't really do it.
Yup, that totally makes sense and I think the more rectangular space for text is a nice solution.
Currently, on Desktop's Home Page/Agency Index page, the whole container with the title, subtitle and button are vertically-centered, like this:
However, the text needs to start a bit lower.