diff options
| author | Danilo M. <danix@danix.xyz> | 2026-04-16 00:24:58 +0200 |
|---|---|---|
| committer | Danilo M. <danix@danix.xyz> | 2026-04-16 00:24:58 +0200 |
| commit | 4574c4cc0cbc26bdec9cf7d0872ae7401c7cc76b (patch) | |
| tree | 49b159e220cc75f7aed3dfd9a5d8549606a0ded1 /themes/danix-xyz-hacker/layouts/_default/baseof.html | |
| parent | 455b5bf0a8cfba658446cc6f3fd2c5964b45d507 (diff) | |
| download | danixxyz-4574c4cc0cbc26bdec9cf7d0872ae7401c7cc76b.tar.gz danixxyz-4574c4cc0cbc26bdec9cf7d0872ae7401c7cc76b.zip | |
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 <noreply@anthropic.com>
Diffstat (limited to 'themes/danix-xyz-hacker/layouts/_default/baseof.html')
| -rw-r--r-- | themes/danix-xyz-hacker/layouts/_default/baseof.html | 11 |
1 files changed, 10 insertions, 1 deletions
diff --git a/themes/danix-xyz-hacker/layouts/_default/baseof.html b/themes/danix-xyz-hacker/layouts/_default/baseof.html index 7e8338a..efeba38 100644 --- a/themes/danix-xyz-hacker/layouts/_default/baseof.html +++ b/themes/danix-xyz-hacker/layouts/_default/baseof.html @@ -27,7 +27,7 @@ {{ $chroma := resources.Get "css/chroma-custom.css" | minify }} <link rel="stylesheet" href="{{ $chroma.RelPermalink }}"> </head> -<body class="bg-bg text-text antialiased"> +<body class="bg-bg text-text antialiased" data-page-kind="{{ if .IsHome }}home{{ else }}other{{ end }}"> <!-- Reading progress bar (only on single pages/articles) --> {{ if eq .Kind "page" }} <div @@ -48,6 +48,9 @@ z-index: -1; "></div> + <!-- Matrix rain canvas background --> + <canvas id="matrix-rain" aria-hidden="true"></canvas> + <!-- Theme toggle & language toggle (before Alpine loads to prevent flash) --> <script> (function() { @@ -93,5 +96,11 @@ {{ $progressScript := resources.Get "js/reading-progress.js" | minify }} <script src="{{ $progressScript.RelPermalink }}"></script> {{ end }} + + <!-- Matrix rain background effect --> + {{ with resources.Get "js/matrix-rain.js" }} + {{ $s := . | minify }} + <script src="{{ $s.RelPermalink }}"></script> + {{ end }} </body> </html> |