Complexity of a Simple Chart

by Jeff Cave

HTML

<table>
<caption>
  <h1>Status</h1>
  <p><time>@2023-02-02 15:26</time></p>
</caption>
<tbody>
 <tr class='expired'>
  <td>Gov SEC</td>
  <td> 0.5%</td>
 </tr>
 <tr class='refresh'>
  <td>Market NYSE</td>
  <td><time datetime='PT0H1M34S'> 1 &frac13; m</time><meter min='0' max='1000' value='270'></meter></td>
 </tr>
 <tr>
  <td>Gov SEDAR</td>
  <td><time datetime='PT8H34M10S'> 8 &frac12; h</time><meter min='0' max='1000' value='355'></meter></td>
 </tr>
 <tr>
  <td>Market TSX</td>
  <td><time datetime='PT0H13M36S'>13 &frac23; m</time><meter min='0' max='1000' value='907'></meter></td>
 </tr>
</tbody>
</table>

CSS

caption{
  border:1px solid black;
  border-bottom:none;
}
caption time{
  font-size:xx-small;
}
caption *{
  padding:0;
  margin:0;
}
table{
  border-collapse: collapse;
  border:1px solid black;
  border-top:none;
  padding:1em;
  font-size:xx-large;
  font-weight:bold;
  font-family:sans-serif;
  color:black;
  text-shadow: 0 0 0.25em white;
  min-width:600px;
  max-width:30%;
}
tr{
  margin-left: 1em;
}
td{
  position:relative;
  z-index:0;
  text-align:left;
  border:1px solid black;
  border-left:none;
  border-right:none;
  padding: 0.1em;
}

tr:hover{
  background-color:lightgrey;
}

meter{
  z-index:-1;
	position: absolute;
	display:inline-block;
	bottom:0;
	left:0;
	height:100%;
	width:100%;
	border-radius:0;
}
meter::--webkit-meter-bar{
    background:none;
}
meter::-webkit-meter-optimum-value {
    box-shadow: none;
    background-color:steelblue;
    background-size: 100% 100%;
}

tr > td:nth-of-type(1){
  width:1%;
  white-space: nowrap;
}
tr > td:nth-of-type(2){
  font-family: monospace;
}
tr > td:nth-of-type(2)::before{
    content:'✅';
    color:white;
    font-weight:bold;
    text-shadow: 0 0 0.25em black;
    background-color:steelblue;
    border:0.1em solid transparent;
    border-radius:1em;
    padding:0.1em;

}

tr.expired > td:nth-of-type(2)::before{
    content:'⏰';
    background-color:firebrick;
}

tr.refresh  meter::-webkit-meter-optimum-value {
    background-color:gold;
}
tr.refresh > td:nth-of-type(2)::before{
    content:'🔄';
    background-color:gold;
}