Fix mobile

css/style.css

@@ -27,24 +27,32 @@ a:hover {
   text-align: center;
   background: #000080;
   color: #ffff00;
-  padding: 12px;
+  padding: 12px 8px;
   border: 4px outset #808080;
-  font-size: 28px;
+  font-size: clamp(12px, 4vw, 28px);
   font-weight: bold;
-  letter-spacing: 2px;
+  letter-spacing: clamp(0px, 0.35vw, 2px);
+  line-height: 1.2;
   text-shadow: 2px 2px #000000;
+  max-width: 100%;
+  overflow: hidden;
+  overflow-wrap: anywhere;
 }
 
 .nav {
   text-align: center;
   margin: 12px 0;
-  padding: 8px;
+  padding: 8px 4px;
   background: #d4d0c8;
   border: 2px inset #808080;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px 12px;
 }
 
 .nav a {
-  margin: 0 16px;
+  margin: 0;
   font-weight: bold;
   text-decoration: underline;
 }
@@ -206,3 +214,42 @@ hr {
   font-family: "Courier New", Courier, monospace;
   color: #404040;
 }
+
+@media (max-width: 640px) {
+  body {
+    padding: 8px;
+  }
+
+  .banner {
+    padding: 10px 6px;
+    border-width: 3px;
+  }
+
+  .content-table,
+  .content-table tbody,
+  .content-table tr,
+  .content-table td {
+    display: block;
+    width: 100% !important;
+  }
+
+  .content-table td {
+    padding: 0;
+  }
+
+  .content-table td + td {
+    margin-top: 12px;
+  }
+
+  .stat-value {
+    font-size: 36px;
+  }
+
+  #stat-status {
+    font-size: 24px;
+  }
+
+  .panel {
+    padding: 10px;
+  }
+}

live/live.json

@@ -1,6 +1,6 @@
 {
-  "timestamp": 1781667629,
-  "uptime": 86412,
+  "timestamp": 1781719415,
+  "uptime": -1,
   "listeners": 0,
-  "status": "online"
+  "status": "no connection"
 }