add more css variables + better readme

README.md

@@ -2,6 +2,52 @@ trinkey's fork of [notfire's qna](https://git.notfire.cc/notfire/qna)
 
 has the same functionality but i added custom css support and made the code less messy
 
+how to set up (debian):
+1. install php and whatnot (`sudo apt install postgresql php php-pgsql php-curl`)
+2. create the database
+   1. `sudo -iu postgres`
+   2. `psql`
+   3. `CREATE DATABASE db_name;`
+   4. change postgres password if needed: `ALTER USER postgres WITH PASSWORD 'new_password';`
+3. set up your config (`cp config.example.php config.php` then edit it as you need)
+4. initialize the database (`php setup.php`)
+5. for nginx: idk this config works for me:
+   ```
+   location = /qna {
+     return 301 https://example.com/qna/index.php;
+   }
+
+   location = /qna/ {
+     return 301 https://example.com/qna/index.php;
+   }
+
+   location ~ /qna/.+\.php$ {
+     root /path/to;
+     index qna/index.php;
+     include fastcgi.conf;
+     fastcgi_split_path_info ^(.+\.php)(/.+)$;
+     fastcgi_pass unix:/run/php/php8.1-fpm.sock;
+     fastcgi_index qna/index.php;
+   }
+
+   location = /qna/css/custom.css {
+     alias /path/to/custom.css;
+   }
+
+   location /qna/css {
+     alias /path/to/qna/css;
+   }
+
+   location /qna/ {
+     return 404;
+   }
+   ```
+
+   for local testing:
+   `php -S localhost:8000`
+
+if these steps don't work for you ... well that sucks. good luck
+
 ---
 
 to set up, generally:

css/base.css

@@ -1,12 +1,20 @@
 :root {
   --background-color: #000000;
   --text-color: #ffffff;
+
   --hr-color: #808080;
+
   --link-color: #ff0000;
   --confirmation-color: #00ff00;
+
   --question-background: #2c2c2c;
   --response-background: #505050;
 
+  --input-background: #000000;
+  --input-text: #ffffff;
+  --input-border: 2px inset #767676;
+  --input-focus-outline: 1px solid #ffffff;
+
   /* set to "none" to disable the background image */
   --background-image: url("https://notfire.cc/design/images/groundback.gif");
   --font-family: Arial, Helvetica, sans-serif;
@@ -84,9 +92,18 @@ hr {
 #questioninput,
 #cwinput,
 .submitbutton {
-  background-color: var(--background-color);
-  color: var(--text-color);
+  background-color: var(--input-background);
+  color: var(--input-text);
   margin-bottom: .3em;
+  border: var(--input-border);
+  border-radius: var(--input-border-radius);
+}
+
+#passinput:focus,
+#questioninput:focus,
+#cwinput:focus,
+.submitbutton:focus {
+  outline: var(--input-focus-outline);
 }
 
 .submitbutton {