Reinstating the navbar ready for the DAO meetup (#163)

* Reinstating the navbar ready for the DAO meetup

* Tweaked mobile and added glow on crystal hover

* removed flicker and adjusted room bounds.

docusaurus.config.js

@@ -11,69 +11,53 @@ module.exports = {
       defaultMode: 'dark',
       disableSwitch: true,
     },
-    // navbar: {
-    //   title: "MetaGame Wiki",
-    //   logo: {
-    //     alt: "MetaGame Logo",
-    //     src: "img/mg-icon.png",
-    //   },
-    //   items: [
-    //     {
-    //       to: "docs/introduction",
-    //       label: "🐣 Start Here",
-    //       position: "left",
-    //     },
-    //     {
-    //       to: "docs/enter-metagame/signpost",
-    //       label: "🗺 Enter MetaGame",
-    //       position: "left",
-    //     },
-    //      {
-    //        to: "docs/enter-metagame/navigation-board",
-    //        label: "👣 Join a Raid",
-    //        position: "left",
-    //      },
-    //   ],
-    // },
+    // headerLinks: [{ page: 'help', label: 'Help' }],
+    navbar: {
+      title: 'MetaGame Wiki',
+      logo: {
+        alt: 'MetaGame Logo',
+        src: 'img/mg-crystal.png',
+      },
+    },
     // footer: {
-    //   style: "dark",
+    //   style: 'dark',
     //   links: [
     //     {
-    //       title: "The Game",
+    //       title: 'The Game',
     //       items: [
     //         {
-    //           label: "🌌 Interspace",
-    //           href: "https://interspace.metagame.wtf",
+    //           label: '🌌 Interspace',
+    //           href: 'https://interspace.metagame.wtf',
     //         },
     //         {
-    //           label: "🧬 The Source",
-    //           href: "https://metafam.github.io/TheSource/timeline/@metagame/",
+    //           label: '🧬 The Source',
+    //           href: 'https://metafam.github.io/TheSource/timeline/@metagame/',
     //         },
     //       ],
     //     },
     //     {
-    //       title: "Community",
+    //       title: 'Community',
     //       items: [
     //         {
-    //           label: "💬 Discord",
-    //           href: "https://discord.gg/VYZPBnx",
+    //           label: '💬 Discord',
+    //           href: 'https://discord.gg/VYZPBnx',
     //         },
     //         {
-    //           label: "🧵 Forums",
-    //           href: "https://forum.metagame.wtf",
+    //           label: '🧵 Forums',
+    //           href: 'https://forum.metagame.wtf',
     //         },
     //       ],
     //     },
     //     {
-    //       title: "Social",
+    //       title: 'Social',
     //       items: [
     //         {
-    //           label: "🐦 Twitter",
-    //           href: "https://twitter.com/MetaFam",
+    //           label: '🐦 Twitter',
+    //           href: 'https://twitter.com/MetaFam',
     //         },
     //         {
-    //           label: "🗞 Newsletter",
-    //           href: "https://metagame.substack.com",
+    //           label: '🗞 Newsletter',
+    //           href: 'https://metagame.substack.com',
     //         },
     //       ],
     //     },

src/css/custom.scss

@@ -43,7 +43,6 @@ body,
   background-color: var(--ifm-color-primary-dark);
   color: var(--mf-color-text-body);
   font-family: var(--mf-font-body), sans-serif;
-
   &:not(body) {
     background-image: url('/img/mymeta-bg.jpg');
     background-size: cover;
@@ -51,6 +50,12 @@ body,
     width: 100%;
     min-height: 100vh;
     padding: 0;
+    margin-top: -40px;
+    padding-top: 40px;
+    @media screen and (min-width: 768px) {
+      margin-top: -70px;
+      padding-top: 70px;
+    }
   }
 }
 
@@ -350,7 +355,51 @@ body,
   background-color: var(--mf-color-secondary);
 }
 .navbar {
-  display: none;
+  background: rgba(var(--mf-color-secondary-rgb), 0.8);
+  backdrop-filter: blur(5px);
+  border: 0;
+  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.5);
+  height: 40px;
+  max-height: 40px;
+  padding: 0;
+  text-align: center;
+
+  @media screen and (min-width: 768px) {
+    height: 70px;
+    max-height: 70px;
+  }
+  &__title {
+    position: absolute;
+    visibility: hidden;
+  }
+  &__brand {
+    position: relative;
+    margin: 10px auto 0;
+    text-align: center;
+    @media screen and (min-width: 768px) {
+      margin-top: 20px;
+    }
+  }
+  &__logo {
+    width: 50px;
+    height: auto;
+    margin: 0;
+    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.4));
+    transition: filter 0.2s ease-in;
+
+    &:hover {
+      filter: drop-shadow(0 0 15px rgba(255,255,255,0.3));
+    }
+
+    @media screen and (min-width: 768px) {
+      width: 80px;
+    }
+  }
+  &__items {
+    &--right {
+      display: none;
+    }
+  }
 }
 
 .pagination-nav__link,
@@ -580,7 +629,7 @@ a:hover,
 .hero .button--primary:hover {
   background-color: #ff1f8299;
   color: #fff;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0);
+  // box-shadow: 0 0 5px rgba(0, 0, 0, 0);
 }
 .hero .button--primary:hover:after,
 .hero .button--primary:hover:before {

src/pages/styles.module.scss

@@ -6,6 +6,7 @@
 
 .innerWrapper {
   @media screen and (max-width: 500px) {
+    margin-top: 5rem;
     padding: 0 25px;
   }
 }

src/pages/theRoom.module.scss

@@ -5,7 +5,9 @@
  */
 
 .theRoom {
-  height: calc(100vh - 60px);
+  height: calc(100vh - 75px);
+  max-height: calc(100vh - 75px);
+  overflow: hidden;
   width: 100%;
   border-width: 0;
 }