Fix announcement

3 files changed, 23 insertions, 14 deletions

diff --git a/docusaurus.config.js b/docusaurus.config.js
index 69afc6e..4d821c8 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -81,6 +81,12 @@ const config = {
         disableSwitch: true,
         respectPrefersColorScheme: false,
       },
+      announcementBar: {
+        content: `
+  <b>Greetings traveller!</b> You probably found this site by accident. <b>It is far from finished</b>, but if you\'re curious about the project, join the <a href="https://discord.com/invite/wDj3UYzec8">Discord server</a> and <b>say hello!</b>
+  `,
+        isCloseable: false,
+      },
       navbar: {
         title: "NeoHaskell",
         logo: {
diff --git a/src/css/custom.css b/src/css/custom.css
index af24e92..11c4b29 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -15,6 +15,23 @@
   letter-spacing: -0.095em;
 }
 
+.announcementBar_node_modules-\@docusaurus-theme-classic-lib-theme-AnnouncementBar-styles-module {
+  @apply h-60 !important;
+  @apply m-7;
+  @apply p-7;
+  @apply text-5xl;
+  @apply text-black !important;
+  @apply bg-lightaccent !important;
+  @apply border-4 !important;
+  @apply border-black !important;
+  @apply shadow-neoyellow;
+  font-family: 'Lexend Mega', sans-serif;
+}
+
+.close {
+  opacity: 1 !important;
+}
+
 body {
   background-color: theme('colors.lightbackground');
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index ccff804..ae3e0bf 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -57,20 +57,6 @@ export default function Home(): JSX.Element {
     <div className="container">
       <Layout description={`${siteConfig.tagline}`}>
         <HomepageHeader />
-        <div className="container grid grid-cols-1 gap-4">
-          <p className="text-red-500 font-extrabold text-5xl">
-            If you're reading this, you probably found it by accident. This is a
-            WIP project, and the site is far from finished. If you're curious
-            about the project, better join the{" "}
-            <a
-              className="text-blue-500"
-              href="https://discord.com/invite/wDj3UYzec8"
-            >
-              Discord server
-            </a>
-            !
-          </p>
-        </div>
         <main>
           <HomepageFeatures />
         </main>