feat: Working on layout / css.

Public/css/main.css

@@ -23,6 +23,30 @@ header {
   border-bottom: 1px solid grey;
 }
 
+.col-1 {width: 8.33%;}
+.col-2 {width: 16.66%;}
+.col-3 {width: 25%;}
+.col-4 {width: 33.33%;}
+.col-5 {width: 41.66%;}
+.col-6 {width: 50%;}
+.col-7 {width: 58.33%;}
+.col-8 {width: 66.66%;}
+.col-9 {width: 75%;}
+.col-10 {width: 83.33%;}
+.col-11 {width: 91.66%;}
+.col-12 {width: 100%;}
+
+[class*="col-"] {
+  float: left;
+  padding: 15px;
+}
+
+.row::after {
+  content: "";
+  clear: both;
+  display: table;
+}
+
 #logo {
   float: left;
   font-size: 1.5em;
@@ -101,6 +125,7 @@ input[type=text], input[type=password], input[type=email], input[type=number] {
   border: none;
   border-bottom: 2px solid #555;
   padding: 5px;
+  font-size: 1.2em;
 }
 
 select {
@@ -401,35 +426,25 @@ button.edit {
   opacity: 0.8;
 }
 
-.row {
-  display: flex;
-  margin: 10px 0;
-  width: 100%;
-}
-
-.row .container {
-  display: inline;
-}
-
 .input {
   display: inline;
   width: 100%;
 }
 
 .row .input {
-  display: inline;
   border: none;
 }
 
 .row label {
-  display: inline-block;
-  width: 400px;
-  margin-right: 20px;
+  display: inline;
 }
 
-.htmx-swapping {
-  opacity: 0;
-  transition: opacity 1s ease-in-out;
+.row .label {
+  font-size: 1.25em;
+}
+
+.row .date {
+  font-size: 1.25em;
 }
 
 #employee-detail form input[type=text] {
@@ -453,6 +468,11 @@ button.edit {
   display: inline-block;
 }
 
+.htmx-swapping {
+  opacity: 0;
+  transition: opacity 1s ease-in-out;
+}
+
 .htmx-indicator {
   display: none;
 }
@@ -465,14 +485,28 @@ button.edit {
   display: inline;
 }
 
-.btn-detail {
+.btn-detail, .btn-add, .btn-close {
   border: none;
   color: grey;
-  text-decoration: .none;
+  text-decoration: none;
+  background-color: inherit;
+}
+
+.btn-detail {
   margin-left: 10px;
 }
 
+button:hover {
+  background-color: #444;
+  opacity: 0.8;
+}
+
 .btn-detail:hover {
   background-color: #444;
   opacity: 0.8;
 }
+
+.btn-close {
+  float: right;
+  font-size: 1.5em;
+}