diff options
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/css/components/hero.css | 9 | ||||
| -rw-r--r-- | assets/js/matrix-rain.js | 6 |
2 files changed, 9 insertions, 6 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)); } |