fix: make homepage photos full width like Spotlight theme

Author: oiahoon

src/pages/index.astro

@@ -88,25 +88,35 @@ const description = "分享软件开发经验、技术心得和摄影作品。
             </div>
           </div>
 
-          <!-- Photos Section -->
-          <div class="mt-16 sm:mt-20">
-            <div class="-my-4 flex justify-center gap-5 overflow-hidden py-4 sm:gap-8">
-              {photosPosts.map((photo, index) => {
-                const rotations = ['rotate-2', '-rotate-2', 'rotate-2', '-rotate-2', 'rotate-2'];
-                const rotation = rotations[index % rotations.length];
-                const photoUrl = photo.data.gallery?.[0]?.src || getPreviewImage(photo);
-                return photoUrl && (
-                  <div class={`relative aspect-[9/10] w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 sm:w-72 sm:rounded-2xl dark:bg-zinc-800 ${rotation}`}>
-                    <img 
-                      src={photoUrl}
-                      alt={photo.data.title}
-                      class="absolute inset-0 h-full w-full object-cover"
-                    />
-                  </div>
-                );
-              })}
-            </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <!-- Photos Section - Full Width -->
+  <div class="mt-16 sm:mt-20">
+    <div class="-my-4 flex justify-center gap-5 overflow-hidden py-4 sm:gap-8">
+      {photosPosts.map((photo, index) => {
+        const rotations = ['rotate-2', '-rotate-2', 'rotate-2', '-rotate-2', 'rotate-2'];
+        const rotation = rotations[index % rotations.length];
+        const photoUrl = photo.data.gallery?.[0]?.src || getPreviewImage(photo);
+        return photoUrl && (
+          <div class={`relative aspect-[9/10] w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 sm:w-72 sm:rounded-2xl dark:bg-zinc-800 ${rotation}`}>
+            <img 
+              src={photoUrl}
+              alt={photo.data.title}
+              class="absolute inset-0 h-full w-full object-cover"
+            />
           </div>
+        );
+      })}
+    </div>
+  </div>
+  
+  <div class="sm:px-8">
+    <div class="mx-auto w-full max-w-7xl lg:px-8">
+      <div class="relative px-4 sm:px-8 lg:px-12">
+        <div class="mx-auto max-w-2xl lg:max-w-5xl">
 
         </div>
       </div>