feat: win98 icon set + zig-zag server status + status-bar polish - #12
Merged
Conversation
Replaces the placeholder icons with win98icons.alexmeub.com art, hosted
locally so the site stays self-contained. Restructures the server status
card so the joystick icon sits to the left of the name + game-state lines
and the address / map / players / revision flow underneath it, indented
to the icon's text column for a deliberate zig-zag silhouette. Fixes two
status-bar nits at the same time.
## Icons (downloaded to img/icons/, served at /assets/img/icons/)
- joystick-4.png - placed left of "ReduxStation 13" + "Playing X mode"
inside the server card.
- joystick-3.png - placed left of "Connected to ..." in the status bar.
- regedit_binary-0.png - replaces github.png in the shortcut nav.
- chart1-4.png - replaces statbus.png.
- globe_map-0.png - replaces logs.png AND webmap.png (both globe-y).
- homepage_alt.png - replaces home.png.
The old icons stay in img/icons/ for now in case we want to revert; only
the nav.yaml references and the new template img tags point at the new
files.
## Server status card
- New `.banner-head` is `[icon][text-column]`. The text column carries
the server name + version (the two `Loading.../Playing X mode "Y"`
lines), so the icon is "right before" those two lines as requested.
- `.banner-body` now carries the address + map + status + revision
lines, padded left by 42px (32px icon + 10px gap) so they sit under
the text column - that is the zig-zag.
- Banner-address moved out of the head into the body so the head stays
exactly two lines (matching the joystick icon height).
- JS selectors (.version, .map, .status, .revision) keep their existing
classes, so gamebanners.js does not need touching.
## Status bar
- Joystick-3 icon prepended to `.status-left`. The "Connected to <site>"
text is now wrapped in `<span class="status-text">` so the strong-tag
gap is normal inline spacing instead of being a 6px flex gap (which
was the "weird gap between Connected to and reduxstation").
- `.status-dot` was rendering as a clipped square because the parent's
`overflow: hidden` was cutting off the box-shadow halo on .online and
the dot was flush with the left edge. Moved the `overflow:hidden +
text-overflow:ellipsis + white-space:nowrap` triple from the parent
flex item down onto the *text content only* (.status-text and
.playercount), and added `margin-left: 4px` to the dot itself so its
4px halo has room to render. Round again, glow intact.
## Build pipeline
webpack.config.js already copy-passes `img/` -> `_site/assets/img/`, so
the new PNGs land at `/assets/img/icons/*.png` automatically. No build
config changes needed.
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.
What
img/icons/(webpack already passthrough-copiesimg/→/assets/img/).ReduxStation 13/Playing X mode) and the address / map / players / revision flow underneath, indented to the icon's text column. Zig-zag silhouette..status-dotsquare-clipping and the awkward gap betweenConnected toand the domain in the bottom status bar.Connected toin the status bar.Icon mapping
home.pnghomepage_alt.pnggithub.pngregedit_binary-0.pngstatbus.pngchart1-4.pnglogs.pngglobe_map-0.pngwebmap.pngglobe_map-0.pngjoystick-4.pngjoystick-3.pngThe old PNGs stay in
img/icons/for now in case a revert is needed;_data/nav.yamland the new template only point at the new files.Server status card layout
index.njkserver card was:Now:
The 42px indent on
.banner-bodymatches the icon's 32px width + 10px flex gap, so the bottom block sits directly under the text column. JS selectors (.version,.map,.status,.revision) are unchanged, sogamebanners.jsdoes not need touching.Status bar fixes
Square dot / clipped halo.
.status-bar .status-righthadoverflow: hiddento enabletext-overflow: ellipsison the playercount. That was also clipping the box-shadow halo on the.onlinedot, so the round dot looked like a square. Moved theoverflow:hidden + text-overflow:ellipsis + white-space:nowraptriple from the parent flex item down to the text-only children (.status-text,.playercount), and addedmargin-left: 4pxon the dot for halo headroom.Weird gap between "Connected to" and the domain. With
.status-leftset todisplay: flex; gap: 6px, the raw textConnected toand the<strong>were rendered as two separate flex items, so the natural inline space between them became a 6px flex gap. Wrapped the whole label in<span class="status-text">so it is one flex item with normal inline whitespace; the new joystick-3 icon is the other flex item.Forward-looking
These templates / styles are intentionally generic so the same status bar, status card, and shortcut nav can be reused on the other subdomains (stats, logs, webmap, wiki) for a unified theme down the road. The nav shortcuts already point at all those subdomains, ready for the reciprocal nav.