BLOGROLL PAGE 02 | cloudythms.tumblr.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<!-----------------------------------------------------------------------


   {   cloudythms
            BLOGROLL PAGE 02 }


   =>   https://cloudythms.tumblr.com/
                - visit me if you have questions!


           == RULES ==
 - You may move, but not remove the credit
 - Leave this comment
 - Edit the rest as much as you want
 - Do not redistribute without permission / use as base
 - Do not claim as your own


    If you're looking for the right place to
    paste CSS code, simply Ctrl+F for "exampleclass"!


---------------------------------------------------------------------->


<!-- Text that appears on the tab / browser window -->
<title>Blogroll</title>

<link rel="shortcut icon" href="{Favicon}"/>


<!-- ----------------------- DO NOT EDIT THIS CODE  --------------------- -->

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300|Roboto:400,700,500,300|Lato:400,700,300|Montserrat:400,700|Source+Sans+Pro:400,300,700' rel='stylesheet' type='text/css' />


<!-- --------------------------- TOOLTIPS -------------------------- -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
    (function($){
    $(document).ready(function(){
    $("a[title]").style_my_tooltips({
    tip_follows_cursor:true,

    /* Change your tooltip times here. */
    tip_delay_time:30, /* put a higher number for more delay */
    tip_fade_speed:400, /* put a higher number for a slower fade */
    /* recommended: delay:10-100 fade:200-600 */

    attribute:"title"
    });
    });
    })(jQuery);
</script>
<style>
    .tooltip{
        display: inline;
        position: relative;
    }
    #s-m-t-tooltip {
        max-width:300px;
        border-radius: 0px;
        padding:3px 4px 5px 4px;
        margin:20px 7px -2px 20px;
        background-color:#ffffff;
        border:1px solid #E0E0E0;
        border-radius: 5px 5px 5px 5px;
        -moz-border-radius: 5px 5px 5px 5px;
        -webkit-border-radius: 5px 5px 5px 5px;
        font-family:calibri;
        font-size:10px;
        letter-spacing:1px;
        text-transform:uppercase;
        color:#000;
        z-index:999999999999999999999999999999999999;
    }
</style>

<!-- ---------------------------------------------------------------- -->
<!-- ----------------------- C S S - S T A R T ---------------------- -->
<!-- ---------------------------------------------------------------- -->
<style type="text/css">

/* ****************************** BASICS ****************************** */

    body {
        padding:3%;
        font-family:Open Sans, sans-serif;
        font-size:11px;
        color:black;
    }

    .center {
        position: absolute;
        top:50%;
        left:50%;
        padding:15px;
        -ms-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }

    blockquote{
       border-left:2px solid #d3d3d3;
       padding-left:10px;
       margin-left:10px;
    }


    /* no ugly dotted border */
    a, a:focus {
        outline: 0;
        text-decoration:none;
        color:#d3b1d1;
        font-weight:bold;
    }

    /* <hr> style (divider) */
    hr{
        border: 0;
        height: 1px;
        background-image: linear-gradient(to right,
            rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    }


    /* text selection style */
    ::selection {
      background: #d3d3d3;
    }
    ::-moz-selection {
      background: #d3d3d3;
    }

    body > iframe:first-child { display: none !important; } /* tumblr */


/* ****************************** NAVIGATION ****************************** */


    #title{
        font-size:15px;
        letter-spacing:1px;
        text-transform:lowercase;
        font-weight:bold;
    }

    #navi {
        padding-left:10px;
        margin-top:-5px;
        font-size:11px;
        text-transform:lowercase;
    }

    #navi a, #navi a:visited, #navi a:link, #navi a:active {

        color:black;
        text-decoration:none;
        letter-spacing:1px;
        padding-right:10px;
        font-weight:normal;

        transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out; /* Chrome & Safari */
        -moz-transition: all 0.2s ease-in-out; /* Firefox */
        -o-transition: all 0.2s ease-in-out; /* Opera */

        margin-bottom:20px;
    }

    #navi a:hover {
        text-decoration:none;
        cursor:help;
    }


/* ************************** EVERYTHING ELSE ************************** */


    #wrapper {
        display:block;
        width:715px;
    }

    .category {
        margin-bottom:30px;
    }

    .category h1 {
        padding-left:10px;
        font-size:12px;
        letter-spacing:1px;
    }

    .category h2 {
        margin-top:30px;
        padding-left:10px;
        font-size:10px;
        letter-spacing:1px;
    }

    .category b{
        color:#d3b1d1;
    }

    #wrapper a {
        color:black;
        display:inline-block;
        font-weight:normal;
    }

    .blog {
        width:200px;
        height:32px;
        background-color:#fff;
        padding:10px;
        margin:5px;

        border-radius: 7px 7px 7px 7px;
        -moz-border-radius: 7px 7px 7px 7px;
        -webkit-border-radius: 7px 7px 7px 7px;
        border: 1px solid #eee;

        -webkit-transition-duration: 0.2s;
        transition-duration: 0.2s;
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
        -webkit-transition-timing-function: linear;
        transition-timing-function: linear;
    }

    .blog:hover {
        background-color:#f7f7f7;
        border-color:#eee;
    }

    .blog img {
        vertical-align:middle;
        float:left;

        border-radius: 3px 3px 3px 3px;
        -moz-border-radius: 3px 3px 3px 3px;
        -webkit-border-radius: 3px 3px 3px 3px;
        border: 0px solid #000000;
    }

    .blog .info {
        float:left;
        padding-left:5px;
max-width: 80%;
white-space: nowrap;
overflow: hidden;
    }

    .blog .info br {
        display: block;
        margin-top:-10px;
        content: " ";
    }

    .blog b { /* url */
        color:black;
    }

    .blog p { /* name, age, pronouns */
        display:inline-block;
        font-style:italic;
    }

    .c {
        clear:both;
    }


/* ******************************* MORE ******************************* */


    /* add your own CSS code here */

    .exampleclass{
        color:black;
    }


</style>

</head>
<body>


<div id="wrapper" class="center">
<div class="category">

    <div>

    <h1>blogroll</h1>

    <div id="navi">
        <a href="/">index</a>
        <a href="/ask">contact</a>
        <a href="/archive">archive</a>
    </div>

    </div>

    <div style="max-height:575px;overflow-y:auto;">

    {block:Following}

        {block:Followed}
        <a class="blog" href="{FollowedURL}">
            <img src="{FollowedPortraitURL-30}">
            <div class="info">
            <b>{FollowedName}</b><br>
            <p>{FollowedTitle}</p>
            </div><div class="c"></div>
        </a>
        {/block:Followed}

    {/block:Following}

    </div>

</div>
</div>


<!-- please don't touch this. thank you. -->
<div style="position:fixed;bottom:10px;right:15px;font-size:12px;opacity:0.9;">
<a href="https://cloudythms.tumblr.com/" title="theme by cloudythms"
style="text-decoration:none;">☁</a></div>
<!-- theme by https://cloudythms.tumblr.com/ -->


</body>
</html>