feat(ui): align explorer with assetmantle.one + Game of Life background#102
Merged
Merged
Conversation
Mirror the website's design system into the explorer so users moving
between the two surfaces don't feel a brand jump:
- Logo: replace public/images/logo.svg with the wordmark from
AssetMantle/website (1099/180 aspect, three-tone fill).
- Fonts: ship BPdotsSquare (display), BPdotsSquareBold/Light, DMSans
(body) and DMSansItalic as woff2 under public/stylesheets/fonts/
assetMantle/, declared at the top of fonts.css with font-display:swap.
- Palette: theme.css now uses the website's surface tokens
(--bg-light-primary #fcfbf9, --bg-light-card #fffdfa,
--button-text #0d0a03, --gray #9c9a9a) and points --font-type-1 / -2
at the AM brand fonts. The :root font-family stack falls back to
Montserrat then sans-serif if a face fails to load.
- Default mode flipped to lightMode: common.scala.html body class +
darkMode.js cookie default. Pre-JS html background also set to
--bg-light-primary so we don't flash dark.
- Game of Life: ported AssetMantle/website's GlobalGameCanvas.js to
vanilla JS as gameOfLife.js. Single API surface:
AssetMantleGameOfLife.mountBackground(opts) // page-wide
AssetMantleGameOfLife.runOnButton(btn, opts) // per-button overlay
Page-wide canvas is auto-mounted on DOMContentLoaded behind the
bodyContainer (z-index:0, opacity:0.07, P26 reflector pattern, paused
when the tab is hidden). Buttons can opt in via runOnButton during
loading/confirm flows, then call .stop() to remove the canvas.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Brings the canonical explorer in visual sync with the assetmantle.one website so users don't feel a brand jump moving between the two surfaces.
public/images/logo.svgreplaced with the website's wordmark (1099/180, three-tone).public/stylesheets/fonts/assetMantle/. Declared at the top offonts.csswithfont-display: swap.theme.csstoken swap for light-mode surfaces —--bg-light-primary: #fcfbf9,--bg-light-card: #fffdfa,--button-text: #0d0a03,--gray: #9c9a9a.--font-type-1→BPdotsSquare,--font-type-2→DMSans.:rootfont-family stack falls back to Montserrat → sans-serif.common.scala.htmlbody class flipped fromdarkModetolightMode;darkMode.jscookie default also flipped.<html>background pre-set to--bg-light-primaryso the page doesn't flash dark before JS runs.AssetMantle/websiteGlobalGameCanvas.jsto vanilla JS asgameOfLife.js. Single API:DOMContentLoaded(z-index:0, opacity:0.07, P26 reflector pattern);bodyContainergetsz-index:1so cards float above. Pauses onvisibilitychangeto save cycles.Test plan
sbt distpasses; builtghcr.io/assetmantle/client:design-alignment(sha256:267d47e90428e30770d17c28e44832cff44fbbe02c3c9e2f039d350b6c830405)6D2297A1…)<body class="lightMode">by default with no cookiegameOfLife.jsserved as fingerprinted asset; theme.css + fonts.css fingerprinted<canvas id="am-game-bg">mounted in<body class="lightMode">https://explorer.assetmantle.one/returns 200 and renders correctly🤖 Generated with Claude Code