From bcb7bce83fcedc93444227ed4e127ca6f954efee Mon Sep 17 00:00:00 2001 From: s950tx16wasr10 Date: Fri, 22 May 2026 12:16:38 +0400 Subject: [PATCH] feat: win98 icon set + zig-zag server status + status-bar polish 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 " text is now wrapped in `` 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. --- _data/nav.yaml | 10 ++++---- img/icons/chart1-4.png | Bin 0 -> 505 bytes img/icons/globe_map-0.png | Bin 0 -> 850 bytes img/icons/homepage_alt.png | Bin 0 -> 452 bytes img/icons/joystick-3.png | Bin 0 -> 671 bytes img/icons/joystick-4.png | Bin 0 -> 661 bytes img/icons/regedit_binary-0.png | Bin 0 -> 420 bytes index.njk | 19 +++++++++++---- sass/pda.scss | 43 ++++++++++++++++++++++++++++++--- 9 files changed, 59 insertions(+), 13 deletions(-) create mode 100644 img/icons/chart1-4.png create mode 100644 img/icons/globe_map-0.png create mode 100644 img/icons/homepage_alt.png create mode 100644 img/icons/joystick-3.png create mode 100644 img/icons/joystick-4.png create mode 100644 img/icons/regedit_binary-0.png diff --git a/_data/nav.yaml b/_data/nav.yaml index eedb455..5872bb8 100644 --- a/_data/nav.yaml +++ b/_data/nav.yaml @@ -1,6 +1,6 @@ - label: Home url: / - icon: home.png + icon: homepage_alt.png - label: Discord url: https://discord.gg/wUqCpBH7Ua icon: discord.png @@ -9,13 +9,13 @@ icon: wiki.png - label: GitHub url: https://github.com/ReduxStation/ReduxStation - icon: github.png + icon: regedit_binary-0.png - label: StatBus url: https://stats.reduxstation.com - icon: statbus.png + icon: chart1-4.png - label: Logs url: https://logs.reduxstation.com - icon: logs.png + icon: globe_map-0.png - label: WebMap url: https://map.reduxstation.com - icon: webmap.png + icon: globe_map-0.png diff --git a/img/icons/chart1-4.png b/img/icons/chart1-4.png new file mode 100644 index 0000000000000000000000000000000000000000..fd18245f3064c66c5ea3d8a0b6e6840e3c944d2b GIT binary patch literal 505 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnF3?v&v(vJfvmUKs7M+SzC{oH>NSwWJ?9znhg z3{`3j3=J&|48MRv4KElNN(~qoUL`OvSj}Ky5HFasE6@fgp%~y3;tHgJ;Q#;s4Gj(d z|1%soaG;@q;XlLw28ITpFi^Kcs=#HS3dWKkzhDN3XE)M7oFs2|7p64sniL?1y~NYk zmHiQmFr%``zSYaCfkG!dT^vI+&ab_+m+z2*2x~$Gvz|$&%xnMWNy%G!mhF-bW;Yiv zyS#8+ZJS?d@!R04%wVl0i`5kyC+kmOXgSkbnf*#!hMOxPd)J}N3G;IfmiJt+*>A|b z?hM0O9fyO{H>T}4&k*q8apdL=la}3(5L}bY8yab?v?gw=@}a+pA`EUFMIxJWV>V_? zRTe1en{ae*vFqn=F3bLDePD_SjIo*6Du0$I!Knp%J~V@Z%-FoVOh8)+a;lDE4HTVmRdS|EqL#M9T6 z{SljlI2T`M_p3$*1||tl7sn8b)2)*>X5V%YIhLyBynE@y%&6tw0xUdni`Wn48L1RZ zy3QlSVrAtL$?Y^NTd~-4*OADgWX;wBrNsy5n5Sz#z4phx_W6;Eo`zp~-!Fe(eZTgE z!9VNw=DF$VhYdV(^BFD74zyL4MBL0@WjkrFLe|UQZKh1ohO>U(=UeTjd_ZzzzvHS# zwmKe3hSa&QZE`~!cx_)8n(aKtzOn395yPFrV-l~oG=K7FzFAROVfSY75?k3l4dppa zOyxFg$MOWXcqK%874X$gi}gFLJU=hLEa1VeSk2Aef_t_cQZwh{YCGKehxzs%7IAT& zvOtDSzaKL;ZfBay$IQ;EARhE8;Zpj9x4Rm;)`>VVH=IAFeuzoc>cI2VRU!vMVgoY{ zylh-`(Q?A32T~P}Q&tt9hOUlM3o32NV0do$jzp83gxV`gZ=?oX<(C ztY^wU68=>y{e6#;L675;+PU0z&%ZC!b2u6H>f!T0hAN_rare8NO?~imr$K@fFp_>*4E|Q9z=DJ6Sr8(o}mnWjr7D!G|2@HE_)OgR$W8N;__^+bt z(w=_iU#|6Z+sl7K2Z6~(wZt`|BqgyV)hf9t6-Y4{85mmV8kp%CnS>Y_TNxTy8Jg%C mm{=JYERyg1fubQdKP5A*61RrSPKGW(4Gf;HelF{r5}E)DN>7gf literal 0 HcmV?d00001 diff --git a/img/icons/homepage_alt.png b/img/icons/homepage_alt.png new file mode 100644 index 0000000000000000000000000000000000000000..ed75e23e63acf8b63aa11efdae79555d286b05e7 GIT binary patch literal 452 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnF3?v&v(vJfvmUKs7M+SzC{oH>NSwWJ?9znhg z3{`3j3=J&|48MRv4KElNN(~qoUL`OvSj}Ky5HFasE6@fgAsyfo;tEpG(D48Ne<0() zfddT<3=IqnKpv3K!L#-VP?WJG$S;_|;n|He5GTpo-GwQQyCwz5VK4FYb!C6VCLzva z^)GejCZNzvPZ!4!jq_8_`SLXx2(%^kaAq_58(gY=ED-5!%gFhX(dLlOGlsZ3jZVh8 z6OWYteDc~q@QqdILT?rhQ_B#u=IqIif4AI}?a*Y{u|KioX>_w%TqGYR}zU$}^T3vY!7Q|6!8J zoWM&PwlK$Z7hDj(de>@Z^+s_epd(dFTq8@|C sp^=p-kZWRPVDOZ|)*D4bZhlH;S|x4`Q({}c12r&sy85}Sb4q9e0P=j1eE!lvVtU&J%W50 z7^>757#dm_7=8hT8eT9klo~KFyh>nTu$sZZAYL$MSD+10A~3)w#1%-lwY42MZ~(~o z@#Dv|Y17Kf%dcO*zG>5@GiT2H2Wn?vm}v}@{Lhd!^X}cdAOV=@kM%zhDN3XE)M7oFs2|7pcgg^o%@~5 z-hCCg-65@i#Ou?&c8%vZzB4|aJddG!^USNu1sg1u&e5N|=@{dNr#5>({x0R2GNm_R zUmXtvhnIQHy@Pg$n82p)Oc-7d>8fy;4Xq^BRl&#t=@BhIPhv4lLzQ>eCM^6EVy z*e%Vxb;_or&Ix)`UFzgJeXSWz%zuAnvG&$$axOO+l~zBNTz`048B3R_f>Z3Ly8@0Y z)=ACU-Iy^iP~0xWA$6Ww=-+8uL%%a&O4>?awF(tWHwV2m}VMYKdz^NlIc#s#S7P zDv)9@GBC8zH89gPG6^vgTe~DWM4fdKm!h literal 0 HcmV?d00001 diff --git a/img/icons/joystick-4.png b/img/icons/joystick-4.png new file mode 100644 index 0000000000000000000000000000000000000000..a520d3ee6e8f244c729ffdb75752371b50202120 GIT binary patch literal 661 zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDB3?!H8JlO)ISkfJR9T^xl_H+M9WCijSl0AZa z85pY67#JE_7#My5g&JNkFq8r{zDi(Vu$sZZAYL$MSD+10LNUN6#1*8Vq2a)R13<=q zAOLcKECw(QCiZtSHUkA1OM?7@862M7NCR<_yxm<``ZI0@0y*p@p1!W^kJu!{d95c@ z?nnhnr+B(JhFF~Lon#wy*g(K->POa1liKR+XS1xxdCg*IDHVo<&FgfdZ8fbO^$#Ab(&Y2s7A?KW zaNSBHK1=rSw%&)P4O1t!JlDRjt=xF|_|G^=v-uxB#Y%F1SZwF4Wth3g?o~AB1)B$N z)3XcMg`aV);(52sjG;{XaMQ$wKy7EerHM@!R-c*>-TP88OZi)3)mB5VeWo*#_L=r{ z@63AgwEgMB+Mh~uij{L28r4s*X38baFPe~E_Nh3A>EutPV**u+Bm;KL*?y-jP4IN2 zWY8JbJ-Zu^UH1KVI?h+^X~UO;Z1b-h`h=LS)1NPsy+t{X=@i47^D1*bd|8?*vQ+ZD zq5d+-1)nb~#WVczRE%%bIai;uaz82M ze%5*WH1O8h<|p4iAN|E@`6J4f@n}~OFbY&lTq8@|Cp|O>zrLKXAm4U&Ut+5ADH00)|WTsW()^PX5(^{Yg22WQ%mvv4FO#t@z`lJ8= literal 0 HcmV?d00001 diff --git a/img/icons/regedit_binary-0.png b/img/icons/regedit_binary-0.png new file mode 100644 index 0000000000000000000000000000000000000000..0dd18bd1fab4b8d2505f62281a1783c17b78c56d GIT binary patch literal 420 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnF3?v&v(vJfvmUKs7M+SzC{oH>NSwWJ?9znhg z3{`3j3=J&|48MRv4KElNN(~qoUL`OvSj}Ky5HFasE6@fgAr#;f;tEpG(D48Ne+C91 zVmNT%fbjMEJAo|5k|4ie28U-i(m#5t|f)A?w8Mh5kUH zCQlc~5RLO|F9vcoDDbc)H1kaeVlTMH`h|)0HPgiJ`@POZKB-#KUMKK0*{9HJulxN; z2M>te_S_(}V6ua%TEl07rt*7A=U6*3eCwI+2QlRRANS;PuXV#d6Ij7(YnZex70dRs!f6)e_f;l9a@f zRIB8oR3OD*WMF8aYhb2pWENszU}a)yWnijnU}9xpFt4Q}3PnS1eoAIqC2kGxZyG!U PYGCkm^>bP0l+XkK>nMo1 literal 0 HcmV?d00001 diff --git a/index.njk b/index.njk index 0f2e156..a2c344b 100644 --- a/index.njk +++ b/index.njk @@ -94,11 +94,14 @@ {% for server in servers %}
-
Connected to {{ site.domain }}
-
checking...
+
+ + Connected to {{ site.domain }} +
+
+ + checking... +
diff --git a/sass/pda.scss b/sass/pda.scss index 8c72355..93f9ff8 100644 --- a/sass/pda.scss +++ b/sass/pda.scss @@ -371,9 +371,8 @@ body { .banner-head { display: flex; - justify-content: space-between; - align-items: baseline; - gap: 8px; + align-items: center; + gap: 10px; font-family: "MS Sans Serif", Tahoma, sans-serif; font-size: 11px; font-weight: bold; @@ -381,6 +380,21 @@ body { min-width: 0; } + .banner-icon { + width: 32px; + height: 32px; + flex-shrink: 0; + image-rendering: pixelated; + image-rendering: crisp-edges; + } + + .banner-head-text { + display: flex; + flex-direction: column; + gap: 2px; + min-width: 0; + } + .banner-name { min-width: 0; overflow: hidden; @@ -402,6 +416,9 @@ body { display: flex; flex-direction: column; gap: 2px; + // Zig-zag: indent the lower rows so they align with the text column + // sitting to the right of the 32px icon + 10px gap. + padding-left: 42px; } .version { color: $log-say; } @@ -470,11 +487,28 @@ body { display: flex; align-items: center; gap: 6px; + // No `overflow: hidden` here — it was clipping the status-dot's box-shadow + // on the left edge, which made the round dot look like a square. +} + +.status-bar .status-left .status-text, +.status-bar .status-right .playercount { + // The text content can ellipsize on long content, but its parent must NOT + // overflow:hidden because that clips the sibling status-dot's halo. + min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.status-icon { + width: 16px; + height: 16px; + flex-shrink: 0; + image-rendering: pixelated; + image-rendering: crisp-edges; +} + .status-dot { width: 8px; height: 8px; @@ -482,6 +516,9 @@ body { background: $log-system; flex-shrink: 0; display: inline-block; + // Margin so the glow halo on .online does not get cut off by the parent's + // edge. The dot is the first child of .status-right. + margin-left: 4px; &.online { background: $log-say; box-shadow: 0 0 4px $log-say; } &.offline { background: $log-attack; }