index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" type="image/x-icon" href="Documentation/ico/favicon.ico" />

    <title>PuzzleScript - an open-source HTML5 puzzle game engine</title>

    <!-- Bootstrap core CSS -->
    <link href="Documentation/css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
<style> 

/* Large screens ----------- */
@media only screen and (max-width : 900px) {
    /* Styles */
    .jumbotron {
      background-image: url('images/mascot_64.png');
      background-position:right top;
      background-repeat:no-repeat;
    }
}
/* Large screens ----------- */
@media only screen and (min-width : 900px) {
    /* Styles */
    .jumbotron {
      background-image: url('images/mascot_256.png');
      background-position:right center;
      background-repeat:no-repeat;
    }
}
.imgcontainer { width: 100%; height: 320px; overflow: hidden; }
.imgcontainer img { width: 100%; }
.center-cropped {
    height: 100%; 
    width: 100%;  
    background-position: center center;
    background-repeat: no-repeat;
}​

/* custom button :D */
/*
.btn-custom {
  background-color: white;
  border-color: black;
  color: black;
  border-radius: 500px;
}
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn-custom.active {
  background-color: yellow;
  border-color: black;
  border-radius: 500px;
}*/

</style>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

<p>
<p>
<div class="jumbotron" >
  <div class="container">

    <h1>PuzzleScript!</h1>
    <p>	
      <div class="row">
        <div class="col-lg-6">
  <p>
    <p>
PuzzleScript is an open-source HTML5 puzzle game engine.
<p>
    <p>
    </div>
    <div class="col-lg-6">    <p>
    <a href="editor.html" class="btn btn-default btn-lg">Make A Game</a>
    <a href="Documentation/rules101.html" class="btn btn-default btn-lg">First Steps</a>    
    <p>
    </div></div>
  </div>
</div>

    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-xs-4" id = "col_1">         
        </div>
        <div class="col-xs-4 " id = "col_2">
        </div>
        <div class="col-xs-4" id ="col_3">
        </div>
      </div>
      <p>

  <div class="col-lg-12" style="text-align:center">
  <p>
    <a href="https://puzzlescriptgallery.tumblr.com" class="btn btn-default btn-lg">Gallery</a>
    <p>
  </div>
    </div> <!-- /container -->


<div id="elementId" style="display:none">
<script type="text/javascript" src="https://puzzlescriptgallery.tumblr.com/js?num=50"></script>
</div>


<script>
function getElementsWithClass(tagName,matchClass) {
    var elems = document.getElementsByTagName(tagName), i;
    var result=[];
    for (i in elems) {
        if((' ' + elems[i].className + ' ').indexOf(' ' + matchClass + ' ')
                > -1) {
            result.push(elems[i]);
        }
    }
    return result;
}

function shuffle(array) {
  var currentIndex = array.length
    , temporaryValue
    , randomIndex
    ;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

function replaceContent() {
  var columns = [document.getElementById('col_1'),document.getElementById('col_2'),document.getElementById('col_3')];

  var items = getElementsWithClass('li','tumblr_photo_post');
  var postbody = getElementsWithClass('ol','tumblr_posts')[0];

  var data = [];
  for (var i=0;i<items.length;i++) {
    var item=items[i];
    imgurl = item.getElementsByTagName('img')[0].src;
    captionurl = item.getElementsByTagName('div')[0].children[0].children[0].href;
    data.push([imgurl,captionurl]);
  }
  data = shuffle(data);
  for (var i=0;i<columns.length;i++)
  {
    var dat = data[i];
    columns[i].innerHTML='<div class="imgcontainer"><a href="'+dat[1]+'"><div class="center-cropped" style="background-image: url(\''+dat[0]+'\');"></div>​</a></class>';
  }
  postbody.parentElement.removeChild(postbody);
}

replaceContent();
 </script>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="Documentation/js/jquery.js"></script>
    <script src="Documentation/js/bootstrap.min.js"></script>
  </body>
</html>