create capsul and capsuls list page working

capsulflask/static/style.css

@@ -30,10 +30,13 @@ a:hover, a:active, a:visited {
   display: flex;
   justify-content: space-between;
 }
+.nav-row a {
+  white-space: nowrap;
+}
 .nav-row:last-child {
   justify-content: center;
 }
-.nav-row:last-child a, .nav-row:last-child div {
+.nav-row:last-child a {
   margin: 0 1em;
 }
 
@@ -73,13 +76,13 @@ main {
   justify-content: space-around;
   width: 100%;
 }
-.row.wrap {
+.wrap {
   flex-wrap: wrap;
 }
-.row.justify-start {
+.justify-start {
   justify-content: flex-start;
 }
-.row.justify-end {
+.justify-end {
   justify-content: flex-end;
 }
 
@@ -116,6 +119,7 @@ select {
   background-repeat: no-repeat;
   background-position: bottom 0.65em right 0.8em;
   background-size: 0.5em;
+  padding-right: 2em;
 }
 
 input, textarea {
@@ -139,14 +143,16 @@ textarea {
   height: 6em;
 }
 
+input[type=checkbox] {
+  margin: 0;
+}
+
 input[type=submit], select, textarea {
   font: calc(0.40rem + 1vmin) monospace;
   border: 1px solid #777e73;
   background-color: #bdc7b810;
 }
 
-
-
 input[type=submit], select {
   cursor: pointer;
 }
@@ -162,6 +168,31 @@ ul li {
   margin: 0.5em 0;
 }
 
+table{
+  border-collapse: collapse;
+}
+thead {
+  background: #bdc7b812;
+}
+td, th {
+  padding: 0.2em 1em;
+}
+th {
+  border-right: 4px solid #241e1e;
+  text-align: left;
+}
+td {
+  border-bottom: 2px dotted #777e7355;
+}
+
+.waiting-pulse {
+  animation: waiting-pulse 1s ease-in-out 0s infinite forwards alternate;
+}
+@keyframes waiting-pulse {
+  from {  color: rgba(221, 169, 56, 0.8); }
+  to   {  color: rgba(221, 169, 56, 0.2); }
+}
+
 .code {
   display: inline-block;
   padding: 0.5em 2em;