search

cal-itp / benefits

Transit benefits enrollment, minus the paperwork.
https://docs.calitp.org/benefits
GNU Affero General Public License v3.0
27 stars 9 forks source link

Bug: Home Page/Agency Home Page - Title/button vertical spacing #1637

Closed machikoyasuda closed 1 year ago

machikoyasuda commented 1 year ago

Currently, on Desktop's Home Page/Agency Index page, the whole container with the title, subtitle and button are vertically-centered, like this:

image

However, the text needs to start a bit lower.

machikoyasuda commented 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":

image image
machikoyasuda commented 1 year ago

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.

srhhnry commented 1 year ago

"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.

srhhnry commented 1 year ago

Just saw your new comment on 72px. Sounds fine.

machikoyasuda commented 1 year ago

@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:

  1. Widen the container to allow the line to get longer,
  2. Manually hard-code a line break after when
image
  1. I can manually add another line break after on, which achieves the Figma line breaks at this exact browser width. image

    But at narrower widths, it'll break into 4 lines:

    image

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.

srhhnry commented 1 year ago

Yup, that totally makes sense and I think the more rectangular space for text is a nice solution.