Refactor footer logo default maxWidth + Use Meta Open-Source Logo

[slorber]

Fixes https://github.com/facebookincubator/infima/issues/260

By default, the footer logo has a CSS max-width way too small, and it doesn't work great for some logos, requiring CSS override.

Now we use min(30rem, 90vw):

• ensure large logos display relatively large on desktop
• ensure logos with a large explicit width (often the case, cf Docusaurus doc https://docusaurus.io/docs/api/themes/configuration#footer-1) never overflow the viewport width

Note: min() is not supported by a limited set of users (Chinese? cf https://github.com/facebookincubator/infima/issues/260#issuecomment-1158772756): not a big deal in this specific case and support should keep increasing. At worst the footer logo would be too large.

---

Also related to Docusaurus issue https://github.com/facebook/docusaurus/pull/7643, now permitting to provide CSS overrides more conveniently in case 480px is not a good value.

---

Also reverting to Node 16.14 to fix broken Netlify deployment after https://github.com/facebookincubator/infima/pull/261)

[github-actions[bot]]

Size Change: +588 B (0%)

Total Size: 554 kB

Filename	Size	Change
./packages/core/dist/css/default-dark/default-dark-rtl.css	80 kB	+76 B (0%)
./packages/core/dist/css/default-dark/default-dark-rtl.min.css	56.9 kB	+71 B (0%)
./packages/core/dist/css/default-dark/default-dark.css	80 kB	+76 B (0%)
./packages/core/dist/css/default-dark/default-dark.min.css	56.9 kB	+71 B (0%)
./packages/core/dist/css/default/default-rtl.css	77.9 kB	+76 B (0%)
./packages/core/dist/css/default/default-rtl.min.css	55.8 kB	+71 B (0%)
./packages/core/dist/css/default/default.css	77.9 kB	+76 B (0%)
./packages/core/dist/css/default/default.min.css	55.7 kB	+71 B (0%)

ℹ️ View Unchanged

| Filename | Size | | :--- | :---: | | `./packages/core/dist/js/alerts.js` | 409 B | | `./packages/core/dist/js/alerts.min.js` | 409 B | | `./packages/core/dist/js/button-groups.js` | 267 B | | `./packages/core/dist/js/button-groups.min.js` | 267 B | | `./packages/core/dist/js/dropdowns.js` | 1.01 kB | | `./packages/core/dist/js/dropdowns.min.js` | 1.01 kB | | `./packages/core/dist/js/menu.js` | 2.4 kB | | `./packages/core/dist/js/menu.min.js` | 2.4 kB | | `./packages/core/dist/js/navbar.js` | 1.08 kB | | `./packages/core/dist/js/navbar.min.js` | 1.08 kB | | `./packages/core/dist/js/pills.js` | 270 B | | `./packages/core/dist/js/pills.min.js` | 270 B | | `./packages/core/dist/js/radio-behavior.js` | 705 B | | `./packages/core/dist/js/radio-behavior.min.js` | 705 B | | `./packages/core/dist/js/tabs.js` | 267 B | | `./packages/core/dist/js/tabs.min.js` | 267 B |

_{compressed-size-action}

[github-actions[bot]]

Dist CSS Diff

diff --git a/packages/core/dist/css/default/default.css b/packages/core/dist-branch/css/default/default.css
index 52da5d8..95fc6e3 100644
--- a/packages/core/dist/css/default/default.css
+++ b/packages/core/dist-branch/css/default/default.css
@@ -314,6 +314,7 @@
   --ifm-footer-padding-horizontal: calc(var(--ifm-spacing-horizontal) * 2);
   --ifm-footer-padding-vertical: calc(var(--ifm-spacing-vertical) * 2);
   --ifm-footer-title-color: inherit;
+  --ifm-footer-logo-max-width: min(30rem, 90vw);
   --ifm-hero-background-color: var(--ifm-background-surface-color);
   --ifm-hero-text-color: var(--ifm-color-emphasis-800);
   --ifm-menu-color: var(--ifm-color-emphasis-700);
@@ -2207,7 +2208,7 @@ hr {

 .footer__logo {
     margin-top: 1rem;
-    max-width: 10rem;
+    max-width: var(--ifm-footer-logo-max-width);
   }

 .footer__title {

[netlify[bot]]

✅ Deploy Preview for infima ready!

Name	Link
🔨 Latest commit	08edd57b3894e6eb8e1940bb0a12aa2d0c8f6f85
🔍 Latest deploy log	https://app.netlify.com/sites/infima/deploys/62b422ceeff3b500096c53da
😎 Deploy Preview	https://deploy-preview-262--infima.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.