diff options
| author | Paul Buetow <paul@buetow.org> | 2026-04-18 23:43:07 +0300 |
|---|---|---|
| committer | Paul Buetow <paul@buetow.org> | 2026-04-18 23:43:07 +0300 |
| commit | 58e9a8abbc808a8ff3f034cecdb810d96c3ed5fe (patch) | |
| tree | b6ecfb2a166ab974e871ab7c99fd9dc892577a89 /internal/generator/templates | |
| parent | b5fcb74d0967b23e5fa5c92bca6d45ba4e8755cf (diff) | |
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 <noreply@anthropic.com>
Diffstat (limited to 'internal/generator/templates')
| -rw-r--r-- | internal/generator/templates/shared/nav.tmpl | 6 |
1 files changed, 6 insertions, 0 deletions
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; } |