window.onload = function (){
  console.log('nice to see you, old friend :)');
}

function favicon(url) {
  var f = document.createElement('link');
  f.rel = 'icon';
  f.type = 'icon/x-image';
  f.href = url;

  return f;
}

document.addEventListener('click', function(e) {
  var newFaviconUrl = 'img/purple.ico',
      head = document.querySelector('head'),
      bodyClasses = document.querySelector('body').classList,
      mouseX = e.clientX, mouseY = e.clientY;
  if (mouseY < 15) { /* if inside body::before */
    var oldFavicon = document.querySelector('link[rel=icon]');
    bodyClasses.add('new');
    head.removeChild(oldFavicon);
    /* using a timer so that the favicon and css declared color
      change at the same time-ish */
    setTimeout(function() {
      head.appendChild(favicon(newFaviconUrl)); 
    }, 500);
  }
});

@@ -87,448 +87,928 @@
 ion 
-favicon(url) %7B%0A  var f = document.createElement('link');%0A  f.rel = 'icon';%0A  f.type = 'icon/x-image';%0A  f.href = url;%0A%0A  return f;%0A%7D%0A%0Adocument.addEventListener('click', function(e) %7B%0A  var newFaviconUrl = 'img/purple.ico',%0A      head = document.querySelector('head'),%0A      bodyClasses = document.querySelector('body').classList,%0A      mouseX = e.clientX, mouseY = e.clientY;%0A  if (mouseY %3C 15) %7B /* if inside body::before */%0A    var oldFav
+titleCase(str) %7B%0A  return str%5B0%5D.toUpperCase() + str.slice(1, str.length);%0A%7D%0A%0Afunction changeColor(color) %7B%0A  setAccentColor(color);%0A  setLinkColor(color);%0A  setTimeout(function() %7B%0A    setFaviconColor(color);%0A  %7D, 500);%0A%7D%0A%0Afunction setAccentColor(color) %7B%0A  var styles = document.createElement('style');%0A  document.querySelector('head').appendChild(styles);%0A  styles.sheet.addRule('body::before', 'background-color: ' + color);%0A  styles.sheet.addRule('footer .link-color', 'color: ' + color);%0A  styles.sheet.addRule('footer .link-color:after', 'content: %22' + titleCase(color) + '%22');%0A%7D%0A%0Afunction setLinkColor(color) %7B%0A  var linkElements = document.querySelectorAll('a, a:hover, a:visited'),%0A      links = %5B%5D.slice.call(linkElements);%0A%0A  links.forEach(function(link) %7B%0A    link.style.setProperty('color', color);%0A    link.style.setProperty('border-bottom-color', color);%0A  %7D);%0A%7D%0A%0Afunction setFaviconColor(color) %7B%0A  var 
 icon
@@ -1034,20 +1034,16 @@
 lector('
-link
 %5Brel=ico
@@ -1054,245 +1054,520 @@
 ;%0A  
-  bodyClasses.add('new');%0A    head.removeChild(oldFavicon);%0A    /* using a timer so that the favicon and css declared color%0A      change at the same time-ish */%0A    setTimeout(function() %7B%0A      head.appendChild(favicon(newFaviconUrl)
+favicolor(icon, color);%0A%7D%0A%0Avar hashedColor = window.location.hash.split('#/');%0A%0Aif (hashedColor.length != 1) %7B%0A  changeColor(hashedColor%5B1%5D);%0A%7D%0A%0Awindow.addEventListener('hashchange', function(e) %7B%0A  var color = e.newURL.split('/#/')%5B1%5D;%0A  changeColor(color);%0A%7D);%0A%0Adocument.addEventListener('click', function(e) %7B%0A  if (e.clientY %3C 15) %7B /* if inside body::before */%0A    var body = document.querySelector('body');%0A    body.classList.add('new'); %0A    setTimeout(function() %7B%0A      setFaviconColor('RebeccaPurple'
 );
- 
 %0A   

change color to any colostring with hash