A userscript to redesign the PPCG website

WeArePPCG.user.js

// ==UserScript==
// @name        favicon
// @namespace   Jarrett Atkinson
// @version     1
// @grant       none
// @icon        https://i.stack.imgur.com/di36k.png
// ==/UserScript==


console.log('1');
function qS(x) {
    return document.querySelector(x);
}


function httpGetAsync(theUrl, callback){
    // http://stackoverflow.com/a/4033310/4683264
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
        if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
            callback(xmlHttp.responseText);
        }
    };
    xmlHttp.open("GET", theUrl, true); // true for asynchronous 
    xmlHttp.send(null);
}


function addCoreCss(bgColor, bgImg, spriteSheet) {
  document.head.innerHTML += (`<style>
@import url(https://fonts.googleapis.com/css?family=Exo+2|Source+Sans+Pro);
#hmenus .nav ul li a, #tabs a {
    transition: color 0s ease 0s, all 0.3s ease 0s, all 0s ease 0s;
    color: #485A62;
}

#hmenus .nav ul li a:hover, #tabs a:hover, .youarehere {
    color: #33A6D6 !important;
    border: none !important;
}

#sidebar .module.community-bulletin {
    background: rgba(210, 238, 255, 0.5) none repeat scroll 0% 0%;
}
.container {
    background-image: url(${bgImg});
    /*background-position: 0px 34px;*/
    
    background-repeat: repeat-x;
    background-color: ${bgColor};
    box-shadow: none !important;
    background-size: 350px 630px;
}

#header {
    background: transparent !important;
}

#content, pre {
    background: rgba(250, 250, 250, 0.60) none repeat scroll 0% 0%;
    border: 3px solid #D5D8DA;
    border-radius: 4px;
    padding: 10px 22px 10px 22px;
}

pre {
    background-color: #EEEEEE;
    padding: 7px;
}

.envelope-on, .envelope-off, .vote-up-off, .vote-up-on, .vote-down-off, .vote-down-on, .star-on, .star-off, .comment-up-off, .comment-up-on, .comment-flag,
.edited-yes, .feed-icon, .vote-accepted-off, .vote-accepted-on, .vote-accepted-bounty, .badge-earned-check, .delete-tag, .grippie, .expander-arrow-hide,
.expander-arrow-show, .expander-arrow-small-hide, .expander-arrow-small-show, .anonymous-gravatar, .badge1, .badge2, .badge3, .gp-share, .fb-share, .twitter-share,
#notify-container span.notify-close, .migrated.to, .migrated.from {
    background-image: url(${spriteSheet}), none;
    background-size: initial;
}

.module, .card {
    border: 2px solid rgb(213, 216, 218) !important;
    border-radius: 2px;
    padding: 6px;
}

.askquestion a {
    background: #31A6D6 none repeat scroll 0% 0% !important;
    color: #FFF !important;
    border-radius: 3px !important;
    border: 0px none !important;
    padding: 10px 16px !important;
    margin: 0px !important;
    font-weight: bold !important;
}

.askquestion a:hover {
    background: #485A62 none repeat scroll 0% 0% !important;
}

.subheader, #question-header {
    border: none;
    padding-left: 7px;
    margin: 3px;
}

#newlogo {
    font-family: "Lato", "Open Sans", "Arial", sans-serif;
    top:-15px;
    position:relative;
}

#hmenus {
    font-family: "Lato", "Open Sans", "Arial", sans-serif;
}

#newlogo td {
    padding-right:15px;
}

#hlogo a{
    width:600px;
}

#hmenus {
    top: 40px;
}


</style>`);
}


var otherTags = ["code-challenge", "math", "string", "popularity-contest",
                 "ascii-art", "number", "kolmogorov-complexity", "graphical-output",
                 "restricted-source", "arithmetic", "sequence", "game",
                 "tips", "geometry", "number-theory", "random", "primes",
                 "array-manipulation", "date", "image-processing", "graphs",
                 "sorting", "interpreter", "optimization", "parsing",
                 "path-finding", "puzzle-solver", "underhanded", "source-layout",
                 "base-conversion"];

function getCookie(name) {
  // http://stackoverflow.com/a/15724300/4683264
  var value = "; " + document.cookie;
  var parts = value.split("; " + name + "=");
  if (parts.length == 2) return parts.pop().split(";").shift();
}


