fix: modify navbar styling (#23)

CoderDojoAlbaIulia · Jan 26, 2024 · cc0b23d · cc0b23d
1 parent 533c78a
commit cc0b23d
Show file tree

Hide file tree

Showing 9 changed files with 16 additions and 14 deletions.
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
@@ -2,7 +2,7 @@
 import Button from "./Button.astro";
 ---
 
-<div class="bg-white pt-28 md:pt-0">
+<div class="bg-white pt-16 md:pt-0">
   <div class="relative">
     <div class="mx-auto max-w-7xl">
       <div class="relative z-10 pt-0 lg:pt-14 lg:w-full lg:max-w-2xl">

diff --git a/src/components/MobileNav.jsx b/src/components/MobileNav.jsx
@@ -10,7 +10,7 @@ export default function MobileNav() {
   }, []);
 
   return (
-    <div className="relative md:hidden">
+    <div className="relative md:hidden -top-4">
       <button
         onClick={() => setShowNav(!showNav)}
         className={` z-50 -ml-12 px-3 py-2 border rounded ${
@@ -24,7 +24,7 @@ export default function MobileNav() {
             viewBox="0 0 24 24"
             strokeWidth={1.5}
             stroke="currentColor"
-            className="w-6 h-6 z-50 text-white"
+            className="w-6 h-6  text-white"
           >
             <path
               strokeLinecap="round"
@@ -39,7 +39,7 @@ export default function MobileNav() {
             viewBox="0 0 24 24"
             strokeWidth={1.5}
             stroke="currentColor"
-            className="w-6 h-6 z-50"
+            className="w-6 h-6"
           >
             <path
               strokeLinecap="round"

diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
@@ -4,7 +4,7 @@ import MobileNav from "./MobileNav.jsx";
 ---
 
 <div
-  class="fixed mx-auto w-full bg-indigo-500/40 backdrop-blur md:bg-white flex justify-between md:max-w-7xl md:relative z-50 md:block md:justify-center items-center"
+  class="fixed h-24 md:h-full mx-auto w-full shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),_0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)] backdrop-blur md:bg-white flex justify-between md:max-w-7xl md:relative z-50 md:block md:justify-center items-center"
 >
   <div
     class="px-6 h-36 pt-6 w-full lg:max-w-3xl lg:pl-8 lg:pr-0 block lg:absolute"
@@ -15,13 +15,13 @@ import MobileNav from "./MobileNav.jsx";
     >
       <a
         href="/"
-        class="-m-1.5 p-0 md:p-1.5 z-50"
+        class="m-0 md:-m-1.5 p-0 md:p-1.5 z-50"
       >
         <span class="sr-only">CoderDojo Alba Iulia</span>
         <img
           alt=""
           src="/logo.png"
-          class="w-32 h-32"
+          class="w-24 h-24 md:w-32 md:h-32"
         />
       </a>
       <NavLinks />

diff --git a/src/layouts/OtherLayout.astro b/src/layouts/OtherLayout.astro
@@ -57,7 +57,7 @@ const { title, paddingTop } = Astro.props;
   <body>
     <Navbar />
     <div
-      class={`pt-${paddingTop} pt-48 max-w-4xl mx-auto prose bg-white px-6 md:px-0 py-32 pb-16 md:pt-48 `}
+      class={`pt-${paddingTop} pt-28 max-w-4xl mx-auto prose bg-white px-6 md:px-0 py-32 pb-16 md:pt-48 `}
     >
       <slot />
     </div>

diff --git a/src/pages/blog.astro b/src/pages/blog.astro
@@ -6,7 +6,7 @@ import Pattern from "../components/Pattern.astro";
 
 <Layout
   title="Blog | CoderDojo Alba Iulia"
-  paddingTop="28"
+  paddingTop="12"
 >
   <div class="bg-white py-24 sm:py-32">
     <div class="relative">

diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
@@ -3,6 +3,7 @@ import { getCollection, type CollectionEntry } from "astro:content";
 import Layout from "../../layouts/Layout.astro";
 import BackButton from "../../components/BackButton.astro";
 import Blogs from "../../components/Blogs.astro";
+import Pattern from "../../components/Pattern.astro";
 
 type Props = {
   post: CollectionEntry<"posts">;
@@ -29,10 +30,10 @@ const { Content } = await post.render();
 ---
 
 <Layout
-  paddingTop="36"
+  paddingTop="56"
   title={post.data.title}
 >
-  <div class="max-w-7xl mx-auto py-10 md:py-48 px-4 md:px-0">
+  <div class="max-w-7xl pt-24 md:pt-36 mx-auto py-10 md:py-48 px-4 md:px-0">
     <div class="overflow-hidden bg-white">
       <div class="relative mx-auto max-w-7xl px-6 py-8 md:py-16 lg:px-8">
         <div
@@ -136,4 +137,5 @@ const { Content } = await post.render();
 
     <Blogs post={post} />
   </div>
+  <Pattern />
 </Layout>
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
@@ -7,7 +7,7 @@ import Button from "../components/Button.astro";
 
 <Layout
   title="Contact"
-  paddingTop="28"
+  paddingTop="16"
 >
   <div
     class="relative isolate overflow-hidden bg-white lg:pt-60 px-6 py-12 sm:py-32 lg:overflow-visible lg:px-0"

diff --git a/src/pages/despre.astro b/src/pages/despre.astro
@@ -8,7 +8,7 @@ import Pattern from "../components/Pattern.astro";
   title="Despre | CoderDojo Alba Iulia"
   paddingTop="28"
 >
-  <div class="bg-white px-6 lg:px-8 pt-12 md:pt-48 relative">
+  <div class="bg-white px-6 lg:px-8 md:pt-48 relative">
     <div class="mx-auto max-w-4xl text-base leading-7 text-gray-700">
       <p class="text-base font-semibold leading-7 text-accent">
         Coder Dojo Alba Iulia

diff --git a/src/pages/regulament.md b/src/pages/regulament.md
@@ -1,7 +1,7 @@
 ---
 layout: ../layouts/OtherLayout.astro
 title: "Regulament CoderDojo Alba Iulia"
-paddingTop: 70
+paddingTop: 56
 permalink: /regulament
 ---