remove unnecessary console.log, use css variables, and fix button overlapping on file server upload page

pages/upload.html

@@ -4,7 +4,7 @@
 <form action='https://files.hippoz.xyz/api/upload' method="POST" enctype="multipart/form-data">
     <input class="input" placeholder="password" type="password" name="password"> </br>
     <input class="input" placeholder="file name" type="text" name="filename"> </br>
-    <label class="button-default" for="upload-file">browse</label>
+    <label class="button-default" for="upload-file">browse</label> <br>
     <input type="file" name="file" id="upload-file"/> </br>
     <input class="button-default" type='submit' value='upload'/>
 </form>

res/index.js

@@ -1,7 +1,6 @@
 let selected = 'button-home';
 
 const changeSelected = (buttonId) => {
-    console.log(buttonId);
     A(`#${selected}`).removeClass('button-selected');
     A(`#${buttonId}`).addClass('button-selected');
     selected = buttonId;

res/style.css

@@ -1,14 +1,23 @@
+:root {
+    --body-bg-color: #2E2E2E;
+    --accent-bg-color: #d1d1d1;
+    --button-accent-color: #3d3d3d;
+    --selected-bg-color: #2E2E2E;
+    --hover-bg-color: #555555;
+    --main-font-weight: 400;
+}
+
 body {
-    background: #2E2E2E;
+    background: var(--body-bg-color);
     font-family: 'Roboto', sans-serif;
-    font-weight: 400;
+    font-weight: var(--main-font-weight);
 }
 
 .card {
     margin: 25px auto;
     padding: 20px;
     width: 400px;
-    background: #d1d1d1;
+    background: var(--accent-bg-color);
     border-radius: 3px;
 
 
@@ -33,30 +42,30 @@ body {
 .button-default {
     text-decoration: none;
     border: none;
-    background-color: #d1d1d1;
+    background-color: var(--accent-bg-color);
     border-radius: 5px;
     padding: 5px;
     font-size: 18px;
     white-space: nowrap;
     margin-top: 2px;
     margin-bottom: 2px;
-    color: #606060;
+    color: var(--button-accent-color);
     cursor: pointer;
     outline: none;
 }
 
 .button-default:hover:not(.button-selected) {
-    color: #d1d1d1;
-    background-color:#555555;
+    color: var(--accent-bg-color);
+    background-color: var(--hover-bg-color);
 }
 
 .button-selected {
-    color: #d1d1d1;
-    background-color:#2E2E2E;
+    color: var(--accent-bg-color);
+    background-color: var(--selected-bg-color);
 }
 
 .button-border {
-    border: 2px solid #606060;
+    border: 2px solid var(--button-accent-color);
 }
 
 @media screen and (max-width: 768px) {