feat: anchored footer with legend
This commit is contained in:
parent
1ef21891f1
commit
aad20c8637
1 changed files with 32 additions and 10 deletions
|
@ -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) {
|
||||||
|
|
Loading…
Reference in a new issue