feat: anchored footer with legend

This commit is contained in:
əlemi 2024-12-03 03:30:55 +01:00
parent 1ef21891f1
commit aad20c8637
Signed by: alemi
GPG key ID: A4895B84D311642C

View file

@ -49,13 +49,15 @@
span.cell.error:hover {
background-color: rgba(var(--accent-rgb), 1);
}
span.sep {
color: var(--background-secondary);
margin-right: 1em;
margin-left: 1em;
}
hr.color {
color: var(--accent);
border-color: var(--accent);
}
hr.separator {
margin: 2em;
}
div.card {
display: inline-block;
white-space: nowrap;
@ -71,18 +73,38 @@
div.card:hover {
background-color: var(--background-dim);
}
body {
margin: 0;
}
footer {
width: 100%;
}
div.content {
min-height: calc(100vh - 3.5rem);
}
</style>
</head>
<body>
<div class="ma-1">
<h1>uppe.rs</h1>
<p>%%DESCRIPTION%%</p>
<div class="content">
<div class="ml-1">
<h1 class="mt-0 pt-1">uppe.rs</h1>
<p>%%DESCRIPTION%%</p>
</div>
<hr class="color"/>
<main id="uppe-rs-content">
</main>
</div>
<hr class="color"/>
<main id="uppe-rs-content">
</main>
<footer>
<hr />
<p class="mt-s mb-s">
<span class="cell error">...</span> down <span class="sep">|</span>
<span class="cell warning">...</span> slow <span class="sep">|</span>
<span class="cell">...</span> up
</p>
</footer>
</body>
<script>
function cell(timestamp, rtt) {