From afb22b9c3a95d09b40bceff1dc6c2a5c62fb9202 Mon Sep 17 00:00:00 2001
From: Lucas <lucas@larroche.com>
Date: Thu, 28 Nov 2019 12:24:53 +0700
Subject: [PATCH] JS improvement

---
 docs/index.html                |  3 +--
 docs/js/pico.docs.js           |  1 +
 docs/js/pico.docs.min.js       |  2 +-
 docs/js/src/aside.js           | 19 +++++++++++++++
 docs/js/src/color-picker.js    | 43 ++++++++++++++--------------------
 docs/js/src/internal-scroll.js |  8 ++++---
 docs/js/src/theme-switcher.js  |  4 ++--
 7 files changed, 46 insertions(+), 34 deletions(-)
 create mode 100644 docs/js/src/aside.js

diff --git a/docs/index.html b/docs/index.html
index 9f27c1b5..5a140034 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -16,7 +16,7 @@
     <nav class="container-fluid">
       <ul>
         <li>
-          <a href="#">
+          <a href="https://picocss.com">
             <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" height="3.5rem">
               <path fill="currentColor" d="M633.43 429.23c0 118.38-49.76 184.72-138.87 184.72-53 0-92.04-25.37-108.62-67.32h-2.6v203.12H250V249.7h133.67v64.72h2.28c17.24-43.9 55.3-69.92 107-69.92 90.4 0 140.48 66.02 140.48 184.73zm-136.6 0c0-49.76-22.1-81.96-56.9-81.96s-56.9 32.2-57.24 82.28c.33 50.4 22.1 81.63 57.24 81.63 35.12 0 56.9-31.87 56.9-81.95zM682.5 547.5c0-37.32 30.18-67.5 67.5-67.5s67.5 30.18 67.5 67.5S787.32 615 750 615s-67.5-30.18-67.5-67.5z"/>
             </svg>
@@ -25,7 +25,6 @@
         <li>Documentation</li>
       </ul>
       <ul>
-        <li><a href="https://picocss.com/#examples" class="secondary">Examples</a></li>
         <li><a href="#start" class="secondary">Start</a></li>
         <li><a href="#docs" class="secondary">Docs</a></li>
         <li>
diff --git a/docs/js/pico.docs.js b/docs/js/pico.docs.js
index 299bb272..d15cdea2 100644
--- a/docs/js/pico.docs.js
+++ b/docs/js/pico.docs.js
@@ -1,3 +1,4 @@
+//@prepros-append src/aside.js
 //@prepros-append src/theme-switcher.js
 //@prepros-append src/internal-scroll.js
 //@prepros-append src/grid.js
