89 lines
3.2 KiB
HTML
89 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset=utf-8>
|
|
<title>links elsewhere</title>
|
|
|
|
<div id=wrapper3><div id=wrapper2><div id=wrapper1><main id=main>
|
|
<h1>links elsewhere</h1>
|
|
<dl>
|
|
<dt class=root>Around the ~town</dt>
|
|
<dd><ul>
|
|
<li><a href="https://tilde.town/~demophoon/">~demophoon</a></li>
|
|
<li><a href="https://tilde.town/~karlen/">~karlen (no one will ever read this)</a></li>
|
|
<li><a href="https://tilde.town/~joe/">~joe</a></li>
|
|
</ul><dl>
|
|
<dt><a href="https://tilde.town/~kc">~kc</a></dt>
|
|
<dd><a href="https://tilde.town/~kc/arboria/">
|
|
Arboria</a></dd>
|
|
<dd><a href="https://tilde.town/~kc/oh-ex-seveney.html">
|
|
Oh Ex Seveney</a></dd>
|
|
|
|
<dt><a href="https://tilde.town/~equa">~equa</a></dt>
|
|
<dd><a href="https://tilde.town/~equa/tildecore/">
|
|
tildecore</a></dd>
|
|
|
|
<dt><a href="https://tilde.town/~troido">~troido</a></dt>
|
|
<dd><a href="https://tilde.town/~troido/cadastre/town.html">town map</a></dd>
|
|
|
|
<dt><a href="https://tilde.town/">~x4464</a></dt>
|
|
<dd><a href="https://tilde.town/~x4464/tildebrowser/">tildebrowser</a></dd>
|
|
</dl></dd>
|
|
|
|
<dt class=root>My stuff</dt>
|
|
<dd><ul>
|
|
<li><a href="https://tilde.town/~LOOSEPOOPS">LOOSE POOPS</a></li>
|
|
<li><a href="https://http://ring.acdw.net/">
|
|
a Fediverse Writer's Webring</a></li>
|
|
</ul></dd>
|
|
</dl>
|
|
|
|
<p><em>~more, maybe, to come</em>
|
|
<a id=ret href="index.html">[return]</a></p>
|
|
</main></div></div></div>
|
|
|
|
<style>
|
|
main { padding: 1em; background: blanchedalmond; }
|
|
#wrapper1 { border: 4em dashed pink; margin: -3em;}
|
|
#wrapper2 { border: 5em dashed papayawhip; margin: -1em; }
|
|
#wrapper3 { border: 4em dashed blue; border-radius: 50%;}
|
|
body { background: url("check.bmp"), gray; display: flex;
|
|
flex-flow: column nowrap; align-items: center; justify-content: center; }
|
|
#ret { display:block; width: 100%; text-align: right;
|
|
font: monospace; }
|
|
a:link { color: #122; text-decoration: none; }
|
|
a:visited { color: #122; }
|
|
a:hover { color: blue; }
|
|
dd ul { margin-left: -8em; border-bottom: 1px dotted; margin-bottom: 1em;}
|
|
li:not(:last-child)::after { content: ","; }
|
|
li { display: inline; } ul,li { margin: 0; padding: 0;}
|
|
dt.root { border-top: 4px double; margin-top: 1em; padding-top: 1em;
|
|
font: italic 1.25em/1.5 sans-serif;}
|
|
dt:not(.root) { float: left; width: 8em;}
|
|
dd { margin-left: 8em; }
|
|
</style>
|
|
|
|
<script>
|
|
var wmax = 250; var wmin = 0;
|
|
var wraps = {
|
|
"wrapper1": {"id": "wrapper1", "angle": wmin+1, "speed": 1},
|
|
"wrapper2": {"id": "wrapper2", "angle": wmax-1, "speed": -1},
|
|
"wrapper3": {"id": "wrapper3", "angle": wmin, "speed": 1}
|
|
}
|
|
function rotate(name) {
|
|
wraps[name].angle += wraps[name].speed;
|
|
if (wraps[name].angle > wmax) wraps[name].speed *= -1;
|
|
if (wraps[name].angle < wmin) wraps[name].speed *= -1;
|
|
document.getElementById(wraps[name].id).style.borderRadius
|
|
= wraps[name].angle + "px";
|
|
document.getElementById(wraps[name].id).style.MozBorderRadius
|
|
= wraps[name].angle + "px";
|
|
document.getElementById(wraps[name].id).style.WebkitBorderRadius
|
|
= wraps[name].angle + "px";
|
|
}
|
|
function animate() {
|
|
rotate("wrapper1");
|
|
rotate("wrapper2");
|
|
rotate("wrapper3");
|
|
}
|
|
var intervalID = window.setInterval(animate, 20);
|
|
</script>
|