Skip to content

Commit cd64718

Browse files
ryanveryanve
authored
#68 moshsafe
1 parent d7493d6 commit cd64718

File tree

3 files changed

+64
-42
lines changed

3 files changed

+64
-42
lines changed

‎demo.css

+15-14
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,22 @@
2626
--tape-filter: hue-rotate(240deg);
2727
}
2828

29-
@media (prefers-color-scheme: dark) {
30-
.current {
31-
--tape-hex: #dcdcdc;
32-
}
29+
::selection {
30+
color: black;
31+
background: blueviolet;
3332
}
3433

34+
:focus {
35+
text-decoration-style: dotted;
36+
outline: thick groove;
37+
}
38+
39+
:hover {
40+
text-decoration-style: double;
41+
}
42+
43+
/* throwbacks */
44+
3545
body { margin: auto; padding: 0 4rem }
3646
input { font: inherit; max-width: 100% }
3747
button { font: inherit }
@@ -88,13 +98,4 @@ html {
8898
.volume-7 { font-size: var(--volume-7) }
8999
.volume-8 { font-size: var(--volume-8) }
90100
.volume-9 { font-size: var(--volume-9) }
91-
.volume-10 { font-size: var(--volume-10) }
92-
93-
::selection {
94-
color: black;
95-
background: blueviolet;
96-
}
97-
98-
:focus {
99-
outline: thick dotted;
100-
}
101+
.volume-10 { font-size: var(--volume-10) }

‎index.html

+46-19
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<!DOCTYPE html>
2-
<html lang="en-US" class="tape-white current" id="shell">
2+
<html lang="en-US" class="tape-black" id="shell">
33
<meta charset="utf-8">
4-
<meta name="theme-color" content="#fbbfff">
5-
<meta name="color-scheme" content="light">
4+
<meta name="theme-color" content="#0e0e0e">
5+
<meta name="color-scheme" content="dark light">
66
<meta name="viewport" content="width=device-width">
77

88
<title>tape: vivid colors that stick to:ur gums</title>
@@ -55,7 +55,7 @@ <h1 class="volume-8 pad-0">
5555
<p class="m-auto"><span class="tape-pink volume-3">Be formless<span class="tape-green">.</span></span>
5656
<p class="m-auto"><span class="tape-pink volume-3">Shapeless<span class="tape-green">.</span></span>
5757
<p class="m-auto m-down"><span class="tape-pink volume-5">Like <a class="tape-green">tape.</a></span>
58-
<p class="m-auto"><span class="tape-blue volume-3">Now you put <b class="tape-yellow mold">tape</b> onto walls...it <em class="mold">becomes</em> the walls<span class="tape-yellow">.</span></span>
58+
<p class="m-auto"><span class="tape-blue volume-3">Now you put <b class="tape-yellow mold">tape</b> onto <a href="https://s9a.page#explore" class="tape-black">walls</a>...it <em class="mold">becomes</em> the <a href="https://webmural.com/testing" class="tape-black">walls</a><span class="tape-flow">.</span></span>
5959
<p class="m-auto"><span class="tape-blue volume-3">You put <b class="tape-yellow mold">tape</b> onto floors... it <em class="mold">becomes</em> the floors<span class="tape-yellow">.</span></span>
6060
<p class="m-auto"><span class="tape-blue volume-3">You put it in you, it becomes <em class="mold">yours</em><span class="tape-yellow">.</span></span>
6161
<p class="m-auto"><span class="tape-blue volume-3">Now <b class="tape-yellow mold">tape</b> can flow or it can <em class="mold">shred</em><span class="tape-yellow">.</span></span>
@@ -81,7 +81,7 @@ <h1 class="volume-8 pad-0">
8181
<a id="black-in"></a>
8282
<a id="deep"></a>
8383

84-
<figure class="m-auto m-down tape-black pad-5">
84+
<figure class="m-auto m-down tape-black">
8585
<figcaption class="volume-0">
8686
black absorbs color
8787
</figcaption>
@@ -108,56 +108,66 @@ <h1 class="volume-8 pad-0">
108108
<a id="vibe"></a>
109109
<a id="vibing"></a>
110110

111-
<figure class="m-auto m-down pad-2 tape-black tape-flow">
112-
<figure class="volume-0 m-auto m-duck text-end">
111+
<figure class="m-auto m-down tape-flow">
112+
<figure class="volume-0 m-auto text-end tape-pink">
113113
<dfn class="volume-3 bold mold marvin">rave</dfn>
114114
<b class="volume-8 tape-pink dot-after"><i class="volume-0">pink</i></b>
115115
<b class="volume-8 tape-blue dot-after"><i class="volume-0">blue</i></b>
116116
</figure>
117-
<figure class="volume-0 m-auto m-duck text-end">
117+
<figure class="volume-0 m-auto text-end tape-yellow">
118118
<dfn class="volume-3 bold mold marvin">thrill</dfn>
119119
<b class="volume-8 tape-pink dot-after"><i class="volume-0">pink</i></b>
120120
<b class="volume-8 tape-yellow dot-after"><i class="volume-0">yellow</i></b>
121121
</figure>
122-
<figure class="volume-0 m-auto m-duck text-end">
122+
<figure class="volume-0 m-auto text-end tape-green">
123123
<dfn class="volume-3 bold mold marvin">chill</dfn>
124124
<b class="volume-8 tape-green dot-after"><i class="volume-0">green</i></b>
125125
<b class="volume-8 tape-blue dot-after"><i class="volume-0">blue</i></b>
126126
</figure>
127-
<figure class="volume-0 m-auto m-duck text-end">
127+
<figure class="volume-0 m-auto text-end tape-yellow">
128128
<dfn class="volume-3 bold mold marvin">woke</dfn>
129129
<b class="volume-8 tape-green dot-after"><i class="volume-0">green</i></b>
130130
<b class="volume-8 tape-yellow dot-after"><i class="volume-0">yellow</i></b>
131131
</figure>
132-
<figure class="volume-0 m-auto m-duck text-end">
132+
<figure class="volume-0 m-auto text-end tape-blue">
133133
<dfn class="volume-3 bold mold marvin">flow</dfn>
134134
<b class="volume-8 tape-blue dot-after"><i class="volume-0">blue</i></b>
135135
<b class="volume-8 tape-yellow dot-after"><i class="volume-0">yellow</i></b>
136136
</figure>
137-
<figure class="volume-0 m-auto m-duck text-end">
137+
<figure class="volume-0 m-auto text-end tape-pink">
138138
<dfn class="volume-3 bold mold marvin">shred</dfn>
139139
<b class="volume-8 tape-pink dot-after"><i class="volume-0">pink</i></b>
140140
<b class="volume-8 tape-green dot-after"><i class="volume-0">green</i></b>
141141
</figure>
142+
<figure class="volume-0 m-auto text-end tape-pink">
143+
<dfn class="volume-3 bold mold marvin">parade</dfn>
144+
<b class="volume-8 tape-black dot-after"><i class="volume-0">black</i></b>
145+
<b class="volume-8 tape-white dot-after"><i class="volume-0">white</i></b>
146+
</figure>
142147
<figcaption class="pad-1 volume-3">
143-
<a class="tape-pink bold" href="https://s9a.page/hellotape">vibing</a><b class="tape-black volume-6">.</b>
148+
<a class="tape-pink bold" href="https://s9a.page/hellotape">vibing</a><b class="volume-6">.</b>
144149
</figcaption>
145150
</figure>
146151

147152
<a id="behavior"></a>
148153
<a id="behave"></a>
149154
<a id="beehive"></a>
150155

151-
<figure class="tape-blue pad-3 m-auto m-down">
156+
<figure class="tape-yellow pad-3 m-auto m-down">
152157
<figcaption class="volume-3 m-duck">
153-
<a class="tape-yellow bold">beehive</a><b class="volume-6">.</b>
158+
<a class="tape-black bold">beehive</a><b class="volume-6">.</b>
154159
</figcaption>
155-
<figure class="tape-flow volume-2 m-down">
156-
<input class="tape-flap tape-white" value="input" aria-label="sample">
160+
<figure class="tape-flow volume-2 m-down" aria-label="samples">
161+
<input class="tape-flap tape-white" value="inpaz" aria-label="white">
162+
<br><br>
163+
<input class="tape-flap tape-black" value="inemo" aria-label="black">
164+
<br><br>
165+
<input class="tape-flap tape-flow" value="inwolf" aria-label="flow">
157166
<br><br>
158167
<button class="tape-flap tape-green">button</button>
168+
<button class="tape-flap tape-pink">buttoff</button>
159169
<br><br>
160-
<a href="#stay">link</a>
170+
<a href="#stay">hyperlink</a>
161171
</figure>
162172
</figure>
163173

@@ -174,7 +184,24 @@ <h1 class="volume-8 pad-0">
174184
</p>
175185
</figure>
176186

187+
<figure class="tape-pink tape-flow pad-3 m-auto m-down">
188+
<figcaption class="volume-3 m-duck">
189+
<a class="tape-flow bold">mosh</a><b class="volume-6">.</b>
190+
</figcaption>
191+
<p class="volume-4 m-auto" style="--tape-pink:hotpink">
192+
<a class="tape-yellow" style="--tape-yellow:#bee" href="https://s9a.page/mochi">filler</a><br>
193+
<a class="tape-blue" href="https://s9a.page/c11y" style="--tape-blue:orchid">ampuller</a><br>
194+
<a class="tape-black" href="https://s9a.page/v11y">
195+
spiller
196+
</a><br>
197+
<a class="tape-pink" href="https://s9a.page/s11y">thriller</a><br>
198+
<a class="tape-white" href="https://s9a.page/i14y">
199+
<code class="tape-green" style="--tape-hex:chartreuse">hex</code>culler
200+
</a><br>
201+
</p>
202+
</figure>
203+
177204
<footer class="m-auto m-down volume-5 bold" style="--tape-pink:hotpink">
178205
<a class="tape-pink" href="https://s9a.page">s9a</a>
179206
<a class="tape-black" href="https://github.com/s9a/tape">tḁpe</a>
180-
</footer>
207+
</footer>

‎tape.css

+3-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
:root {
2-
--tape-black: #090909;
3-
--tape-white: #e9e9e9;
2+
--tape-black: #0e0e0e;
3+
--tape-white: #e0e0e0;
44
--tape-pink: #fbbfff;
55
--tape-yellow: #eee833;
66
--tape-blue: #11dff1;
@@ -10,13 +10,7 @@
1010
--tape-hex: var(--tape-white);
1111
}
1212

13-
@media (prefers-contrast: less) {
14-
:root {
15-
--tape-white: #dcdcdc;
16-
--tape-black: #181818;
17-
}
18-
}
19-
13+
.tape-white { --tape-hex: var(--tape-white) }
2014
.tape-blue { --tape-hex: var(--tape-blue) }
2115
.tape-pink { --tape-hex: var(--tape-pink) }
2216
.tape-green { --tape-hex: var(--tape-green) }

0 commit comments

Comments
 (0)