Create and apply header component

[arghmatey]

Fixes #1898

What changes did you make and why did you make them ?

• Created and applied class names for a specific header layout that is used across eight pages (About, Communities of Practice, Credits, Join Us, Programs Areas, Project Meetings, Sitemap, Toolkit).

• Consolidated and refactored css code related to the header section into _containers.scss

• Removed any unused css related to the old header. There was a lot of repetitive code spread across different files, so this was a pretty necessary clean up. Tested to make sure no other pages would be affected before removing code.

• "About Us" link in header section needed a new class and css to be moved since it is different styling.

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Screenshots provided are full page views

Desktop full length pages before changes were applied

About Us Before
Communities of Practice Before
Credits Before
Join Us Before
Program Areas Before
Project Team Meetings Before
Sitemap Before
Toolkit Before

Desktop full length pages after changes were applied

About Us Before After
Communities of Practice After
Credits After
Join Us After
Program Areas After
Project Team Meetings After
Sitemap After
Toolkit After

Tablet views after changes were applies

Using Toolkit and Project Team Meetings pages as examples
Toolkit Tablet After
Project Team Meetings After

Mobile views after changes were applies

Using Toolkit and Project Team Meetings pages as examples
Toolkit Mobile After
Project Team Meetings Mobile After

[github-actions]

From your project repository, check out a new branch and test the changes.

git checkout -b arghmatey-header-container-component gh-pages
git pull https://github.com/arghmatey/website.git header-container-component

[blakes24]

Looks good to me. It removes a lot of duplication, and the headers looked great across all screen sizes when I tested it out.

[Aveline-art]

I want to say that this is awesome and amazing work, @arghmatey ! There is so much attention to detail on this when comparing the website as it currently is, to our figma , to your changes. A++++ work! I will gladly merge this in a heartbeat, but I want to know your thoughts on some of the spacing:

Comparing it to the Figma designs, some of the margins/padding between the titles and the nav bar is off (most noticeable in the program area and team meetings page). Would you want to change them as part of this PR? Or do you feel it is better to make new issues out of them? I am fine with either, as the spacing is not too off.

[arghmatey]

Thank you, @Aveline-art!

Nice catch on the spacing. Looks like right now the Credits page is off of the Figma file as well. I'll take a deep dive into it tomorrow morning to see what would be the best solution.

[arghmatey]

@Aveline-art This is ready for a final review now. Please let me know if you find anything else. Here's what I did:

• Found the text side of the header should be justified to center of container. This causes the spacing on program areas, project meetings, and credits page because the height of the text is smaller than the image height.
• I also had to change padding/margin dimensions on the second p tag since the bottom margin was adding to the spacing issues.

The only issue we are left with is the Sitemap page. Figma shows it should not be justified center like the other pages, but close to the navbar instead. I figure since it is one page against many, a new issue can be created to put it back in the right place.

Justified Center Screenshots

Sitemap Now & Figma

[Aveline-art]

This looks awesome @arghmatey ! There is a merge conflict, but once that is dealt with, I can feel free to merge this.

[arghmatey]

Thanks, @Aveline-art. Merge conflict resolved!

[Aveline-art]

Looks gorgeous! Thank you for the hard work!