diff --git a/docs/js/pico.docs.min.js b/docs/js/pico.docs.min.js
index d3f1670e..179b117c 100644
--- a/docs/js/pico.docs.min.js
+++ b/docs/js/pico.docs.min.js
@@ -1 +1 @@
-!function(){function e(e){if("light"==e)var t=r.button.on;else t=r.button.off;document.querySelector("html").setAttribute("data-theme",e),document.querySelector(r.selector).innerHTML=t,document.querySelector(r.selector).setAttribute("aria-label",t.replace(/<[^>]*>?/gm,"")),r.currentTheme=e}var t,r={button:{element:"BUTTON",class:"secondary switcher",on:"<i>Turn on dark mode</i>",off:"<i>Turn off dark mode</i>"},target:"main",selector:"button.switcher",currentTheme:window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"};(t=document.createElement(r.button.element)).className=r.button.class,document.querySelector(r.target).after(t),e(r.currentTheme),document.querySelector(r.selector).addEventListener("click",function(){"light"==r.currentTheme?e("dark"):e("light")},!1)}(),function(){function r(e){event.preventDefault();var t,r,a=e.href.split("#");a=function(e){mobile=window.matchMedia("(max-width: 991.99px)"),mobile.matches||"docs"==e&&(e="start");return e}(a[1]),a=document.getElementById(a),r=a,t=Math.floor(r.getBoundingClientRect().top),window.scrollBy({top:t,left:0,behavior:"smooth"})}!function(e){for(var t=0;t<e.length;t++)-1!=e[t].href.indexOf("#")&&e[t].addEventListener("click",function(e){r(e.target)},!1)}(document.querySelectorAll('a:not([href^="https://picocss.com"])'))}(),function(){function e(e){for(var t="",r="",a=0;a<e;a++)t+="<div>"+(a+1)+"</div>",r+="  &lt;<b>div</b>&gt;"+(a+1)+"&lt;/<b>div</b>&gt;\n";document.querySelector(f.targetGrid).innerHTML=t,document.querySelector(f.targetCode).innerHTML='&lt;<b>section</b> <i>class</i>=<u>"grid"</u>&gt;\n'+r+"&lt;/<b>section</b>&gt;"}var t,f={columnsCurrent:4,columnsMin:1,columnsMax:12,targetButtons:"#grids article",targetGrid:"#grids .grid",targetCode:"#grids pre code",selectorAdd:"#grids button.add",selectorRemove:"#grids button.remove"};(t=document.createElement("P")).innerHTML='<button class="secondary add"><svg xmlns="http://www.w3.org/2000/svg" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg> Add column</button><button class="secondary remove"><svg xmlns="http://www.w3.org/2000/svg" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line></svg> Remove column</button>',document.querySelector(f.targetButtons).before(t),document.querySelector(f.selectorAdd).addEventListener("click",function(){f.columnsCurrent<f.columnsMax&&(f.columnsCurrent++,e(f.columnsCurrent))},!1),document.querySelector(f.selectorRemove).addEventListener("click",function(){f.columnsCurrent>f.columnsMin&&(f.columnsCurrent--,e(f.columnsCurrent))},!1)}(),function(){function d(e,t){!function(e,t){for(var r=document.querySelectorAll(m.selectorTheme+" .name"),a=0;a<r.length;++a)r[a].innerHTML=e.charAt(0).toUpperCase()+e.substring(1)+" ";for(var f=document.querySelectorAll(m.selectorTheme+" .c500"),a=0;a<f.length;++a)f[a].innerHTML=t[500];for(var o=document.querySelectorAll(m.selectorTheme+" .c600"),a=0;a<o.length;++a)o[a].innerHTML=t[600];for(var n=document.querySelectorAll(m.selectorTheme+" .c700"),a=0;a<n.length;++a)n[a].innerHTML=t[700];for(var c=document.querySelectorAll(m.selectorTheme+" .c600-outline-light"),a=0;a<c.length;++a)c[a].innerHTML=b(t[600],.125);for(var d=document.querySelectorAll(m.selectorTheme+" .c600-outline-dark"),a=0;a<d.length;++a)d[a].innerHTML=b(t[600],.25);for(var l=document.querySelectorAll(m.selectorTheme+" .inverse"),a=0;a<l.length;++a)l[a].innerHTML=t.inverse;var i='[data-theme="generated"] {--primary:'+t[600]+";--h4:"+t[700]+";--primary-hover:"+t[700]+";--primary-focus:"+b(t[600],.125)+";--primary-inverse:"+t.inverse+';}@media only screen and (prefers-color-scheme: dark) {:root:not([data-theme="light"]) [data-theme="generated"] {--primary:'+t[600]+";--h4:"+t[400]+";--primary-hover:"+t[500]+";--primary-focus:"+b(t[600],.25)+";--primary-inverse:"+t.inverse+';}}[data-theme="dark"] [data-theme="generated"] {--primary:'+t[600]+";--h4:"+t[500]+";--primary-hover:"+t[500]+";--primary-focus:"+b(t[600],.25)+";--primary-inverse:"+t.inverse+";}",u=document.querySelector('style:not([title="color-picker"])');if(void 0!==u&&null!=u)u.innerHTML=i;else{var s=document.createElement("STYLE");s.innerHTML=i,document.querySelector("head link").after(s)}document.querySelector(m.selectorTheme+" .grid").setAttribute("data-theme",e)}(e,t);for(var r=document.querySelectorAll(m.selectorButton),a=0;a<r.length;a++)r[a].removeAttribute("class");document.querySelector(m.selectorButton+'[data-color="'+e+'"]').setAttribute("class","picked")}function b(e,t){var r;if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(e))return 3==(r=e.substring(1).split("")).length&&(r=[r[0],r[0],r[1],r[1],r[2],r[2]]),"rgba("+[(r="0x"+r.join(""))>>16&255,r>>8&255,255&r].join(",")+","+t+")";throw new Error("Bad Hex")}var m={list:"json/material-colors.json",target:"#customization h5",selectorButton:"#customization button[data-color]",selectorTheme:"#customization",system:{red:{50:"#ffebee",100:"#ffcdd2",200:"#ef9a9a",300:"#e57373",400:"#ef5350",500:"#f44336",600:"#e53935",700:"#d32f2f",800:"#c62828",900:"#b71c1c",a100:"#ff8a80",a200:"#ff5252",a400:"#ff1744",a700:"#d50000",inverse:"#FFF"},pink:{50:"#fce4ec",100:"#f8bbd0",200:"#f48fb1",300:"#f06292",400:"#ec407a",500:"#e91e63",600:"#d81b60",700:"#c2185b",800:"#ad1457",900:"#880e4f",a100:"#ff80ab",a200:"#ff4081",a400:"#f50057",a700:"#c51162",inverse:"#FFF"},purple:{50:"#f3e5f5",100:"#e1bee7",200:"#ce93d8",300:"#ba68c8",400:"#ab47bc",500:"#9c27b0",600:"#8e24aa",700:"#7b1fa2",800:"#6a1b9a",900:"#4a148c",a100:"#ea80fc",a200:"#e040fb",a400:"#d500f9",a700:"#aa00ff",inverse:"#FFF"},"deep-purple":{50:"#ede7f6",100:"#d1c4e9",200:"#b39ddb",300:"#9575cd",400:"#7e57c2",500:"#673ab7",600:"#5e35b1",700:"#512da8",800:"#4527a0",900:"#311b92",a100:"#b388ff",a200:"#7c4dff",a400:"#651fff",a700:"#6200ea",inverse:"#FFF"},indigo:{50:"#e8eaf6",100:"#c5cae9",200:"#9fa8da",300:"#7986cb",400:"#5c6bc0",500:"#3f51b5",600:"#3949ab",700:"#303f9f",800:"#283593",900:"#1a237e",a100:"#8c9eff",a200:"#536dfe",a400:"#3d5afe",a700:"#304ffe",inverse:"#FFF"},blue:{50:"#e3f2fd",100:"#bbdefb",200:"#90caf9",300:"#64b5f6",400:"#42a5f5",500:"#2196f3",600:"#1e88e5",700:"#1976d2",800:"#1565c0",900:"#0d47a1",a100:"#82b1ff",a200:"#448aff",a400:"#2979ff",a700:"#2962ff",inverse:"#FFF"},"light-blue":{50:"#e1f5fe",100:"#b3e5fc",200:"#81d4fa",300:"#4fc3f7",400:"#29b6f6",500:"#03a9f4",600:"#039be5",700:"#0288d1",800:"#0277bd",900:"#01579b",a100:"#80d8ff",a200:"#40c4ff",a400:"#00b0ff",a700:"#0091ea",inverse:"#FFF"},cyan:{50:"#e0f7fa",100:"#b2ebf2",200:"#80deea",300:"#4dd0e1",400:"#26c6da",500:"#00bcd4",600:"#00acc1",700:"#0097a7",800:"#00838f",900:"#006064",a100:"#84ffff",a200:"#18ffff",a400:"#00e5ff",a700:"#00b8d4",inverse:"#FFF"},teal:{50:"#e0f2f1",100:"#b2dfdb",200:"#80cbc4",300:"#4db6ac",400:"#26a69a",500:"#009688",600:"#00897b",700:"#00796b",800:"#00695c",900:"#004d40",a100:"#a7ffeb",a200:"#64ffda",a400:"#1de9b6",a700:"#00bfa5",inverse:"#FFF"},green:{50:"#e8f5e9",100:"#c8e6c9",200:"#a5d6a7",300:"#81c784",400:"#66bb6a",500:"#4caf50",600:"#43a047",700:"#388e3c",800:"#2e7d32",900:"#1b5e20",a100:"#b9f6ca",a200:"#69f0ae",a400:"#00e676",a700:"#00c853",inverse:"#FFF"},"light-green":{50:"#f1f8e9",100:"#dcedc8",200:"#c5e1a5",300:"#aed581",400:"#9ccc65",500:"#8bc34a",600:"#7cb342",700:"#689f38",800:"#558b2f",900:"#33691e",a100:"#ccff90",a200:"#b2ff59",a400:"#76ff03",a700:"#64dd17",inverse:"#FFF"},lime:{50:"#f9fbe7",100:"#f0f4c3",200:"#e6ee9c",300:"#dce775",400:"#d4e157",500:"#cddc39",600:"#c0ca33",700:"#afb42b",800:"#9e9d24",900:"#827717",a100:"#f4ff81",a200:"#eeff41",a400:"#c6ff00",a700:"#aeea00",inverse:"#2c4049"},yellow:{50:"#fffde7",100:"#fff9c4",200:"#fff59d",300:"#fff176",400:"#ffee58",500:"#ffeb3b",600:"#fdd835",700:"#fbc02d",800:"#f9a825",900:"#f57f17",a100:"#ffff8d",a200:"#ffff00",a400:"#ffea00",a700:"#ffd600",inverse:"#2c4049"},amber:{50:"#fff8e1",100:"#ffecb3",200:"#ffe082",300:"#ffd54f",400:"#ffca28",500:"#ffc107",600:"#ffb300",700:"#ffa000",800:"#ff8f00",900:"#ff6f00",a100:"#ffe57f",a200:"#ffd740",a400:"#ffc400",a700:"#ffab00",inverse:"#2c4049"},orange:{50:"#fff3e0",100:"#ffe0b2",200:"#ffcc80",300:"#ffb74d",400:"#ffa726",500:"#ff9800",600:"#fb8c00",700:"#f57c00",800:"#ef6c00",900:"#e65100",a100:"#ffd180",a200:"#ffab40",a400:"#ff9100",a700:"#ff6d00",inverse:"#FFF"},"deep-orange":{50:"#fbe9e7",100:"#ffccbc",200:"#ffab91",300:"#ff8a65",400:"#ff7043",500:"#ff5722",600:"#f4511e",700:"#e64a19",800:"#d84315",900:"#bf360c",a100:"#ff9e80",a200:"#ff6e40",a400:"#ff3d00",a700:"#dd2c00",inverse:"#FFF"},grey:{50:"#fafafa",100:"#f5f5f5",200:"#eeeeee",300:"#e0e0e0",400:"#bdbdbd",500:"#9e9e9e",600:"#757575",700:"#616161",800:"#424242",900:"#212121",inverse:"#FFF"},"blue-grey":{50:"#eceff1",100:"#cfd8dc",200:"#b0bec5",300:"#90a4ae",400:"#78909c",500:"#607d8b",600:"#546e7a",700:"#455a64",800:"#37474f",900:"#263238",inverse:"#FFF"}}};!function(t){var e="",r="";for(var a in t)t.hasOwnProperty(a)&&(e+='<button data-color="'+a+'"></button>',r+='button[data-color="'+a+'"] {background-color: '+t[a][600]+'; }[data-theme="light"] button[data-color="'+a+'"]:hover, [data-theme="light"] button[data-color="'+a+'"]:active, [data-theme="light"] button[data-color="'+a+'"]:focus {background-color: '+t[a][700]+'; }[data-theme="dark"] button[data-color="'+a+'"]:hover, [data-theme="dark"] button[data-color="'+a+'"]:active, [data-theme="dark"] button[data-color="'+a+'"]:focus {background-color: '+t[a][500]+"; }");var f=document.createElement("FIGURE");f.innerHTML=e,document.querySelector(m.target).after(f);for(var o=document.querySelectorAll(m.selectorButton),n=0;n<o.length;n++)o[n].addEventListener("click",function(e){buttonColor=e.target.getAttribute("data-color"),d(buttonColor,t[buttonColor])},!1);var c=document.createElement("STYLE");c.setAttribute("title","color-picker"),c.innerHTML=r,document.querySelector("head link").after(c)}(m.system),d("pink",m.system.pink)}();
\ No newline at end of file
+!function(){if(document.querySelector("aside nav").clientWidth<200)for(var e=document.querySelectorAll("aside details"),t=1;t<e.length;t++)e[t].removeAttribute("open")}(),function(){function e(e){if("light"==e)var t=r.button.on;else t=r.button.off;document.querySelector("html").setAttribute("data-theme",e),document.querySelector(r.selector).innerHTML=t,document.querySelector(r.selector).setAttribute("aria-label",t.replace(/<[^>]*>?/gm,"")),r.currentTheme=e}var t,r={button:{element:"BUTTON",class:"secondary switcher",on:"<i>Turn on dark mode</i>",off:"<i>Turn off dark mode</i>"},target:"body",selector:"button.switcher",currentTheme:window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"};(t=document.createElement(r.button.element)).className=r.button.class,document.querySelector(r.target).appendChild(t),e(r.currentTheme),document.querySelector(r.selector).addEventListener("click",function(){"light"==r.currentTheme?e("dark"):e("light")},!1)}(),function(){function r(e){event.preventDefault();var t,r,a=e.href.split("#");""!=a[1]&&(a=function(e){mobile=window.matchMedia("(max-width: 991.99px)"),mobile.matches||"docs"==e&&(e="start");return e}(a[1]),a=document.getElementById(a),r=a,t=Math.floor(r.getBoundingClientRect().top),window.scrollBy({top:t,left:0,behavior:"smooth"}))}!function(e){for(var t=0;t<e.length;t++)-1!=e[t].href.indexOf("#")&&e[t].addEventListener("click",function(e){r(e.target)},!1)}(document.querySelectorAll('a:not([href^="https://picocss.com"])'))}(),function(){function e(e){for(var t="",r="",a=0;a<e;a++)t+="<div>"+(a+1)+"</div>",r+="  &lt;<b>div</b>&gt;"+(a+1)+"&lt;/<b>div</b>&gt;\n";document.querySelector(f.targetGrid).innerHTML=t,document.querySelector(f.targetCode).innerHTML='&lt;<b>section</b> <i>class</i>=<u>"grid"</u>&gt;\n'+r+"&lt;/<b>section</b>&gt;"}var t,f={columnsCurrent:4,columnsMin:1,columnsMax:12,targetButtons:"#grids article",targetGrid:"#grids .grid",targetCode:"#grids pre code",selectorAdd:"#grids button.add",selectorRemove:"#grids button.remove"};(t=document.createElement("P")).innerHTML='<button class="secondary add"><svg xmlns="http://www.w3.org/2000/svg" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg> Add column</button><button class="secondary remove"><svg xmlns="http://www.w3.org/2000/svg" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line></svg> Remove column</button>',document.querySelector(f.targetButtons).before(t),document.querySelector(f.selectorAdd).addEventListener("click",function(){f.columnsCurrent<f.columnsMax&&(f.columnsCurrent++,e(f.columnsCurrent))},!1),document.querySelector(f.selectorRemove).addEventListener("click",function(){f.columnsCurrent>f.columnsMin&&(f.columnsCurrent--,e(f.columnsCurrent))},!1)}(),function(){function c(e,t){!function(e,t){for(var r=document.querySelectorAll(s.selectorTheme+" .name"),a=0;a<r.length;++a)r[a].innerHTML=e.charAt(0).toUpperCase()+e.substring(1)+" ";for(var f=document.querySelectorAll(s.selectorTheme+" .c500"),a=0;a<f.length;++a)f[a].innerHTML=t[500];for(var o=document.querySelectorAll(s.selectorTheme+" .c600"),a=0;a<o.length;++a)o[a].innerHTML=t[600];for(var n=document.querySelectorAll(s.selectorTheme+" .c700"),a=0;a<n.length;++a)n[a].innerHTML=t[700];for(var c=document.querySelectorAll(s.selectorTheme+" .c600-outline-light"),a=0;a<c.length;++a)c[a].innerHTML=u(t[600],.125);for(var d=document.querySelectorAll(s.selectorTheme+" .c600-outline-dark"),a=0;a<d.length;++a)d[a].innerHTML=u(t[600],.25);for(var l=document.querySelectorAll(s.selectorTheme+" .inverse"),a=0;a<l.length;++a)l[a].innerHTML=t.inverse;var i='[data-theme="generated"] {--primary:'+t[600]+";--h4:"+t[700]+";--primary-hover:"+t[700]+";--primary-focus:"+u(t[600],.125)+";--primary-inverse:"+t.inverse+';}@media only screen and (prefers-color-scheme: dark) {:root:not([data-theme="light"]) [data-theme="generated"] {--primary:'+t[600]+";--h4:"+t[400]+";--primary-hover:"+t[500]+";--primary-focus:"+u(t[600],.25)+";--primary-inverse:"+t.inverse+';}}[data-theme="dark"] [data-theme="generated"] {--primary:'+t[600]+";--h4:"+t[500]+";--primary-hover:"+t[500]+";--primary-focus:"+u(t[600],.25)+";--primary-inverse:"+t.inverse+";}";document.querySelector('style[title="color-picker"]').innerHTML=s.styles+i}(e,t);for(var r=document.querySelectorAll(s.selectorButton),a=0;a<r.length;a++)r[a].removeAttribute("class");document.querySelector(s.selectorButton+'[data-color="'+e+'"]').setAttribute("class","picked")}function u(e,t){var r;if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(e))return 3==(r=e.substring(1).split("")).length&&(r=[r[0],r[0],r[1],r[1],r[2],r[2]]),"rgba("+[(r="0x"+r.join(""))>>16&255,r>>8&255,255&r].join(",")+","+t+")";throw new Error("Bad Hex")}var s={list:"json/material-colors.json",target:"#customization h5",selectorButton:"#customization button[data-color]",selectorTheme:"#customization",styles:"",system:{red:{50:"#ffebee",100:"#ffcdd2",200:"#ef9a9a",300:"#e57373",400:"#ef5350",500:"#f44336",600:"#e53935",700:"#d32f2f",800:"#c62828",900:"#b71c1c",a100:"#ff8a80",a200:"#ff5252",a400:"#ff1744",a700:"#d50000",inverse:"#FFF"},pink:{50:"#fce4ec",100:"#f8bbd0",200:"#f48fb1",300:"#f06292",400:"#ec407a",500:"#e91e63",600:"#d81b60",700:"#c2185b",800:"#ad1457",900:"#880e4f",a100:"#ff80ab",a200:"#ff4081",a400:"#f50057",a700:"#c51162",inverse:"#FFF"},purple:{50:"#f3e5f5",100:"#e1bee7",200:"#ce93d8",300:"#ba68c8",400:"#ab47bc",500:"#9c27b0",600:"#8e24aa",700:"#7b1fa2",800:"#6a1b9a",900:"#4a148c",a100:"#ea80fc",a200:"#e040fb",a400:"#d500f9",a700:"#aa00ff",inverse:"#FFF"},"deep-purple":{50:"#ede7f6",100:"#d1c4e9",200:"#b39ddb",300:"#9575cd",400:"#7e57c2",500:"#673ab7",600:"#5e35b1",700:"#512da8",800:"#4527a0",900:"#311b92",a100:"#b388ff",a200:"#7c4dff",a400:"#651fff",a700:"#6200ea",inverse:"#FFF"},indigo:{50:"#e8eaf6",100:"#c5cae9",200:"#9fa8da",300:"#7986cb",400:"#5c6bc0",500:"#3f51b5",600:"#3949ab",700:"#303f9f",800:"#283593",900:"#1a237e",a100:"#8c9eff",a200:"#536dfe",a400:"#3d5afe",a700:"#304ffe",inverse:"#FFF"},blue:{50:"#e3f2fd",100:"#bbdefb",200:"#90caf9",300:"#64b5f6",400:"#42a5f5",500:"#2196f3",600:"#1e88e5",700:"#1976d2",800:"#1565c0",900:"#0d47a1",a100:"#82b1ff",a200:"#448aff",a400:"#2979ff",a700:"#2962ff",inverse:"#FFF"},"light-blue":{50:"#e1f5fe",100:"#b3e5fc",200:"#81d4fa",300:"#4fc3f7",400:"#29b6f6",500:"#03a9f4",600:"#039be5",700:"#0288d1",800:"#0277bd",900:"#01579b",a100:"#80d8ff",a200:"#40c4ff",a400:"#00b0ff",a700:"#0091ea",inverse:"#FFF"},cyan:{50:"#e0f7fa",100:"#b2ebf2",200:"#80deea",300:"#4dd0e1",400:"#26c6da",500:"#00bcd4",600:"#00acc1",700:"#0097a7",800:"#00838f",900:"#006064",a100:"#84ffff",a200:"#18ffff",a400:"#00e5ff",a700:"#00b8d4",inverse:"#FFF"},teal:{50:"#e0f2f1",100:"#b2dfdb",200:"#80cbc4",300:"#4db6ac",400:"#26a69a",500:"#009688",600:"#00897b",700:"#00796b",800:"#00695c",900:"#004d40",a100:"#a7ffeb",a200:"#64ffda",a400:"#1de9b6",a700:"#00bfa5",inverse:"#FFF"},green:{50:"#e8f5e9",100:"#c8e6c9",200:"#a5d6a7",300:"#81c784",400:"#66bb6a",500:"#4caf50",600:"#43a047",700:"#388e3c",800:"#2e7d32",900:"#1b5e20",a100:"#b9f6ca",a200:"#69f0ae",a400:"#00e676",a700:"#00c853",inverse:"#FFF"},"light-green":{50:"#f1f8e9",100:"#dcedc8",200:"#c5e1a5",300:"#aed581",400:"#9ccc65",500:"#8bc34a",600:"#7cb342",700:"#689f38",800:"#558b2f",900:"#33691e",a100:"#ccff90",a200:"#b2ff59",a400:"#76ff03",a700:"#64dd17",inverse:"#FFF"},lime:{50:"#f9fbe7",100:"#f0f4c3",200:"#e6ee9c",300:"#dce775",400:"#d4e157",500:"#cddc39",600:"#c0ca33",700:"#afb42b",800:"#9e9d24",900:"#827717",a100:"#f4ff81",a200:"#eeff41",a400:"#c6ff00",a700:"#aeea00",inverse:"#2c4049"},yellow:{50:"#fffde7",100:"#fff9c4",200:"#fff59d",300:"#fff176",400:"#ffee58",500:"#ffeb3b",600:"#fdd835",700:"#fbc02d",800:"#f9a825",900:"#f57f17",a100:"#ffff8d",a200:"#ffff00",a400:"#ffea00",a700:"#ffd600",inverse:"#2c4049"},amber:{50:"#fff8e1",100:"#ffecb3",200:"#ffe082",300:"#ffd54f",400:"#ffca28",500:"#ffc107",600:"#ffb300",700:"#ffa000",800:"#ff8f00",900:"#ff6f00",a100:"#ffe57f",a200:"#ffd740",a400:"#ffc400",a700:"#ffab00",inverse:"#2c4049"},orange:{50:"#fff3e0",100:"#ffe0b2",200:"#ffcc80",300:"#ffb74d",400:"#ffa726",500:"#ff9800",600:"#fb8c00",700:"#f57c00",800:"#ef6c00",900:"#e65100",a100:"#ffd180",a200:"#ffab40",a400:"#ff9100",a700:"#ff6d00",inverse:"#FFF"},"deep-orange":{50:"#fbe9e7",100:"#ffccbc",200:"#ffab91",300:"#ff8a65",400:"#ff7043",500:"#ff5722",600:"#f4511e",700:"#e64a19",800:"#d84315",900:"#bf360c",a100:"#ff9e80",a200:"#ff6e40",a400:"#ff3d00",a700:"#dd2c00",inverse:"#FFF"},grey:{50:"#fafafa",100:"#f5f5f5",200:"#eeeeee",300:"#e0e0e0",400:"#bdbdbd",500:"#9e9e9e",600:"#757575",700:"#616161",800:"#424242",900:"#212121",inverse:"#FFF"},"blue-grey":{50:"#eceff1",100:"#cfd8dc",200:"#b0bec5",300:"#90a4ae",400:"#78909c",500:"#607d8b",600:"#546e7a",700:"#455a64",800:"#37474f",900:"#263238",inverse:"#FFF"}}};!function(t){var e="";for(var r in t)t.hasOwnProperty(r)&&(e+='<button data-color="'+r+'"></button>',s.styles+='button[data-color="'+r+'"] {background-color: '+t[r][600]+'; }[data-theme="light"] button[data-color="'+r+'"]:hover, [data-theme="light"] button[data-color="'+r+'"]:active, [data-theme="light"] button[data-color="'+r+'"]:focus {background-color: '+t[r][700]+'; }[data-theme="dark"] button[data-color="'+r+'"]:hover, [data-theme="dark"] button[data-color="'+r+'"]:active, [data-theme="dark"] button[data-color="'+r+'"]:focus {background-color: '+t[r][500]+"; }");var a=document.createElement("FIGURE");a.innerHTML=e,document.querySelector(s.target).after(a);for(var f=document.querySelectorAll(s.selectorButton),o=0;o<f.length;o++)f[o].addEventListener("click",function(e){buttonColor=e.target.getAttribute("data-color"),c(buttonColor,t[buttonColor])},!1);var n=document.createElement("STYLE");n.setAttribute("title","color-picker"),n.innerHTML=s.styles,document.querySelector("head").appendChild(n)}(s.system),c("pink",s.system.pink)}();
\ No newline at end of file
diff --git a/docs/js/src/aside.js b/docs/js/src/aside.js
new file mode 100644
index 00000000..0047d0b0
--- /dev/null
+++ b/docs/js/src/aside.js
@@ -0,0 +1,19 @@
+/*!
+ * Aside adjustment
+ *
+ * Pico.css - https://picocss.com
+ * Copyright 2019 - Licensed under MIT
+ */
+
+(function() {
+
+  // Close details if aside > nav have a scrollbar
+  var navWidth = document.querySelector('aside nav').clientWidth;
+  if (navWidth < 200) {
+    var asideDetails = document.querySelectorAll("aside details");
+    for (var i = 1; i < asideDetails.length; i++) {
+     asideDetails[i].removeAttribute("open");
+    }
+  }
+
+})();
diff --git a/docs/js/src/color-picker.js b/docs/js/src/color-picker.js
index 7eb22e7c..6a3b9373 100644
--- a/docs/js/src/color-picker.js
+++ b/docs/js/src/color-picker.js
@@ -16,6 +16,7 @@
     target:         '#customization h5',                 // Buttons inserted after target
     selectorButton: '#customization button[data-color]', // Button selector in Dom
     selectorTheme:  '#customization',                    // Theme selector in Dom
+    styles:         '',
 
     // Source: https://material.io/design/color/the-color-system.html
     system: {
@@ -354,7 +355,6 @@
 
     // Vars
     var colorButtons = '';
-    var colorStyles  = '';
 
     // Colors
     for (var color in data) {
@@ -364,21 +364,21 @@
         colorButtons += '<button data-color="'+ color +'"></button>';
 
         // CSS Styles
-        colorStyles += 'button[data-color="'+ color +'"] {'
-                     +   'background-color: '+ data[color]['600'] +'; '
-                     + '}'
+        colors.styles += 'button[data-color="'+ color +'"] {'
+                      +   'background-color: '+ data[color]['600'] +'; '
+                      + '}'
 
-                     + '[data-theme="light"] button[data-color="'+ color +'"]:hover, '
-                     + '[data-theme="light"] button[data-color="'+ color +'"]:active, '
-                     + '[data-theme="light"] button[data-color="'+ color +'"]:focus {'
-                     +   'background-color: '+ data[color]['700'] +'; '
-                     + '}'
+                      + '[data-theme="light"] button[data-color="'+ color +'"]:hover, '
+                      + '[data-theme="light"] button[data-color="'+ color +'"]:active, '
+                      + '[data-theme="light"] button[data-color="'+ color +'"]:focus {'
+                      +   'background-color: '+ data[color]['700'] +'; '
+                      + '}'
 
-                     + '[data-theme="dark"] button[data-color="'+ color +'"]:hover, '
-                     + '[data-theme="dark"] button[data-color="'+ color +'"]:active, '
-                     + '[data-theme="dark"] button[data-color="'+ color +'"]:focus {'
-                     +   'background-color: '+ data[color]['500'] +'; '
-                     + '}'
+                      + '[data-theme="dark"] button[data-color="'+ color +'"]:hover, '
+                      + '[data-theme="dark"] button[data-color="'+ color +'"]:active, '
+                      + '[data-theme="dark"] button[data-color="'+ color +'"]:focus {'
+                      +   'background-color: '+ data[color]['500'] +'; '
+                      + '}'
       }
     }
 
@@ -399,8 +399,8 @@
     // Insert CSS Styles
     var styles = document.createElement('STYLE');
     styles.setAttribute('title', 'color-picker');
-    styles.innerHTML = colorStyles;
-    document.querySelector('head link').after(styles);
+    styles.innerHTML = colors.styles;
+    document.querySelector('head').appendChild(styles);
   }
 
 
@@ -498,16 +498,7 @@
                         + '}';
 
     // Insert CSS Styles
-    var selectorGenerated = document.querySelector('style:not([title="color-picker"])');
-    if(typeof(selectorGenerated) != 'undefined' && selectorGenerated != null) {
-      selectorGenerated.innerHTML = generatedStyles;
-    }
-    else {
-      var styles = document.createElement('STYLE');
-      styles.innerHTML = generatedStyles;
-      document.querySelector('head link').after(styles);
-    }
-    document.querySelector(colors.selectorTheme + ' .grid').setAttribute('data-theme', name);
+    document.querySelector('style[title="color-picker"]').innerHTML = colors.styles + generatedStyles;
   }
 
 
diff --git a/docs/js/src/internal-scroll.js b/docs/js/src/internal-scroll.js
index a07b51ed..16e20915 100644
--- a/docs/js/src/internal-scroll.js
+++ b/docs/js/src/internal-scroll.js
@@ -44,9 +44,11 @@
   function internalClick(link) {
     event.preventDefault();
     var anchor = link.href.split("#");
-    anchor = setAnchor(anchor[1]);
-    anchor = document.getElementById(anchor);
-    scrollToAnchor(anchor);
+    if (anchor[1] != '') {
+      anchor = setAnchor(anchor[1]);
+      anchor = document.getElementById(anchor);
+      scrollToAnchor(anchor);
+    }
   }
 
 
diff --git a/docs/js/src/theme-switcher.js b/docs/js/src/theme-switcher.js
index 275affda..c8af5bc6 100644
--- a/docs/js/src/theme-switcher.js
+++ b/docs/js/src/theme-switcher.js
@@ -18,7 +18,7 @@
       on:         '<i>Turn on dark mode</i>',
       off:        '<i>Turn off dark mode</i>'
     },
-    target:       'main', // Button inserted after target
+    target:       'body', // Button append in target
     selector:     'button.switcher', // Button selector in Dom
     currentTheme: systemColorScheme()
   };
@@ -59,7 +59,7 @@
     // Insert Switcher
     var button = document.createElement(switcher.button.element);
     button.className = switcher.button.class;
-    document.querySelector(switcher.target).after(button);
+    document.querySelector(switcher.target).appendChild(button);
 
     // Set Current Theme
     setTheme(switcher.currentTheme);