Skip to content

style: polish site visuals with CSS#185

Open
lextoc wants to merge 1 commit into
SiegeEngineers:masterfrom
lextoc:css-visual-polish
Open

style: polish site visuals with CSS#185
lextoc wants to merge 1 commit into
SiegeEngineers:masterfrom
lextoc:css-visual-polish

Conversation

@lextoc
Copy link
Copy Markdown

@lextoc lextoc commented May 9, 2026

Summary

This PR proposes a CSS-only visual polish pass while preserving the existing layout and parchment-inspired direction.

Changes include:

  • add shared CSS theme variables for ink, accent, panel, focus, and shadow colors
  • style scrollbars to better match the site theme
  • refine the helptext popup with a warmer panel, themed border, subtle depth, and clearer spacing
  • add a restrained sidebar background fade without adding separate tinted content boxes inside the sidebar
  • improve focus and hover affordances for links, selects, cross-reference badges, highlighted paths, and tech tree nodes
  • keep tech tree node borders translucent to avoid visual clutter

No JavaScript or generated SVG structure changes are included.

Verification

  • git diff --check
  • node --check js/main.js
  • served locally with python3 -m http.server 8001
  • verified style.css is served locally with curl -I http://127.0.0.1:8001/style.css

Screenshot

PixelSnap 2026-05-09 at 09 54 15@2x

@lextoc lextoc force-pushed the css-visual-polish branch 2 times, most recently from b7dd111 to eafa3cf Compare May 9, 2026 08:07
Introduce shared theme variables for ink, accent, panel, focus, and shadow colors so related visual styling stays consistent across the static stylesheet.

Add custom browser scrollbar styling for the page, wrapper, sidebar, and tech tree scroll containers while allowing the tech tree pane to show vertical scrolling when content overflows.

Refine the helptext popup with a warmer panel color, stronger themed border, subtle depth, clearer spacing, and higher stacking context so selected item details read more cleanly.

Restore a restrained sidebar background treatment with a subtle fade and edge shadow, without adding separate tinted content boxes inside the sidebar.

Improve focus and hover affordances for links, selects, cross-reference badges, highlighted paths, and tech tree nodes using CSS only. Keep node borders translucent to avoid visual clutter and avoid JavaScript or generated SVG structure changes.
@lextoc lextoc force-pushed the css-visual-polish branch from eafa3cf to 514657d Compare May 9, 2026 08:10
@lextoc
Copy link
Copy Markdown
Author

lextoc commented May 9, 2026

Not going to lie, a bit ChatGPT driven (with some steering :D)! But I hope you like the changes, if you only want parts of the styling let me know and I will update the PR.

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