fix nav

src/components/navbar/navbar.astro

@@ -96,6 +96,10 @@ const menuitems = [
           ))
         }
       </ul>
+      <div class="lg:hidden flex items-center mt-3 gap-4">
+        <Link href="#" style="muted" block size="md">Log in</Link>
+        <Link href="#" size="md" block>Sign up</Link>
+      </div>
     </nav>
     <div>
       <div class="hidden lg:flex items-center gap-4">

src/components/ui/link.astro

@@ -3,7 +3,7 @@ interface Props {
   href: string;
   size?: "md" | "lg";
   block?: boolean;
-  style?: "outline" | "primary" | "inverted";
+  style?: "outline" | "primary" | "inverted" | "muted";
   class?: string;
   [x: string]: any;
 }
@@ -26,6 +26,7 @@ const styles = {
   outline: "bg-white border-2 border-black hover:bg-gray-100 text-black ",
   primary: "bg-black text-white hover:bg-gray-800  border-2 border-transparent",
   inverted: "bg-white text-black   border-2 border-transparent",
+  muted: "bg-gray-100 hover:bg-gray-200   border-2 border-transparent",
 };
 ---
 

src/layouts/Layout.astro

@@ -28,7 +28,7 @@ const { title } = Astro.props;
 
     <!-- <link rel="preload" as="image" href={src} alt="Hero" /> -->
     <SEO
-      title={`${title}${title && " | "}Astro Ship`}
+      title={`${title}${title && " | "}Astroship`}
       description="Astroship is a starter website template for Astro built with TailwindCSS."
       twitter={{
         creator: "@surjithctly",
@@ -38,9 +38,12 @@ const { title } = Astro.props;
       openGraph={{
         basic: {
           type: "website",
-          title: `${title}${title && " | "}Astro Ship`,
+          title: `Astroship - Starter Template for Astro`,
           image: resolvedImageWithDomain,
         },
+        image: {
+          alt: "Astroship Homepage Screenshot",
+        },
       }}
     />
   </head>

src/pages/blog.astro

@@ -29,7 +29,7 @@ console.log(posts[0].frontmatter.image);
           posts.map((post) => (
             <li>
               <a href={post.url}>
-                <div class="grid md:grid-cols-2 gap-10 items-center">
+                <div class="grid md:grid-cols-2 gap-5 md:gap-10 items-center">
                   <div>
                     <Image
                       src={post.frontmatter.image}
@@ -37,7 +37,7 @@ console.log(posts[0].frontmatter.image);
                       width={600}
                       format="avif"
                       aspectRatio="16:9"
-                      class="rounded-md"
+                      class="w-full rounded-md"
                     />
                   </div>
                   <div>