Css changes

app/res/css/layout.css

@@ -9,14 +9,19 @@
 	color: var(--clr-dark);
 }
 
-.container .top {
+.container>div {
+	overflow: hidden;
+}
+
+.container>.top {
 	grid-area: top;
 }
 
-.container .side {
+.container>.side {
 	grid-area: side;
 }
 
-.container .body {
+.container>.body {
 	grid-area: body;
+	box-shadow: 2em -2em 8em -5em rgba(0, 0, 0, 1);
 }

app/res/css/main.css

@@ -11,6 +11,7 @@
 	--font-md: 1em;
 	--font-sm: .8em;
 	--font-xs: .6em;
+	--mrg-text: .15em;
 	box-sizing: border-box;
 	margin: 0;
 	padding: 0;

app/res/css/screen.css

@@ -1,7 +1,6 @@
 /* SCREEN */
 
 #screen {
-	box-shadow: 1em -1em 8em -4em rgba(0, 0, 0, 1);
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
@@ -12,13 +11,10 @@
 	flex: 1;
 	padding: .5em;
 	overflow: hidden;
-	height: 100%;
-	width: 100%;
 	text-align: center;
-	background: hsla(0, 0, 0, 0.5);
 	display: flex;
 	flex-direction: column;
-	flex-wrap: wrap;
+	flex-wrap: nowrap;
 }
 
 
@@ -33,7 +29,7 @@
 	text-overflow: ellipsis;
 	overflow: hidden;
 	white-space: nowrap;
-	padding: .15em 0em;
+	padding: var(--mrg-text) 0em;
 }
 
 #screen .head .title>span {
@@ -49,11 +45,9 @@
 /* BODY */
 
 #screen .body {
-	flex: 1 0 auto;
-	display: flex;
-	flex-direction: column;
-	flex-wrap: wrap;
-	justify-content: space-between;
+	flex: 1 0;
+	overflow-x: hidden;
+	overflow-y: auto;
 }
 
 #screen .body .departure {
@@ -66,9 +60,9 @@
 
 #screen .body .title {
 	font-size: var(--font-xl);
-	padding: .15em 0em;
+	padding: var(--mrg-text) 0em;
 	overflow: hidden;
-	margin: .5em 0;
+	margin: .5em 0 0.25em 0;
 }
 
 #screen .body .title>span {

app/res/css/top.css

@@ -11,7 +11,7 @@
 
 #time {
 	grid-column: 1 / span 1;
-	grid-row: 1;
+	grid-row: 1 / span 2;
 	font-size: var(--font-xxxl);
 	text-align: center;
 }