修复首页按钮箭头在小屏幕的展示问题

Author: CatCodeMe

src/pages/index.astro

@@ -147,8 +147,8 @@ const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS)
 
               <!-- 按钮组 -->
               <div class='flex flex-col gap-4 sm:flex-row sm:justify-start'>
-                <Button title='About Me' href='/about' style='ahead' />
-                <Button title='View Blog' href='/blog' style='ahead' />
+                <Button title='About Me' href='/about' style='ahead' class='hero-button w-full sm:w-auto' />
+                <Button title='View Blog' href='/blog' style='ahead' class='hero-button w-full sm:w-auto' />
               </div>
             </div>
           </div>
@@ -489,4 +489,17 @@ const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS)
       pointer-events: none;
     }
   }
+
+  /* Hero按钮的响应式样式 */
+  .hero-button {
+    display: flex !important;
+    justify-content: space-between !important;
+  }
+  
+  @media (min-width: 640px) {
+    .hero-button {
+      display: inline-flex !important;
+      justify-content: flex-start !important;
+    }
+  }
 </style>