From 9ba44135fb03e90e495bbe1190282016c391bd63 Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Fri, 10 Apr 2026 12:20:27 +0200
Subject: fix: move canvas from baseof to hero section only

The matrix canvas was duplicated - one in baseof.html (body level) and one we added to hero.html. This caused conflicts and visibility issues.

Changes:
- Remove canvas from baseof.html entirely - it should only be in the hero section
- Keep canvas in hero.html with data-mode="hero"
- Simplify matrix-rain.js to handle data-mode attribute and use offsetWidth/offsetHeight with fallbacks
- Update hero.css with proper absolute positioning (inset: 0)

Now there's only one canvas element positioned absolutely within the hero section, avoiding conflicts and ensuring proper rendering.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 assets/css/components/hero.css | 9 +++++----
 assets/js/matrix-rain.js       | 6 ++++--
 2 files changed, 9 insertions(+), 6 deletions(-)

(limited to 'assets')

diff --git a/assets/css/components/hero.css b/assets/css/components/hero.css
index 6984647..53f30b3 100644
--- a/assets/css/components/hero.css
+++ b/assets/css/components/hero.css
@@ -25,10 +25,7 @@
 
 #matrix-canvas {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  inset: 0;
   opacity: 0.13;
   pointer-events: none;
   z-index: 1;
@@ -38,6 +35,10 @@ html.theme-light #matrix-canvas {
   opacity: 0.08;
 }
 
+html.theme-light #matrix-canvas {
+  opacity: 0.08;
+}
+
 .hero-left {
   flex: 1;
   min-width: 0;
diff --git a/assets/js/matrix-rain.js b/assets/js/matrix-rain.js
index 603e79e..8211b40 100644
--- a/assets/js/matrix-rain.js
+++ b/assets/js/matrix-rain.js
@@ -7,11 +7,13 @@
   const ctx   = canvas.getContext('2d');
   const CHARS = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン0123456789ABCDEF<>/\\|{}[]$#@!';
   const FS    = 14;  // font size / column width in px
+  const mode  = canvas.getAttribute('data-mode') || 'background';
   let cols, drops, raf;
 
   function init() {
-    canvas.width  = canvas.offsetWidth;
-    canvas.height = canvas.offsetHeight;
+    // Use offsetWidth/offsetHeight which works for both fixed and positioned elements
+    canvas.width  = canvas.offsetWidth || window.innerWidth;
+    canvas.height = canvas.offsetHeight || window.innerHeight;
     cols  = Math.floor(canvas.width / FS) + 1;
     drops = Array.from({ length: cols }, () => Math.random() * -(canvas.height / FS));
   }
-- 
cgit v1.2.3