From f7cc3db25a5471fb37432b48db027d0ecdf7d37c Mon Sep 17 00:00:00 2001
From: neri <neri@ctdo.de>
Date: Wed, 8 Feb 2023 12:34:24 +0100
Subject: [PATCH] feat: update styling and layout

---
 .gitignore            |  1 +
 static/index.css      | 47 ++++++++++++++++++++++++++-----------------
 template/auth-hide.js | 26 ++++++++++++------------
 template/index.html   | 14 ++++++-------
 4 files changed, 50 insertions(+), 38 deletions(-)

diff --git a/.gitignore b/.gitignore
index c198eed..0b41c58 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 /target
 /files
 /static/index.html
+/static/auth-hide.js
 docker-push.sh
diff --git a/static/index.css b/static/index.css
index 3017522..d8155c0 100644
--- a/static/index.css
+++ b/static/index.css
@@ -1,11 +1,13 @@
 :root {
-  --bg: #222222;
-  --bg-alt: #444444;
+  --bg: #262824;
+  --bg-alt: #434742;
   --accent: #007600;
   --accent-alt: #228b22;
-  --fg: #e9e9e9;
-  --fg-light: #b6b6b6;
+  --fg: #dfe1de;
+  --fg-light: #afb3ab;
   --radius: 5px;
+  --separators: 1px;
+  --separators-wide: 2px;
 }
 
 html {
@@ -33,7 +35,7 @@ main {
   width: 100%;
   max-width: 1000px;
   margin: 0 auto;
-  padding: 1rem;
+  padding: 1em;
 }
 
 h1 > a,
@@ -60,13 +62,13 @@ select,
 textarea,
 .button {
   display: inline-block;
-  background-color: var(--bg);
+  background-color: var(--bg-alt);
   color: var(--fg);
-  padding: 0.5rem;
-  border: 2px solid var(--fg);
+  padding: 0.5em;
+  border: var(--separators) solid var(--fg-light);
   border-radius: var(--radius);
-  margin-bottom: 1rem;
-  max-width: calc(100vw - 2rem);
+  margin-bottom: 1.5em;
+  max-width: calc(100vw - 2em);
 }
 
 details {
@@ -75,6 +77,11 @@ details {
 
 details summary {
   cursor: pointer;
+  padding: 0.5em;
+}
+
+details[open] summary {
+  border-bottom: var(--separators) solid var(--fg-light);
 }
 
 input:focus-within,
@@ -83,7 +90,7 @@ textarea:focus-within,
 .button:focus-within,
 details:focus-within,
 a:focus-within {
-  outline: solid cornflowerblue 2px;
+  outline: solid cornflowerblue var(--separators);
   border-radius: var(--radius);
 }
 
@@ -101,17 +108,19 @@ h1 + textarea {
 }
 
 input[type='checkbox'] {
-  margin-bottom: 1.5rem;
+  margin-top: 0.5em;
+  margin-bottom: 1.5em;
 }
 
 .button {
   cursor: pointer;
   font-family: sans-serif;
   font-weight: normal;
-  font-size: 1rem;
-  margin-right: 0.5rem;
-  margin-top: 1rem;
+  font-size: 1em;
+  margin-right: 0.5em;
+  margin-top: 1em;
   user-select: none;
+  border-width: var(--separators-wide);
 }
 
 a.button {
@@ -124,6 +133,7 @@ a.button:visited {
 
 .button:hover {
   background-color: var(--bg-alt);
+  border-color: var(--fg);
 }
 
 .button.main {
@@ -137,6 +147,7 @@ a.button:visited {
 .usage {
   margin-top: 2em;
   overflow: auto;
+  color: var(--fg-light);
 }
 
 .large-link {
@@ -145,7 +156,7 @@ a.button:visited {
   max-height: 60vh;
   overflow-y: auto;
 
-  font-size: clamp(1rem, 3vw, 1.5rem);
+  font-size: clamp(1em, 3vw, 1.5em);
   overflow-wrap: anywhere;
 }
 
@@ -153,11 +164,11 @@ footer {
   flex-shrink: 0;
   display: flex;
   justify-content: flex-end;
-  padding: 0.5rem;
+  padding: 0.5em;
 }
 
 .repo {
-  padding: 0.5rem;
+  padding: 0.5em;
   color: var(--fg-light);
   text-decoration: none;
 }
diff --git a/template/auth-hide.js b/template/auth-hide.js
index bc76821..525623f 100644
--- a/template/auth-hide.js
+++ b/template/auth-hide.js
@@ -1,11 +1,11 @@
-const fileUpload = document.getElementById("file-upload");
-const textUpload = document.getElementById("text-upload");
-const keepFor = document.getElementById("keep_for");
-const passwordInput = document.getElementById("password-input");
+const fileUpload = document.getElementById('file-upload');
+const textUpload = document.getElementById('text-upload');
+const keepFor = document.getElementById('keep_for');
+const passwordInput = document.getElementById('password-input');
 
-const maxTime = Number("{no_auth_max_time}");
-const largeFileMaxTime = Number("{no_auth_large_file_max_time}");
-const largeFileSize = Number("{no_auth_large_file_size}");
+const maxTime = Number('{no_auth_max_time}');
+const largeFileMaxTime = Number('{no_auth_large_file_max_time}');
+const largeFileSize = Number('{no_auth_large_file_size}');
 
 let keep = Number(keepFor.value);
 let size = fileUpload.files[0]
@@ -13,26 +13,26 @@ let size = fileUpload.files[0]
   : textUpload.value.length;
 
 const updatePasswordInput = () => {
-  const requirePassword = keep > maxTime || (size > largeFileSize && keep > largeFileMaxTime);
-  passwordInput.className = requirePassword ? "" : "hidden";
+  const requirePassword =
+    keep > maxTime || (size > largeFileSize && keep > largeFileMaxTime);
+  passwordInput.className = requirePassword ? '' : 'hidden';
 };
 
 updatePasswordInput();
 
-fileUpload.addEventListener("change", () => {
+fileUpload.addEventListener('change', () => {
   size = fileUpload.files[0]
     ? fileUpload.files[0].size
     : textUpload.value.length;
   updatePasswordInput();
 });
-textUpload.addEventListener("input", () => {
+textUpload.addEventListener('input', () => {
   if (!fileUpload.files[0]) {
     size = textUpload.value.length;
     updatePasswordInput();
   }
 });
-keepFor.addEventListener("change", () => {
+keepFor.addEventListener('change', () => {
   keep = Number(keepFor.value);
   updatePasswordInput();
 });
-
diff --git a/template/index.html b/template/index.html
index 2f0d382..6f23305 100644
--- a/template/index.html
+++ b/template/index.html
@@ -19,6 +19,13 @@
         <br />
         <textarea id="text-upload" name="text" rows="15" cols="120"></textarea>
         <br />
+        <input
+          id="delete_on_download"
+          type="checkbox"
+          name="delete_on_download"
+        />
+        <label for="delete_on_download">nach einem download löschen</label>
+        <br />
         <label for="keep_for">gültig für</label>
         <select id="keep_for" name="keep_for">
           <option value="1800">30 minuten</option>
@@ -28,13 +35,6 @@
           <option value="604800">eine woche</option>
           <option value="2678400">einen monat</option>
         </select>
-        <br />
-        <input
-          id="delete_on_download"
-          type="checkbox"
-          name="delete_on_download"
-        />
-        <label for="delete_on_download">nach einem download löschen</label>
         <br />{auth_snippet}
         <input class="main button" type="submit" value="hochladen" />
       </form>