Update alignment on Primary & Bannered Campaign Pages

[mmmavis]

Closes #3022 and #3045

Primary page

• full width: https://foundation-mofostaging-pr-3025.herokuapp.com/primary-page/
• full width (with secondary nav): https://foundation-mofostaging-pr-3025.herokuapp.com/en/about/
• narrow width: https://foundation-mofostaging-pr-3025.herokuapp.com/en/narrow-primary-page/
• narrow width (with secondary nav): https://foundation-mofostaging-pr-3025.herokuapp.com/en/narrow-primary-page-with-nav/

Bannered Campaign page

• full width: https://foundation-mofostaging-pr-3025.herokuapp.com/en/campaigns/full-width-bannered-campaign/
• full width (with secondary nav): https://foundation-mofostaging-pr-3025.herokuapp.com/en/campaigns/full-width-bannered-campaign-with-nav/
• narrow width: https://foundation-mofostaging-pr-3025.herokuapp.com/en/campaigns/narrow-bannered-campaign/
• narrow width (with secondary nav): https://foundation-mofostaging-pr-3025.herokuapp.com/en/campaigns/narrow-bannered-campaign-with-nav/

[beccaklam]

Hey @mmmavis the changes look great! Only thing is did we say whether or not we're removing that line we talked about? It looks a bit funny when there's no subnav:

[beccaklam]

Can we also increase the 15px padding on the right side to 24px?

[mmmavis]

@kristinashu ^ regarding the grey line

[kristinashu]

So I think we should keep the 15px on the right to allow for longer line length, I think it's rare that a letter will go right to the right edge.

Yes! Go ahead and remove that mysterious grey line!

[mmmavis]

@beccaklam if it works for you - I'm gonna file a follow-up for removing that grey line as it's a more complicated fix and will affect implementation of other page types as well.

[beccaklam]

@beccaklam if it works for you - I'm gonna file a follow-up for removing that grey line as it's a more complicated fix and will affect implementation of other page types as well.

That works for me!

[mmmavis]

Follow-up ticket filed: #3047

[beccaklam]

Hey @mmmavis so for this PR, is the spacing fixed with your PR 3049? There should be about 24px between the intro paragraph and the menu:

PR:

Design:

[mmmavis]

@beccaklam no this PR is not up-to-date with master (aka with changes from other merged PRs) yet. It turns out this work is more complicated than I expected 'cuz the code is heavily shared between all page types. To avoid confusion, I'm gonna remove PR reviewers first and assign you back once it's ready for review again.

[beccaklam]

@mmmavis ok! 👌

[mmmavis]

@beccaklam This is ready for design review! Phew! I've included fixes for #3045 as well... hopefully I have captured everything.

Once this passes design review I'll assign dev for code review.

[beccaklam]

This all looks amazing!!! 💯 💯 💯 Good to go from design 👍 Awesome job Mavis 🙌

[mmmavis]

@youriwims this is ready for code review! 👀

[youriwims]

lgtm!

[mmmavis]

Thanks @beccaklam @youriwims 🎉 I know this is a big PR to review!