Refine edge and content alignment

[iandunn]

There are a couple related discussions in closed threads, so consolidating here.

• Edge alignment inconsistent - Refine padding/margin, override block gap #28 (comment)
• Content column no longer aligned w/ post title - fa25d31#r57269081

goals

• all top-level elements should align on their left/right edges, including local header. only exception is global header.
  • text in post content isn't justified, so the right edge won't appear to align, but the container does
  • body text extra padding to push towards center of viewport. characters per line on desktop can be as high as 121
• global header elements align to edges of screen, with a small gap
• alignwide
  • quotes - same edge padding as top-level elements, text inside has larger left margin (not aligned w/ anything). characters per line on desktop about 48
    • on mobile, the background image is offset so that half of the first mark of off hidden
• alignfull:
  • images and videos - go to viewport edge
  • normal text - background goes to viewport edge, text is aligned w/ other page elements
    • characters per line on desktop is as high as 116
  • verse - background fills content area, text inside has similar padding to edge padding
• in general, mobile is same as above, just with smaller edge padding

@beafialho, @coreymckrill, does all that seem right to you?

@beafialho, what are your thoughts on the characters per line? they seem much higher than the usual guideline

implementation

• It seems to make the most sense to remove all left/right padding/margin from all top level components, and then set a single rule -- ie, body > * {...} -- to apply the new one. the header can overwrite it, or we could do *:not(.site-header) or whatever.
• also move left/right padding from alignfull to only text children (not images/videos/etc)
• and then make all the various changes to implement the details of the mockup.

any thoughts @coreymckrill ?

[coreymckrill]

This is a little hard for me to visualize, but it sounds like what I see in the design mockups.

[beafialho]

@beafialho, what are your thoughts on the characters per line? they seem much higher than the usual guideline

Yes, indeed @iandunn @coreymckrill, I should have asked this before because it is not ideal as screen size increases.

Is it possible to make the body text get bigger as the screen size gets bigger?

For example, while at 1320px screen size we have a post in a Regular Paragraph 16pt , at 2000px can it turn into an Extra Large Paragraph 24pt as a way to facilitate reading? Would it be helpful if I designed what these changes would look like in different breakpoints like I did with the Global Header?

[iandunn]

That sounds like a good idea 👍🏻

I opened an issue to track it, since it can be done separately: #39

Some examples in the Figma would be great, thanks!

[beafialho]

Great, thanks. Added those examples to the Figma file.