feat(website): add announcement bar (#56)

Signed-off-by: Philip Miglinci <[email protected]>
glasskube · Jan 19, 2024 · 5c6ee1c · 5c6ee1c
1 parent aa2971a
commit 5c6ee1c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts
@@ -63,6 +63,15 @@ const config: Config = {
     ]
   ],
   themeConfig: {
+    colorMode : {
+      respectPrefersColorScheme: true,
+    },
+    announcementBar: {
+      id: 'announcementBar-0', // Increment on change
+      // content: '⭐️ If you like <code>glasskube</code>, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/glasskube/glasskube">GitHub</a> and follow us on <a target="_blank" rel="noopener noreferrer" href="https://x.com/glasskube">X</a> ⭐️',
+      content: `🎉️ <a target="_blank" href="https://github.com/glasskube/glasskube"><code>glasskube</code></a> is pre launching on GitHub 🥳️`,
+      isCloseable: false
+    },
     image: 'img/glasskube-social-card.jpg',
     navbar: {
       title: 'Glasskube',

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -4,6 +4,15 @@
  * work well for content-centric websites.
  */
 
+/*$main-1: #0c263b;*/
+/*$main-2: #174c76;*/
+/*$main-3: #00b5eb;*/
+/*$main-light: #ebf8fb;*/
+/*$grey-0: #101010;*/
+/*$grey-7: #fbfbfb;*/
+/*$red: #ff4136;*/
+/*$pink: #e03466;*/
+
 /* You can override the default Infima variables here. */
 :root {
   --ifm-color-primary: #174c76;
@@ -43,3 +52,11 @@
   --ifm-hero-background-color: var(--ifm-color-primary-darker);
   --ifm-hero-text-color: var(--ifm-font-color-base);
 }
+
+
+div[class^='announcementBar_'] {
+  font-size: 20px;
+  color: var(--ifm-font-color-base);
+  background: linear-gradient(to right, #e03466, #63c5e3);
+  font-weight: bold;
+}