feat: add announcement bar

FrancescoXX · Jan 14, 2023 · c2f8542 · c2f8542
1 parent 534c761
commit c2f8542
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 45 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -6,48 +6,48 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  title: 'Free Web3 resources',
-  tagline: 'A list of resources to learn Web3',
-  url: 'https://your-docusaurus-test-site.com',
-  baseUrl: '/',
-  onBrokenLinks: 'throw',
-  onBrokenMarkdownLinks: 'warn',
-  favicon: 'img/favicon.ico',
+  title: "Free Web3 resources",
+  tagline: "A list of resources to learn Web3",
+  url: "https://your-docusaurus-test-site.com",
+  baseUrl: "/",
+  onBrokenLinks: "throw",
+  onBrokenMarkdownLinks: "warn",
+  favicon: "img/favicon.ico",
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
-  organizationName: 'facebook', // Usually your GitHub org/user name.
-  projectName: 'docusaurus', // Usually your repo name.
+  organizationName: "facebook", // Usually your GitHub org/user name.
+  projectName: "docusaurus", // Usually your repo name.
 
   // Even if you don't use internalization, you can use this field to set useful
   // metadata like html lang. For example, if your site is Chinese, you may want
   // to replace "en" with "zh-Hans".
   i18n: {
-    defaultLocale: 'en',
-    locales: ['en'],
+    defaultLocale: "en",
+    locales: ["en"],
   },
 
   presets: [
     [
-      'classic',
+      "classic",
       /** @type {import('@docusaurus/preset-classic').Options} */
       ({
         docs: {
-          sidebarPath: require.resolve('./sidebars.js'),
+          sidebarPath: require.resolve("./sidebars.js"),
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
           editUrl:
-            'https://github.com/FrancescoXX/free-Web3-resources/edit/main',
+            "https://github.com/FrancescoXX/free-Web3-resources/edit/main",
         },
         blog: {
           showReadingTime: true,
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
           editUrl:
-            'https://github.com/FrancescoXX/free-Web3-resources/edit/main',
+            "https://github.com/FrancescoXX/free-Web3-resources/edit/main",
         },
         theme: {
-          customCss: require.resolve('./src/css/custom.css'),
+          customCss: require.resolve("./src/css/custom.css"),
         },
       }),
     ],
@@ -57,62 +57,70 @@ const config = {
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
       navbar: {
-        title: 'Free Web3 Resources',
+        title: "Free Web3 Resources",
         logo: {
-          alt: 'Free Web3 resources',
-          src: 'img/logo.png',
+          alt: "Free Web3 resources",
+          src: "img/logo.png",
         },
         items: [
           {
-            type: 'doc',
-            docId: 'intro',
-            position: 'left',
-            label: 'Resources',
+            type: "doc",
+            docId: "intro",
+            position: "left",
+            label: "Resources",
           },
           {
-            href: 'https://github.com/FrancescoXX/free-Web3-resources',
-            label: 'GitHub',
-            position: 'right',
+            href: "https://github.com/FrancescoXX/free-Web3-resources",
+            label: "GitHub",
+            position: "right",
           },
         ],
       },
       footer: {
-        style: 'dark',
+        style: "dark",
         links: [
           {
-            title: 'Docs',
+            title: "Docs",
             items: [
               {
-                label: 'Tutorial',
-                to: '/docs/intro',
+                label: "Tutorial",
+                to: "/docs/intro",
               },
             ],
           },
           {
-            title: 'Community',
+            title: "Community",
             items: [
               {
-                label: 'Discord',
-                href: 'https://discord.com/invite/JZ2btyTfzQ',
+                label: "Discord",
+                href: "https://discord.com/invite/JZ2btyTfzQ",
               },
               {
-                label: 'Twitter',
-                href: 'https://twitter.com/4ccommunityhq',
+                label: "Twitter",
+                href: "https://twitter.com/4ccommunityhq",
               },
             ],
           },
           {
-            title: 'More',
+            title: "More",
             items: [
               {
-                label: 'GitHub',
-                href: 'https://github.com/FrancescoXX/free-Web3-resources',
+                label: "GitHub",
+                href: "https://github.com/FrancescoXX/free-Web3-resources",
               },
             ],
           },
         ],
         copyright: `Copyright © ${new Date().getFullYear()} By 4c.`,
       },
+      announcementBar: {
+        id: "Join us",
+        content:
+          'Join 4c <a target="_blank" rel="noopener noreferrer" href="https://www.4c.rocks"> now!</a>',
+        backgroundColor: "#fafbfc",
+        textColor: "#091E42",
+        isCloseable: true,
+      },
       prism: {
         theme: lightCodeTheme,
         darkTheme: darkCodeTheme,

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -155,14 +155,9 @@ div[class^='announcementBar_'] {
     var(--site-primary-hue-saturation),
     95%
   );
-  background: repeating-linear-gradient(
-    35deg,
-    var(--site-announcement-bar-stripe-color1),
-    var(--site-announcement-bar-stripe-color1) 20px,
-    var(--site-announcement-bar-stripe-color2) 10px,
-    var(--site-announcement-bar-stripe-color2) 40px
-  );
+  background: linear-gradient( 34deg, rgba(68, 18, 115, 1) 0%, rgba(5, 30, 75, 1) 21%, rgba(52, 79, 141, 1) 58%, rgba(106, 137, 223, 1) 80%, rgba(145, 227, 226, 1) 99% );
   font-weight: bold;
+  font-size: 1.34rem;
 }
 
 .red > a {