Feature set 180. - #95
Merged
Merged
Conversation
Homepage redesign: the wordmark, a dark ground, and the art out front.
The mark replaces the runtime-assembled wordmark. moogleapi-logo-black.png is
a clean silhouette, so it is used as a CSS mask over a painted gradient rather
than drawn as an image: "moogle" red, "api" ink, split at 67.81% (the midpoint
of the gap between the "e" and the "a"). One file therefore serves light, dark
and FFIV, and moogleapi-logo-white.png is left on disk unreferenced.
.moogle-letter, the wobble keyframes and the clipped-gradient h1 all retire.
Dark mode is new and is a second, independent axis. theme.js grows a ground
under moogleapi-ground ('light' | 'dark' | 'system', defaulting to system) and
stamps data-theme on <html> before first paint, alongside the .ff-mode class it
already set. Two keys on purpose: sharing one would mean enabling dark mode
silently cleared someone's FFIV mode. The ground is stamped on every page that
loads theme.js, which is inert where no CSS reads it.
The light tokens deliberately sit at plain :root, a lower specificity than
ff4.css's :root.ff-mode, so FFIV wins every token it defines without home.css
enumerating them. The dark block has to say :not(.ff-mode) because it ties on
specificity and loads later.
FFIV is otherwise untouched, including its menu-screen layout: #page is still
the fixed scrolling left panel and #ff-menu the three windows on the right.
The moogle hotspot on the mark is the way in; Restore remains the way out,
because the hero it lives in is hidden in that mode.
The three sprite sheets are now in use, keying the collections they belong to
and sampling the payload above each endpoint list. Characters and monsters are
octagons, games are circles. One parametric .sprite rule drives all three from
each sheet's real geometry.
Also: one Docs link rather than two, the games line says Sphere Hunter, and
"mainline games" is now just "games".
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Merged
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.
Homepage redesign. The two logo exports and the three sprite sheets were sitting in
wwwroot/assetsunreferenced; this puts them to work.The mark
moogleapi-logo-black.pngis a clean silhouette — 24.1% alpha coverage, identical to the white export — so it is used as a CSS mask over a painted gradient rather than drawn as an image. That is what makes a two-tone wordmark possible on a flat raster: "moogle" red, "api" ink, split at 67.81%, which is the midpoint of the gap between the "e" (ends x=1263) and the "a" (starts x=1284) measured off the file.One consequence worth calling out: one file now serves light, dark and FFIV, so
moogleapi-logo-white.pnghas nothing left to do. It is left on disk rather than deleted..moogle-letter, the wobble keyframes and the clipped-gradienth1all retire — theh1stays in the markup, visually hidden, for crawlers and screen readers.Dark mode
A second, independent axis.
theme.jsgrows a ground stored undermoogleapi-ground(light|dark|system, defaulting tosystem) and stampsdata-themeon<html>before first paint, alongside the.ff-modeclass it already set.Two keys rather than one on purpose: sharing a key would mean turning on dark mode silently cleared someone's FFIV mode. It also makes the upgrade free — anyone already carrying
ff4is untouched, because the ground key is simply absent for them.The ground is stamped on every page that loads
theme.js, including the games hub. That is inert where no CSS reads it, and means those pages get dark mode the day their CSS grows the tokens.The cascade detail
The light tokens sit at plain
:root— specificity (0,1,0), deliberately lower thanff4.css's:root.ff-modeat (0,2,0) — so FFIV wins every token it defines withouthome.csshaving to enumerate them. Only the dark block says:not(.ff-mode), because:root[data-theme="dark"]ties on specificity and loads later. Without that, enabling dark mode repaints FFIV in ink.FFIV is untouched
Including its layout, which is the part that is easy to lose:
#pageis still the fixed, independently scrolling left panel and#ff-menustill the three windows pinned right. Those rules live inhome.css, notff4.css, so any change to this page has to carry the#pagewrapper and the#ff-menumarkup or FFIV silently degrades into a recoloured web page.The moogle hotspot on the mark is the way in.
Restoreremains the way out, because the hero it lives in is hidden in that mode.The sprite sheets
All three are clean sheets of evenly pitched square tiles, measured from the files:
character-octagons.webpmonster-octagons.webpgame-circles.webpThe monster sheet's extra 29px is headroom for the moogle's pom-pom on tile 1. One parametric
.spriterule drives all three. Characters and monsters are octagons, games are circles — an octagon is a thing in a game, a circle is a game.The six faces above each endpoint list are rows that endpoint actually returns, so the card answers "what is in this collection" before anyone clicks. The two collection accents are sampled off the octagon strokes.
Smaller things
/kupo-climbredirect and theClimbBuildercode are deliberately left alone?v=bumped onhome.cssandhome.js, and added totheme.js— it decides first paint now, so the edge must not serve an old copy against a new stylesheetVerified
dotnet format --verify-no-changesclean, Release build 0 warnings / 0 errors, 575 tests passing. All three themes rendered and checked in a browser at 1280px and 1440px.Not verified: the chocobo transition between grounds is a 1.5s animation, so it was reasoned about rather than watched.
🤖 Generated with Claude Code