From ca6836664f852d2d9cf1612cffbb9f56514b10b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Mon, 3 Jan 2022 20:27:01 +0100
Subject: [PATCH] style updates

---
 templates/index.html | 42 ++++++++++++++++++++++++++++++------------
 1 file changed, 30 insertions(+), 12 deletions(-)
diff --git a/templates/index.html b/templates/index.html
index 10ed3b6..e7df262 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -4,9 +4,16 @@
     <meta charset="UTF-8" />
     <title>ANABASIS CLIENTS</title>
     <meta http-equiv="refresh" content="60" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&display=swap"
+      rel="stylesheet"
+    />
     <style>
       body {
-        font-family: "Courier New", "Courier", monospace;
+        font-family: "IBM Plex Sans", sans-serif;
         color: white;
         background: black;
         text-align: center;
@@ -17,26 +24,36 @@
 
       h1,
       h2 {
+        margin-top: 1.5em;
         margin-bottom: 0 !important;
       }
 
       .status {
         font-size: 24pt;
-        font-weight: bold;
+        font-weight: 600;
         border: 2px solid;
-        padding: 0.25rem 0.5rem;
+        border-radius: 3px;
+        padding: 0.5em 0.75em;
       }
 
       .status-container {
         margin: 1rem 0;
       }
 
+      .status-container div {
+        margin-bottom: 0.5em;
+      }
+
       .status-empty {
-        border-color: red;
+        background: darkred;
       }
 
       .status-populated {
-        border-color: green;
+        background: darkgreen;
+      }
+
+      td {
+          padding: .1em .5em;
       }
 
       .log {
@@ -52,7 +69,7 @@
       }
 
       .datetime {
-        font-weight: bold;
+        font-weight: 600;
         margin: 1em 0;
       }
 
@@ -69,6 +86,8 @@
   </head>
   <body>
     <h1>/|\ Anabasis Clients</h1>
+    <div class="datetime">{{now.strftime("%c")}}</div>
+
     <h2>STATUS</h2>
     <div class="status-container">
       <div
@@ -78,14 +97,13 @@
       </div>
       <div class="status-explanation">{{status.text}}</div>
       <div class="level">{{status.level}}</div>
-    </div>
-    <div>
-      Since: {% if last_change %} {{last_change['ts'].strftime("%c")}} {% if
-      status.level == 0 %}({{last_change.leases | map(attribute='display') |
-      join(', ')}}){% endif %} {% else %} forever? {% endif %}
+      <div>
+        <strong>Since:</strong> {% if last_change %} {{last_change['ts'].strftime("%c")}} {% if
+        status.level == 0 %}({{last_change.leases | map(attribute='display') |
+        join(', ')}}){% endif %} {% else %} forever? {% endif %}
+      </div>
     </div>
     <h2>Current clients</h2>
-    <div class="datetime">{{now.strftime("%c")}}</div>
     <table>
       <tr>
         <th>MAC</th>
