-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
99 lines (89 loc) · 2.4 KB
/
demo.html
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
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en_US">
<head>
<meta charset="UTF-8"/>
<script async src="/node_modules/es-module-shims/dist/es-module-shims.js"></script>
</head>
<body>
<script type="importmap">
{
"imports": {
"htm": "./node_modules/htm/dist/htm.mjs",
"htm/preact": "./node_modules/htm/preact/index.mjs",
"preact": "./node_modules/preact/dist/preact.mjs",
"preact/hooks": "./node_modules/preact/hooks/dist/hooks.mjs"
}
}
</script>
<script type="module">
import { Theme, keyframes, stylish } from './src/index.mjs';
import { html } from 'htm/preact';
import { render } from 'preact';
const energy = keyframes`
0% {
background-color: rgba(220, 255, 255, 0);
}
50% {
background-color: rgba(255, 255, 220, 100%);
}
100% {
background-color: rgba(220, 255, 255, 0);
}
`;
const spin = keyframes`
0% {
transform: rotate(0deg) scale(1, 1);
}
50% {
transform: rotate(180deg) scale(0.5, 0.5);
}
100% {
transform: rotate(360deg) scale(1, 1);
}
`;
const Spinning = stylish('span', ({ theme }) => `
align-items: center;
animation: infinite 1s linear ${spin};
border-color: transparent;
border-radius: 2px;
border-style: solid;
border-width: 2px;
box-sizing: border-box;
cursor: default;
display: flex;
font-size: ${theme.size / 2}px;
line-height: ${theme.size}px;
justify-content: center;
width: ${theme.size}px;
`);
const Hat = stylish(Spinning, {
rule: `
border-color: #0c0;
`,
states: [':hover']
});
const App = stylish('div', `
align-items: center;
animation: infinite 1.75s ease-in-out ${energy};
bottom: 0;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
width: 100%;
`);
render(html`
<${Theme.Provider} value=${{ size: 48 }}>
<${App}>
<${Hat} title="Stylish!">🎩<//>
<//>
<//>
`, document.body);
</script>
</body>
</html>