From 58e9a8abbc808a8ff3f034cecdb810d96c3ed5fe Mon Sep 17 00:00:00 2001 From: Paul Buetow Date: Sat, 18 Apr 2026 23:43:07 +0300 Subject: feat(themes): make non-active posts translucent to reveal WebGL background Non-selected posts now sit at 0.55 opacity so the animated background bleeds through clearly. Hovering a non-active post raises it to 0.85, and the active/highlighted post is always fully opaque (1.0). Co-Authored-By: Claude Sonnet 4.6 --- internal/generator/templates/shared/nav.tmpl | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/internal/generator/templates/shared/nav.tmpl b/internal/generator/templates/shared/nav.tmpl index e5c3bab..fb26463 100644 --- a/internal/generator/templates/shared/nav.tmpl +++ b/internal/generator/templates/shared/nav.tmpl @@ -55,6 +55,12 @@ {{end}} {{define "navSharedCSSInner"}} +/* Non-active posts are translucent so the WebGL background shows through. + The active/highlighted post snaps to full opacity for clear reading. + Hover on a non-active post partially reveals it before selection. */ +.post:not(.post-active) { opacity: 0.55; transition: opacity 0.25s ease; } +.post:not(.post-active):hover { opacity: 0.85; } +.post.post-active { opacity: 1 !important; transition: opacity 0.15s ease; } /* Thumbnail sizing in list view; modal overrides to full width. */ .post-image { max-height:220px; max-width:100%; object-fit:cover; cursor:pointer; } #post-modal .post-image { max-height:none; width:100%; max-width:100%; object-fit:contain; cursor:default; } -- cgit v1.2.3