Use fixed instead of sticky for NavBar, adjust margin-top on layout…

… and pages (#125)
AVGVSTVS96 · Apr 2, 2024 · e7e43fb · e7e43fb
1 parent 8f52189
commit e7e43fb
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 5 deletions.
diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
@@ -17,7 +17,7 @@ const { ...attrs } = Astro.props;
 ---
 
 <div
-  class="navbar-container sticky top-0 z-10 mb-8 w-full border-b border-border bg-background"
+  class="navbar-container fixed top-0 z-10 mb-8 w-full border-b border-border bg-background"
   {...attrs}>
   <div
     class="h-1 w-full bg-gradient-to-r from-accent-300 via-accent-500 to-accent-400">

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -34,7 +34,7 @@ const { description, title } = Astro.props;
   </head>
   <body class="flex min-h-screen w-dvw flex-col items-center">
     <NavBar />
-    <main class="flex-grow">
+    <main class="mt-20 flex-grow">
       <slot />
     </main>
     <Footer />

diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -4,7 +4,7 @@ import Card from '@components/Card.astro';
 ---
 
 <MainLayout title="About Me" description="Bassim Shahidy's personal website">
-  <body>
+  <section class="mt-4">
     <Card
       title="My First Astro Website"
       subtitle="Styled with Tailwind CSS"
@@ -31,5 +31,5 @@ import Card from '@components/Card.astro';
         >.
       </p>
     </Card>
-  </body>
+  </section>
 </MainLayout>
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
@@ -4,7 +4,7 @@ import MainLayout from '../layouts/MainLayout.astro';
 ---
 
 <MainLayout title="Blog" description="Blog posts by Bassim Shahidy">
-  <div class="container flex flex-col items-center">
+  <div class="container mt-4 flex flex-col items-center">
     <div class="mx-4 w-fit">
       <h1 class="h1 mb-4">Blog Posts</h1>
       <BlogIndex class="sm:w-[560px] md:w-[720px] lg:w-[860px]" />