fix styles for hub pages and article page

[marcochavezf]

cc @roryabraham @michelle-thompson

Details

This PR includes mainly style changes for the Help site to mimic the mockups design from the design doc.

Some other minor changes included in this PR:

• Update outdated links from comments in the README.md file
• Rename files from the _includes folder (changed -navigation-tree suffix to -lhn)
• Add functionality to toggle the menu in small views (mobile web)

Fixed Issues

$ https://github.com/Expensify/Expensify/issues/216742

Tests

0. (you need ruby and bundler installed to do this, more info here)

1. Run:

   cd docs
   bundle install
   bundle exec jekyll serve

2. Make sure the site's styles load and that all the colors look correct.

Additionally add more content like Stage titles, Groups of cards and card buttons to one of the hub pages (i.e. request-money and Stage title anchors and Article links to the respective LHN section (i.e. request-money-lhn).

Screenshots

Hub page

Desktop (updated):

Mobile (updated):

Article page

Desktop:

Mobile:

[MariaHCD]

Looks great! Just a few comments.

[michelle-thompson]

The icon is the wrong color - it should be the same as the icons in the LHN. Additionally, the border is too dark - let's change it to #ECECEC

[marcochavezf]

The icon is the wrong color - it should be the same as the icons in the LHN. Additionally, the border is too dark - let's change it to #ECECEC

Good catch @michelle-thompson! I updated the styles for the card in the hub pages and also updated the screenshots in the PR description.

@MariaHCD I addressed the requested changes, thanks for the review! 🙇🏽 The PR is ready to be reviewed again.

[michelle-thompson]

One more comment, I noticed the hyperlinks are medium weight. Links should be regular weight (unless the body text is bolded, in which case it should follow the body text)

[marcochavezf]

One more comment, I noticed the hyperlinks are medium weight. Links should be regular weight (unless the body text is bolded, in which case it should follow the body text)

@michelle-thompson Ah yes, it was a bolded hyperlink, I think I accidentally added the bold property in the article .md content. This how the link looks like without the bold property:

[michelle-thompson]

Looks great, thank you!

[ctkochan22]

Reviewing the other PR: #9869 (comment)

It looks like we are good right? It seems @michelle-thompson gave it the thumbs up.

[OSBotify]

🚀 Deployed to production by @chiragsalian in version: 1.1.84-13 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[allroundexperts]

This caused #25646 down the road.