Design Question: Unify horizontal padding for every page

[goplayoutside3]

How to unify horizontal alignment via padding in each page layout?

Motivation

This is a design-focused discussion. While developing and reviewing the newly designed About Zooniverse Pages, @seanmiller26 and I are focusing on mobile-responsive design, too. I think it’d be helpful to define a consistent horizontal padding for all FEM pages, for both desktop-width and mobile-width designs.

For example, on a /projects Classify page there are four sections: ZooHeader, ProjectHeader, main, and ZooFooter.

On a desktop browser, the horizontal padding is:
- ZooHeader: 30px
- ProjectHeader: 30px
- main: 20px
- ZooFooter: 50px

On a mobile browser, the horizontal padding is:
- ZooHeader: 30px padding left, 15px padding right (asymmetrical)
- ProjectHeader: 20px
- main: 15px
- ZooFooter: 25px

Because of the inconsistency as you scroll down the page, the left and right edge of content is not aligned. This also makes it difficult to build new pages like the About Zooniverse pages which have an AboutHeader component and main content sandwiched between the ZooHeader and ZooFooter.

Here's an example of the padding mentioned marked by red arrows:

Describe the solution you'd like

It would be helpful during development of new FEM pages to have a clearly defined horizontal padding for the general FEM layout. This includes the sections mentioned above: header, main, and footer. Once defined, we can better utilize the Grommet theme padding definitions.

I also think it's fine if an element on the edge of the screen is intentionally designed to be not aligned with elements above and below it. At this point though, I don't think there's a unified definition of horizontal padding for FEM as a whole.

Please feel free to expand this discussion to include vertical padding of headers, main, footer, and the vertical padding in between elements on a page, too.

[goplayoutside3]

Additional Note:

For clarity around the "main" content of a page, I'm referring to cases where the main content touches the left and right edge of a screen. Horizontal padding isn't needed when a screen's width is larger than the max-width-constrained content. For instance, the main content of the About Pages has a max-width desktop design:

But on a tablet or mobile device, the horizontal padding of the headers is inconsistent with the main content:

[seanmiller26]

Thanks for bringing this to our attention. I couldn't find any supporting documentation on previous margin and padding decisions, so I'll take this opportunity to unify everything.

Desktop sizing:

• ZooHeader: 30px
• ProjectHeader: 30px
• Main: 20px
  In the future this may change to be a consistent 30px. Right now it is adjusted to allow space for the Project Title component and Dark Theme toggle on the outer margins. These may be removed.
• ZooFooter: 30px

Mobile sizing:

• ZooHeader: 20px
• ProjectHeader: 20px
• main: 20px
• ZooFooter: 20px

[goplayoutside3]

This is super helpful! Noting a couple things here that apply to near-future dev work:

• 30px desktop and 20px mobile is easily achievable with Grommet's medium setting for padding. It auto-changes from 30px to 20px when a viewport is in the "small" breakpoint
• Move DarkMode toggle into ZooHeader #5571 is open and describes where the dark theme toggle should move to in the ZooHeader. This will be completed very soonish, and then "main" of all project pages can follow the padding standard described above
• Figma designs for FEM pages have been updated to accurately reflect standardized horizontal padding
• I'll create a couple of new Issues for the ZooHeader, ProjectHeader, and ZooFooter and bring those into alignment with the padding standard

[goplayoutside3]

Completed by: #5813