From 455b5bf0a8cfba658446cc6f3fd2c5964b45d507 Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Wed, 15 Apr 2026 23:39:11 +0200
Subject: Implement article type colors, reading progress bar, and optimize
 layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 .../layouts/partials/article-header.html           | 43 ++++++++++++++++------
 1 file changed, 31 insertions(+), 12 deletions(-)

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

diff --git a/themes/danix-xyz-hacker/layouts/partials/article-header.html b/themes/danix-xyz-hacker/layouts/partials/article-header.html
index b759909..a52f643 100644
--- a/themes/danix-xyz-hacker/layouts/partials/article-header.html
+++ b/themes/danix-xyz-hacker/layouts/partials/article-header.html
@@ -3,19 +3,28 @@
 {{ $typeData := index $typeConfig $articleType }}
 
 <div class="mb-8 pb-8 border-b border-border">
-  <!-- Type badge -->
-  {{ if $typeData }}
-  <span
-    class="inline-flex items-center px-3 py-1 rounded text-sm font-semibold mb-4 transition-colors type-{{ $articleType }}"
-  >
-    {{ i18n $articleType }}
-  </span>
-  {{ end }}
+  <!-- Title with accent corner -->
+  <div class="relative mb-6">
+    <!-- Vertical accent line (left side) -->
+    {{ if $typeData }}
+    <div
+      class="absolute left-0 top-0 bottom-0 w-1 rounded-full"
+      style="background-color: var(--type-{{ $articleType }});"
+    ></div>
+    {{ end }}
+
+    <!-- Horizontal accent line (bottom, 50% width with fade) -->
+    {{ if $typeData }}
+    <div
+      class="absolute left-0 bottom-0 h-1 rounded-full"
+      style="width: 50%; background: linear-gradient(to right, var(--type-{{ $articleType }}), var(--type-{{ $articleType }}) 0%, transparent 100%);"
+    ></div>
+    {{ end }}
 
-  <!-- Title -->
-  <h1 class="text-4xl md:text-5xl font-bold text-accent mb-4">
-    {{ .Title }}
-  </h1>
+    <h1 class="text-4xl md:text-5xl font-bold text-accent pl-6 pt-2">
+      {{ .Title }}
+    </h1>
+  </div>
 
   <!-- Metadata -->
   <div class="flex flex-wrap items-center gap-4 text-sm text-text-dim">
@@ -50,5 +59,15 @@
       <span>{{ .ReadingTime }} {{ i18n "min" }} {{ i18n "readingTime" }}</span>
     </div>
     {{ end }}
+
+    <!-- Type badge -->
+    {{ if $typeData }}
+    <span
+      class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-semibold text-white transition-colors"
+      style="background-color: var(--type-{{ $articleType }});"
+    >
+      {{ i18n $articleType }}
+    </span>
+    {{ end }}
   </div>
 </div>
-- 
cgit v1.2.3