THTR - design

by PhilQ

HTML

<div class="body"> </div>
<div class="page"></div>

CSS

*, *:before, *:after {
    margin: 0px; padding: 0px;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
}
body {
    background-color: #000;
}

.body {
    display: inline-block;
    position: fixed;
    z-index: 0;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: #2d1d16; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  #2d1d16 3%, #000000 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(3%,#2d1d16), color-stop(100%,#000000));
    background: -webkit-radial-gradient(center, ellipse cover,  #2d1d16 3%,#000000 100%);
    background: -o-radial-gradient(center, ellipse cover,  #2d1d16 3%,#000000 100%);
    background: -ms-radial-gradient(center, ellipse cover,  #2d1d16 3%,#000000 100%);
    background: radial-gradient(ellipse at center,  #2d1d16 3%,#000000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d1d16', endColorstr='#000000',GradientType=1 );
}

.page {
    position: relative;
    width: 970px;
    padding-left: 10px;
    margin: 0px auto;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0, 1);
}

.cblock {
    float: left;
    padding-right: 10px;
    padding-bottom: 10px;
    background-color: #D46421;
    background-clip: content-box;
}

JavaScript

var bcolorsHEX = new Array();
bcolorsHEX[0] = "#4E412A";
bcolorsHEX[1] = "#4D7C2A";
bcolorsHEX[2] = "#81A639";
bcolorsHEX[3] = "#D46421";

var bcolorsRGB = new Array();
bcolorsRGB[0] = [79, 66, 43];
bcolorsRGB[1] = [78, 125, 42];
bcolorsRGB[2] = [129, 166, 57];
bcolorsRGB[3] = [212, 100, 33];

var bcolors = new Array();
bcolors[0] = [38, 46, 31];
bcolors[1] = [94, 66, 49];
bcolors[2] = [80, 66, 65];
bcolors[3] = [22, 84, 83];

var cblockU = 960;

function generateRandomColorFrom(ca, d, ox) {
    var c, x, co, max, amount, dir;
    c = new Array();
    c[0] = ca[0];
    c[1] = ca[1];
    c[2] = ca[2];
    c = rgbToHsl(c[0], c[1], c[2]);
    x = (ox>0)? (ox-1): Math.round(Math.random()*2);
    co = (c[x]+0);
    max = 1;
    amount = (Math.random()*(d/100));
    dir = (Math.random()-0.5);
    dir = (dir<0)? -1: 1;
    c[x] = (c[x]+(amount*dir));
    if (x==0) {
        c[x] = (c[x]<0)? max+(c[x]%max): c[x];
        c[x] = (c[x]>max)? 0+(c[x]%max): c[x];
    } else {
        c[x] = Math.min(c[x], max);
        c[x] = Math.max(c[x], 0);
    }
    var nc = hslToRgb(c[0], c[1], c[2]);
    nc[0] = Math.round(nc[0]);
    nc[1] = Math.round(nc[1]);
    nc[2] = Math.round(nc[2]);
    return [nc[0], nc[1], nc[2],(amount*dir)];
}

$(document).ready(function(){
    for(var i=0; i<20; i++) {
        var wR = Math.round(Math.random()*4)+1;
        var hR = Math.round(Math.random()*4)+1;
        wR = 1;
        hR = 1;
        var w = ((wR*20)/100)*cblockU;
        var h = ((hR*20)/200)*cblockU;
        var bci = Math.floor(Math.random()*bcolorsRGB.length);
        // bci = 3;
        var bc = generateRandomColorFrom([bcolorsRGB[bci][0],bcolorsRGB[bci][1],bcolorsRGB[bci][2]],2, 0);
        $block = $('<div class="cblock">Block '+i+'</div>').css({
            'width': w+'px',
            'height': h+'px',
            'background-color': 'rgb('+bc[0]+','+bc[1]+','+bc[2]+')'
        }).html('rgb('+bc[0]+', '+bc[1]+', '+bc[2]+')<br />amount:'+bc[3]+'<br />orig:...