blob: be2ebdae91ea7d195be176580497b5566b30a84b (
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
|
---
title = "CSS Experiments"
layout = "base.njk"
---
<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>
<p>Silly warning label. I've made it toggleable, because why not:
<label>
<input type=checkbox class=warning checked />
<span>MERCURY IN RETROGRADE</span>
</label>
</p>
<style>
.decor {
user-select: none;
z-index: -3
}
#background-moon {
position: relative;
font-size: 25rem;
opacity: 10%;
left: 40%;
top: -0.4em;
height: 0;
}
</style>
<div id=background-moon class=decor>🌔︎</div>
<p>The background moon here would ideally be an SVG (and one generated to match the current moon) since it shows as a giant moon emoji on phones and that's a weird background. I thought once about the Cryptic Command symbol from MTG, but decided against putting a symbol with fourfold rotational question marks on the front page.
|
