edit tt display, tweak css

static/styles.css

@@ -22,7 +22,7 @@ html, body {
   font-weight: 500;
   font-style: normal;
   background: #282a35;
-  color: #899194;
+  color: #b5b5b3;
 }
 
 .header-table-container {
@@ -43,7 +43,7 @@ html, body {
 }
 
 .header-station {
-  width: 79%;
+  width: 86.5%;
 }
 
 /* .header-clock {
@@ -51,31 +51,35 @@ html, body {
 } */
 
 .line {
-  width: 6%;
-  /* text-align: left; */
-  /* padding: 0 0 0 0; */
-  vertical-align: 25%;
+  width: 8%;
+  vertical-align: inherit;
 }
 
-.destination{
+/* .destination{
   padding: 100em;
-}
+} */
 
 .departure_time {
   width: 12%;
-  text-align: center;
+  text-align: left;
+  vertical-align: inherit;
+
 }
 
 .departure_delay {
   width: 10%;
   text-align: left;
   font-size: 50%;
-  color: #646a6c
+  color: #646a6c;
+  vertical-align: inherit;
+
 }
 
 .until_departure {
   width: 16%;
   text-align: right;
+  vertical-align: inherit;
+
 }
 
 .departure-table-container {
@@ -93,6 +97,7 @@ html, body {
   border-collapse: collapse;
   table-layout: fixed;
   font-size: 200%;
+  vertical-align: center;
 }
 
 
@@ -116,55 +121,55 @@ html, body {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0.2em 0.5em;    /* relative padding */
+  padding: 0.2em 0.5em;     /* relative padding */
   font-weight: bold;
-  font-size: 0.75em;
+  font-size: 100%;
   border-radius: 9999px;       /* pill shape adjusts automatically */
-  height: 100%;              /* takes most of cell height */
-  max-height: 100%;         /* don’t overflow cell */
-  width: 100%;
-  max-width: 100%;          /* stay within cell */
+  /* height: 50%; */
+  max-height: 50%;
+  /* width: 100%; */
+  max-width: 100%;
   aspect-ratio: 2 / 1;
   box-sizing: border-box;
   white-space: nowrap;      /* prevent text wrapping */
-  overflow: hidden;         /* hide overflow if text is too long */
+  overflow: hidden;
   text-overflow: ellipsis;  /* show "..." if necessary */
 }
 
 /* Colors for different lines */
 .line-S1 {
   background-color: #14bae7;
-  color: #b5b5b5;
+  /* color: #b5b5b5; */
 }
 
 .line-S2 {
   background-color: #75b728;
-  color: #b5b5b5;
+  /* color: #b5b5b5; */
 }
 
 .line-S3 {
   background-color: #951781;
-  color: #b5b5b5;
+  /* color: #b5b5b5; */
 }
 
 .line-S4 {
   background-color: #e30b1b;
-  color: #b5b5b5;
+  /* color: #b5b5b5; */
 }
 
 .line-S5 {
   background-color: #00517f;
-  color: #b5b5b5;
+  /* color: #b5b5b5; */
 }
 
 .line-S6 {
   background-color: #008c58;
-  color: #b5b5b5;
+  /* color: #b5b5b5; */
 }
 
 .line-S7 {
   background-color: #882d22;
-  color: #b5b5b5;
+  /* color: #b5b5b5; */
 }
 
 .line-S8 {
@@ -174,7 +179,7 @@ html, body {
 
 .line-S20 {
   background-color: #ea516c;
-  color: #b5b5b5;
+  /* color: #b5b5b5; */
 }
 
 .line-default {
@@ -190,10 +195,11 @@ html, body {
   color: #5bc812
 }
 
+.until-medium {
+  color: #dc9e21
+}
+
 .until-low {
   color: #dc4d21
 }
 
-.until-medium {
-  color: #dc9e21
-}