]> danix's work - danix.xyz-2.git/commit
Complete matrix rain background effect implementation
authorDanilo M. <redacted>
Wed, 15 Apr 2026 22:24:58 +0000 (00:24 +0200)
committerDanilo M. <redacted>
Wed, 15 Apr 2026 22:24:58 +0000 (00:24 +0200)
commit4574c4cc0cbc26bdec9cf7d0872ae7401c7cc76b
tree49b159e220cc75f7aed3dfd9a5d8549606a0ded1
parent455b5bf0a8cfba658446cc6f3fd2c5964b45d507
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 <redacted>
themes/danix-xyz-hacker/assets/css/main.css
themes/danix-xyz-hacker/assets/css/main.min.css
themes/danix-xyz-hacker/assets/js/matrix-rain.js [new file with mode: 0644]
themes/danix-xyz-hacker/layouts/_default/baseof.html
themes/danix-xyz-hacker/layouts/_default/single.html
themes/danix-xyz-hacker/layouts/articles/single.html
themes/danix-xyz-hacker/layouts/is/list.html
themes/danix-xyz-hacker/layouts/partials/article-list-item.html