Avganger test - Oslo bussterminal

<DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="vkt_webdepartures.css">
</head>
<body>
  <script type='text/javascript' src='piebrowser-vkt.js'></script>
</body>
</html>

/* These variables are read and used by javascript code - don't change the names of the variables */
:root {
	--js-twt-title__texts: ["Exspressbuss", "Long distance bus"];
	--js-twt-header__texts: ["Rute", "Line", "Destinasjon", "Destination", "Avgang", "Departure", "Plf.", "Plf."];
	--js-twt-clock--format: "HH:mm";

	--js-trows-stripe--count: 7;
	--js-trows-columns: ["line", "destination", "targetHHNN", "stoppoint"];
}

/* Some basic stuff */
html, body, #app, .twt-container {
	margin: 0; padding: 0; overflow: hidden;
	height: 100%; width: 100%;
}
*, *::after, *::before { box-sizing: border-box; }

/* Container for the entire area */
.twt-container {
	position: relative;
	display: flex;
	overflow: hidden;
	flex-direction: column;
	align-items: stretch;
	height: 100%;
	font-family: 'Arial';
}

/* Title row */
.twt-title {
	height: 16vh;
	background-color: #888;
	color: #fff;
	position: relative;
}

.twt-title__text {
	position: absolute;
	font-size: 9vh;
	top: 3vh;
}

.twt-title__text:nth-child(1) {
	left: 1%;
	width: 33%;
	font-weight: bold;
}

.twt-title__text:nth-child(2) {
	left: 35%;
	width: 38%;
}

.twt-clock {
	position: absolute;
	color: #fff;
	font-size: 9vh;
	font-weight: bold;
	left: 85%;
	width: 14%;
	top: 3vh;
}

/* Subheader row */
.twt-header {
	height: 10.5vh;
	background-color: #000000;
	color: #fff;
	position: relative;
}

.twt-header__text {
	position: absolute;
	font-size: 3vh;
}

.twt-header__text:nth-child(odd) {
	top: 10%;
	color: #fff;
}

.twt-header__text:nth-child(even) {
	top: 60%;
	color: #ddd;
}

/* Horizontal placement of subheader and timetable columns */
.twt-header__text:nth-child(1), .twt-header__text:nth-child(2), .trows-cell:nth-child(1) {
	left: 1%;
	width: 12%;
	text-align: start;
}

.twt-header__text:nth-child(3), .twt-header__text:nth-child(4), .trows-cell:nth-child(2) {
	left: 14%;
	width: 59%;
	text-align: start;
}

.twt-header__text:nth-child(5), .twt-header__text:nth-child(6), .trows-cell:nth-child(3) {
	left: 80%;
	width: 9%;
	text-align: start;
}

.twt-header__text:nth-child(7), .twt-header__text:nth-child(8), .trows-cell:nth-child(4) {
	left: 90%;
	width: 9%;
	text-align: start;
}


/* Stripes behind timetable data */
.trows-stripe__container {
	position: absolute;
	height: 100%;
	width: 100%;
}

.trows-stripe {
	height: 10.5vh;
	width: 100%;
	border-top: #888 1px solid;
	background-color: #000000;
}

/* Timetable data */
.trows-row__container {
	position: absolute;
	height: 100%;
	width: 100%;
}

.trows-row {
	position: relative;
	height: 10.5vh;
	color: #fff;
	font-size: 6vh;
	width: 100%;
	line-height: 150%;
}

.trows-cell {
	position: absolute;
	margin-top: 1vh;
	height: 8.5vh;
}

.trows-cell:nth-child(1) {
	background-color: #888;
	text-align: center;
}

.trows-cell:nth-child(4) {
	background-color: #444;
	text-align: center;
	color: yellow;
}

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="vkt_webdepartures.css">
</head>
<body>
	<div id="app" data-mount="vkt_webdepartures"></div>
	<script type='text/javascript' src='piebrowser-vkt.js'></script>
</body>
</html>

<html>
<head>
	<link rel="stylesheet" href="vkt_webdepartures.css">
</head>
<body>
	<div id="app" data-mount="vkt_webdepartures"></div>
	<script type='text/javascript' src='piebrowser-vkt.js'></script>
</body>
</html>