Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

moshsafe #68

Merged
merged 1 commit into from
Jun 17, 2023
Merged

moshsafe #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 15 additions & 14 deletions demo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,22 @@
--tape-filter: hue-rotate(240deg);
}

@media (prefers-color-scheme: dark) {
.current {
--tape-hex: #dcdcdc;
}
::selection {
color: black;
background: blueviolet;
}

:focus {
text-decoration-style: dotted;
outline: thick groove;
}

:hover {
text-decoration-style: double;
}

/* throwbacks */

body { margin: auto; padding: 0 4rem }
input { font: inherit; max-width: 100% }
button { font: inherit }
Expand Down Expand Up @@ -88,13 +98,4 @@ html {
.volume-7 { font-size: var(--volume-7) }
.volume-8 { font-size: var(--volume-8) }
.volume-9 { font-size: var(--volume-9) }
.volume-10 { font-size: var(--volume-10) }

::selection {
color: black;
background: blueviolet;
}

:focus {
outline: thick dotted;
}
.volume-10 { font-size: var(--volume-10) }
65 changes: 46 additions & 19 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<!DOCTYPE html>
<html lang="en-US" class="tape-white current" id="shell">
<html lang="en-US" class="tape-black" id="shell">
<meta charset="utf-8">
<meta name="theme-color" content="#fbbfff">
<meta name="color-scheme" content="light">
<meta name="theme-color" content="#0e0e0e">
<meta name="color-scheme" content="dark light">
<meta name="viewport" content="width=device-width">

<title>tape: vivid colors that stick to:ur gums</title>
Expand Down Expand Up @@ -55,7 +55,7 @@ <h1 class="volume-8 pad-0">
<p class="m-auto"><span class="tape-pink volume-3">Be formless<span class="tape-green">.</span></span>
<p class="m-auto"><span class="tape-pink volume-3">Shapeless<span class="tape-green">.</span></span>
<p class="m-auto m-down"><span class="tape-pink volume-5">Like <a class="tape-green">tape.</a></span>
<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>
<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>
<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>
<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>
<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>
Expand All @@ -81,7 +81,7 @@ <h1 class="volume-8 pad-0">
<a id="black-in"></a>
<a id="deep"></a>

<figure class="m-auto m-down tape-black pad-5">
<figure class="m-auto m-down tape-black">
<figcaption class="volume-0">
black absorbs color
</figcaption>
Expand All @@ -108,56 +108,66 @@ <h1 class="volume-8 pad-0">
<a id="vibe"></a>
<a id="vibing"></a>

<figure class="m-auto m-down pad-2 tape-black tape-flow">
<figure class="volume-0 m-auto m-duck text-end">
<figure class="m-auto m-down tape-flow">
<figure class="volume-0 m-auto text-end tape-pink">
<dfn class="volume-3 bold mold marvin">rave</dfn>
<b class="volume-8 tape-pink dot-after"><i class="volume-0">pink</i></b>
<b class="volume-8 tape-blue dot-after"><i class="volume-0">blue</i></b>
</figure>
<figure class="volume-0 m-auto m-duck text-end">
<figure class="volume-0 m-auto text-end tape-yellow">
<dfn class="volume-3 bold mold marvin">thrill</dfn>
<b class="volume-8 tape-pink dot-after"><i class="volume-0">pink</i></b>
<b class="volume-8 tape-yellow dot-after"><i class="volume-0">yellow</i></b>
</figure>
<figure class="volume-0 m-auto m-duck text-end">
<figure class="volume-0 m-auto text-end tape-green">
<dfn class="volume-3 bold mold marvin">chill</dfn>
<b class="volume-8 tape-green dot-after"><i class="volume-0">green</i></b>
<b class="volume-8 tape-blue dot-after"><i class="volume-0">blue</i></b>
</figure>
<figure class="volume-0 m-auto m-duck text-end">
<figure class="volume-0 m-auto text-end tape-yellow">
<dfn class="volume-3 bold mold marvin">woke</dfn>
<b class="volume-8 tape-green dot-after"><i class="volume-0">green</i></b>
<b class="volume-8 tape-yellow dot-after"><i class="volume-0">yellow</i></b>
</figure>
<figure class="volume-0 m-auto m-duck text-end">
<figure class="volume-0 m-auto text-end tape-blue">
<dfn class="volume-3 bold mold marvin">flow</dfn>
<b class="volume-8 tape-blue dot-after"><i class="volume-0">blue</i></b>
<b class="volume-8 tape-yellow dot-after"><i class="volume-0">yellow</i></b>
</figure>
<figure class="volume-0 m-auto m-duck text-end">
<figure class="volume-0 m-auto text-end tape-pink">
<dfn class="volume-3 bold mold marvin">shred</dfn>
<b class="volume-8 tape-pink dot-after"><i class="volume-0">pink</i></b>
<b class="volume-8 tape-green dot-after"><i class="volume-0">green</i></b>
</figure>
<figure class="volume-0 m-auto text-end tape-pink">
<dfn class="volume-3 bold mold marvin">parade</dfn>
<b class="volume-8 tape-black dot-after"><i class="volume-0">black</i></b>
<b class="volume-8 tape-white dot-after"><i class="volume-0">white</i></b>
</figure>
<figcaption class="pad-1 volume-3">
<a class="tape-pink bold" href="https://s9a.page/hellotape">vibing</a><b class="tape-black volume-6">.</b>
<a class="tape-pink bold" href="https://s9a.page/hellotape">vibing</a><b class="volume-6">.</b>
</figcaption>
</figure>

<a id="behavior"></a>
<a id="behave"></a>
<a id="beehive"></a>

<figure class="tape-blue pad-3 m-auto m-down">
<figure class="tape-yellow pad-3 m-auto m-down">
<figcaption class="volume-3 m-duck">
<a class="tape-yellow bold">beehive</a><b class="volume-6">.</b>
<a class="tape-black bold">beehive</a><b class="volume-6">.</b>
</figcaption>
<figure class="tape-flow volume-2 m-down">
<input class="tape-flap tape-white" value="input" aria-label="sample">
<figure class="tape-flow volume-2 m-down" aria-label="samples">
<input class="tape-flap tape-white" value="inpaz" aria-label="white">
<br><br>
<input class="tape-flap tape-black" value="inemo" aria-label="black">
<br><br>
<input class="tape-flap tape-flow" value="inwolf" aria-label="flow">
<br><br>
<button class="tape-flap tape-green">button</button>
<button class="tape-flap tape-pink">buttoff</button>
<br><br>
<a href="#stay">link</a>
<a href="#stay">hyperlink</a>
</figure>
</figure>

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

<figure class="tape-pink tape-flow pad-3 m-auto m-down">
<figcaption class="volume-3 m-duck">
<a class="tape-flow bold">mosh</a><b class="volume-6">.</b>
</figcaption>
<p class="volume-4 m-auto" style="--tape-pink:hotpink">
<a class="tape-yellow" style="--tape-yellow:#bee" href="https://s9a.page/mochi">filler</a><br>
<a class="tape-blue" href="https://s9a.page/c11y" style="--tape-blue:orchid">ampuller</a><br>
<a class="tape-black" href="https://s9a.page/v11y">
spiller
</a><br>
<a class="tape-pink" href="https://s9a.page/s11y">thriller</a><br>
<a class="tape-white" href="https://s9a.page/i14y">
<code class="tape-green" style="--tape-hex:chartreuse">hex</code>culler
</a><br>
</p>
</figure>

<footer class="m-auto m-down volume-5 bold" style="--tape-pink:hotpink">
<a class="tape-pink" href="https://s9a.page">s9a</a>
<a class="tape-black" href="https://github.com/s9a/tape">tḁpe</a>
</footer>
</footer>
12 changes: 3 additions & 9 deletions tape.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
:root {
--tape-black: #090909;
--tape-white: #e9e9e9;
--tape-black: #0e0e0e;
--tape-white: #e0e0e0;
--tape-pink: #fbbfff;
--tape-yellow: #eee833;
--tape-blue: #11dff1;
Expand All @@ -10,13 +10,7 @@
--tape-hex: var(--tape-white);
}

@media (prefers-contrast: less) {
:root {
--tape-white: #dcdcdc;
--tape-black: #181818;
}
}

.tape-white { --tape-hex: var(--tape-white) }
.tape-blue { --tape-hex: var(--tape-blue) }
.tape-pink { --tape-hex: var(--tape-pink) }
.tape-green { --tape-hex: var(--tape-green) }
Expand Down