From a81a29df556255aed897e803eb235a7df602f427 Mon Sep 17 00:00:00 2001
From: Paul Zinselmeyer <info@pfzetto.de>
Date: Mon, 29 Jan 2024 21:28:47 +0100
Subject: [PATCH] style improvement

---
 Cargo.lock                  | 14 +++++++++++
 server/templates/index.stpl |  4 +--
 server/templates/style.stpl | 50 +++++++++++++++++++++++++++++++++----
 3 files changed, 61 insertions(+), 7 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index 4858dc3..385ca31 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -3306,3 +3306,17 @@ name = "zeroize"
 version = "1.7.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "525b4ec142c6b68a2d10f01f7bbf6755599ca3f81ea53b8431b7dd348f5fdb2d"
+dependencies = [
+ "zeroize_derive",
+]
+
+[[package]]
+name = "zeroize_derive"
+version = "1.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ce36e65b0d2999d2aafac989fb249189a141aee1f53c612c1f37d72631959f69"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.48",
+]
diff --git a/server/templates/index.stpl b/server/templates/index.stpl
index f53a9bb..3a2b701 100644
--- a/server/templates/index.stpl
+++ b/server/templates/index.stpl
@@ -20,8 +20,8 @@
 
             <h1>web upload</h1>
             <label class="file">
-              <input type="file" id="file" aria-label="File browser">
-              <span class="file-custom"></span>
+                <input type="file" id="file" aria-label="File browser">
+                <span class="file-custom"></span>
             </label>
             <button type="button" onclick="upload()">Upload</button>
 
diff --git a/server/templates/style.stpl b/server/templates/style.stpl
index d3829c7..75db459 100644
--- a/server/templates/style.stpl
+++ b/server/templates/style.stpl
@@ -1,11 +1,18 @@
 <style>
-    body, html {
-        margin: 0;
+    html {
+        font-family: monospace;
+        font-site: 12px;
+        text-align: justify;
+    }
+    body {
         background-color: black;
+        color: white;
+
+        margin: 0;
+
         height: 100%;
         width: 100%;
-        color: white;
-        font-family: monospace;
+        max-width: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -18,11 +25,21 @@
       flex-direction: column;
     }
 
+    main {
+        max-width: calc(100% - 8px);
+        padding: 4px;
+    }
+
+    pre {
+        max-width: 100%;
+        overflow-x: scroll;
+    }
+
     a {
       color: white;
     }
 
-    p {
+    p, input, button {
       margin-top: 2px;
       margin-bottom: 2px;
     }
@@ -50,4 +67,27 @@
         width: 100%;
         height: 100%;
     }
+
+    button, input[type="file"]::file-selector-button {
+        cursor: pointer;
+        text-decoration-line: underline;
+        background-color: transparent;
+        color: white;
+
+        padding: 0;
+
+        border: none;
+    }
+    button:active, input[type="file"]::file-selector-button:active {
+        background-color: transparent;
+        color: white;
+        padding: 0;
+    }
+
+    input[type="file"] {
+        display: block;
+        border: none;
+        cursor: pointer;
+        padding: 0;
+    }
 </style>