<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cargo timings experiments</title>
<style>
body {
display: flex;
flex-direction: row;
}
span {
display: flex;
text-align: center;
}
.crate {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.container {
flex-grow: 1;
margin: 5px;
}
.row,
.column {
display: flex;
}
.row {
flex-direction: row;
/* writing-mode: sideways-lr;
text-orientation: upright; */
}
.column {
flex-direction: column;
/* writing-mode: vertical-lr;
text-orientation: mixed; */
}
.graph-node {
background-color: hotpink;
position: absolute;
/* display: inline-block; */
}
#heatmap {
height: 30rem;
width: 38rem;
}
#scatter {
flex-grow: 1;
position: relative;
margin-right: 50px;
}
</style>
</head>
<body>
<div id="heatmap" class="row"></div>
<div id="scatter"></div>
<script src="layout.js"></script>
</body>
</html>