Improving navigation bar, landing page and some website styles

[EssamWisam]

In this PR, the following changes have been introduced:

1. Made the side bar share the same font as the remaining of the website (which is more modern) instead of an older font and changed the capitalization of some side bar items for consistency.
2. Improved the style of the search bar to make it look more modern.
3. Improved code highlighting by porting the most recent version of highlight.js

4. Added a horizontal navigation bar as requested in #183
5. Added temporary functionality for maintainers to test out whether the horizontal navigation bar or the side bar is better
   • Note that it follows that I didn't put extensive effort into perfecting the horizontal navigation bar in terms of style
   • If we decide to keep it, that should be easy (will follow up).
   • Likewise, it's also easy to improve the styles of the side bar should it be the chosen one
6. Changed the format of the landing page to implement the proposal mentioned in #183 using a tab UI
   • There is room for improvement in terms of the style which could be considered later.

demo.webm

[EssamWisam]

@ablaom I'm interested in hearing your opinion on which navigation bar is preferable so I could to any needed further refinements to that one and perform deployment steps before we can merge this.

[ablaom]

Great work here. I'm leaning towards the horizontal bar. What are your thoughts?

Maybe @tlienart or @OkonSamuel would like to comment. The question is whether to have tutorial menu as a horizontal with drop-downs or as a side bar with collapsibles, and both versions are trialled in the video.

[EssamWisam]

Great work here. I'm leaning towards the horizontal bar. What are your thoughts?

Both choices have their appeal, so I'm in different between them. The horizontal bar makes more space for the tutorial content but may not generalize well if more tutorial types are expected in the future (it took me some effort to fit in the search bar!); meanwhile, the side bar is what's more common across online tutorials (and their users) but it makes the page feel more busy.

[OkonSamuel]

In this PR, the following changes have been introduced:

1. Made the side bar share the same font as the remaining of the website (which is more modern) instead of an older font and changed the capitalization of some side bar items for consistency.
2. Improved the style of the search bar to make it look more modern.
3. Improved code highlighting by porting the most recent version of highlight.js

4. Added a horizontal navigation bar as requested in Proposal to redesign the landing page #183

5. Added temporary functionality for maintainers to test out whether the horizontal navigation bar or the side bar is better

   • Note that it follows that I didn't put extensive effort into perfecting the horizontal navigation bar in terms of style
   • If we decide to keep it, that should be easy (will follow up).
   • Likewise, it's also easy to improve the styles of the side bar should it be the chosen one

6. Changed the format of the landing page to implement the proposal mentioned in Proposal to redesign the landing page #183 using a tab UI

   • There is room for improvement in terms of the style which could be considered later.

   demo.webm

Thanks @EssamWisam for working on this. This would make our tutorials more appealing. Can't we have both navigation bars. lol. Like the user chooses the option they prefer. If not then the maybe a navigation at the left is great, especially if the user can hide it to create more space.

[EssamWisam]

Can't we have both navigation bars. lol. Like the user chooses the option they prefer.

Yes, of course I can make a small settings icon in the side bar with the option to switch to the other layout and vice versa (and maybe also an option to change the theme) but it will be a little extraordinary as websites commonly don't give users librerty to design the website xD.

If not then the maybe a navigation at the left is great, especially if the user can hide it to create more space.

That indeed recently crossed my mind. It's somewhat straightforward to attach functionality to show and hide the side bar and it does do good towards the cluttering issue.

[ablaom]

@EssamWisam Further to our offline discussions, you go ahead and merge and deploy when ready. No further review needed here.

[EssamWisam]

Alrighty.