From a05ea86f931b17b0599960a6d496af842b527f00 Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Sat, 18 Apr 2026 20:03:54 +0200
Subject: feat: theme-aware default thumbnails with picture element

- Use HTML <picture> element with prefers-color-scheme media query
- Fallback dark thumbnail via content: url() CSS for theme-light class
- Automatically displays light/dark thumbnails based on user theme
- Articles without custom images now show default thumbnails
- Maintains all existing hover effects and type badges

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 .../layouts/partials/article-list-item.html             | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

(limited to 'themes/danix-xyz-hacker/layouts/partials/article-list-item.html')

diff --git a/themes/danix-xyz-hacker/layouts/partials/article-list-item.html b/themes/danix-xyz-hacker/layouts/partials/article-list-item.html
index d473e9a..d0ab504 100644
--- a/themes/danix-xyz-hacker/layouts/partials/article-list-item.html
+++ b/themes/danix-xyz-hacker/layouts/partials/article-list-item.html
@@ -4,6 +4,7 @@
 {{ $excerpt := .Description | default .Summary }}
 
 {{ $imageURL := "" }}
+{{ $useDefaultThumbnail := false }}
 {{ if .Params.image }}
   {{ $resource := .Resources.GetMatch .Params.image }}
   {{ if $resource }}
@@ -11,18 +12,32 @@
   {{ else }}
     {{ $imageURL = .Params.image }}
   {{ end }}
+{{ else }}
+  {{ $useDefaultThumbnail = true }}
 {{ end }}
 
 <article class="card group bg-bg">
   <!-- Thumbnail -->
-  {{ if $imageURL }}
+  {{ if or $imageURL $useDefaultThumbnail }}
   <a href="{{ .RelPermalink }}" class="block overflow-hidden bg-surface/50 relative" tabindex="-1">
+    {{ if $useDefaultThumbnail }}
+    <picture>
+      <source srcset="/images/default_thumbnail_light.png" media="(prefers-color-scheme: light)" />
+      <img
+        src="/images/default_thumbnail_dark.png"
+        alt="{{ .Title }}"
+        class="card-image group-hover:scale-105 transition-transform duration-200"
+        loading="lazy"
+      />
+    </picture>
+    {{ else }}
     <img
       src="{{ $imageURL }}"
       alt="{{ .Title }}"
       class="card-image group-hover:scale-105 transition-transform duration-200"
       loading="lazy"
     />
+    {{ end }}
     <!-- Type badge pill overlay -->
     {{ if $typeData }}
     <div
-- 
cgit v1.2.3