Use same desktop.webp for all devices - simpler and cleaner

- Remove separate mobile image (was causing file bloat and complexity)
- Use desktop.webp (716 KB) for all screen sizes via media query
- Browser's background-size: cover handles responsive display
- Simplify preload-images.html to single image preload
- Cleaner CSS without unnecessary file duplication

layouts/partials/preload-images.html

@@ -4,9 +4,6 @@
 {{- end }}
 
 {{- if .IsHome }}
-<!-- Preload background images for adaptive loading -->
+<!-- Preload background image (same for all devices) -->
-<link rel="preload" as="image" href="images/desktop.webp" media="(min-width: 737px)">
+<link rel="preload" as="image" href="images/desktop.webp">
-<link rel="preload" as="image" href="images/mobile.webp" media="(max-width: 736px)">
-<!-- Fallback preload -->
-<link rel="preload" as="image" href="{{ .Site.Params.backgroundPath }}">
 {{- end }}

static/css/adaptive-background.css

@@ -1,11 +1,11 @@
 /* Adaptive Background Images for Mobile and Desktop */
 
-/* Mobile devices (max-width: 736px) - Use mobile.webp */
+/* Mobile devices (max-width: 736px) - Use desktop.webp (same as desktop for consistency) */
 @media screen and (max-width: 736px) {
   #wrapper > .bg {
     background-image: url('../../images/overlay.png'),
                       linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
-                      url('../../images/mobile.webp') !important;
+                      url('../../images/desktop.webp') !important;
     background-size: cover;
     background-position: center;
     background-attachment: fixed;