From 4574c4cc0cbc26bdec9cf7d0872ae7401c7cc76b Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Thu, 16 Apr 2026 00:24:58 +0200
Subject: Complete matrix rain background effect implementation

- Add canvas-based matrix rain animation with ASCII + katakana characters
- Implement per-column animation with varied drop speeds (2-4 frame throttle)
- Theme-aware colors: purple and green accents with live switching
- Homepage: 28% opacity (dark) / 35% opacity (light) for prominent hero effect
- Inner pages: 13% opacity (dark) / 18% opacity (light) for subtle side gutters
- Respect prefers-reduced-motion system setting
- Add opaque background to content grids to block rain under text
- Add .content-grid class to differentiate single pages from list pages
- Add solid background to article list item cards
- Update article list item with bg-bg class for readability
- Z-index stack: canvas (z-1), content grid (z-9), main content (z-10)

Files modified:
- matrix-rain.js: new IIFE animation script with MutationObserver for theme switching
- baseof.html: add canvas element and script tag with guard
- main.css: add canvas positioning, opacity rules, content grid background
- _default/single.html: add max-w-7xl and .content-grid class
- articles/single.html: add max-w-7xl and .content-grid class
- is/list.html: add max-w-7xl and .content-grid class
- article-list-item.html: add bg-bg class for solid background

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 themes/danix-xyz-hacker/assets/css/main.css     | 43 ++++++++++++++++++++++
 themes/danix-xyz-hacker/assets/css/main.min.css | 49 +++++++++++++++++++++++++
 2 files changed, 92 insertions(+)

(limited to 'themes/danix-xyz-hacker/assets/css')

diff --git a/themes/danix-xyz-hacker/assets/css/main.css b/themes/danix-xyz-hacker/assets/css/main.css
index 2b8cbde..53b2410 100644
--- a/themes/danix-xyz-hacker/assets/css/main.css
+++ b/themes/danix-xyz-hacker/assets/css/main.css
@@ -286,3 +286,46 @@ html.theme-light .prose-invert blockquote {
     transition-duration: 0.01ms !important;
   }
 }
+
+/* Matrix rain canvas background */
+#matrix-rain {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* Dark theme: 13% opacity (inner pages) */
+html.theme-dark #matrix-rain {
+  opacity: 0.13;
+}
+
+/* Light theme: 18% opacity (inner pages) */
+html.theme-light #matrix-rain {
+  opacity: 0.18;
+}
+
+/* Homepage: more prominent background */
+html.theme-dark body[data-page-kind="home"] #matrix-rain {
+  opacity: 0.28;
+}
+
+html.theme-light body[data-page-kind="home"] #matrix-rain {
+  opacity: 0.35;
+}
+
+/* Reduced motion: hide canvas entirely */
+@media (prefers-reduced-motion: reduce) {
+  #matrix-rain {
+    display: none;
+  }
+}
+
+/* Content grid background — blocks rain under text, visible in gutters (single pages only) */
+.grid.md\:grid-cols-3.gap-8.max-w-7xl.content-grid {
+  position: relative;
+  z-index: 10;
+  background-color: var(--bg);
+}
diff --git a/themes/danix-xyz-hacker/assets/css/main.min.css b/themes/danix-xyz-hacker/assets/css/main.min.css
index 74161bc..9eabce5 100644
--- a/themes/danix-xyz-hacker/assets/css/main.min.css
+++ b/themes/danix-xyz-hacker/assets/css/main.min.css
@@ -2062,6 +2062,55 @@ html.theme-light .prose-invert blockquote {
   }
 }
 
+/* Matrix rain canvas background */
+
+#matrix-rain {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* Dark theme: 13% opacity (inner pages) */
+
+html.theme-dark #matrix-rain {
+  opacity: 0.13;
+}
+
+/* Light theme: 18% opacity (inner pages) */
+
+html.theme-light #matrix-rain {
+  opacity: 0.18;
+}
+
+/* Homepage: more prominent background */
+
+html.theme-dark body[data-page-kind="home"] #matrix-rain {
+  opacity: 0.28;
+}
+
+html.theme-light body[data-page-kind="home"] #matrix-rain {
+  opacity: 0.35;
+}
+
+/* Reduced motion: hide canvas entirely */
+
+@media (prefers-reduced-motion: reduce) {
+  #matrix-rain {
+    display: none;
+  }
+}
+
+/* Content grid background — blocks rain under text, visible in gutters (single pages only) */
+
+.grid.md\:grid-cols-3.gap-8.max-w-7xl.content-grid {
+  position: relative;
+  z-index: 10;
+  background-color: var(--bg);
+}
+
 .hover\:bg-surface:hover {
   background-color: var(--surface);
 }
-- 
cgit v1.2.3