Microgram Light

page.html

<style type="text/css">
    .photo,
    .photo-link {
        width: 255px;
        height: 255px;
    }

    .photo {
        background-size: cover;
        background-position: center;
        border-radius: 5px;
        transition: all 200ms ease-in-out;
    }

    .photo-link {
        display: inline-block;
        margin: 10px;
    }

    .photo:hover {
        cursor: pointer;
        opacity: 0.75;
    }

    .photos {
        overflow: hidden;
    }

    @media only screen and (max-width: 518px) {
        .photos {
            text-align: center;
        }

        .photo,
        .photo-link {
            width: 300px;
            height: 300px;
        }
    }

    @media only screen and (max-width: 320px) {
        .photos {
            text-align: center;
        }

        .photo,
        .photo-link {
            width: 250px;
            height: 250px;
        }
    }
</style>
<script>
    var bodyDiv = document.getElementsByClassName('post-body')[0];
    var photosDiv = document.createElement('div');
    photosDiv.className = 'photos';
    bodyDiv.appendChild(photosDiv);

    var renderImage = function (image) {
        var a = document.createElement('a');
        a.className = 'photo-link';
        a.href = image['url'];
        var img = document.createElement('div');
        var url = image['_microblog']['thumbnail_url'];
        img.style.backgroundImage = 'url(' + url + ')';
        img.className = 'photo';
        a.appendChild(img);
        photosDiv.appendChild(a);
    }

    var renderNoContent = function () {
        var p = document.createElement('p');
        p.innerText = 'No photos.'
        photosDiv.appendChild(p);
    }

    var loadImages = function () {

        var xhr = new XMLHttpRequest();
        xhr.responseType = "json";
        xhr.open('GET', "/photos/index.json", true);
        xhr.send();
        xhr.onreadystatechange = function (e) {
            if (xhr.readyState == 4 && xhr.status == 200) {
                if (xhr.response.length == 0) {
                    renderNoContent();
                } else {
                    var count = 0;
                    xhr.response['items'].forEach(function (image) {
                        if (count <= 200) {
                            renderImage(image);
                            count++;
                        }
                    });
                }
            } else if (xhr.readyState == 4 && xhr.status !== 200) {
                renderNoContent();
            }
        }
    }

    loadImages();
</script>

I've rolled (most) of these changes into microgram. Thanks!