First prototype
diff --git a/css/index.css b/css/index.css
new file mode 100644
index 0000000..fe5d9b0
--- /dev/null
+++ b/css/index.css
@@ -0,0 +1,7 @@
+body {
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+}
+
+form label {
+ font-weight: bold;
+}
diff --git a/css/views/l9n.css b/css/views/l9n.css
new file mode 100644
index 0000000..ccfab0c
--- /dev/null
+++ b/css/views/l9n.css
@@ -0,0 +1,93 @@
+@media (orientation: landscape) {
+ :root {
+ --unit-size: 1vh;
+ }
+}
+
+@media (orientation: portrait) {
+ :root {
+ --unit-size: 1vw;
+ }
+}
+
+body {
+ background: black;
+ color: white;
+ font-family: "Arial", sans-serif;
+ font-weight: bold;
+
+ margin: 0;
+}
+
+#container {
+ width: 100%;
+}
+
+body.view-new #trains {
+ max-width: calc(85*var(--unit-size));
+}
+
+body.view-old #trains {
+ width: 100%;
+}
+
+.train {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+
+ margin: calc(2*var(--unit-size));
+ /*margin-bottom: calc(5*var(--unit-size));*/
+}
+
+body.view-new .train {
+ margin-bottom: calc(8*var(--unit-size));
+}
+
+.train * {
+ align-self: center;
+}
+
+.train .logo {
+ text-align: center;
+}
+
+body.view-old .train .logo {
+ padding: calc(1*var(--unit-size));
+ margin-right: calc(2*var(--unit-size));
+
+ line-height: calc(11.5*var(--unit-size));
+ width: calc(11.5*var(--unit-size));
+ height: calc(11.5*var(--unit-size));
+}
+
+body.view-new .train .logo {
+ padding: calc(0.25*var(--unit-size));
+ margin: calc(1*var(--unit-size)) calc(1.5*var(--unit-size)) calc(1*var(--unit-size)) 0;
+
+ line-height: calc(11*var(--unit-size));
+ width: calc(11*var(--unit-size));
+ height: calc(11*var(--unit-size));
+}
+
+.train .destination {
+ flex-grow: 1;
+}
+
+body.view-old .train .destination {
+ font-size: calc(6.75*var(--unit-size));
+ margin-left: calc(2*var(--unit-size));
+}
+
+body.view-new .train .destination {
+ font-size: calc(5.5*var(--unit-size));
+ margin-bottom: calc(3*var(--unit-size));
+}
+
+.train .time {
+ min-width: calc(19.25*var(--unit-size));
+ margin: 0 calc(2*var(--unit-size));
+
+ font-size: calc(6.5*var(--unit-size));
+ text-align: left;
+}
diff --git a/css/views/l9n_deprecated2.css b/css/views/l9n_deprecated2.css
new file mode 100644
index 0000000..76103da
--- /dev/null
+++ b/css/views/l9n_deprecated2.css
@@ -0,0 +1,81 @@
+body {
+ background: black;
+ color: white;
+ font-family: "Arial", sans-serif;
+ font-weight: bold;
+
+ margin: 0;
+}
+
+#container {
+ width: 100%;
+}
+
+body.view-new #trains {
+ max-width: 680px;
+}
+
+body.view-old #trains {
+ width: 100%;
+}
+
+.train {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+
+ margin: 16px;
+ /*margin-bottom: 5vh;*/
+}
+
+body.view-new .train {
+ margin-bottom: 64px;
+}
+
+.train * {
+ align-self: center;
+}
+
+.train .logo {
+ text-align: center;
+}
+
+body.view-old .train .logo {
+ padding: 8px;
+ margin-right: 16px;
+
+ line-height: 92px;
+ width: 92px;
+ height: 92px;
+}
+
+body.view-new .train .logo {
+ padding: 2px;
+ margin: 8px 12px 8px 0;
+
+ line-height: 88vh;
+ width: 88vh;
+ height: 88vh;
+}
+
+.train .destination {
+ flex-grow: 1;
+}
+
+body.view-old .train .destination {
+ font-size: 54px;
+ margin-left: 16px;
+}
+
+body.view-new .train .destination {
+ font-size: 44px;
+ margin-bottom: 24px;
+}
+
+.train .time {
+ min-width: 154px;
+ margin: 0 16px;
+
+ font-size: 52px;
+ text-align: left;
+}