townie/links.html -rw-r--r-- 3.2 KiB View raw
                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!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>