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>
---
 .../danix-xyz-hacker/assets/js/reading-progress.js | 29 ++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 themes/danix-xyz-hacker/assets/js/reading-progress.js

(limited to 'themes/danix-xyz-hacker/assets/js/reading-progress.js')

diff --git a/themes/danix-xyz-hacker/assets/js/reading-progress.js b/themes/danix-xyz-hacker/assets/js/reading-progress.js
new file mode 100644
index 0000000..ee1192f
--- /dev/null
+++ b/themes/danix-xyz-hacker/assets/js/reading-progress.js
@@ -0,0 +1,29 @@
+// Reading progress bar for single pages/articles
+(function() {
+  const progressBar = document.getElementById('reading-progress');
+
+  if (!progressBar) return;
+
+  function updateProgress() {
+    const windowHeight = window.innerHeight;
+    const documentHeight = document.documentElement.scrollHeight - windowHeight;
+    const scrollProgress = documentHeight > 0 ? (window.scrollY / documentHeight) * 100 : 0;
+    progressBar.style.width = scrollProgress + '%';
+  }
+
+  // Throttle the scroll event for better performance
+  let ticking = false;
+
+  window.addEventListener('scroll', function() {
+    if (!ticking) {
+      window.requestAnimationFrame(function() {
+        updateProgress();
+        ticking = false;
+      });
+      ticking = true;
+    }
+  }, false);
+
+  // Initial call
+  updateProgress();
+})();
-- 
cgit v1.2.3