From 5b455cc2878077c998026a076385d6f61bb884f7 Mon Sep 17 00:00:00 2001
From: Surjith S M <surjithctly@gmail.com>
Date: Wed, 9 Nov 2022 18:48:17 +0530
Subject: [PATCH] fix nav

---
 README.md                          | 10 ++++++++++
 src/components/navbar/navbar.astro |  4 ++++
 src/components/ui/link.astro       |  3 ++-
 src/layouts/Layout.astro           |  7 +++++--
 src/pages/blog.astro               |  4 ++--
 5 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 0169d06..7b79f36 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,16 @@ Astroship is a starter template for startups, marketing websites & landing pages
 
 This Free Template is sponsored by [Web3Templates](https://web3templates.com)
 
+## Live Demo
+
+### [https://astroship.web3templates.com/](https://astroship.web3templates.com/)
+
+## Deploy on Vercel
+
+Click the below link to deploy this template on Vercel
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/surjithctly/astroship)
+
 ![image](https://user-images.githubusercontent.com/1884712/200831799-10ef2456-a02e-4068-b580-4b5326f0b33b.png)
 
 ## Installation
diff --git a/src/components/navbar/navbar.astro b/src/components/navbar/navbar.astro
index 8f67640..29706f7 100644
--- a/src/components/navbar/navbar.astro
+++ b/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">
diff --git a/src/components/ui/link.astro b/src/components/ui/link.astro
index 1c61443..54976fc 100644
--- a/src/components/ui/link.astro
+++ b/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",
 };
 ---
 
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index c3f15d5..e89ceb3 100644
--- a/src/layouts/Layout.astro
+++ b/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>
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
index 63e1239..33983a4 100644
--- a/src/pages/blog.astro
+++ b/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>