improving navbar menu for mobile

manuelernestog · Aug 18, 2023 · d5d9232 · d5d9232
1 parent d6ef04e
commit d5d9232
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/src/components/headerCard/HeaderCard.astro b/src/components/headerCard/HeaderCard.astro
@@ -14,11 +14,7 @@ let cover_url = cover ? cover : astropodConfig.cover;
 <div class="card min-w-full bg-base-100 shadow-md md:pb-3 w-full">
   <div class="aspect-[3/1] mt-5 w-full">
     <div class="relative inline-block w-full">
-      <img
-        src={astropodConfig.banner}
-        alt={astropodConfig.name + " banner"}
-        class="object-cover  w-full aspect-[3/1]"
-      />
+      <img src={astropodConfig.banner} alt={astropodConfig.name + " banner"} class="object-cover w-full aspect-[3/1]" />
       <div
         class="absolute top-0 left-0 items-center justify-center w-full h-full bg-gradient-to-t from-gray-900 to-50% to-transparent"
       >
@@ -43,8 +39,8 @@ let cover_url = cover ? cover : astropodConfig.cover;
   </div>
 
   <div class="flex md:-mt-12 px-4 md:pl-52">
-    <a href="/" class="btn btn-ghost m-1 justify-self-start"> Home</a>
-    <a href="/about" class="btn btn-ghost m-1 justify-self-end"> About</a>
+    <a href="/" class="btn btn-ghost m-1 justify-self-start px-2 sm:px-4"> Home</a>
+    <a href="/about" class="btn btn-ghost m-1 justify-self-end px-2 sm:px-4"> About</a>
 
     <div class="grow"></div>
 
@@ -54,13 +50,17 @@ let cover_url = cover ? cover : astropodConfig.cover;
 
     {
       astropodConfig.fundingUrl && (
-        <a href={astropodConfig.fundingUrl} class="btn btn-ghost btn-square m-1" title={astropodConfig.fundingText}>
+        <a
+          href={astropodConfig.fundingUrl}
+          class="btn btn-ghost btn-square m-1 sm:w-12 w-10 "
+          title={astropodConfig.fundingText}
+        >
           <HeartIcon />
         </a>
       )
     }
 
-    <a href="/rss.xml" class="btn btn-ghost btn-square m-1" title="RSS Feed">
+    <a href="/rss.xml" class="btn btn-ghost btn-square m-1 sm:w-12 w-10" title="RSS Feed">
       <RssIcon />
     </a>
   </div>

diff --git a/src/components/headerCard/followUsMenu.astro b/src/components/headerCard/followUsMenu.astro
@@ -23,7 +23,7 @@ for (const key in social) {
 ---
 {hasSocial && (
 <div class="dropdown dropdown-hover dropdown-end">
-  <label tabindex="0" class="btn btn-ghost m-1">
+  <label tabindex="0" class="btn btn-ghost m-1 px-2 sm:px-4">
     <ExternalLinkIcon />
     <span class="hidden md:inline-block">Follow us</span>
   </label>

diff --git a/src/components/headerCard/listenOnMenu.astro b/src/components/headerCard/listenOnMenu.astro
@@ -23,7 +23,7 @@ for (const key in listenOn) {
 
 {hasListenOn && (
   <div class="dropdown dropdown-hover dropdown-end">
-    <label tabindex="0" class="btn btn-ghost m-1">
+    <label tabindex="0" class="btn btn-ghost m-1 px-2 sm:px-4">
       <HeadphoneIcon />
       <span class="hidden md:inline-block">Listen on</span>
     </label>