feat: win98 icon set + zig-zag server status + status-bar polish

_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

index.njk

@@ -94,11 +94,14 @@
         {% for server in servers %}
           <a class="gamebanner loading" id="{{ server.identifier }}" data-server="{{ server.identifier }}" href="byond://{{ server.public_address }}">
             <div class="banner-head">
-              <span class="banner-name">{{ server.name }}</span>
-              <span class="banner-address">{{ server.public_address }}</span>
+              <img class="banner-icon" src="/assets/img/icons/joystick-4.png?v={% buildId %}" alt="" aria-hidden="true" width="32" height="32">
+              <div class="banner-head-text">
+                <span class="banner-name">{{ server.name }}</span>
+                <span class="version">Loading...</span>
+              </div>
             </div>
             <div class="banner-body">
-              <span class="version">Loading...</span>
+              <span class="banner-address">{{ server.public_address }}</span>
               <span class="map">&nbsp;</span>
               <span class="status">&nbsp;</span>
               <span class="revision">&nbsp;</span>
@@ -123,8 +126,14 @@
   </div>
 
   <div class="status-bar">
-    <div class="status-left">Connected to <strong>{{ site.domain }}</strong></div>
-    <div class="status-right"><span class="status-dot offline" aria-hidden="true"></span><span class="playercount">checking...</span></div>
+    <div class="status-left">
+      <img class="status-icon" src="/assets/img/icons/joystick-3.png?v={% buildId %}" alt="" aria-hidden="true" width="16" height="16">
+      <span class="status-text">Connected to <strong>{{ site.domain }}</strong></span>
+    </div>
+    <div class="status-right">
+      <span class="status-dot offline" aria-hidden="true"></span>
+      <span class="playercount">checking...</span>
+    </div>
   </div>
 </main>
 

sass/pda.scss

@@ -371,16 +371,30 @@ 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;
     color: $pda-title;
     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,18 +487,38 @@ 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;
   border-radius: 50%;
   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; }