format css and variablize colors

1 files changed, 100 insertions, 84 deletions

diff --git a/style.css b/style.css
index c10bf61..836cc35 100644
--- a/style.css
+++ b/style.css
@@ -1,40 +1,50 @@
+:root {
+    --hue: 280;
+    --b0: hsl(var(--hue), 27%, 15%);
+    --b1: hsl(var(--hue), 26%, 20%);
+    --b2: hsl(var(--hue), 25%, 24%);
+    --t0: hsl(var(--hue), 00%, 89%);
+    --t1: hsl(var(--hue), 13%, 51%);
+}
+
 body {
-    background-color: #25333f;
+    background-color: var(--b1);
 }
 
-body > * {
-	margin: 0.5rem;
+body>* {
+    margin: 0.5rem;
 }
 
 .container {
-	display: grid;
-	flex-direction: column;
+    display: grid;
+    flex-direction: column;
     justify-content: left;
     grid-template-columns: auto auto;
     list-style-type: none;
 }
 
-.container.firstchildlarge > :first-child {
-	grid-column: 1 / -1;	
+.container.firstchildlarge> :first-child {
+    grid-column: 1 / -1;
 }
 
-.container > * {
-	display: block;
-	margin: 0.5rem;
+.container>* {
+    display: block;
+    margin: 0.5rem;
 }
 
 h1 {
-	font-size: 3em;
+    font-size: 3em;
 }
 
 /* nav bar */
-*, .logo {
-    color: #e2e2e2;
+*,
+.logo {
+    color: var(--t0);
     font-family: "Roboto", sans-serif;
 }
 
 nav {
-    background-color: #1d2832;
+    background-color: var(--b0);
     margin: 0;
     padding: 1em;
     font-size: 1.2em;
@@ -43,22 +53,22 @@ nav {
 nav a {
     padding-right: 1em;
     text-decoration: none;
-    color: rgb(65, 89, 110);
+    color: var(--t1);
 }
 
 nav h2 {
     display: inline-block
 }
 
-nav > :last-child {
-	float: right;
-	padding-right: 0;
+nav> :last-child {
+    float: right;
+    padding-right: 0;
 }
 
 /* notification stuff */
 .notif {
     padding: 0.5em;
-    background-color: #1d2832;
+    background-color: var(--b0);
 }
 
 .notif.error {
@@ -71,18 +81,18 @@ nav > :last-child {
 
 /* landing page */
 form.creation {
-    background-color: #2e3d4d;
+    background-color: var(--b2);
     padding: 1em;
     margin-top: 2em;
 }
 
-form.creation > h3 {
+form.creation>h3 {
     margin: 5px;
     margin-right: 2em;
 }
 
 input {
-	color: #2e3d4d;
+    color: var(--b2);
 }
 
 input[type="text"] {
@@ -90,7 +100,7 @@ input[type="text"] {
     min-width: 10em;
 }
 
-form.creation > * {
+form.creation>* {
     display: inline-block;
     margin-right: 1.5em;
 }
@@ -111,7 +121,7 @@ ul {
 }
 
 li {
-    background-color: #2e3d4d;
+    background-color: var(--b2);
     width: 6em;
     height: 3.5em;
     padding: 1em;
@@ -129,13 +139,13 @@ li {
 
 /* user page */
 .balance {
-	display: block;
-	line-break: normal;
+    display: block;
+    line-break: normal;
 }
 
 .balance-value {
-	padding-left: 1rem;
-	font-size: 2em;
+    padding-left: 1rem;
+    font-size: 2em;
 }
 
 h1 {
@@ -160,14 +170,15 @@ h1 {
     grid-template-columns: repeat(6, 6em);
     list-style-type: none;
 }
+
 input.button {
-	place-content: center;
-	padding: 0.8em 0.5em;
-	border: none;
-	border-radius: 4px;
+    place-content: center;
+    padding: 0.8em 0.5em;
+    border: none;
+    border-radius: 4px;
 }
 
-.amount-presets > form > input {
+.amount-presets>form>input {
     width: 6em;
     margin: 1em;
 }
@@ -177,7 +188,7 @@ input.button {
 }
 
 .amount-pos {
-	color: rgb(0, 204, 29);
+    color: rgb(0, 204, 29);
 }
 
 input.amount-pos {
@@ -202,95 +213,100 @@ input.amount-ntr {
 }
 
 h3 {
-	margin: 4px;
-	margin-left: 0;	
+    margin: 4px;
+    margin-left: 0;
 }
 
 .backgroundbox {
-	width: fit-content;
-	background-color: #1d2832;
-	padding: 1em;
+    width: fit-content;
+    background-color: var(--b0);
+    padding: 1em;
 }
 
-.transactions.container > :first-child {
-	width: 36em;
+.transactions.container> :first-child {
+    width: 36em;
 }
 
 /* create transaction box */
 .box {
-	display: grid;
+    display: grid;
     justify-content: left;
     /* grid-auto-rows: minmax(5em, 2); */
     /* grid-template-columns: repeat(2, calc(50% - 2em)); */
     grid-template-columns: auto 10em;
 }
 
-form.box > :first-child, form.box > :last-child {
-  grid-column: 1 / -1;
+form.box> :first-child,
+form.box> :last-child {
+    grid-column: 1 / -1;
 }
 
-form.box > * {
-	margin: .3em;
-	width: auto;
+form.box>* {
+    margin: .3em;
+    width: auto;
 }
 
 
 table {
-	padding: 1em;
-	margin-right: auto;
-	margin-left: auto;
+    padding: 1em;
+    margin-right: auto;
+    margin-left: auto;
 }
 
 td {
-	padding: .3em;
-	min-width: 5em;
+    padding: .3em;
+    min-width: 5em;
 }
 
 tr:nth-child(2n) {
-	background-color: #1d2832;
+    background-color: var(--b0);
 }
 
 input {
-	background-color: inherit;
-	color: white;
+    background-color: inherit;
+    color: white;
 }
 
 input:not([type=submit]) {
-	border: none;
-	border-bottom: 1px solid #e2e2e2;
+    border: none;
+    border-bottom: 1px solid var(--t0);
 }
 
 @media print {
-	nav, .container, h1 {
-		display: none;
-	}
 
-	table.log:before {
-		content: "Abrechenbarkeit Log";
-		font-size: 2em;
-		text-decoration: underline;
-	}
+    nav,
+    .container,
+    h1 {
+        display: none;
+    }
 
-	table.productlist:before {
-		content: "Produkt Liste";
-		font-size: 2em;
-		text-decoration: underline;
-	}
+    table.log:before {
+        content: "Abrechenbarkeit Log";
+        font-size: 2em;
+        text-decoration: underline;
+    }
 
-	tr :last-child {
-		display: none;		
-	}
+    table.productlist:before {
+        content: "Produkt Liste";
+        font-size: 2em;
+        text-decoration: underline;
+    }
 
-	td {
-	  border-bottom: 1px solid black;
-	}
+    tr :last-child {
+        display: none;
+    }
 
-	*, body {
-		background-color: white;
-		color: black;
-	}
+    td {
+        border-bottom: 1px solid black;
+    }
 
-	form {
-		display: none;
-	}
-}
+    *,
+    body {
+        background-color: white;
+        color: black;
+    }
+
+    form {
+        display: none;
+    }
+}
\ No newline at end of file