diff options
| author | Danilo M. <danix@danix.xyz> | 2026-04-10 12:20:27 +0200 |
|---|---|---|
| committer | Danilo M. <danix@danix.xyz> | 2026-04-10 12:20:27 +0200 |
| commit | 9ba44135fb03e90e495bbe1190282016c391bd63 (patch) | |
| tree | b61c120d5af33d74cf8bfeeb53d4e4ff843f7a96 | |
| parent | 679a2279e84037f49cab4df35bf37b77a7604792 (diff) | |
| download | danixxyz-theme-9ba44135fb03e90e495bbe1190282016c391bd63.tar.gz danixxyz-theme-9ba44135fb03e90e495bbe1190282016c391bd63.zip | |
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>
| -rw-r--r-- | assets/css/components/hero.css | 9 | ||||
| -rw-r--r-- | assets/js/matrix-rain.js | 6 | ||||
| -rw-r--r-- | layouts/baseof.html | 1 |
3 files changed, 9 insertions, 7 deletions
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)); } diff --git a/layouts/baseof.html b/layouts/baseof.html index c9633d0..2e4d6c7 100644 --- a/layouts/baseof.html +++ b/layouts/baseof.html @@ -14,7 +14,6 @@ <body> <a href="#main-content" class="skip-link">Skip to content</a> <div class="progress-bar" id="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> - <canvas id="matrix-canvas" aria-hidden="true" data-mode="{{ block "canvas-mode" . }}background{{ end }}"></canvas> {{ partial "header.html" . }} <main id="main-content">{{ block "main" . }}{{ end }}</main> <footer>{{ partial "footer.html" . }}</footer> |