diff --git a/README.md b/README.md
index 8f509b1..0c78b2f 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,9 @@
-## [illbang color remixer](https://s9a.page/illbang)
+## [illbang graphic remixer](https://s9a.page/illbang)
-[FEAT tape](https://s9a.page/tape) and [color input](index.html)
+### FEAT
+* [tape colors](https://s9a.page/tape)
+* [semantic HTML color inputs](index.html)
+* [varam URL synergy](https://ryanve.github.io/varam)
+* [**fun**ction](deejay.js)
+* SVG
diff --git a/deejay.js b/deejay.js
index 0cdbcfd..5e6d8c5 100644
--- a/deejay.js
+++ b/deejay.js
@@ -3,13 +3,39 @@
!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]
+// ¡! fragile
+!function(willow, duende, search) {
+ function zef(f) { f(0) }
+ function reset(elephant, name, value) {
+ var ph = elephant.style
+ ph.setProperty("--" + name, value)
+ }
+
+ var animal = willow.requestAnimationFrame || zef
+ var urchin = willow.URLSearchParams
+ var morf = duende.querySelector("form")
+ var bttm = morf.querySelector("button")
+
+ if (urchin) new urchin(search)
+ .forEach(function(hex, ki) {
+ var input = morf[ki]
var value = input && input.value
if (value !== hex) input.value = hex
- }, document.querySelector("form"))
-}(window.URLSearchParams)
+ })
+
+ morf.addEventListener("change", function(e) {
+ var input = e.target
+ var name = input.name
+ var value = input.value
+ var label = input.parentNode
+ animal(function() {
+ reset(label, name, value)
+ reset(bttm, name, value)
+ })
+ })
+
+ duende.title = "illbang ¡! remixyz"
+}(window, document, location.search);
+
+
+
diff --git a/freestyle.css b/freestyle.css
index 9063ad5..f0a3bf1 100644
--- a/freestyle.css
+++ b/freestyle.css
@@ -87,14 +87,14 @@
.cone {
--tape-remix: conic-gradient(
- var(--tape-play) 0,
- var(--tape-play) 25%,
- var(--tape-loud) 25%,
- var(--tape-loud) 50%,
+ var(--tape-loud) 0,
+ var(--tape-loud) 30%,
+ var(--tape-bluv) 30%,
+ var(--tape-bluv) 50%,
var(--tape-luvu) 50%,
- var(--tape-luvu) 75%,
- var(--tape-bluv) 75%,
- var(--tape-bluv) 100%
+ var(--tape-luvu) 80%,
+ var(--tape-play) 80%,
+ var(--tape-play) 100%
);
}
@@ -170,12 +170,32 @@ footer {
margin: 0 auto 1em;
contain: layout;
display: flex;
+ align-content: center;
+}
+
+a svg {
+ min-width: 3.618rem;
+ max-width: 100%;
+ height: auto;
+}
+
+kbd {
+ filter: hue-rotate(0deg);
+ font-size: 1.618em;
+ padding-inline: 0.5ch;
+}
+
+a {
+ padding: 1ch;
+}
+
+[href="?"] {
+ cursor: grab;
}
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);
@@ -190,7 +210,6 @@ button {
}
button:hover {
- cursor: url(#illbang);
cursor: zoom-in;
text-decoration-style: double;
}
@@ -215,10 +234,6 @@ figcaption {
}
@media (orientation: portrait) {
- button {
- flex-basis: 100%;
- }
-
code {
align-items: center;
writing-mode: vertical-rl;
diff --git a/index.html b/index.html
index 94f042f..a496447 100644
--- a/index.html
+++ b/index.html
@@ -2,17 +2,19 @@
-illbang color remixer
+illbang ¡! remixer
-
+
+
+