docs(website): bump announcement bar + include Twitter link + refactor site colors

[slorber]

Motivation

Add a link to Twitter account in the announcement bar.

I guess it can make sense to bump the version from time to time too to ensure that people subscribe for updates and "thank" Docusaurus.

[netlify]

✔️ [V2]

🔨 Explore the source changes: dc5e3cb

🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/611665a066b21f0008209d34

😎 Browse the preview: https://deploy-preview-5351--docusaurus-2.netlify.app

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	73
🟢 Accessibility	98
🟢 Best practices	100
🟢 SEO	100
🟢 PWA	95

Lighthouse ran on https://deploy-preview-5351--docusaurus-2.netlify.app/

[github-actions]

Size Change: +9.23 kB (+1%)

Total Size: 803 kB

Filename	Size	Change
website/build/assets/css/styles.********.css	93.9 kB	+792 B (+1%)
website/build/assets/js/main.********.js	405 kB	+1.05 kB (0%)
website/build/blog/2017/12/14/introducing-docusaurus/index.html	65.3 kB	+1.05 kB (+2%)
website/build/blog/index.html	34.2 kB	+1.05 kB (+3%)
website/build/docs/index.html	43 kB	+1.05 kB (+3%)
website/build/docs/installation/index.html	50.6 kB	+1.05 kB (+2%)
website/build/index.html	29.8 kB	+1.05 kB (+4%)
website/build/tests/docs/index.html	23.6 kB	+1.05 kB (+5%)	🔍
website/build/tests/docs/standalone/index.html	21.6 kB	+1.05 kB (+5%)	🔍

ℹ️ View Unchanged

Filename	Size
website/.docusaurus/globalData.json	36.2 kB

_{compressed-size-action}

[lex111]

Maybe set some fancy background to draw more attention to the announcement bar? Something like that below?

[slorber]

Thanks @lex111 , applied your suggestion but lighter for accessibility/contrast

This was also a good pretext to apply some css var + hsl technique that I think we should use more for color palettes.

The site colors remain exactly the same as before, it's just the way to create those colors that are now based on a lightnesss/darkness %, without requiring any preprocessor.

This also helps highlight that we have colors with 2 different saturations. Didn't want to change that in that PR but maybe we should migrate to only one and just modify the lightness.

I'd like to explore this a bit more but I think we could apply that in Infima so that users would only have to provide one base hue/saturation instead of a set of css variables.

See https://blog.maximeheckel.com/posts/the-power-of-composition-with-css-variables/

[lex111]

Seems good, thanks!

This also helps highlight that we have colors with 2 different saturations. Didn't want to change that in that PR but maybe we should migrate to only one and just modify the lightness.

Good idea, it's definitely worth to dig deeper.