{"id":1112,"date":"2019-07-21T14:56:49","date_gmt":"2019-07-21T21:56:49","guid":{"rendered":"https:\/\/doubleecpu.com\/?page_id=1112"},"modified":"2019-07-21T15:30:26","modified_gmt":"2019-07-21T22:30:26","slug":"mycssvariables","status":"publish","type":"page","link":"https:\/\/doubleecpu.com\/index.php\/raspian-linux-programs\/javascript-2\/myjs30\/mycssvariables\/","title":{"rendered":"myCSSVariables"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Change Variables to adjust Website variables<\/h2>\n\n\n\n<div class=\"controls\">\n      <label for=\"spacing\">Spacing:<\/label>\n      <input id=\"spacing\" type=\"range\" name=\"spacing\" min=\"10\" max=\"100\" value=\"10\" data-sizing=\"px\">\n      <p><\/p>\n      <label for=\"blur\">Blur:<\/label>\n      <input id=\"blur\" type=\"range\" name=\"blur\" min=\"0\" max=\"15\" value=\"10\" data-sizing=\"px\">\n      <p><\/p>\n      <label for=\"base\">Base Color<\/label>\n      <input id=\"base\" type=\"color\" name=\"base\" value=\"#cd3232\">\n      <p><\/p>\n  <\/div>\n\n  <img decoding=\"async\" src=\"https:\/\/doubleecpu.com\/wp-content\/uploads\/2019\/06\/20190614_224241.jpg\">\n  \n  <style>\n    :root {\n      --base: #cd3232;\n      --spacing: 50px;\n      --blur: 5px;\n    }\n    img {\n      padding: var(--spacing);\n      background: var(--base);\n      filter: blur(var(--blur));\n    }\n    \/*\n      misc styles, nothing to do with CSS variables\n    *\n  <\/style>\n\n  <script>\n    const inputs = document.querySelectorAll('.controls input');\n\n    function handleUpdate() {\n      const suffix = this.dataset.sizing || '';\n      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);\n    }\n\n    inputs.forEach(input => input.addEventListener('change', handleUpdate));\n    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));\n  <\/script>\n","protected":false},"excerpt":{"rendered":"<p>Change Variables to adjust Website variables Spacing: Blur: Base Color<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1022,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1112","page","type-page","status-publish","hentry"],"featured_media_urls":[],"_links":{"self":[{"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/pages\/1112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/comments?post=1112"}],"version-history":[{"count":0,"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/pages\/1112\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/pages\/1022"}],"wp:attachment":[{"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/media?parent=1112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}