202404170450

src/components/Head.astro

@@ -16,6 +16,15 @@
       </style>
 
 <style is:global>
+	.navbar-menu {
+    flex-grow: initial!important;
+    flex-shrink: initial!important;
+}
+.navbar {
+  display: flex
+  align-content: center;
+  justify-content: center;
+}
 	:root {
 		--accent: 136, 58, 234;
 		--accent-light: 224, 204, 250;

src/components/Header.astro

@@ -1,7 +1,8 @@
 ---
 ---
 
-<nav class="navbar md-0" role="navigation" aria-label="main navigation" >
+<center>
+<nav class="navbar" role="navigation" aria-label="main navigation" 
   <div class="navbar-brand">
     <a class="navbar-item" href="/">
       <!-- 
@@ -12,17 +13,6 @@
       -->
       <span class="text-gradient">LimePot</span>
     </a>
-    <a
-      role="button"
-      class="navbar-burger"
-      data-target="navMenu"
-      aria-label="menu"
-      aria-expanded="false"
-    >
-      <span aria-hidden="true"></span>
-      <span aria-hidden="true"></span>
-      <span aria-hidden="true"></span>
-    </a>
   </div>
   <div class="navbar-menu" id="navMenu">
     <div class="navbar-start">
@@ -52,28 +42,4 @@
   </a>
   -->
 </div>
-
-<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
-<script>
-  document.addEventListener("DOMContentLoaded", () => {
-    // Get all "navbar-burger" elements
-    const $navbarBurgers = Array.prototype.slice.call(
-      document.querySelectorAll(".navbar-burger"),
-      0
-    );
-
-    // Add a click event on each of them
-    $navbarBurgers.forEach((el) => {
-      el.addEventListener("click", () => {
-        // Get the target from the "data-target" attribute
-        const target = el.dataset.target;
-        const $target = document.getElementById(target);
-
-        // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
-        el.classList.toggle("is-active");
-        $target.classList.toggle("is-active");
-      });
-    });
-  });
-</script>
-<!-- This JS is required for mobile users to navigate the site, working on a mobile alternative -->
+</center>

src/layouts/Layout.astro

@@ -19,13 +19,15 @@ const { title } = Astro.props;
     <Header />
     <section class="section">
       <div class="container">
-        <div class="px-1">
         <slot />
       </div>
-      </div>
     </section>
     <Footer />
   </body><style is:global>
+  .navbar .navbar-menu {
+    flex-grow: initial;
+    flex-shrink: initial;
+}
     :root {
       --accent: 136, 58, 234;
       --accent-light: 224, 204, 250;