-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
202 lines (186 loc) · 9.39 KB
/
index.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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!DOCTYPE html>
<html lang="en-US" class="tape-blaq" id="hi">
<meta charset="utf-8">
<meta name="color-scheme" content="dark light">
<meta name="theme-color" content="#0e0e0e">
<meta name="viewport" content="width=device-width">
<meta name="creator" content="🐙">
<title>tape: vivid colors that stick to:ur gums</title>
<link rel="stylesheet" href="tape.css">
<link rel="stylesheet" href="demo.css">
<link rel="icon" href="https://user-images.githubusercontent.com/949985/45119529-95770b00-b110-11e8-9679-8e97026c83d4.png">
<link rel="canonical" href="https://s9a.page/tape">
<link rel="help" href="https://s9a.page/hellotape">
<link rel="next" href="https://s9a.page/tapes">
<link rel href="https://s9a.github.io/tape">
<meta name="description" content="opensource freestyle color CSS classes like cassettes">
<meta property="og:description" content="color alive">
<meta property="og:image" content="https://user-images.githubusercontent.com/949985/44696984-a481fd00-aa2e-11e8-8bd8-6e5381195617.png">
<meta property="og:image:alt" content="tape punk onesie">
<h1 class="vol3 paz">
<a class="tape-play" href="#imagine">tḁpe</a>
</h1>
<figure id="palette" class="moan tape-flow">
<ul class="moan nemo paz fiesta bold">
<li class="vol2 trio"><span class="party pad tape-watt">watt</span>
<li class="vol2 trio"><span class="party pad tape-play">play</span>
<li class="vol2 trio"><span class="party pad tape-loud">loud</span>
<li class="vol2 trio"><span class="party pad tape-luvu">lu<s>v</s>u</span>
<li class="vol2 trio"><span class="party pad tape-blaq">blaq</span>
<li class="vol2 trio"><span class="party pad tape-bluv">bluv</span>
</ul>
</figure>
<aside id="like" class="moan roam nemo paz tape-flow">
<blockquote class="moan" style="--tape-bluv:violet;--tape-loud:#edc">
<p class="moan"><span class="tape-play vol2">i̊ sai̊d empty your mi̊nd<span class="tape-luvu">✸</span></span>
<p class="moan"><span class="tape-play vol2">be formless<span class="tape-luvu">◌̊</span></span>
<p class="moan"><span class="tape-play vol2">shapeless<span class="tape-luvu">◌̥</span></span>
<p class="moan nemo"><span class="tape-play vol3">li̊ke <a class="tape-luvu">tape</a></span>
</blockquote>
<blockquote class="moan roam" style="--tape-bluv:violet;--tape-loud:#edc">
<p class="moan"><span class="tape-blaq tape-play vol1">now you put <b class="tape-watt mold">tape</b> onto <a href="https://s9a.page#explore" class="tape-bluv">walls</a>…i̊t <em class="mold">becomes</em> the <a href="https://webmural.com/testing" class="tape-blaq">walls</a></span>
<p class="moan"><span class="tape-bluv vol1">you put <b class="tape-luvu mold">tape</b> onto floors…i̊t <em class="mold">becomes</em> the floors<span class="tape-blaq">✸</span></span>
<p class="moan"><span class="tape-bluv vol1">you put i̊t i̊n you…i̊t becomes <em class="mold">yours</em><span class="tape-watt">✸</span></span>
<p class="moan"><span class="tape-bluv vol1">now <b class="tape-play mold">tape</b> can flow or i̊t can <em class="mold">shred</em><span class="tape-watt">✸</span></span>
<p class="moan vol2"><a class="tape-loud" href="https://s9a.page/E">Be</a>: <span class="tape-loud">tape my <a class="tape-loud" href="https://webmural.com/tlfr">fri̊end</a></span><span class="tape-blaq">✸</span>
</blockquote>
</aside>
<figure id="and" class="moan nemo tape-blaq vol2 bold">
<p class="tape-blaq tape-watt pad moan">blaq ∞ watt
<p class="tape-blaq tape-play pad moan">blaq ∞ play
<p class="tape-blaq tape-loud pad moan">blaq ∞ loud
<p class="tape-blaq tape-bluv pad moan">blaq ∞ bluv
<p class="tape-blaq tape-luvu pad moan">blaq ∞ luvu
<p class="tape-blaq tape-watt pad moan" style="--tape-hex:#bae">blaq ∞ ◌̊◌̥
<figcaption id="compose" class="vol3 moby rime tape-flow">
<a href="https://s9a.page/terms" class="pad tape-blaq tape-loud bold">co̊mpo̊se</a>
</figcaption>
</figure>
<figure id="in" class="moan nemo tape-blaq">
<figcaption class="vol0">
blaq absorbs color
</figcaption>
<figure class="tape-blaq pad vol2 moan">
<span class="tape-blaq">blaq</span> ✸ blaq
</figure>
<figure class="tape-play pad vol2 moan">
<span class="tape-blaq">blaq</span> ✸ play
</figure>
<figure class="tape-loud pad vol2 moan">
<span class="tape-blaq">blaq</span> ✸ loud
</figure>
<figure class="tape-luvu pad vol2 moan">
<span class="tape-blaq">blaq</span> ✸ luvu
</figure>
<figure class="tape-bluv pad vol2 moan">
<span class="tape-blaq">blaq</span> ✸ bluv
</figure>
<figure class="tape-watt pad vol2 moan">
<span class="tape-blaq">blaq</span> ✸ watt
</figure>
<figure class="tape-watt pad vol2 moan" style="--tape-hex:#bae">
<span class="tape-blaq">blaq</span> ✸ ◌̊◌̥
</figure>
<figure class="tape-blaq pad vol2 moan" style="--tape-hex:#bae">
<span class="tape-blaq">blaq</span> ✸ ◌̊◌̥
</figure>
</figure>
<figure id="meet" class="moan nemo tape-flow">
<figure class="vol0 moan rime tape-play">
<dfn class="vol3 bold mold mime">rave</dfn>
<data value="play" class="vol3 tape-play dot"></data>
<data value="bluv" class="vol3 tape-bluv dot"></data>
</figure>
<figure class="vol0 moan rime tape-loud">
<dfn class="vol3 bold mold mime">thrill</dfn>
<data value="play" class="vol3 tape-play dot"></data>
<data value="loud" class="vol3 tape-loud dot"></data>
</figure>
<figure class="vol0 moan rime tape-luvu">
<dfn class="vol3 bold mold mime">chill</dfn>
<data value="luvu" class="vol3 tape-luvu dot"></data>
<data value="bluv" class="vol3 tape-bluv dot"></data>
</figure>
<figure class="vol0 moan rime tape-loud">
<dfn class="vol3 bold mold mime">woke</dfn>
<data value="luvu" class="vol3 tape-luvu dot"></data>
<data value="loud" class="vol3 tape-loud dot"></data>
</figure>
<figure class="vol0 moan rime tape-bluv">
<dfn class="vol3 bold mold mime">flow</dfn>
<data value="bluv" class="vol3 tape-bluv dot"></data>
<data value="loud" class="vol3 tape-loud dot"></data>
</figure>
<figure class="vol0 moan rime tape-play">
<dfn class="vol3 bold mold mime">shred</dfn>
<data value="play" class="vol3 tape-play dot"></data>
<data value="luvu" class="vol3 tape-luvu dot"></data>
</figure>
<figure class="vol0 moan rime tape-play">
<dfn class="vol3 bold mold mime">parade</dfn>
<data value="blaq" class="vol3 tape-blaq dot"></data>
<data value="watt" class="vol3 tape-watt dot"></data>
</figure>
<figcaption class="vol3">
<a class="tape-play bold" href="https://s9a.page/hellotape">vîbe̊e̊</a>
</figcaption>
</figure>
<figure id="beehive" class="tape-loud pad moan nemo">
<figcaption class="vol3 moby">
<a class="tape-blaq bold" href="https://webmural.com/testing">be̊e̊hi̊ve̊</a>
</figcaption>
<figure id="behave" class="tape-flow vol1 nemo" aria-label="samples">
<input class="moby tape-flap tape-watt" value="inpaz" aria-label="wattt">
<input class="moby tape-flap tape-blaq" value="inemo" aria-label="blaq">
<input class="moby tape-flap tape-flow" value="inwolf" aria-label="flow">
<button class="duet moby tape-flap tape-luvu">button</button>
<button class="duet moby tape-flap tape-play">buttoff</button>
<a class="vol2 parlay" href="#hi">hyperlínk</a>
</figure>
</figure>
<figure id="imagine" class="pad tape-bluv tape-flow imagine twist pad moan nemo">
<figcaption class="vol3 moby">
<a class="tape-watt bold" href="https://webmural.com/milf">i̊mḁgi̊ne</a>
</figcaption>
<p class="vol1 moan moby">
<a class="tape-bluv hella shout vol2" href="demo.css">remi̊x</a>
<a class="tape-flow" href="https://s9a.page/E">your</a>
<a class="tape-flow" href="https://s9a.page">revoluti̊on</a>
</p>
</figure>
<figure id="mosh" class="tape-bluv tape-flow pad moan nemo">
<figcaption class="vol3 moby">
<a class="tape-flow bold" href="https://webmural.com/airwaves">mo̊sh</a>
</figcaption>
<p class="vol2 moan" style="--tape-play:deeppink">
<a class="tape-loud" style="--tape-loud:#ec0" href="https://s9a.page/mochi">player</a><br>
<a class="tape-play" href="https://s9a.page/c11y">ampuller</a><br>
<a class="tape-bluv" href="https://s9a.page/v11y" style="--tape-bluv:orchid">
spi̊ller
</a><br>
<a class="tape-blaq tape-watt" href="https://s9a.page/s11y">thri̊ller</a><br>
<a class="tape-watt" href="https://s9a.page/i14y">
<code class="tape-luvu" style="--tape-hex:chartreuse">hex</code>culler
</a>
</p>
</figure>
<figure id="fill" class="tape-bluv tape-flow pad moan nemo">
<figcaption class="vol3 moby">
<a class="tape-flow bold" href="https://s9a.page/illbang">fill</a>
</figcaption>
<a href="tape.svg" class="tape-bluv omg" aria-label="tape">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 800 500">
<title>tape sampler</title>
<rect class="tape-bluv" x="0" width="800" height="500" />
<circle class="tape-play" cx="220" cy="250" r="360" />
<circle class="tape-watt" cx="220" cy="250" r="120" />
<circle class="tape-loud" cx="220" cy="250" r="60" />
<circle class="tape-bluv" cx="580" cy="250" r="120" />
<circle class="tape-luvu" cx="580" cy="250" r="60" />
</svg>
</a>
</figure>
<footer id="bye" class="tape-flow moan nemo vol3 bold" style="--tape-play:deeppink">
<a class="tape-play" href="https://s9a.page">s9a</a>
<a href="https://github.com/s9a/tape">tḁpe</a>
</footer>