commig style.css

.gitignore

@@ -5,3 +5,4 @@
 !/script.js
 !/.gitignore
 !/collapse_log.lua
+!/style.css

abrechenbarkeit.lua

@@ -54,10 +54,6 @@ local query = parse_query(os.getenv("QUERY_STRING"))
 local stylesheet = io.open("style.css"):read("a")
 local script = io.open("script.js"):read("a")
 
-local script = [[
-    
-]]
-
 local function respond(status, title, body)
     print(string.format("Status: %d", status))
     print("Content-Type: text/html")

style.css

@@ -0,0 +1,148 @@
+body {
+    background-color: #25333f;
+}
+
+body > * {
+	margin: 0.5rem;
+}
+
+/* nav bar */
+*, .logo {
+    color: #e2e2e2;
+    font-family: "Roboto", sans-serif;
+}
+
+nav {
+    background-color: #1d2832;
+    margin: 0;
+    padding: 1em;
+    font-size: 1.2em;
+}
+
+nav a {
+    padding-right: 1em;
+    text-decoration: none;
+    color: rgb(65, 89, 110);
+}
+
+nav h2 {
+    display: inline-block
+}
+
+/* notification stuff */
+.notif {
+    padding: 0.5em;
+    background-color: #ddd;
+}
+
+.notif.error {
+    background-color: #faa;
+}
+
+.notif p {
+    margin: 5px;
+}
+
+/* landing page */
+form.creation {
+    background-color: #2e3d4d;
+    padding: 1em;
+    margin-top: 2em;
+}
+
+form.creation > h3 {
+    margin: 5px;
+    margin-right: 2em;
+}
+
+input {
+	color: #2e3d4d;
+}
+
+input[type="text"] {
+    width: calc(100% - 40em);
+    min-width: 10em;
+}
+
+form.creation > * {
+    display: inline-block;
+    margin-right: 1.5em;
+}
+
+li a {
+    text-decoration: none;
+}
+
+ul {
+    padding-left: 0;
+    display: grid;
+    justify-content: left;
+    grid-auto-rows: minmax(5em, auto);
+    gap: 1em;
+    grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
+    list-style-type: none;
+}
+
+li {
+    background-color: #2e3d4d;
+    width: 6em;
+    height: 3.5em;
+    padding: 1em;
+    margin: .5em;
+    margin-left: 0;
+}
+
+.name {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* Amount selector user page */
+.amount {
+    display: block;
+    padding-top: 1em;
+}
+
+.amount-presets {
+    display: grid;
+    justify-content: left;
+    grid-auto-rows: minmax(5em, 2);
+    grid-template-columns: repeat(6, 6em);
+    list-style-type: none;
+}
+
+.amount-presets > form {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.amount-presets > form > input {
+    place-content: center;
+    padding: 0.8em 0.5em;
+    border: none;
+    border-radius: 4px;
+    width: 6em;
+    margin: 1em;
+}
+
+.amount-presets input:not([type=submit]) {
+    display: none !important;
+}
+
+.amount-pos {
+	color: rgb(0, 204, 29);
+}
+
+input.amount-pos {
+    background: rgb(21, 89, 73);
+}
+
+.amount-neg {
+    color: rgb(245, 73, 99);
+}
+
+input.amount-neg {
+    background-color: rgb(84, 64, 82);
+}