feat(blog): refine background and card styling

[SoonIter]

Summary

• move MeteorsBackground from src/blog-list into src/blog-background and update the local import
• tone down the blog background frame opacity so the card layer reads more clearly
• make the blog list cards more opaque in light mode and slightly strengthen the card borders
• keep the navbar transparent state border stable with a transparent bottom border in background-image

Verification

• pre-commit hooks passed during git commit
• npx prettier --check src/blog-list/index.module.scss
• npx prettier --check src/blog-list/BorderBeam.tsx src/blog-list/BorderBeam.module.scss
• npm run preflight (not available in this repository: missing script preflight)

[Copilot]

Pull request overview

Refines the blog page visual layering by adjusting background/frame opacity, strengthening blog list card styling, and stabilizing the transparent navbar border behavior.

Changes:

• Tweaked blog list card background opacity and border colors for better readability in light/dark modes.
• Reduced the blog frame overlay opacity and updated the MeteorsBackground integration after moving it under src/blog-background.
• Kept the transparent navbar state layout stable by using a transparent bottom border instead of removing the border.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/blog-list/index.module.scss	Adjusts card background/border CSS variables to improve contrast and clarity.
src/blog-background/index.tsx	Updates MeteorsBackground import to the new colocated module.
src/blog-background/index.module.scss	Lowers the blog frame opacity to reduce visual dominance.
src/blog-background/MeteorsBackground.tsx	Adds blur/opacity styling to the animated canvas background.
src/background-image/index.tsx	Stabilizes navbar layout by keeping a transparent bottom border in the “transparent” state.

Comments suppressed due to low confidence (1)

src/blog-background/MeteorsBackground.tsx:296

• Applying a CSS filter: blur(...) to an actively animated <canvas> forces the browser to re-rasterize/blur every frame, which can noticeably increase GPU/CPU usage (especially on high-DPI displays). Consider removing the CSS blur, or implementing the softening effect in the canvas draw step (e.g., via context settings or pre-rendered layers), or making it conditional (reduced motion / low-power mode).

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.