blob: f9e4d7706f97e60ec53a71167bf63b05a3022863 (
plain) (
blame)
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
|
<!doctype html>
<html lang=en-US dir=ltr>
<head>
<title>CSS Experiments</title>
<meta charset=UTF-8>
<meta name=robots content="noindex, nofollow">
<meta name=viewport content="width=device-width, initial-scale=1">
<link rel=stylesheet href=/css/terminal.css>
<script src='/js/moon-phase.js'></script>
</head>
<body>
<!-- todo color picker -->
<header class=clearfix>
<h1>CSS Experiments</h1>
<nav aria-label=primary>
<ul>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/resources/">Resources</a>
</li>
<li>
<a href="/blog/">Blog</a>
</li>
<li>
<a href="https://git.starfall.systems">Git</a>
</li>
</ul>
</nav>
<div id=decor-moons aria-hidden=true></div>
</header>
<main>
<style>
.warning {
display: none;
}
.warning + span {
color: #3d4041;
text-shadow: none;
border: 1px solid #3d4041;
border-radius: 0.25em;
padding: 0 0.25em;
}
.warning:checked + span {
color: pink;
text-shadow: 0 0 4px red, 0 0 12px red;
border: 1px solid pink;
border-radius: 0.25em;
box-shadow: 0 0 8px red;
padding: 0 0.25em;
}
</style>
<section>
<p>Silly warning label. I've made it toggleable, because why not:
<label>
<input type=checkbox class=warning />
<span>MERCURY IN RETROGRADE</span>
</label>
</section>
</main>
<footer>
<section>
<p>This site is 100% <a href=https://git.starfall.systems/web>source-available</a>. © 2020-2023 Starfall. See <a href=https://git.starfall.systems/web/tree/COPYING.md rel=license>COPYING.md</a>.
</section>
<div style=text-align:center>∨/∧</div>
</footer>
</body>
|
