style the user interface in style.css

1 files changed, 34 insertions, 13 deletions

diff --git a/style.css b/style.css
index f6a1075..ef7104a 100644
--- a/style.css
+++ b/style.css
@@ -3,8 +3,7 @@ body {
 }
 
 body > * {
-
-	: 0.5rem;
+	margin: 0.5rem;
 }
 
 .container {
@@ -15,11 +14,12 @@ body > * {
     list-style-type: none;
 }
 
-.container > :first-child {
+.container.firstchildlarge > :first-child {
 	grid-column: 1 / -1;	
 }
 
 .container > * {
+	display: block;
 	margin: 0.5rem;
 }
 
@@ -50,10 +50,15 @@ nav h2 {
     display: inline-block
 }
 
+nav > :last-child {
+	float: right;
+	padding-right: 0;
+}
+
 /* notification stuff */
 .notif {
     padding: 0.5em;
-    background-color: #ddd;
+    background-color: #1d2832;
 }
 
 .notif.error {
@@ -95,13 +100,14 @@ li a {
 }
 
 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;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 li {
@@ -180,20 +186,18 @@ h3 {
 	margin-left: 0;	
 }
 
-.box {
-	width: 16em;
+.backgroundbox {
+	width: fit-content;
 	background-color: #1d2832;
 	padding: 1em;
-	padding-right: 2em;
 }
 
 .transactions.container > :first-child {
 	width: 36em;
 }
 
-
 /* create transaction box */
-.transaction {
+.box {
 	display: grid;
     justify-content: left;
     /* grid-auto-rows: minmax(5em, 2); */
@@ -201,11 +205,28 @@ h3 {
     grid-template-columns: auto 10em;
 }
 
-.transaction :first-child, form.transaction.box > :last-child {
+form.box > :first-child, form.box > :last-child {
   grid-column: 1 / -1;
 }
 
-.transaction.box > * {
+form.box > * {
 	margin: .3em;
-	width: 100%;
+	width: auto;
 }
+
+
+table {
+	padding: 1em;
+	margin-right: auto;
+	margin-left: auto;
+}
+
+td {
+	padding: .3em;
+	min-width: 5em;
+}
+
+tr:nth-child(2n) {
+	background-color: #1d2832;
+}
+