PAGE 05 | KINDRED 2.0

<html>
<!------


   ---
 --
    ---- K I N D R E D   Type 02
---
    ---- iliyon
 --
   ---


-------->
<head><link rel="shortcut icon" href="{Favicon}"><link href='http://static.tumblr.com/wb7siqo/Omqnia97g/cssnormalize.css' rel='stylesheet' type='text/css'><link href='https://fonts.googleapis.com/css?family=Karla:400italic,400,700,700italic' rel='stylesheet' type='text/css'>
<title>Kindred 2.0</title> <!-- CHANGE TITLE HERE -->
<style type="text/css">
body{
font-family:Karla;
color:#333; /* - Global text color - */
background:#fff; /* - Background color - */
font-size:1em;
}
b, strong{font-weight:700;}
i, em{font-style:italic;}
small{font-size:80%;}big{font-size:120%;}
::-webkit-scrollbar{
width:14px;
height:18px;
}
::-webkit-scrollbar-thumb {
height:6px;
border:4px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
-webkit-border-radius: 14px;
-webkit-box-shadow: inset 0px 0px 3px #000;
background-color: rgba(255,255,255, 0.5);
}
::-webkit-scrollbar-button {
width: 0; height: 0; display: none;
}
::-webkit-scrollbar-corner{
background-color: transparent;
}
a{
text-decoration:none;
color:#aaa;
/*- Remove this comment marker if you want a transition -
-webkit-transition:0.4s;
-moz-transition:0.4s;
-ms-transition:0.4s;
-o-transition:0.4s;
transition:0.4s;
*/
}
a:hover{
color:#333;
/*- Remove this comment marker if you want a transition -
-webkit-transition:0.4s;
-moz-transition:0.4s;
-ms-transition:0.4s;
-o-transition:0.4s;
transition:0.4s;
color:#aaa;
*/
}
.desc a{
padding-bottom:2px;
color:#aaa; /* - Links next to the title - */
border-bottom:1px solid transparent;
margin-right:11px;
}
.desc a:hover{
color:#333;
border-bottom:1px #aaa solid;
}
.holder{
width:500px; /* - Container width - */
position:absolute;
left:0px;
right:0px;
margin:auto;
top:120px;
margin-bottom:100px;
}
.bloghead{
font-size:2em; /* - Title font size - */
font-weight:700;
border-bottom:3px #333 solid; /* - Adjust border properties - */
padding-bottom:2px;
max-width:190px; /* - Adjust width if necessary. Mind the .desc too - */
display:inline-block;
vertical-align:middle;
}
.desc{
display:inline-block;
vertical-align:middle;
max-width:310px; /* - Adjust width if necessary. Mind the .bloghead too - */
font-size:.7em;
line-height:1.2em;
box-sizing:border-box;
padding-left:30px; /* - Adjust if necessary - */
}
.quote{ /* - Quote styling - */
margin:1.5rem 0rem;
font-size:.75em;
color:#aaa;
font-style:italic;
}
/* - FILL-IN-THE-BLANKS - */
.spacer{
margin-top:40px;
}
.list{ /* - Your following list - */
background:;
padding:15px;
width:100px;
word-wrap:break-word;
text-align:center;
height:auto;
-webkit-transition:0.2s;
-moz-transition:0.2s;
-ms-transition:0.2s;
-o-transition:0.2s;
transition:0.2s;
display:block;
}
.list:hover{
background:#333;
color:#fff;
}
    .list img{
    width:40px;
    border-radius:40px;
    margin:auto;
    margin-bottom:15px;
    }
    .list h1{ /* - Blog name - */
    font-size:.8em;
    letter-spacing:2px;
    font-weight:700;
    text-transform:uppercase;
    line-height:1.35em;
    }
    .list h2{ /* - Blog title - */
    color:#aaa;
    font-size:.65em;
    text-transform:uppercase;
    margin-top:1em;
    display:block;
    line-height:1.3em;
    letter-spacing:1px;
    }
a.follow{
color:#333;
margin:15px;
}
.cont{
width:500px;
 }
</style>
</head>
<body>
<section class="holder">
    <section class="bloghead">Kindred 2.0</section> <!-- YOUR TITLE HERE -->
    <section class="desc">
        <!-- LINKS HERE --><a href="/">Return</a>
        <a href="/ask">Message</a>
        <a href="http://tumblr.com/">Dashboard</a>
        <a href="/">Some</a>
        <a href="/">More</a>
        <a href="http://iliyon.tumblr.com" target="_blank">&copy;</a>
    </section>
    <!-- QUOTE, REMOVE IF UNNECESSARY -->
    <section class="quote">Quote here. Obliterate if unused.</section>

    <section class="spacer"></section> <!-- NO YOU CAN'T TOUCH THIS -->

    <!-- BEGIN CONTENT -->
    {block:Following}
    <section class="cont">
    {block:Followed}
    <a href="{FollowedURL}" target="_blank" class="follow">
    <section class="list">
        <img src="{FollowedPortraitURL-40}">
        <h1>{FollowedName}</h1>
        <h2>{FollowedTitle}</h2>
    </section>
    </a>
    {/block:Followed}
    </section>
    {/block:Following}

    </section>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="http://static.tumblr.com/wb7siqo/0Zsncryeo/masonry2108.js"></script><script src="http://static.tumblr.com/wb7siqo/UlHnculzn/imagesloaded.js"></script>
<script type="text/javascript">
$(window).load(function () {
var $container = $('.cont');
$container.imagesLoaded( function(){
$container.masonry({
  itemSelector: '.follow',
  isFitWidth: 'true'
});
});
});
</script>
</body>
</html>