Update homepage header - all meetings are remote

[daniellex0]

Overview

We need to update the homepage header to notify visitors that all of our meetings are remote

Action Items

• Review design for the header on 'Home Page (WIP)' file on Figma (section on left, in blue rectangle)
  • For help with Figma functionality / a quick tutorial, reach out to @daniellex0 on this issue (or on slack)
• Edit the header text to match the new version on Figma
• Edit the margins between the text to match the new version on Figma
• Add pink line under 'remote' to match the new version on Figma
  • Research how to add the pink line (regular text styling underline most likely won't have the same look)
• Adjust the placement of the header splash image (move higher up) to match the new version on Figma (the goal is to make sure the 'Getting Started' button shows up fully on the screen when users visit the site- without needing to scroll down)
• Project filters on homepage: Remove all of the location filter options except for 'Remote' (see explanation on Figma)

Resources/Instructions

Homepage
New header design on Figma 'Home Page (WIP)' file (section on left, in blue rectangle)

New header designs (click arrow)

Before (current header):

After (new header):

So that you know what to look for in Figma- this is what the header update section in the blue rectangle looks like in the Figma homepage file:

[Lol-Whut]

Progress: Getting acquainted with the issue
Blockers: Nothing so far, just timing
Availability: Evenings
ETA: Middle/end of the week
Pictures: N/A

[Lol-Whut]

Progress:

• removed "margin-bottom: 0" specification from h1 tag to add space below the header as per Figma
• changed h1 font-weight to bold as per Figma
• edited text to update wording
• added second p tag to create spacing between pieces of text
• added a span tag around word "remote" with class "underlined"; gave this class a border-bottom property with styling to match underline on Figma. (Note, this is currently a class in the _hero.css file, but we could in theory try to move it to a css file with a wider scope if we wanted to use the new "underlined" class elsewhere?

Blockers:

• I'd love some input on how to remove the non-remote locations from the "Locations" drop-down menu, as it seems like there are two potential methods. The crux of the matter: the locations are generated from the cumulation of each project's markdown file, and I'm not sure if we want to preserve the projects' non-Covid-era locations in those files. I can either go into each individual project file and remove/replace any non-Remote locations, or I can edit the JavaScript that generates the drop-down filter menu so that only the "Remote" location shows up on screen. I think it makes sense to change the markdown files rather than mess with logic since it sounds like some HfLA projects will remain remote permanently post Covid; still, figured I'd check before getting trigger happy on a ton of files!

Availability: Most evenings, pretty flexible this week!
ETA: Can finish this today or tomorrow, depending on input; I don't think this task will take too long after that.
Pictures:

[Lol-Whut]

Will comment out non-remote locations in the .md files so they will be preserved but not show up

[daniellex0]

@Lol-Whut That works, thanks Lara!

[ExperimentsInHonesty]

@Lol-Whut @daniellex0 @akibrhast @jbubar There is potentially an effect if you comment out the locations, which is that on the events page the projects on the lower part of the page are either hard coded or possibly being delivered via that that location information. So the commenting out the currently unused locations solution is not one I would recommend.

[erikaBell]

Just reviewed Lara's pull request, the changes she made does not break the events page 'our locations'.

Events Pg