Blogroll: Sink

<!--

    BLOGROLL: SINK
    by acuite

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

-->

<!DOCTYPE html>
<html>
<head>

<title>Blogroll</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>

<script>
   (function($){
       $(document).ready(function(){
           $("[title]").style_my_tooltips({
               tip_follows_cursor:true,
               tip_delay_time:200,
               tip_fade_speed:300
           }
               );
       });
   })(jQuery);
</script>

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

<style type="text/css">

/* Scroll */

::-webkit-scrollbar {width:3px;height:3px;background:#eee;}
::-webkit-scrollbar-thumb {background:#ccc;}

/* 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;
    font-size:9px;
    background:#fff;
    font-family:'Open Sans',Arial,Helvetica,sans-serif;
}

a:hover {color:#555;}
a {color:#999;text-decoration:none;}
a,.box,.box img {
    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;
    letter-spacing:1px;
    text-transform:uppercase;
}

#center {
    position:relative;
    margin:110px auto 0;
    width:calc(42px * 10 + 11px);
    font-size:0;
}

.content {height:calc(37px * 13);overflow:auto;}
.hold {
    padding:10px 0;
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;

}
/* Portraits */

.box img{
    width:100%;
    border-radius:50%;
    -webkit-filter: saturate(40%);
    -moz-filter: saturate(40%);
    -ms-filter: saturate(40%);
    -o-filter: saturate(40%);
    filter: saturate(40%);
}

.box:hover img {
    -webkit-filter: saturate(100%);
    -moz-filter: saturate(100%);
    -ms-filter: saturate(100%);
    -o-filter: saturate(100%);
    filter: saturate(100%);
}

.box {margin:5px;width:30px;height:30px;}
.box,.icon {
    display:inline-block;
    border-radius:3px;
    border-radius:50%;
    border:1px solid #eee;
}

/* Header */

.icon {width:45px;}
header {
    text-align:right;
    position:fixed;
    width:70px;
    margin-left:-80px;
    font-size:0;
    border-top:1px solid #eee;
    padding-top:15px;
}

header a, header b{
    display:block;
    margin:10px 0;
    font-size:9px;
    line-height:100%;
}

/* Misc */

#s-m-t-tooltip{
    max-width:300px;
    margin:10px;
    z-index:9999;
    border-radius:3px;
    background:#f8f8f8;
    border:1px solid #eee;
    padding:6px;
    font-size:9px;
    line-height:100%;
}

img {display:block;}

</style>
</head>
<body>
<div id="center">
<header>
    <img class="icon" src="{PortraitURL-48}">
    <b>blogroll.</b>
    <a href="/">home</a>
    <a href="http://www.tumblr.com/dashboard">dash</a>
    <a href="http://acuite.tumblr.com">credit</a>
</header>

<div class="hold"><div class="content">
{block:Following}{block:Followed}
<div class="box"><a href="{FollowedURL}" title="{FollowedName}">
<img src="{FollowedPortraitURL-40}"></a></div>
{/block:Following}{/block:Followed}
</div></div>

</div>

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

</body>
</html>