diff --git a/site/index.html b/site/index.html index 6a47e11..49b36bc 100644 --- a/site/index.html +++ b/site/index.html @@ -8,9 +8,9 @@ - + - +
@@ -53,28 +53,32 @@

Server Status

-
-
US Server0 Players
-
Alis
-
V20 Players
-
V30 Players
-
BB0 Players
-
Abion
-
HC/BB0 Players
-
AdHoc-US
-
PSP10 Players
-
PSP2i0 Players
+
+
+
US Server0 Players
+
Alis
+
V20 Players
+
V30 Players
+
BB0 Players
+
Abion
+
HC/BB0 Players
+
AdHoc-US
+
PSP10 Players
+
PSP2i0 Players
+
-
EU Server0 Players
-
Palma
-
V20 Players
-
V30 Players
-
BB0 Players
-
Aiedo
-
HC/BB0 Players
-
AdHoc-EU
-
PSP10 Players
-
PSP2i0 Players
+
+
EU Server0 Players
+
Palma
+
V20 Players
+
V30 Players
+
BB0 Players
+
Aiedo
+
HC/BB0 Players
+
AdHoc-EU
+
PSP10 Players
+
PSP2i0 Players
+
diff --git a/site/server-status.js b/site/server-status.js index 2697c26..e59ea6c 100644 --- a/site/server-status.js +++ b/site/server-status.js @@ -19,20 +19,23 @@ const servers = Array.isArray(data?.servers) ? data.servers : []; if (!servers.length) return; + list.classList.add("status-list--regions"); list.innerHTML = servers.map((server) => ` -
- ${esc(server.label)}${players(server.players)} -
- ${(server.ships || []).map((ship) => ` -
- ${esc(ship.label)} +
+
+ ${esc(server.label)}${players(server.players)}
- ${(ship.rows || []).map((row) => ` -
- ${esc(row.label)}${players(row.players)} + ${(server.ships || []).map((ship) => ` +
+ ${esc(ship.label)}
+ ${(ship.rows || []).map((row) => ` +
+ ${esc(row.label)}${players(row.players)} +
+ `).join("")} `).join("")} - `).join("")} +
`).join(""); }; diff --git a/site/style.css b/site/style.css index 99444e1..d5eb819 100644 --- a/site/style.css +++ b/site/style.css @@ -1886,8 +1886,32 @@ button.inline-link, } -/* Home server status: reduce inner table width */ -.server-card .status-list { - max-width: 92%; +/* Home server status: split US/EU into two inner boxes */ +.server-card .status-list.status-list--regions { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 1rem; + background: transparent; + border: 0; + padding: 0; +} + +.server-card .status-region { + display: grid; + gap: 0.35rem; + padding: 1rem; + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 0.45rem; + background: rgba(0, 0, 0, 0.35); +} + +.server-card .status-region .status-row { + grid-template-columns: minmax(0, 1fr) max-content; +} + +@media (max-width: 720px) { + .server-card .status-list.status-list--regions { + grid-template-columns: 1fr; + } }