network / BLUEBERRY

<!DOCTYPE html>
<head>

<!--


                            blueberry

                            @odeysseus


- credits @ odeysseus.tumblr.com/credit


-->

    <title>network</title><!--title-->


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


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
 <link href='https://fonts.googleapis.com/css?family=Karla:400,400italic,700,700italic|Lato:400,400italic,700,700italic' rel='stylesheet' type='text/css'>


<style type="text/css">


 * { margin:0;padding:0; }


@-webkit-keyframes fadein {
        0%   {opacity: 0;}
        100% { opacity: 1; }
}

@-moz-keyframes fadein {
        0%   { opacity: 0; }
        100% { opacity: 1; }
}

@keyframes fadein {
        0%   { opacity: 0; }
        100% { opacity: 1; }
}

.tmblr-iframe { display:none; } /* to hide tumblr controls */


body {
    background:#fff; /*background*/
    font-family:'Karla', sans-serif; /*font*/
    font-size:11px;
    font-weight:400;
    line-height:180%;
    color:#555;
    -webkit-animation: fadein 1s;
    -moz-animation: fadein 1s;
    animation:fadein 1s;
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-smoothing:antialiased;
    font-smoothing:antialiased;

}


a {
    color:#999; /*links*/
    text-decoration:none;
    transition: .2s ease-in-out;
}

a:hover {
    color:#444;
    text-decoration:none;
}


section {
    margin:50px auto;
    width:calc(200px * 4); /* change the 4 to however many columns you want */
}


article {
    float:left;
    margin:10px;
    box-sizing:border-box;
    width:180px;
    height:auto;
    position:relative;
}

article img {
    width:180px;
    position:relative;
    height:100%;
    display:block;
}

h1 {
    font-size:15px;
    color:#444;
    padding:0;
    margin:0;
}

header {
    margin:100px auto;
    width:350px;
    text-align:center;
}

.d {
    margin:10px 0px;
    padding:10px;
    box-sizing:border-box;
    background:#f8f8f8;
}

nav a {
    margin:0px 3px;
    font-style:italic;
}

h2 {
    font-size:13px;
    color:#444;
    padding:0 10px 10px;
    margin:0 -10px 10px;
    font-style:italic;
    border-bottom:1px solid #eee;
}

.info {
    box-sizing:border-box;
    padding:10px;
    background:#f8f8f8;
}

.hotchocolate {
    bottom:27px;
    right:27px;
    position:fixed;
}
</style>


</head>
<body>

<header> <!--header-->
    <h1>blueberry</h1> <!--title-->
    <div class="d">

<!--start description-->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<!--end description-->
    </div>
    <nav>
    <!--start links-->
        <a href="/">home</a>
        <a href="http://tumblr.com/dashboard">dash</a>
        <a href="/ask">message</a>
    <!--end links-->
    </nav>
<!--end header--></header>


<section><!--start container-->

<!--example-->
<article>
<img src="image url"/> <!--image-->

<div class="info">
    <h2>name, <a href="link url">username</a></h2> <!--name + blog url-->
<div class="desc"> description goes here </div> <!--description-->
</div>
</article>
<!--end example-->

<!--example-->
<article>
<img src="image url"/> <!--image-->

<div class="info">
    <h2>name, <a href="link url">username</a></h2> <!--name + blog url-->
<div class="desc"> description goes here </div> <!--description-->
</div>
</article>
<!--end example-->

<!--end container: do not edit beyond this point--></section>

<div class="hotchocolate"><a href="http://odeysseus.tumblr.com">O</a></div>
 <script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>
<script type="text/javascript">
$(window).load(function () {
$('section').masonry({
itemSelector : "article",
},
function() { $('section').masonry({ appendedContent: $(this) }); }
);
});
</script>

</body>
</html>