Tags: Reconsider

<!--

    TAG PAGE: RECONSIDER
    by acuite

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

- @acuite for more themes

-->

<!DOCTYPE html>
<html>
<head>

<title>Navigation</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<link rel="shortcut icon" href="{Favicon}" />

<link href='//fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<style type="text/css">

/* Scroll */

::-webkit-scrollbar {width:11px;height:11px;background:#eee;}
::-webkit-scrollbar-thumb {background:#ccc;}
::-webkit-scrollbar,::-webkit-scrollbar-thumb {border:5px solid #f8f8f8;}

/* Controls */

#tumblr_controls,.tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop{-webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);opacity:0.5;}

/* General */

body {
    margin:0;
    color:#555;
    background:#f8f8f8;
    font-family:'Lato','Trebuchet MS',Arial,Helvetica,sans-serif;
}

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

 /* Containers */

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

.center {position:relative;left:220px;top:20px;width:576px;font-size:0;}
.box img{width:100%;border-bottom:1px solid #eee;}
.box {width:150px;margin:20px;background:#fff;border:1px solid #eee;}

 /* Titles & Tags */

h2{
    background:#f8f8f8;
    font-size:10px;
    line-height:100%;
    padding-bottom:7px;
    text-align:right;
    font-style:italic;
    letter-spacing:1px;
    margin:-1px -1px 0px;
    text-transform:uppercase;
    border-bottom:1px solid #eee;
}

.box nav {padding:10px 15px;}
.box nav a:first-of-type{border:0;}
.box nav a:hover{color:#aaa;padding-left:10px;}
.box nav a{
    display:block;
    font-size:9px;
    letter-spacing:0.25px;
    line-height:100%;
    padding:5px 0 6px;
    font-style:italic;
    text-transform:lowercase;
    border-top:1px solid #eee;
}

 /* Sidebar */

h1 {font-size:12px;margin:0;letter-spacing:1px;}
aside nav a, h1{display:block;padding:10px 0;}
aside nav a{border-top:1px solid #eee;font-size:8px;letter-spacing:1px;}
aside nav a:hover {padding:15px 0;}
aside {
    position:fixed;
    left:0;
    top:0;
    font-size:0;
    height:100%;
    width:100px;
    background:#fff;
    padding:50px;
    text-align:center;
    text-transform:uppercase;
    border-right:1px solid #eee;
}

</style>
<script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>
<script type="text/javascript">
$(window).load(function () {
$('#content').masonry({
itemSelector : ".box",
},
function() { $('#content').masonry({ appendedContent: $(this) }); }
);
});
</script>
</head>
<body>
<div class="center">
<aside>
    <h1>navigation</h1>
    <nav>
        <a href="/">index</a>
        <a href="/ask">message</a>
        <a href="http://acuite.tumblr.com">credit</a>
    </nav>
</aside>

<div id="content">


<!-- Example -->
<div class="box">
<h2>category name</h2><!-- Title -->
<img src="http://placehold.it/150x150"/><!-- Image URL -->

<nav>
    <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>
</nav>
</div>


</div>
</div>

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

</body>
</html>