diff options
| -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> |