CSS revamp - Improve typography and overall styling

[yangshun]

Motivation

I removed a lot of Docusaurus base CSS and use styles from GitHub's markdown styles. Also took the chance to remove some unreferenced CSS and cleaned up some implementations. The site should look nicer now (IMO) 😄

Some changes

• Improved typography - paddings and margins are more consistent now
• Removed unnecessary styling in GridBlock
• Footer is now darker shade of black for better contrast
• Change background color to #fff
• Headers are now black by default (from primaryColor) and have bolder font weight
• Blockquotes are changed to yellow (from pink)
• Left sidebar is sticky by default on supported browsers

Have you read the Contributing Guidelines on pull requests?

Yes.

Test Plan

Load preview site on laptop and mobile and click on all pages. I did a pretty thorough comparison of the live site and the development site.

Related PRs

NA.

[docusaurus-bot]

Deploy preview for docusaurus-preview ready!

Built with commit 1883481

https://deploy-preview-757--docusaurus-preview.netlify.com

[JoelMarcey]

Whoa! Looking forward to the Netlify preview.

[endiliey]

I got the chance to use a public pc. I have few comments.

1. Look at the headerNav. On the homepage it's kindof padded but the docs headNav is not. Is this intended ?

Before

After

2. I kindof like the previous header color. The color depends on the siteConfig.primaryColor
It looks like it's now set to bold & black. WDYT ?

Our docs

Before

After

[yangshun]

@endiliey Observant you are!

1. Look at the headerNav. On the homepage it's kindof padded but the docs headNav is not. Is this intended?

Yes. It depends on whether the body is the wide width. The header contents width will match the body.

2. I kindof like the previous header color. The color depends on the siteConfig.primaryColor
   It looks like it's now set to bold & black. WDYT ?

IMO the current version is more professional. Many documentation sites have black headings. I referenced gatsbyjs.org, graphql.org, reactjs.org, redux.js.org (Gitbook), vuepress.vuejs.org, docsify.js.org, etc and all of them use black/gray for heading color. If users want they can still override the colors themselves but I think it's better for them to not have a colored heading.

[endiliey]

I got the chance to test this out on my test site. Thanks to TravisCI it's as simple as editing package.json. Looks good :smile

[yangshun]

@JoelMarcey Can this PR be merged? 😄

[endiliey]

Let's merge. holding my hand

[JoelMarcey]

I want to gauge your opinion on something....

What do you think of gating this change behind a temporary siteConfig option for our forthcoming 1.3 release in the next couple of days (say newUI: true) so that people can opt-in for now? Then when we release 2.0, we can remove the option and everyone has to go to the new CSS.

[JoelMarcey]

I just chatted with @yangshun.

I am going to let @yangshun have the honors of merging this change. He is planning to do a bit more testing. But I am good with merging this when he feels ready.

[JoelMarcey]

@yangshun Hey! What are we thinking with this PR? We should probably cut a release with the fixes we made in the next couple of days. Did we want to add this in? Or cut another release shortly after with it?

[yangshun]

Let's leave this out for the next release. I'm still working on stability and testing.

[ahmadalfy]

Ping me whenever you need ✋

[yangshun]

I think I'm good with this version. I made the sidebar sticky by default, which is the version that Babel and Reason website is doing. I think this should be the default for sites. Please have a go at it! Would be good to help test out on other browsers as well, especially IE. @endiliey @JoelMarcey @ahmadalfy

Netlify link - https://deploy-preview-757--docusaurus-preview.netlify.com/

[JoelMarcey]

@yangshun New 1.2.1 release out and tagged.

I am thinking, when this is merged, it automatically gets us to 1.3 (probably not 2.0, but close). I think for 1.3, we should also look at removing one or both of the lock files too.

[JoelMarcey]

@yangshun 🎉

This will be part of a 1.3 release. We will need to document this well in the changelog and probably tweet about it separately too.

[yangshun]

@JoelMarcey I'll be releasing 1.3 and writing up the changes.