BLOGROLL PAGE 01 | cloudythms.tumblr.com

<!DOCTYPE html>
<html>
    <head>

    <!--

                    BLOGROLL THEME #01
                            by
                https://cloudythms.tumblr.com/

                            <3

               please do not remove the credit


    -->

        <title>Blogroll</title> <!-- Page title here -->

        <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,
            tip_delay_time:25,
            tip_fade_speed:500,

            attribute:"title"
            });
            });
            })(jQuery);
    </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' />

        <style type="text/css">

        /* BASICS */

        .t_w .tmblr-iframe--desktop-logged-in-controls, .t_w #tumblr_controls {
-webkit-filter:invert(100%);
-moz-filter:invert(100%);
-o-filter:invert(100%);
-ms-filter:invert(100%);
filter:invert(100%);
opacity:0.3;
}

        body {
            padding:7%;
            font-family:Open Sans, sans-serif;
        }

        ::selection {
            background: black;
            color: #fff;
        }
        ::-moz-selection {
            background: black;
            color: #fff;
        }

        .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;
            font-family:calibri;
            font-size:12px;
            letter-spacing:1px;
            text-transform:none;
            color:#000;
            z-index:999999999999999999999999999999999999;
        }

        #cloudythms {
            margin-left:80px;
        }

        #title{
            font-size:28px;
            letter-spacing:2px;
        }

        #navi {
            margin-top:-8px;
        }

        #navi ul {
            list-style:none;
            margin-left:-50px;
        }

        #navi li {
            float:left;
            margin-left:10px;
        }

        #navi a, a:visited {
            color:black;
            text-decoration:none;
            border:1px solid transparent;
            border-bottom:1px solid black;
            padding:0 3px;
            letter-spacing:3px;

            position: absolute;
            transition: all 0.4s ease-in-out;
            -webkit-transition: all 0.4s ease-in-out; /* Chrome & Safari */
            -moz-transition: all 0.4s ease-in-out; /* Firefox */
            -o-transition: all 0.4s ease-in-out; /* Opera */
        }

        #navi a:hover {
            color:white;
            border:1px solid black;
            background:black;

            transform: translate(0,-3px);
            -webkit-transform: translate(0,-3px); /* Chrome & Safari */
            -o-transform: translate(0,-3px); /* Opera */
            -moz-transform: translate(0,-3px); /* Firefox */
        }


        /* BLOGROLL */

        #blogroll {
            margin-top:80px;
        }

        #blogroll ul {
            list-style: none;
            margin-left: 1%;
        }

        #blogroll li {
            float: left;
            margin: 0.5%;
            padding:0;
        }

        #blogroll li:hover > #blogroll img {
            width:2px;
        }

        #blogroll img {
            width:70px;
            padding:13px;

            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 */
        }

        #blogroll:hover img{
            filter: url("data:image/svg+xml;utf8,<svg xmlns=\'https://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
            filter: gray; /* IE6-9 */
            -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
        }

        #blogroll img:hover{
            width:96px;
            padding:0;
          filter: none;
          -webkit-filter: grayscale(0%);
        }


        </style>
    </head>

    <body class="t_w">

    <div id="cloudythms">

        <div id="title">blogroll.</div>
        <div id="navi">
            <ul>
                <li><a href="/">← return</a></li>
            </ul>
        </div>

    </div>

    <div style="clear:both;"></div>

    <div id="blogroll">

        {block:Following}

        <ul>

        {block:Followed}

        <li>
        <a href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-96}"/></a>
        </li>

        {/block:Followed}

        </ul>

        {/block:Following}

    </div>

    <div id="DO NOT REMOVE THIS CREDIT - you may move it somewhere else though" style="position:fixed;bottom:10px;right:10px;font-size:10px;"><a href="https://cloudythms.tumblr.com/" title="theme by cloudythms" style="text-decoration:none;">☁</a></div>

    </body>
</html>