From 19b863e5ca1b9c2cb3ceda18012904719b84ef24 Mon Sep 17 00:00:00 2001
From: Melora Hugues <dev@faercol.me>
Date: Sat, 16 Sep 2023 13:48:21 +0200
Subject: [PATCH] use catppuccin-mocha

---
 bootserver/static/stylesheets/main.css | 121 ++++++++++++++++++-------
 bootserver/templates/index.html        |  62 +++++++------
 2 files changed, 120 insertions(+), 63 deletions(-)

diff --git a/bootserver/static/stylesheets/main.css b/bootserver/static/stylesheets/main.css
index 7dc4799..d11e3ca 100644
--- a/bootserver/static/stylesheets/main.css
+++ b/bootserver/static/stylesheets/main.css
@@ -1,55 +1,108 @@
 :root {
-    --page-background: #000000;
-    --background: #121212;
-    --surface: #181818;
-    --surface-active: #303030;
-    --surface-hover: #aaaaaa;
-    --primary: #3b80c9;
-    --primary-variant: #c9953b;
-    --secondary: #c94e3b;
-    --text-main: #ffffff;
-    --text-variant: #9B9B9B;
+    /* Base colours */
+    --base: #1e1e2e;
+    --mantle: #181825;
+    --crust: #11111b;
+
+    /* Surface colours */
+    --surface0: #313244;
+    --surface1: #45475a;
+    --surface2: #585b70;
+    --overlay0: #6c7086;
+    --overlay1: #7f849c;
+    --overlay2: #9399b2;
+
+    /* Text colours */
+    --text: #cdd6f4;
+    --subtext0: #a6adc8;
+    --subtext1: #bac2de;
+
+    /* Main colours */
+    --rosewater: #f5e0dc;
+    --flamingo: #f2cdcd;
+    --pink: #f5c2e7;
+    --mauve: #cba6f7;
+    --red: #f38ba8;
+    --maroon: #eba0ac;
+    --peach: #fab387;
+    --yellow: #f9e2af;
+    --green: #a6e3a1;
+    --teal: #94e2d5;
+    --sky: #89dceb;
+    --sapphire: #74c7ec;
+    --blue: #89b4fa;
+    --lavender: #b4befe;
 }
 
 
 body {
-    background-color: var(--page-background);
-    color: var(--text-main);
+    background-color: var(--crust);
+    color: var(--text);
 }
 
 .page-content {
-    width: 90%;
-    max-width: 1200px;
+    max-width: 1500px;
     margin: auto;
 }
 
 .container {
-    border-radius: 5px;
-    background-color: var(--surface);
-    padding: 5px;
-    border-radius: 5px 5px;
+    border-radius: 20px;
+    background-color: var(--base);
+    padding: 5px 10px;
     margin: 5px auto;
 }
 
+.header-grid {
+    display: grid;
+    grid-template-columns: 1fr 3fr;
+    align-items: stretch;
+    justify-items: stretch;
+    column-gap: 10px;
+    margin: 5px auto;
+
+    .container {
+        padding: 10px;
+        margin: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}
+
+.client-list-grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    justify-items: stretch;
+    margin: 5px auto;
+    row-gap: 5px;
+
+    .container {
+        margin: 0;
+    }
+}
+
+.stat-container {
+    h2 {
+        margin: auto;
+        width: 100%;
+        vertical-align: middle;
+    }
+}
+
 .main-container {
     padding: 20px;
 }
 
 .title-container {
-    background-color: var(--primary);
-}
+    color: var(--blue);
 
-.client-list-container {
-    border-radius: 0px 0px 5px 5px;
-    padding: 10px;
-    background-color: var(--surface);
-}
 
-.client-container {
-    border-radius: 5px;
-    padding: 4px;
-    margin-top: 2px;
-    margin-bottom: 2px;
+    h1 {
+        margin: auto;
+        padding: auto;
+        vertical-align: middle;
+        width: 100%;
+    }
 }
 
 .client-header {
@@ -60,7 +113,7 @@ body {
 
     .client-uuid {
         font-size: smaller;
-        color: var(--text-variant);
+        color: var(--subtext1);
     }
 }
 
@@ -75,12 +128,12 @@ body {
     cursor: pointer;
 
     &.selected {
-        background-color: var(--surface-active);
+        background-color: var(--overlay0);
         cursor: default;
     }
 
     &:hover {
-        background-color: var(--surface-hover);
+        background-color: var(--overlay2);
         --text-variant: #000000;
     }
 }
@@ -92,7 +145,7 @@ body {
 
 .boot-option-uuid {
     font-size: smaller;
-    color: var(--text-variant);
+    color: var(--subtext0);
 }
 
 .boot-option-path {
diff --git a/bootserver/templates/index.html b/bootserver/templates/index.html
index f45d03f..949de20 100644
--- a/bootserver/templates/index.html
+++ b/bootserver/templates/index.html
@@ -11,41 +11,45 @@
 <body>
     <div class="page-content">
 
-        <div class="title-container container">
-            <h1>HTTP boot server admin page</h1>
-        </div>
+        <div class="header-grid">
 
-        <div class="main-container container">
-            <div class="client-list">
+            <div class="stat-container container">
                 <h2>{{len .Clients}} enrolled clients</h2>
+            </div>
 
-                {{range .Clients}}
-                <div class="client-container">
-                    <div class="client-header">
-                        <span class="client-name">{{.Name}}</span>
-                        <span class="client-uuid">{{.ID}}</span>
-                    </div>
-                    <div class="client-content">
-                        <div class="client-boot-options">
-                            {{$cid := .ID}}{{range .BootOptions}}
-                            <div class="client-boot-option{{if .Selected}} selected{{end}}"
-                                onclick="selectBootOption('{{$cid}}', '{{.ID}}')">
-                                <div>
-                                    <span class="boot-option-name">{{.Name}}</span>
-                                    <span class="boot-option-uuid">{{.ID}}</span>
-                                </div>
-                                <div>
-                                    <span class="boot-option-path">{{.Path}}</span>
-                                </div>
-                            </div>
-                            {{end}}
-                        </div>
-                    </div>
-                </div>
-                {{end}}
+            <div class="title-container container">
+                <h1>HTTP boot server admin page</h1>
             </div>
 
         </div>
+
+        <div class="client-list-grid">
+            {{range .Clients}}
+            <div class="client-container container">
+                <div class="client-header">
+                    <span class="client-name">{{.Name}}</span>
+                    <span class="client-uuid">{{.ID}}</span>
+                </div>
+                <div class="client-content">
+                    <div class="client-boot-options">
+                        {{$cid := .ID}}{{range .BootOptions}}
+                        <div class="client-boot-option{{if .Selected}} selected{{end}}"
+                            onclick="selectBootOption('{{$cid}}', '{{.ID}}')">
+                            <div>
+                                <span class="boot-option-name">{{.Name}}</span>
+                                <span class="boot-option-uuid">{{.ID}}</span>
+                            </div>
+                            <div>
+                                <span class="boot-option-path">{{.Path}}</span>
+                            </div>
+                        </div>
+                        {{end}}
+                    </div>
+                </div>
+            </div>
+            {{end}}
+        </div>
+
     </div>
 </body>