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