Cyanide & Happiness Comics

by MegaScience

HTML

<a href="http://explosm.net/rcg/PrivateShirtFlock" target="_blank"><img src="http://files.explosm.net/rcg/PrivateShirtFlock.png" width="365"></a><a href="http://explosm.net/rcg/EightHallBeds" target="_blank"><img src="http://files.explosm.net/rcg/EightHallBeds.png" width="365"></a><a href="http://explosm.net/rcg/HystericalBuildingEdge" target="_blank"><img src="http://files.explosm.net/rcg/HystericalBuildingEdge.png" width="365"></a><a href="http://explosm.net/rcg/MajesticCatWash" target="_blank"><img src="http://files.explosm.net/rcg/MajesticCatWash.png" width="365"></a><a href="http://explosm.net/rcg/RemarkableRelationTrade" target="_blank"><img src="http://files.explosm.net/rcg/RemarkableRelationTrade.png" width="365"></a><a href="http://explosm.net/rcg/PanoramicClassGrass" target="_blank"><img src="http://files.explosm.net/rcg/PanoramicClassGrass.png" width="365"></a><a href="http://explosm.net/rcg/GroundKickBasin" target="_blank"><img src="http://files.explosm.net/rcg/GroundKickBasin.png" width="365"></a><a href="http://explosm.net/rcg/TerrificKettlePaper" target="_blank"><img src="http://files.explosm.net/rcg/TerrificKettlePaper.png" width="365"></a><a href="http://explosm.net/rcg/WireStrangerSound" target="_blank"><img src="http://files.explosm.net/rcg/WireStrangerSound.png" width="365"></a><a href="http://explosm.net/rcg/JoyousChickenHands" target="_blank"><img src="http://files.explosm.net/rcg/JoyousChickenHands.png" width="365"></a><a href="http://explosm.net/rcg/CuddlyApprovalInk" target="_blank"><img src="http://files.explosm.net/rcg/CuddlyApprovalInk.png" width="365"></a><a href="http://explosm.net/rcg/TripColorVase" target="_blank"><img src="http://files.explosm.net/rcg/TripColorVase.png" width="365"></a><a href="http://explosm.net/rcg/PowerfulCloverBook" target="_blank"><img src="http://files.explosm.net/rcg/PowerfulCloverBook.png" width="365"></a><a href="http://explosm.net/rcg/PuffyNorthEarth" target="_blank"><img...

CSS

#comictable {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    table-layout: fixed;
    border: 4px solid black;
}
.disclaimer > td {
    width: -moz-min-content;
    width: -webkit-min-content;
    width: min-content;
}
.names > td:nth-child(2) {
    border-left: 2px solid black;
    border-right: 2px solid black;
}
.names > td {
    border-bottom: 2px solid black;
    width: 33%;/*
    width: calc(100% / 3);*/
}

.names {
    border: 2px solid black;
    border-top-width: 0;
}

.comic {
    border: 2px solid black;
    border-bottom-width: 0;
}

/* ------ */
@-webkit-keyframes movinggrad {
    from {
        background-position: top left;
    }
    to {
        background-position: top right;
    }
}

@-moz-keyframes movinggrad {
    from {
        background-position: top left;
    }
    to {
        background-position: top right;
    }
}

@-o-keyframes movinggrad {
    from {
        background-position: top left;
    }
    to {
        background-position: top right;
    }
}

@keyframes movinggrad {
    from {
        background-position: top left;
    }
    to {
        background-position: top right;
    }
}

.movinggrad, .names > td:hover {
    -webkit-animation-name: movinggrad;
    -webkit-animation-duration: 7s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: movinggrad;
    -moz-animation-duration: 7s;
    -moz-animation-fill-mode: forwards;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -o-animation-name: movinggrad;
    -o-animation-duration: 7s;
    -o-animation-fill-mode: forwards;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
    animation-name: movinggrad;
    animation-duration: 7s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-timing-function:...

JavaScript

var list = document.querySelectorAll('[href*="/rcg/"]');
var tempTab = document.createElement("table");
tempTab.id = "comictable";
var tempCol, tempRow, temp;
tempCol = document.createElement("tr");
tempCol.classList.add("disclaimer");
tempCol.classList.add("tapegrad");
tempCol.classList.add("movinggrad");
tempRow = document.createElement("td");
tempRow.setAttribute("colspan", "3");
tempRow.innerHTML = "Disclaimer: Some of these comics manually created, so words may not always correlate to panel directly above. However, the panel they pertain to will be within it.";
tempCol.appendChild(tempRow);
tempTab.appendChild(tempCol);
for (var i = 0; i < list.length; i++) {
    tempCol = document.createElement("tr");
    tempCol.classList.add("comic");
    tempRow = document.createElement("td");
    tempRow.setAttribute("colspan", "3");
    temp = list[i].href.split('/');
    temp = temp[temp.length - 1].match(/([A-Z]?[^A-Z]*)/g).slice(0, -1);
    list[i].firstChild.removeAttribute("width");
    tempRow.appendChild(list[i]);
    tempCol.appendChild(tempRow);
    tempTab.appendChild(tempCol);
    tempCol = document.createElement("tr");
    tempCol.classList.add("names");
    for (var j = 0; j < temp.length; j++) {
        tempRow = document.createElement("td");
        tempRow.innerHTML = temp[j];
        tempCol.appendChild(tempRow);
    }
    tempTab.appendChild(tempCol);
}
document.body.appendChild(tempTab);