generate website

static/styles.css

@@ -0,0 +1,199 @@
+/* .header-box {
+  display: flex;
+  justify-content: space-between; /* pushes items to opposite sides
+  align-items: top;           /* vertically center them
+  width: 100%;
+  height: 12%;
+  font-size: 120%;
+}
+
+.header-box h1 {
+  margin: 0 2.5% 2.5% 2.5%;
+} */
+
+html, body {
+  /* margin: 0; */
+  padding: 0;
+  height: 100%;
+  overflow: hidden; /* no scrollbars */
+  font-size: 150%;
+  font-family: "Rubik", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 500;
+  font-style: normal;
+  background: #282a35;
+  color: #899194;
+}
+
+.header-table-container {
+  width: 95%;
+  margin: 0 2.5% 1% 2.5%;
+  height: 12%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.header-table {
+  width: 100%;
+  height: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+  font-size: 120%;
+}
+
+.header-station {
+  width: 79%;
+}
+
+/* .header-clock {
+  width: 15%; 
+} */
+
+.line {
+  width: 6%;
+  /* text-align: left; */
+  /* padding: 0 0 0 0; */
+  vertical-align: 25%;
+}
+
+.destination{
+  padding: 100em;
+}
+
+.departure_time {
+  width: 12%;
+  text-align: center;
+}
+
+.departure_delay {
+  width: 10%;
+  text-align: left;
+  font-size: 50%;
+  color: #646a6c
+}
+
+.until_departure {
+  width: 16%;
+  text-align: right;
+}
+
+.departure-table-container {
+  width: 95%;
+  margin: 0 2.5% 2.5% 2.5%;
+  height: 83%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.departure-table {
+  width: 100%;
+  height: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+  font-size: 200%;
+}
+
+
+.departure-table th,
+.departure-table td {
+  padding: 0 0.25em 0 0;
+  /* vertical-align: middle; */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  /* border: 1px solid #8de8fa; */
+  /* height: 12.5%; */
+}
+
+.departure-table td:last-child,
+.departure-table th:last-child {
+  padding-right: 0;
+}
+
+.line-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.2em 0.5em;    /* relative padding */
+  font-weight: bold;
+  font-size: 0.75em;
+  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 */
+  aspect-ratio: 2 / 1;
+  box-sizing: border-box;
+  white-space: nowrap;      /* prevent text wrapping */
+  overflow: hidden;         /* hide overflow if text is too long */
+  text-overflow: ellipsis;  /* show "..." if necessary */
+}
+
+/* Colors for different lines */
+.line-S1 {
+  background-color: #14bae7;
+  color: #b5b5b5;
+}
+
+.line-S2 {
+  background-color: #75b728;
+  color: #b5b5b5;
+}
+
+.line-S3 {
+  background-color: #951781;
+  color: #b5b5b5;
+}
+
+.line-S4 {
+  background-color: #e30b1b;
+  color: #b5b5b5;
+}
+
+.line-S5 {
+  background-color: #00517f;
+  color: #b5b5b5;
+}
+
+.line-S6 {
+  background-color: #008c58;
+  color: #b5b5b5;
+}
+
+.line-S7 {
+  background-color: #882d22;
+  color: #b5b5b5;
+}
+
+.line-S8 {
+  background-color: #000000;
+  color: #f0a901;
+}
+
+.line-S20 {
+  background-color: #ea516c;
+  color: #b5b5b5;
+}
+
+.line-default {
+  background-color: #bdc3c7;
+  color: #1f2831;
+}
+
+.delay-high {
+  color: #dc4d21;
+}
+
+.delay-neg {
+  color: #5bc812
+}
+
+.until-low {
+  color: #dc4d21
+}
+
+.until-medium {
+  color: #dc9e21
+}