Skip to content

Night-sky / star-atlas redesign with unified liquid-glass controls - #104

Open
swear01 wants to merge 1 commit into
mainfrom
design/starfield-redesign
Open

swear01 wants to merge 1 commit into
mainfrom
design/starfield-redesign

Conversation

@swear01

@swear01 swear01 commented Oct 17, 2026 •

Copy link
Copy Markdown
Contributor

Summary

  • Dark theme: much deeper midnight sky (Milky Way, Big Dipper / Cassiopeia / Orion / Cygnus, twinkling stars) under liquid glass.
  • Light theme: the same sky printed as a star atlas (polar grid, constellation figures, gold ecliptic) under vellum glass. Gold stays as the starlight accent.
  • One control system: every button is a 40px glass pill (.btn, .btn-primary, .btn-icon); chips are 28px pills; search is a 44px pill; floating glass header with pill nav; solid mobile menu sheet.
  • Typography: self-hosted Jost (Futura revival) for Latin, system Traditional Chinese for CJK. Removed unused font files (~5.5 MB, incl. an unreferenced Noto Sans TC VF).
  • Host page: new layout; contact icons are now uniform round buttons with solid marks at one size (envelope, LinkedIn, Facebook, LINE bubble, globe).
  • Copy: rewrote machine-sounding Chinese (host P.S. and advisor note, home intro, empty states, 404).
  • Home news is a star timeline; hero canvas draws constellations (pointer links to nearby stars).
  • PRODUCT.md / DESIGN.md document the system; sky assets are reproducible via scripts/generate-sky.mjs.

Verification

  • PUBLIC_SITE_URL=https://dvlab-ntu.github.io npm run verify: all five stages pass.
  • npm run test:browser (Playwright): all pass. The suite was already failing on main (it still referenced the removed member search); stale assertions were updated to the current UI.
  • Screenshots checked at 1440 and 390 in both themes for home, host, members, papers, courses, awards and member detail.

🤖 Generated with Claude Code


Note

Medium Risk
Site-wide visual, typography, and layout changes touch every page and global chrome; content and routing stay static but regressions would affect readability, navigation, and brand consistency.

Overview
Replaces the legacy CRA look with the DVLab Night Sky system: dark mode is a deep starfield with liquid-glass UI; light mode is the same stars as a printed star atlas, with gold kept as the only accent. DESIGN.md / PRODUCT.md document the rules; seeded scripts/generate-sky.mjs outputs night.svg, chart.svg, and sky-twinkle.json (committed, not hand-edited).

Layout and chrome: BaseLayout drops per-route gradient backdrops for a fixed .sky layer (SVG + twinkle in dark, off under reduced motion). Styles consolidate around tokens.css, base.css, components.css, and new pages.css; CRA Helvetica/Coolvetica stacks are removed in favor of self-hosted Jost plus system Chinese. Header utilities become icon pills (Lucide sun/moon theme toggle); external links share ExternalLinkIcon.

Pages and behavior: Host gets a sticky portrait + round SocialIcon contact buttons; home news becomes a year/month timeline; courses lose inline scoped CSS for shared list styles. Home particles.mjs now draws constellation links (pointer + click clusters) instead of square particles. Copy is tightened in page-copy.mjs, 404, and host bio markdown.

Cleanup: HostSocialSquareIcon and cra-fontawesome-icons removed; lucide-icons gains theme/external glyphs only for nav/theme/links.

Reviewed by Cursor Bugbot for commit a61f489. Bugbot is set up for automated code reviews on this repo. Configure here.

…ontrols

- Dark theme: deeper midnight sky with Milky Way, constellations and twinkling
  stars; light theme: the same sky printed as a star atlas. Gold kept as the
  starlight accent. Sky assets come from scripts/generate-sky.mjs.
- One control system: 40px pill buttons (.btn / .btn-primary / .btn-icon),
  28px chips, 44px search field, floating glass header with pill nav and a
  solid mobile menu sheet.
- Typography: self-hosted Jost for Latin, system Traditional Chinese for CJK;
  removed unused Helvetica/Coolvetica/Inter/Noto font files.
- Host page: new layout and uniform round contact buttons with solid marks.
- Rewrote machine-sounding Chinese copy (host note, home intro, empty states, 404).
- Home news as a star timeline; constellation canvas on the hero.
- Updated stale browser tests; added PRODUCT.md and DESIGN.md.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@cursor

cursor Bot commented Oct 17, 2026

Copy link
Copy Markdown

Bugbot couldn't run - usage limit reached

Bugbot is counted against Cursor usage for this user or team, and this run hit a usage or spend limit.

A user or team admin can review and increase usage limits in the Cursor dashboard.

(requestId: 84fba6d3-2e70-4703-a051-52fa9c949304)

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant