<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
ul {
margin: 0;
}
#root {
height: 100vh;
}
main {
display: flex;
height: 100%;
}
main > * {
width: 50%;
max-height: 100%;
overflow-y: auto;
}
#packages {
width: 100%;
padding: 2em;
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 1em;
}
#packages > * {
display: inline-block;
}
#packages button {
height: 2.5em;
width: 100%;
}
:root { --num-cols: 4; }
table, tr { display: grid; }
thead, tbody, th, td { display: block; margin: 0; padding: 0; }
table, tr { display: grid; }
thead, tbody, th, td { display: block; }
table {
width: 100%;
flex-grow: 1;
}
tr {
width: 100%;
height: 1fr;
grid-template-columns: repeat(var(--num-cols), 1fr);
}
td, th { padding: 0.1em 0.5em; }
th {
justify-content: center;
align-items: center;
display: flex;
}
thead > tr { height: 2.75em;}
tbody { height: calc(100vh - 5.5em); overflow-y: scroll; }
#package-section {
display: flex;
flex-direction: column;
height: 100vh;
}
#package-section > h2 {
height: 2.75em;
text-align: center;
}
thead {
border-bottom: thin solid black;
overflow-y: scroll;
}
thead > tr > th + th, tbody > tr > td + td {
border-left: thin solid black;
}
</style>
</head>
<body>
<div id="root"></div>
<script src="//cdn.jsdelivr.net/npm/ramda@latest/dist/ramda.min.js"></script>
<script>
// HACK(keanulee): The Redux package assumes `process` exists - mock it here before
// the module is loaded.
window.process = {
env: {
NODE_ENV: "production",
},
};
</script>
<script src="/public/main.js" type="module"></script>
</body>
</html>