Refactor positioning and spacing of page-header component

[slkennedy]

Currently the height of the page-header is being set by margin from the header's sub-elements. Rework this to come from padding on the page-header and come up with a way to shift the sub-elements to the top or bottom when necessary.

[townivan]

As I was playing around with this, I'm starting to think that deriving the page-header height from one of it's children (namely the logo) isn't a bad thing.

Here is a pen with that concept working to keep vertical alignment balanced for mobile and desktop: https://codepen.io/townivan/pen/pWOOjL?editors=1111

[townivan]

I've attempted some styling in this similar thinking to Willow imported from a precompiled css source: https://codepen.io/townivan/pen/YrRzEJ

[townivan]

Here is some override css that fixes things in my project:
`
// header override testing
.willow-page-header {
align-items: center; // vert align branding and menu toggle (desktop nav links will be align-self:flex-end)
padding-top: 0; // top 24 not needed because top spacing will come from .willow-page-header__branding
}
.willow-page-header__branding {
padding: 24px 0; // let the horizontal padding come from willow-page-header BUT the vertical spacing (padding DOES come from here)
margin-top:0;
margin-bottom:0;
}
.willow-page-header__branding:first-child {
margin-top: 0;
}

.willow-page-header__content-controls {
padding: 0; // the vertical parts are not needed because the flex align center will handle this based on the height created from the taller branding
}
@media screen and (min-width: 828px){
.willow-page-header__content {
align-self: flex-end; // align desktop nav items to the bottom of the header
}
}
`

[slkennedy]

For testing purposes:

• with primary navigation
• without primary navigation
• with menu/close icon (with and without text)
• without menu/close icon (text only)

[slkennedy]

@bollinghball pointed out that the spacing of the menu/close button is off when you add the icon in.

[slkennedy]

Note for the future: to fix the menu/close button spacing add align-items: center to the .willow-page-header__controls element.