The CSS transition on the body's background-color (0.3s ease) was
causing the browser's View Transitions to capture a stale snapshot
during the Dark -> Light change. Even though the .dark class was
removed synchronously and we tried to disable transitions via an
!important override class, the interaction between Tailwind classes
and the raw CSS transition on body still caused the root VT snapshot
to render as Dark when it should have been Light.
By removing the transition from body entirely (which is redundant
anyway since we're using View Transitions for theme changes), the
body jumps to its target color instantly, guaranteeing the NEW
snapshot accurately reflects the final Light theme, eliminating
the 'ghost circle' or 'circle outline' bug.
When turning Dark off (Dark -> Light transition), the NEW layer is Light.
Previously we tried shrinking the OLD layer (Dark) over it, but if the
root snapshot captured a transparent html, revealing the transparent layer
produced no visual change.
Now we:
1. Always keep the NEW layer on top (z-index: 2).
2. Always animate the NEW layer expanding from 0 to max radius.
3. Explicitly set background-color on html in input.css to ensure the
VT root snapshots are fully opaque, avoiding transparent captures that
make expansions invisible.
4. Add background: var(--color-paper-theme) directly to ::view-transition-new
just to be absolutely certain it's painted opaque.
several bugs found via in-browser debugging, all in lightbox.js + the
blur-up CSS:
1. DOMRect attribute mismatch: getBoundingClientRect returns .width/
.height, but code read .w/.h -> NaN transforms. map rectOf() to a
uniform {x,y,w,h}.
2. zoom scale base was the huge original natural size (2942px), so the
centered state collapsed to a tiny scale and the open animation ran
backwards (shrink). base the scale on originRect instead: first
frame is the in-article image at scale 1, centered state scales to
target.w/originRect.w. open is always grow, close always shrink.
3. scroll-to-close fired on a phantom scroll jump: the oversized
original img (layout size = naturalW) expanded the document's
scrollable area. set img layout size explicitly and add
overflow:hidden on the (position:fixed) overlay so the img cannot
expand the body.
4. first open animation jumped from the wrong position: a single rAF
was not enough to commit the no-transition first frame. use a forced
reflow (offsetHeight) + double-rAF before starting the transition.
5. blur-up full layer stuck at opacity 0 until a forced reflow (opening
the lightbox) repainted it. drop the opacity transition on .blur-img-
full and set opacity:1 from JS on load (deterministic, no repaint
race). mark the container .is-loaded and hide the placeholder via
the container class.
6. a 16px grey gap above in-article images: .md-content img { margin:
1rem 0 } applied to the absolute .blur-img-full too, pushing it
down. reset margin:0 / max-width:none on the blur-up img layers.
remove the duplicated .image-viewer-* and .md-image-lightbox-* rules
(~93 lines); add a single .lightbox-* set sized/positioned by JS
transform. entry-cover and post-card-cover now target the blur-img
structure (4:3 ratio on cards, cover-fill on entry cover).
strip syntect-injected background-color from generated CSS so the code
block background comes from a single source (--color-paper-code-block
in input.css), avoiding double-layer color mismatch at the .code span
edge. update the variable values for both light and dark themes.
- Warm editorial color palette (#faf9f6 light / #141416 dark)
- Sage green accent (#5c7a5e) for nav, links, buttons, tags
- Replace all hardcoded hex colors with CSS theme utilities
- Serif font (system Georgia) only on header logo
- Better hover states: scale, brightness, color transitions
- Accent-colored focus rings on inputs
- Fix language mixing: Back to Home → 返回首页
- No external font dependencies
