Tags: Crystalised

<!--

    TAG PAGE: CRYSTALISED
    by acuite

- don't steal this pls
- enjoy, ilu (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

- @acuite for more themes

-->

<!DOCTYPE html>
<html>
<head>

<title>Navigation</title>
<link rel="shortcut icon" href="{Favicon}" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<style type="text/css">

body {
    margin:0px;
    background:#f8f8f8;
    font-family:'Open Sans',Helvetica,Arial,sans-serif;
    color:#333;
    font-size:8px;
    letter-spacing:0.25px;
}

a:hover {color:#ccc;}
a {
    text-decoration:none;
    transition:0.5s ease;
    -o-transition:0.5s ease;
    -moz-transition:0.5s ease;
    -webkit-transition:0.5s ease;
    color:#888;
}

.c {
    position:fixed;
    right:30px;
    bottom:30px;
    font-size:9px;
    letter-spacing:1px;
    text-transform:uppercase;
}

#center {position:relative;margin:20px auto;width:516px;}
.box {
    width:190px;
    margin:20px;
    padding:13px;
    border-radius:4px;
    box-shadow:rgba(0,0,0,.05)1px 1px 2px;
}

.box img{
    float:left;
    width:48px;
    height:48px;
    margin-right:9px;
    border-radius:4px;
}

h2{
    padding:10px;
    font-size:9px;
    font-weight:400;
    letter-spacing:1px;
    font-style:italic;
    text-align:center;
    text-transform:uppercase;
    margin:-13px -13px 13px;
    border-bottom:1px solid #eee;
}

.links a:hover {padding-left:12px;}
.links a:last-child {border:none;}
.links a{display:block;padding:6px;border-bottom:1px solid #eee;}
.box, ::-webkit-scrollbar-thumb {background:#fff;border:1px solid #eee;}
::-webkit-scrollbar {width:10px;height:10px;background:#f8f8f8;}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script><script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>

<script>
$(function(){
var $container = $('#content');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.box',
});
});
$container.infinitescroll({
itemSelector : ".box",
navSelector : "div.pagination",
nextSelector : ".pagination a#next",
loadingImg : "",
loadingText : "<em></em>",
bufferPx : 10000,
extraScrollPx: 12000,
},
// trigger Masonry as a callback
function( newElements ) {
  var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>
</head>
<body>
<div id="center">
<div id="content">


<!-- Example -->
<div class="box">
<h2>Category Name</h2><!-- Title -->
<img src="http://i.imgur.com/A3cw9r6.png"/><!-- Image URL -->
<div class="links">
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
</div>
</div>


<!-- Example -->
<div class="box">
<h2>Category Name</h2><!-- Title -->
<img src="http://i.imgur.com/A3cw9r6.png"/><!-- Image URL -->
<div class="links">
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
</div>
</div>


<!-- Example -->
<div class="box">
<h2>Category Name</h2><!-- Title -->
<img src="http://i.imgur.com/A3cw9r6.png"/><!-- Image URL -->
<div class="links">
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
    <a href="/tagged/tag-link">Tag Name</a>
</div>
</div>


</div>
</div>
<div class="c"><a href="http://acuite.tumblr.com">acuite</a></div>
</body>
</html>