docs: Moving to use Announcement Banner for the Support Ukraine Initi…

…ative (#12537)
jestjs · Mar 2, 2022 · 3f3aa80 · 3f3aa80
1 parent 3fbf2da
commit 3f3aa80
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 16 deletions.
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -145,6 +145,14 @@ module.exports = {
     ],
   ],
   themeConfig: {
+    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: '#20232a',
+      textColor: '#fff',
+      isCloseable: false,
+    },
     navbar: {
       title: 'Jest',
       items: [

diff --git a/website/src/pages/index.js b/website/src/pages/index.js
@@ -301,15 +301,6 @@ class Index extends React.Component {
             {siteConfig.title} {siteConfig.titleDelimiter} {siteConfig.tagline}
           </title>
         </Head>
-        <Container background="light">
-          <div className={styles.banner}>
-            Support Ukraine 🇺🇦{' '}
-            <Link to="https://opensource.facebook.com/support-ukraine">
-              Help Provide Humanitarian Aid to Ukraine
-            </Link>
-            .
-          </div>
-        </Container>
         <HeroInteractive config={siteConfig} />
         <div className="mainContainerV1" style={{padding: 0}}>
           <Container

diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
@@ -5,15 +5,45 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/* Social Banner */
+/* Announcement banner */
 
-.banner {
-  font-weight: bold;
+:root {
+  --docusaurus-announcement-bar-height: auto !important;
+}
+
+div[class^='announcementBar'][role='banner'] {
+  border-bottom-color: var(--deepdark);
+}
+
+div[class^='announcementBarContent'] {
+  line-height: 40px;
   font-size: 20px;
-  padding: 20px;
-  max-width: 768px;
-  margin: 0 auto;
-  text-align: center;
+  font-weight: bold;
+  padding: 8px 30px;
+}
+
+div[class^='announcementBarContent'] a {
+  text-decoration: underline;
+  display: inline-block;
+  color: var(--ifm-color-primary) !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;
+  }
 }
 
 /* Twitter Follow Button */