illbang color morf #1

LICENSE.md

@@ -0,0 +1,19 @@
+# zlib license [© ☯️](https://github.com/s9a) 
+
+```
+This software is provided 'as-is', without any express or implied
+warranty.  In no event will the authors be held liable for any damages
+arising from the use of this software.
+
+Permission is granted to anyone to use this software for any purpose,
+including commercial applications, and to alter it and redistribute it
+freely, subject to the following restrictions:
+
+1. The origin of this software must not be misrepresented; you must not
+   claim that you wrote the original software. If you use this software
+   in a product, an acknowledgment in the product documentation would be
+   appreciated but is not required.
+2. Altered source versions must be plainly marked as such, and must not be
+   misrepresented as being the original software.
+3. This notice may not be removed or altered from any source distribution.
+```

README.md

@@ -1 +1,4 @@
+## [illbang color remixer](https://s9a.page/illbang)
+
+[FEAT tape](https://s9a.page/tape) and [color input](index.html)
 

deejay.js

@@ -0,0 +1,15 @@
+// npm.im/varam
+// ryanve.dev/varam
+!function(n,m){function t(b){var d=!1,c=new f(b);b=m.querySelectorAll("[data-varam]");p(b,function(e){var h=e.getAttribute("data-varam");(h=h&&h.match(u))&&p(h,function(q){var v=c.get(q);d=r(e.style,"--"+q,v)||d})});a.state=c.toString();return d}function k(){return!1}function w(){return a(location.search)}function x(){return a("")}function r(b,d,c){var e=b.getPropertyValue(d);(e=c?e===c:!e)||b.setProperty(d,c);return!e}function p(b,d){for(var c=b.length;c--;)d(b[c])}var u=/\S+/g,f=n.URLSearchParams,
+a=f?t:k,g=(m.querySelector||k).call(m,"meta[name=varam][content]");g=g&&g.content;var l="string"==typeof g;a.flow=f?w:k;a.fresh=r;a.help=function(){console.dir(a);return a.state};a.reset=f?x:k;a.state="";f&&a(l?l&&g:location.search);a.meta=l?a.state:!1;a.via=l?"meta":"flow";n.varam=a;"undefined"!=typeof module&&module.exports&&(module.exports=a)}(window,document);
+
+// ¡!
+!function(urchin) {
+  if (urchin) new urchin(
+    location.search
+  ).forEach(function(hex, ki) {
+    var input = this[ki]
+    var value = input && input.value
+    if (value !== hex) input.value = hex
+  }, document.querySelector("form"))
+}(window.URLSearchParams)

freestyle.css

@@ -0,0 +1,206 @@
+/*
+ * https://s9a.page/tape plus fill
+ */
+
+:root {
+  --tape-filter: none;
+  --tape-bluv: #11dff1;
+  --tape-play: #fbbfff;
+  --tape-loud: #eee833;
+  --tape-luvu: #44f477;
+  --tape-blaq: #0e0e0e;
+  --tape-watt: #e0e0e0;
+  --tape-hex: #e0e0e0;
+  --tape-mix: transparent;
+}
+
+.tape-blaq,
+.tape-watt { --tape-hex: var(--tape-watt) }
+.tape-luvu { --tape-hex: var(--tape-luvu) }
+.tape-loud { --tape-hex: var(--tape-loud) }
+.tape-play { --tape-hex: var(--tape-play) }
+.tape-bluv { --tape-hex: var(--tape-bluv) }
+.tape-flat { border-color: transparent }
+.tape-flap { border-color: currentColor }
+.tape-flow { --tape-remix: none }
+.tape-flow :not(.tape-skip) {
+  background-color: transparent;
+  color: inherit;
+}
+
+.tape-blaq,
+.tape-bluv,
+.tape-play,
+.tape-loud,
+.tape-luvu,
+.tape-watt {
+  --tape-mix: var(--tape-hex);
+  --tape-remix: none;
+  color: var(--tape-blaq) !important;
+  background-color: var(--tape-mix) !important;
+  background-image: var(--tape-remix);
+  fill: var(--tape-mix);
+  filter: var(--tape-filter);
+}
+
+.tape-blaq {
+  --tape-mix: var(--tape-blaq);
+  color: var(--tape-hex) !important;
+}
+
+.tape-erase *,
+.tape-erase {
+  color: transparent !important;
+}
+
+/*
+ * ReMiXiNG ∞)
+ */
+
+::selection {
+  color: var(--tape-hex);
+  background: var(--tape-blaq);
+}
+
+.tape-blaq ::selection {
+  color: var(--tape-blaq);
+  background: var(--tape-watt);
+}
+
+.tape-watt ::selection,
+.tape-play ::selection,
+.tape-loud ::selection,
+.tape-luvu ::selection,
+.tape-bluv ::selection {
+  color: var(--tape-hex);
+  background: var(--tape-blaq);
+}
+
+.garden {
+  --tape-blaq: blueviolet;
+  --tape-play: orangered;
+  --tape-loud: khaki;
+  --tape-luvu: limegreen;
+  --tape-bluv: deepskyblue;
+  --tape-watt: floralwhite;
+}
+
+.cone {
+  --tape-remix: conic-gradient(
+    var(--tape-play) 0,
+    var(--tape-play) 25%,
+    var(--tape-loud) 25%,
+    var(--tape-loud) 50%,
+    var(--tape-luvu) 50%,
+    var(--tape-luvu) 75%,
+    var(--tape-bluv) 75%,
+    var(--tape-bluv) 100%
+  );
+}
+
+:focus {
+  outline: thick dashed var(--tape-hex);
+}
+
+html {
+  font-size: max(20pt, 2vmax);
+  line-height: 1.618;
+}
+
+body {
+  display: flex;
+  flex-flow: column;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+form {
+  align-items: center;
+  contain: layout;
+  display: flex;
+  flex-flow: column;
+  flex-flow: wrap;
+  margin: auto;
+}
+
+form > * {
+  flex-basis: 100%;
+}
+
+h1 {
+  font-size: 1.618em;
+}
+
+label {
+  contain: layout;
+  display: inline-flex;
+  flex-basis: 50%;
+  flex-flow: row;
+  flex-basis: 50%;
+}
+
+label:nth-child(odd) {
+  flex-flow: row-reverse;
+}
+
+input {
+  display: inline-block;
+  font: inherit;
+  height: 3em;
+  width: 100%;
+  flex-basis: 61.8%;
+}
+
+code {
+  flex-basis: 38.2%;
+  font: inherit;
+  padding-inline: 1ch;
+}
+
+footer {
+  flex-basis: 61.8%;
+  margin: 0 auto 1em;
+  display: flex;
+}
+
+a,
+button {
+  border: thick dashed;
+  padding: 1ch;
+  border-top-color: var(--tape-play);
+  border-right-color: var(--tape-loud);
+  border-bottom-color: var(--tape-bluv);
+  border-left-color: var(--tape-luvu);
+}
+
+button {
+  flex-basis: 61%;
+  font-size: 1.618em;
+  margin: 1em auto;
+  text-decoration: underline;
+}
+
+button:hover {
+  cursor: url(#illbang);
+  cursor: zoom-in;
+  text-decoration-style: double;
+}
+
+:any-link:hover {
+  text-decoration-style: double;
+}
+
+figure {
+  align-items: center;
+  contain: layout;
+  display: flex;
+  flex-flow: column;
+  margin: auto;
+  margin-bottom: 3rem;
+}
+
+figcaption {
+  margin: auto;
+  padding: 1rem;
+  max-width: 61.8vmax;
+}

index.html

@@ -1,9 +1,69 @@
 <!DOCTYPE html>
-<html lang>
+<html lang="en" class="tape-flow tape-blaq" data-varam="tape-watt tape-play tape-loud tape-luvu tape-blaq tape-bluv">
 <meta charset="utf-8">
-<title>...</title>
+
+<title>illbang color remixer</title>
+
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<meta name="theme-color" content="hotpink">
-<meta name="description" content="...">
-<link rel="help" href="https://github.com/s9a/interweb">
-<link rel="icon" href="icon.svg">
+<meta name="theme-color" content="#0e0e0e">
+<meta name="color-scheme" content="dark light">
+<meta name="description" content="illbang svg color remixer">
+
+<link rel="stylesheet" href="freestyle.css">
+<link rel="prev" href="https://github.com/s9a/interweb">
+<link rel="prev" href="https://ryanve.dev/illbang">
+<link rel="icon" href="illbang.svg">
+
+<figure>
+  <svg
+    class="tape-blaq"
+    width="100vmin"
+    height="100vmin"
+    viewBox="0 0 2400 2400"
+    xmlns="http://www.w3.org/2000/svg"
+    >
+    <title>¡!</title>
+    <rect class="tape-luvu" x="617" y="800" width="300" height="1300" />
+    <rect class="tape-play" x="617" y="300" width="300" height="300" />
+    <rect class="tape-loud" x="1483" y="300" width="300" height="1300" />
+    <rect class="tape-bluv" x="1483" y="1800" width="300" height="300" />
+  </svg>
+  <figcaption>
+    <form class="tape-blaq" method="get">
+      <h1>illbang color remixer</h1>
+      <label class="tape-play">
+        <code>play</code>
+        <input type="color" name="tape-play" value="#fbbfff">
+      </label>
+      <label class="tape-loud">
+        <code>loud</code>
+        <input type="color" name="tape-loud" value="#eee833">
+      </label>
+      <label class="tape-luvu">
+        <code>luvu</code>
+        <input type="color" name="tape-luvu" value="#44f477">
+      </label>
+      <label class="tape-bluv">
+        <code>bluv</code>
+        <input type="color" name="tape-bluv" value="#11dff1">
+      </label>
+      <label class="tape-blaq">
+        <code>blaq</code>
+        <input type="color" name="tape-blaq" value="#0e0e0e">
+      </label>
+      <label class="tape-watt">
+        <code>watt</code>
+        <input type="color" name="tape-watt" value="#e0e0e0">
+      </label>
+      <button class="tape-blaq">
+        remix
+      </button>
+      <footer>
+        <a href="?" class="tape-blaq">reset</a>
+        <a href="https://s9a.page/tape" class="tape-blaq">tape</a>
+      </footer>
+    </form>
+  </figcaption>
+</figure>
+
+<script src="deejay.js"></script>