you

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

<!---

you by solarre

-keep credit intact
-don't steal any code

inspired by ello

--->

<head>

<!-- title -->
<title>a story about you.</title>

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

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

<link href="https://fonts.googleapis.com/css?family=Karla:400,700" rel="stylesheet">

<style type="text/css">

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

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s; animation-duration:1s; }

.fade-in.one { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; animation-delay: 0.7s; }
.fade-in.two { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; }

#s-m-t-tooltip {
    max-width:300px;
    padding: 5px 8px;
    margin:10px;
    background-color:#fff;
    font-size:8.5px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#777;
    border-radius:2px;
    border:1px solid #f7f7f7;
    z-index:10000000000000000000000;
    transition:0.5s ease-in-out;
    -webkit-transition:0.5s ease-in-out;
    -moz-transition:0.5s ease-in-out;
    -ms-transition:0.5s ease-in-out;
    -o-transition:0.5s ease-in-out;
    }

body, html {height:100%;width:100%;}

body {
    background:#fff url('http://67.media.tumblr.com/46874bb7b87832a379d308f4139be279/tumblr_niu5jcj9yB1r4drjco1_1280.jpg') no-repeat center; /*background*/
    background-size:cover;
    margin:0px;
    color:#fff;
    font:12px 'Karla', calibri;
    line-height:15px;
    -moz-font-smoothing:subpixel-antialiased;
    -webkit-font-smoothing:subpixel-antialiased;
    font-smoothing:subpixel-antialiased;
}

a {
    text-decoration:none;
    color:#eee;/* color of links */
    border-bottom:1px solid #eee;
    padding-bottom:2px;
    -moz-outline-style:none;
    transition:0.5s ease-in-out;
    -webkit-transition:0.5s ease-in-out;
    -moz-transition:0.5s ease-in-out;
    -ms-transition:0.5s ease-in-out;
    -o-transition:0.5s ease-in-out;
}

a:hover {color:#fff;border-color:#fff;} /* color of links on hover */

h1 {
    padding:15px 0;
    border-bottom:1px solid #ccc;
    font:lighter 16px 'Karla', calibri;
}

h1:first-child {padding-top:0;margin-top:0;}

p, ul, ol {padding:1px 0 15px;border-bottom:1px solid #bbb;}
p:last-child {border:none;}
li {margin-left:30px;line-height:16px;}
li a {border:none;font-style:italic;}

#black {
    height:100vh;
    width:100vw;
    background:#000;
    opacity:0.5;
    position:fixed;
    z-index:-1;
}

#photo {
    width:260px;
    height:290px;
    position:fixed;
    top:calc(50vh - 140px);
    left:calc(50vw - 300px);
}

#flb {display:block;margin:25px auto;width:64px;}
#flb a {padding:5px 9px; border:1px solid #eee;}
#flb a:hover {background:#fff;color:#777;}

#photo img {
    width:260px;
    height:260px;
    border-radius:100%;
}

#bio {
    width:300px;
    height:auto;
    position:fixed;
    top:calc(50vh - 140px);
    left:50vw;
}

#links a {line-height:20px;margin-right:10px;}

#credit, #credit a {
    position:fixed;
    bottom:20px;
    right:25px;
    color:#fff;
    font:normal normal 12px calibri;
    text-decoration:none;
    border:none;
}

</style></head><body>

<div id="black"></div>
<div id="photo" class="box fade-in one">

<!-- side image!!! -->
<img src="http://static.tumblr.com/vmteopo/PSGo43s40/gl_girl.jpg">

<!-- replace YOURURL with your url for the follow button to work! -->
<div id="flb"><a href="http://www.tumblr.com/follow/YOURURL">+ Follow</a></div>
</div>

<div id="bio" class="box fade-in two">

<h1>
<!-- title -->
This is a story about you.
<br><span style="color:#ddd;font-size:13px;line-height:18px">
@sappho
</span></h1>

<!-- bio, sections separated by <p></p> -->

<p>It's no use Mother dear, I can't finish my
weaving. You may blame Aphrodite, soft as she is; she has almost killed me with love for that girl.</p>

<p>You may forget but let me tell you this: someone in some future time will think of us. </p>

<p>Awed by her splendor, stars near the lovely moon cover their own bright faces when she is roundest and lights earth with her silver.</p>

<div id="links">
<h1 style="border:none;padding-bottom:0">Elsewhere !</h1>

<a href="/">index</a>
<a href="/ask">ask</a>
<!-- replace YOURURL with your url!! -->
<a href="http://www.tumblr.com/message/YOURURL">message</a>
<a href="/archive">archive</a>
<br>
<a href="http://bindictr.tumblr.com/post/109293858804/someones-watching-cr-ig-bindictr">background cred</a>
<a href="http://erised.co.vu/icons">icon cred</a>
</div>

</div>


<div id="credit"><a href="http://solarre.tumblr.com" title="solarre">☼</a></div>
</body>