function getValidQuestions(tag, onDone) {
    var url = `https://api.stackexchange.com/2.2/search/advanced?order=desc&min=7&todate=1420070400&sort=votes&closed=False&tagged=${tag}&site=codegolf`;
    httpGetAsync(url, function (ret) {
        onDone(JSON.parse(ret)['items']);
    });
}


/* check the cookies for the question, or grab a new one. return format is [url, title] */
function getQuestion(tag, callback) {
    var cookieSuffix = '-tag-question';
    // cookieSep is a space
    var cookieVal = getCookie(tag + cookieSuffix);
    if (cookieVal) {
        var parts = cookieVal.split(/ (.+)?/);
        var url = parts[0];
        delete parts[0];
        var title = parts.join(' ');
        callback([url, title]);
        return 0;
    }
    
    getValidQuestions(tag, function (ret) {
        var quest = ret[Math.floor(Math.random()*ret.length)];
        var url = quest['link'];
        var title = quest['title'];
        
        document.cookie = `${tag + cookieSuffix}=${url} ${title};max-age=86400;`;
        callback([url, title]);
    });
}


function addTag(tag) {
    getQuestion(tag, function (a) {
        qS('#question-of-the-day').innerHTML += `
<div id=""> 
      <a href="/questions/tagged/${tag}" class="post-tag user-tag" title="show questions tagged '${tag}'" rel="tag">${tag}</a>
   </div>
<div class="favicon favicon-codegolf" title="Unix &amp; Linux Stack Exchange"></div>
<a href="${a[0]}" style="font-weight: normal; font-size: 12px; white-space: normal; width: 90%; vertical-align: top; margin-left: 5px;">${a[1]}</a><br>`;
    });
}

function addOtherTags() {
    var cookieName = 'other-tags-today';
    var tags = getCookie(cookieName);
    if (tags) {tags = tags.split(' ');}
    else {
        tags = [otherTags[Math.floor(Math.random()*otherTags.length)],
                otherTags[Math.floor(Math.random()*otherTags.length)]];
        document.cookie = `${cookieName}=${tags[0]} ${tags[1]};max-age=86400;`;
    }
    
    tags.forEach(function (a) {
        addTag(a);
    });
}

console.log('2');
function addQuestionOfTheDay() {
    var questionOfTheDayHtml = `
<div class="module" id="question-of-the-day">
   <h4 id="h-inferred-tags">Questions of the day</h4>
</div>`;   
    
    // below the blog posts
    var favTags = qS('div.module:nth-child(2)');
    favTags.insertAdjacentHTML('afterend', questionOfTheDayHtml);
    
    addTag('code-golf');
    addTag('king-of-the-hill');
    addTag('fastest-code');
    
    addOtherTags();
}

var FAVICON = 'http://i.stack.imgur.com/di36k.png'//"http://i.stack.imgur.com/jOhpI.png";
var smICON = 'http://i.imgur.com/FMih93I.png'
var SPRITE_SHEET = "http://imgh.us/gs_27.svg";
document.head.innerHTML += '<style>.favicon-codegolf {background-position: initial !important; background-image: url("' + FAVICON + '"); background-size: 100% 100% !important;}</style>'


if((window.location+"").search("/codegolf.stackexchange.com/")>=0){
  qS("link[rel$=\"icon\"]").href = FAVICON;
  var x = qS(".beta-title").parentElement;
  qS(".beta-title").parentElement.removeChild(qS(".beta-title"));
  x.innerHTML = "<table id=\"newlogo\"><tr><td><img src=\""+smICON+"\" height=50></td><td>Programming Puzzles &amp; Code Golf</td></tr></table>";

    
  addCoreCss('#F5F8FA', 'http://cdn.sstatic.net/codereview/img/pattern.png?v=8286dee84d00', SPRITE_SHEET);
    
  addQuestionOfTheDay();
}

if((window.location+"").search("/meta.codegolf.stackexchange.com")>=0){
  document.querySelector("link[rel$=\"icon\"").href = FAVICON;
   
  addCoreCss('#F7F7F7', 'http://cdn.sstatic.net/codereviewmeta/img/pattern@2.png?v=f98e015e067f', SPRITE_SHEET);
}

if(document.getElementById("siterooms")!=null&&document.getElementById("siterooms").getAttribute("title")=="all Programming Puzzles & Code Golf rooms"){
  document.querySelector("link[rel$=\"icon\"").href = FAVICON;
}