Implement article type colors, reading progress bar, and optimize layout

- Add colored type pills to article list items (overlay on thumbnails, top-right)
- Add type accent corner (L-shaped) to single article headers with colored pill badge in metadata
- Implement smooth reading progress bar at viewport top (violet→green gradient)
- Progress bar only appears on single pages/articles, not on lists or homepage
- Constrain article width to max-w-7xl for comfortable reading with side gutters
- Use CSS variables for all colors to support dark/light theme switching
- Add reading-progress.js with requestAnimationFrame throttling for performance
- Update HANDOFF.md with current progress

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

1 files changed, 10 insertions, 10 deletions

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 e491125..70d530c 100644
--- a/themes/danix-xyz-hacker/layouts/partials/article-list-item.html
+++ b/themes/danix-xyz-hacker/layouts/partials/article-list-item.html
@@ -16,13 +16,22 @@
 <article class="border border-border/30 rounded-lg overflow-hidden hover:border-accent/50 transition-all duration-200 group">
   <!-- Thumbnail -->
   {{ if $imageURL }}
-  <a href="{{ .RelPermalink }}" class="block overflow-hidden bg-surface/50" tabindex="-1">
+  <a href="{{ .RelPermalink }}" class="block overflow-hidden bg-surface/50 relative" tabindex="-1">
     <img
       src="{{ $imageURL }}"
       alt="{{ .Title }}"
       class="w-full aspect-video object-cover group-hover:scale-105 transition-transform duration-200"
       loading="lazy"
     />
+    <!-- Type badge pill overlay -->
+    {{ if $typeData }}
+    <div
+      class="absolute top-3 right-3 px-3 py-1.5 rounded-full text-xs font-semibold text-white transition-opacity"
+      style="background-color: var(--type-{{ $articleType }});"
+    >
+      {{ i18n $articleType }}
+    </div>
+    {{ end }}
   </a>
   {{ end }}
 
@@ -48,15 +57,6 @@
       <time datetime="{{ .PublishDate.Format "2006-01-02T15:04:05Z07:00" }}">
         {{ .PublishDate.Format "Jan 2, 2006" }}
       </time>
-
-      <!-- Type badge -->
-      {{ if $typeData }}
-      <span
-        class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium transition-colors type-{{ $articleType }}"
-      >
-        {{ i18n $articleType }}
-      </span>
-      {{ end }}
     </div>
 
     <!-- Excerpt -->