rhine valley: blogroll

<!DOCTYPE html>
<head>

<!---


        pack: rhine valley
        blogroll

        @loranhale


--->

<title>blogroll</title>
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" href="{RSS}" />

<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro|Karla' rel='stylesheet' type='text/css'>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.2/jquery.min.js">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

<style type="text/css">
::-webkit-scrollbar {
    height:5px;
    width:1px;
    background:#fafafa;
}
::-webkit-scrollbar-thumb { background:#dcecf5; }

.iframe-controls--desktop { display:none!important; }

/* tooltips */

#s-m-t-tooltip {
    max-width:300px;
    margin:15px;
    padding:5px 6px;
    z-index:99999999;
    color:#000;
    text-transform:lowercase;
    border:1px solid #dcecf5;
    background:#fff;
}

body {
    background:#fafafa;
    color:#555;
    font-family:'source sans pro', arial, helvetica, sans-serif;
    font-size:10px;
-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;
font-smoothing:antialiased;
}

a {
    color:#8892e0;
    text-decoration:none;
    transition-duration:.8s;
    -moz-transition-duration:.8s;
    -webkit-transition-duration:.8s;
    -o-transition-duration:.8s;
}

a:hover { color:#000; }

#con {
    width:450px;
    box-sizing:border-box;
    margin:60px auto;
    transform:translate(0px,50px);
}

.sidebar {
    margin-left:-85px;
    position:fixed;
}

.links {
    position:relative;
    margin-top:75px;
    width:80px;
}

.links i {
    margin-bottom:5px;
    margin-right:5px;
    display:inline-block;
    width:13px;
    height:13px;
    font-size:13px;
    padding:6px;
    border:1px solid #dcecf5;
    background:#fff;
    color:#8892e0;
    transition:all .8s ease;
-webkit-transition:all .8s ease;
-moz-transition:all .8s ease;
-o-transition:all .8s ease;
}

.links i:hover {
    background:#fafafa;
    border:1px solid #dcecf5;
    color:#000;
}

.icon {
    float:left;
    display:inline;
    position:fixed;
}

.icon img {
    width:60px;
    height:60px;
    border-radius:3px;
    opacity:.9;
}

.t {
    background:#fff;
    border:1px solid #dcecf5;
    padding:10px;
    font-size:12px;
    margin-bottom:10px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
}

.blogroll {
    border:1px solid #dcecf5;
    padding:10px;
    overflow-y:scroll;
    position:relative;
    max-height:400px;
}

.ppl {
    width:48px;
    height:48px;
    display:inline-block;
    padding:10px;
}

.ppl img {
    width:48px;
    height:48px;
    border-radius:5px;
    opacity:.7;
    transition:all .8s ease;
-webkit-transition:all .8s ease;
-moz-transition:all .8s ease;
-o-transition:all .8s ease;
}

.ppl img:hover {
	opacity:1;
	border-radius:50%;
    transition:all .8s ease;
-webkit-transition:all .8s ease;
-moz-transition:all .8s ease;
-o-transition:all .8s ease;
}

/* do not disturb */
.lo { bottom:20px; right:20px; position:fixed; }
.lo a { text-transform:uppercase; font-size:12px; }

</style>
</head>

<body>

<div id="con">

<div class="sidebar">
<div class="icon"><img src="{PortraitURL-128}" /></div>
    <div class="links">
    <a href="/" title="home"><i class="fa fa-home" aria-hidden="true"></i></a>
    <a href="/ask" title="message"><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
    <a href="/" title="link"><i class="fa fa-paper-plane-o" aria-hidden="true"></i></a>
    <a href="http://loranhale.tumblr.com" title="theme"><i class="fa fa-code" aria-hidden="true"></i></a>
    </div>
</div>

<div class="t">blogroll</div>
<div class="blogroll">
    {block:Following}{block:Followed}<div class="ppl"><a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-128}"></a></div>{/block:Followed}{/block:Following}
</div>

</div>

<!-- danger! keep out -->
<div class="lo">
    <a href="http://loranhale.tumblr.com" title="theme">j</a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
jQuery.noConflict();
(function($){
$(document).ready(function(){
$("a[title],img[title],[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:200,
tip_fade_speed:300,
attribute:"title"
});
});
})(jQuery);
</script>

</body>
</html>