From 70eab186aacd6dbafc669c160855e543a9077593 Mon Sep 17 00:00:00 2001
From: dmitryvinn <dmitryvinn@gmail.com>
Date: Fri, 4 Mar 2022 09:20:27 -0800
Subject: [PATCH] docs: add social banner in support of Ukraine (#3496)

Summary:
Our mission at [Meta Open Source](https://opensource.facebook.com/) is to empower communities through open source, and we believe that it means building a welcoming and safe environment for all. As a part of this work, we are adding this banner in support for Ukraine during this crisis.

![image](https://user-images.githubusercontent.com/12485205/156651121-b1479b59-a4e7-4a5c-b8d5-4265aa0aea7a.png)

Pull Request resolved: https://github.com/facebook/flipper/pull/3496

Test Plan:
Imported from GitHub, without a `Test Plan:` line.

**Static Docs Preview: staticdocs**
|[Full Site](https://our.intern.facebook.com/intern/staticdocs/eph/D34622802/V3/staticdocs/)|

|**Modified Pages**|

**Static Docs Preview: flipper**
|[Full Site](https://our.intern.facebook.com/intern/staticdocs/eph/D34622802/V3/flipper/)|

|**Modified Pages**|

Reviewed By: mweststrate

Differential Revision: D34622802

Pulled By: passy

fbshipit-source-id: a18c0de24a6a6c2311aef9a046fe65d917ce6f9d
---
 website/docusaurus.config.js  |  7 ++++---
 website/static/css/custom.css | 37 +++++++++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index b858dd165..d195edb99 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -31,9 +31,10 @@ const siteConfig = {
     announcementBar: {
       id: 'support_ukraine',
       content:
-        'Support Ukraine 🇺🇦 <a target="_blank" rel="noopener noreferrer" href="https://opensource.facebook.com/support-ukraine"> Help Provide Humanitarian Aid to Ukraine</a>.',
-      backgroundColor: '#fff',
-      textColor: 'rgb(28, 30, 33)',
+        'Support Ukraine 🇺🇦 <a target="_blank" rel="noopener noreferrer" href="https://opensource.fb.com/support-ukraine"> Help Provide Humanitarian Aid to Ukraine</a>.',
+      backgroundColor: '#20232a',
+      textColor: '#fff',
+      isCloseable: false,
     },
     navbar: {
       title: fbContent({
diff --git a/website/static/css/custom.css b/website/static/css/custom.css
index 2f9de55f7..f63e83cf7 100644
--- a/website/static/css/custom.css
+++ b/website/static/css/custom.css
@@ -534,3 +534,40 @@ border: 1px solid black;
 .ios-support-matrix td {
   border: 1px solid black;
 }
+
+/* Announcement banner */
+
+:root {
+  --docusaurus-announcement-bar-height: auto !important;
+}
+
+div[class^="announcementBarContent"] {
+  line-height: 40px;
+  font-size: 20px;
+  font-weight: bold;
+  padding: 8px 30px;
+}
+
+div[class^="announcementBarContent"] a {
+  text-decoration: underline;
+  display: inline-block;
+  color: var(--ifm-color-primary-lightest) !important;
+}
+
+div[class^="announcementBarContent"] a:hover {
+  color: var(--brand) !important;
+}
+
+@media only screen and (max-width: 768px) {
+  .announcement {
+    font-size: 18px;
+  }
+}
+
+@media only screen and (max-width: 500px) {
+  .announcement {
+    font-size: 15px;
+    line-height: 22px;
+    padding: 6px 30px;
+  }
+}