theme 05

<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<!--

------
------

THEME 04 BY SOLASZ

EDITING TO ANY EXTEND ALLOWED AS LONG AS THE CREDIT STAYS IN TACT :)
Questions go here: https://solasz.tumblr.com/ask

------
------

Honeybee Icon Font
https://honeybee.suiomi.com/

^^^^^^^
go here, find the icon you want, scroll down to <div class="sblinks"> replace th-hashtag with whatever you want to change the sidebar link icon
^^^^^^^

Unnest Tumblr Captions
https://neothm.com/post/148902138319/

Tumblr Controls
https://cyantists.tumblr.com/post/163728517915/

Style-My-Tooltips jQuery plugin
https://manos.malihu.gr/style-my-tooltips-jquery-plugin/

-->
<title>{Title}</title>

<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link rel="shortcut icon" href="{Favicon}">
{block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="color:Accent" content="#333333">
<meta name="color:Text" content="#737373">

<meta name="image:Sidebar" content=""/>
<meta name="image:Sidebar V2" content=""/>


<meta name="select:Post Margin" content="110" title="110px" />
<meta name="select:Post Margin" content="120" title="120px" />
<meta name="select:Post Margin" content="150" title="150px" />
<meta name="select:Post Margin" content="180" title="180px" />

<meta name="select:Post Size" content="300" title="300px" />
<meta name="select:Post Size" content="350" title="350px" />
<meta name="select:Post Size" content="375" title="375px" />
<meta name="select:Post Size" content="400" title="400px" />
<meta name="select:Post Size" content="450" title="450px" />
<meta name="select:Post Size" content="500" title="500px" />
<meta name="select:Post Size" content="540" title="540px" />

<meta name="if:Sidebar Image" content="0">
<meta name="if:Small Sidebar Image" content="1">
<meta name="if:Reblog Images" content="0">
<meta name="if:Title" content="0">
<meta name="if:Show Tags" content="1">
<meta name="if:Hover Tags" content="1">

<meta name="text:Navigation Text" content="Navigation">
<meta name="text:Link 1" content="">
<meta name="text:Link 1 Title" content="">
<meta name="text:Link 2" content="">
<meta name="text:Link 2 Title" content="">
<meta name="text:Link 3" content="">
<meta name="text:Link 3 Title" content="">
<meta name="text:Link 4" content="">
<meta name="text:Link 4 Title" content="">
<meta name="text:Link 5" content="">
<meta name="text:Link 5 Title" content="">
<meta name="text:Link 6" content="">
<meta name="text:Link 6 Title" content="">


<link href="https://fonts.googleapis.com/css?family=Overpass:400,600,700" rel="stylesheet">
<link href="https://static.tumblr.com/6jwyigb/Dntpgl2mg/style-my-tooltips.css" rel="stylesheet" type="text/css" />
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">

<style type="text/css">

figure img {
    max-width:100%;
    height:auto;
}

body {
    margin:0;
    font-size:11px;
    font-family:'Overpass', sans-serif;
    line-height:1.7em;
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-smoothing:antialiased;
    font-smoothing:antialiased;
    color:{color:text};
    background:#f5f5f5;
    overflow-x:hidden;
}

b {
    font-weight:400;
}

h1 {
    margin:0;
    padding:0;
}
blockquote, ol, ul, p, pre {
    margin:0 0 .5em 0;
    {block:PermalinkPage}
    margin:0 0 .6em;
    {block:PermalinkPage}
}

a {
    color:inherit;
    text-decoration:none;
        -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

a:hover {
    color:{color:accent};
        -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

small, sub {
    font-size:1em;
    vertical-align:baseline;
}

.entry li {
    list-style-type:none;
    padding: 1px 0;
    margin-left: -15px;
}

.entry li:before {
    content:"";
    background:#e1e1e1;
    position:absolute;
    display:block;
    margin-left:-18px;
    margin-top:8px;
    width:11px;
    height:1px;
}

.tags a {
    border:none;
}

/* wrapper */

.main {
    margin:110px auto;
    left:0px;
    width:{select:post size}px;
    position:relative;
}

/* posts */

.content {
    margin-top:100px;
    width:{select:post size}px;
}

.entry {
    position:relative;
    margin:0 0 {select:post margin}px;
    width:{select:post size}px;
    border:1px solid #eee;
    background:#fff;
    padding:6px;
}

{block:ifHoverTags}
.entry:hover .tags {
    opacity:1;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}
{/block:ifHoverTags}

.photo img {
    display:block;
    width:{select:post size}px;
}

.wrap {
    display:block;
    width:{select:post size}px;
}

.video {
    width:{select:post size}px;
}

.entry:last-child {
    margin-bottom:20px;
}

.load {
    background:#fff;
    border:1px solid #eee;
    padding:4px;
    margin-left:40px;
    width:70px;
}

hr {
    margin:1em 0;
    border:0;
    height:1px;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    background-color:{color:border};
}

/* box container */

.header {
    width:200px;
    margin-left:-340px;
    position:fixed;
    border:1px solid #eee;
    background:#fff;
    {block:ifNotReblogImages}
    margin-left:-330px;
    {/block:ifNotReblogImages}
}

.header a {
    border:none;
}


.sbimage img {
    width:200px;
}

.sbimage-v2 {
    position:absolute;
    margin-left:-60px;
}

.sbimage-v2 img {
    width:40px;
    border-radius:10%;
}

.tit {
    text-transform:uppercase;
    letter-spacing:1px;
    font-weight:bold;
    color:#636363;
    padding:16px 14px 10px;
}

.sblinks {
    padding:14px 14px 5px 14px;
}

.desc {
    {block:ifTitle}
    border-top:1px solid #eee;
    {/block:ifTitle}
    border-bottom:1px solid #eee;
    padding:16px;
}

.sblinks a {
    display:inline-block;
    width:80px;
    margin-bottom:7px;
}

/* text post */

.title {
    font-size: 17px;
    font-weight: bold;
    padding: 17px 10px 3px 20px;
}

/* post caption */

.caption {
    overflow:hidden;
    background:#fafafa;
    margin-top:6px;
    border:1px solid #eee;
    padding:20px 30px 15px 23px;
}

.text {
    overflow:hidden;
    background:#fff;
    border:none;
    margin:0;
}

a.tumblr_blog {
    border-bottom:1px solid #eee;
}

/* tags */

.date {
    position:absolute;
    right:-80px;
    top:0;
    width:60px;
    float:right;
}

.circle {
    background:#fff;
    width:23px;
    height:23px;
    font-size:10px;
    margin-bottom:5px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:90%;
    border:1px solid #eee;
    position:relative;
}

.slide-out {
    display:none;
    position:absolute;
    top:4px;
    left:-40px;
}

.time:hover ~ .slide-out {
    display:block;
    left:20px;
}

svg {
   width:10px;
   height:auto;
   opacity:.5;
   padding:1px;
   display:block;
   overflow:visible;
}
.controls {margin-top:5px}
.controls a {
   position:relative;
   display:inline-block;
   overflow:hidden;
   padding:5px;
   width:12px;
   height:12px;
}
.controls .like .liked + svg {
   opacity:1;
}
.controls .like:hover {
    fill:{color:accent};
}
.controls .like .liked + svg path {
   fill:{color:accent};
}
.controls .like .like_button {
   position:relative;
}
.controls .like .like_button iframe {
   position:absolute;
   top:0;
   left:0;
   bottom:0;
   right:0;
   z-index:2;
   opacity:0;
}

.parent-p {
    position:absolute;
    left:-50px;
    top:0;
    float:left;
}
.parent-p img {
    border-radius:15%;
}

.tags {
    {block:ifNotShowTags}display:none;{/block:ifNotShowTags}
    margin-top:20px;
    position:absolute;
    font-size:11px;
    font-style:italic;
    color:#aaa;
    {block:ifHoverTags}
    opacity:0;
    {/block:ifHoverTags}
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}

.tags a {margin-right:6px;}

/* ask */

.question {
padding:10px 10px;
}

.sender {
    font-size:10px;
    margin-bottom:2px;
    text-transform:uppercase;
    font-weight:700;
    letter-spacing:1px;
}

.asker {
    margin-left:40px;
    border-left:1px solid #eee;
    padding-left:10px;
}

.answer {
    margin:10px 10px;
    background:#fafafa;
    padding:10px 15px 0px 10px;
    border:1px solid #eee;
}

.ask-img {
    position:absolute;
}
.ask-img img {
    border-radius:15%;
}

/* chat */

.chat {
    list-style-type:none;
    background: #fafafa;
    padding: 10px 10px 10px 30px;
    border: 1px solid #eee;
}

.chat .label {
    font-weight:bold;
}

.chat li {
    padding: 0 18px;
}

/* quote */

.quote {
    font-size:15px;
    line-height:1.3em;
    padding:10px;
}

.source {
    font-style:italic;
    padding:10px;
}

.media {
    position:relative;
    display:inline-block;
    width:100%;
}

/* music player */

.album-cover {
    position:absolute;
}

.album-cover img {
    width:52px;
    height:52px;
}

.playbox {
    height:50px;
    background:#f2f2f2;
    width:calc({select:post size}px - 60px);
    border:1px solid #eee;
    margin-left:58px;
}

.playbutton {
    overflow:hidden;
    position:relative;
    z-index:1000;
    width:calc({select:post size}px - 50px);
    height:26px;
    padding:3px;
    margin-left:5px;
    top:9px;
    border-radius:90px;
}

.info {
    position:relative;
    z-index: 1000;
    left: 100px;
    font-weight:bold;
    top: -15px;
}

/* tumblr controls  */

iframe.tmblr-iframe {
    z-index:99999999999999!important;
    top:0!important;
    right:0!important;
    opacity:0.4;
    /* delete invert(1) from here */
        filter:invert(1) contrast(150%);
        -webkit-filter:invert(1) contrast(150%);
        -o-filter:invert(1) contrast(150%);
        -moz-filter:invert(1) contrast(150%);
        -ms-filter:invert(1) contrast(150%);
    /* to here if your blog has a dark background */
    transform:scale(0.65);
    transform-origin:100% 0;
    -webkit-transform:scale(0.65);
    -webkit-transform-origin:100% 0;
    -o-transform:scale(0.65);
    -o-transform-origin:100% 0;
    -moz-transform:scale(0.65);
    -moz-transform-origin:100% 0;
    -ms-transform:scale(0.65);
    -ms-transform-origin:100% 0;}

iframe.tmblr-iframe:hover {
    opacity:0.6!important;
}

/* permalink page notes */

.pnotes {
    width:{select:post size}px;
    font-size:9px;
}

.pnotes ol.notes {
    list-style-type:decimal-leading-zero;
     margin-left:20px;
     padding:0;
}

.pnotes img.avatar {
    display:none;
}

/* :) */

.credit {
    bottom:20px;
    right:30px;
    position:fixed;
    font-size:9px;

}

#s-m-t-tooltip{
  /* basic */
  max-width:300px;
  z-index:10;
  /* style and design */
  padding:2px 5px;
  background:#fff;
  border:1px solid #eee;
  border-radius:0;
  color:{color:text};
  font:inherit;
  text-transform:uppercase;
  font-size:8px;
  letter-spacing:1px;
  box-shadow:none;
}

.pagination,
#infscr-loading {
    display:none!important;
}

.pagi {
    margin-top:130px;
    text-align:center;
}
.pagi a {
}
.l {
    font-size:9px;
    padding-right:5px;
}
.cr {
    margin-top:20px;
}
.cr a {
    border-top:1px solid #eee;
    padding-top:15px;
}

</style>


<link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css">

</head>
<body>

<div class="credit"><a href="https://solasz.tumblr.com" title="theme by solasz">solasz</a></div>

<div class="main">

<div class="header">
    {block:ifSidebarImage}
    <div class="sbimage"><a href="/"><img src="{image:sidebar}"></a></div>
    {/block:ifSidebarImage}
    {block:ifSmallSidebarImage}
    <div class="sbimage-v2"><a href="/"><img src="{image:sidebar v2}"></a></div>
    {/block:ifSmallSidebarImage}
    {block:ifTitle}
    <div class="tit"><a href="/">{title}</a></div>
    {/block:ifTitle}
    <div class="desc">{description}</div>
    <div class="sblinks">
    <div style="text-transform:uppercase;font-weight:bold;margin-bottom:9px;">{text:Navigation Text}</div>
        <a href="{text:Link 1}"><span class="l th th-home-o"></span> {text:Link 1 Title}</a>
        <a href="{text:Link 2}"><span class="l th th-envelope-o"></span> {text:Link 2 Title}</a>
        <a href="{text:Link 3}"><span class="l th th-hashtag"></span>{text:Link 3 Title}</a>
        <a href="{text:Link 4}"><span class="l th th-hashtag"></span>{text:Link 4 Title}</a>
        {block:ifLink5}<a href="{text:Link 5}"><span class="l th th-hashtag"></span>{text:Link 5 Title}</a>{/block:ifLink5}
        {block:ifLink6}<a href="{text:Link 6}"><span class="l th th-hashtag"></span>{text:Link 6 Title}</a>{/block:ifLink6}
    </div>
</div>


<!--- don't edit any of the things below if you don't know what you're doing --->

<div class="content">

{block:Posts}
<article class="entry {block:Photo}ph{/block:Photo}{block:Photoset}ph{/block:Photoset}">

{block:ifReblogImages}
{block:RebloggedFrom}
<div class="parent-p">
<a href="{ReblogParentURL}" target="_blank" title="reblogged from {ReblogParentName}"><img src="{ReblogParentPortraitURL-30}"></a>
</div>
{/block:RebloggedFrom}
{/block:ifReblogImages}
{block:Date}
<div class="date">
    <div class="circle time">
        <a href="{permalink}" target="_blank" style="margin-top:3px;" title="{TimeAgo} // {NoteCountWithLabel}"><span class="th th-push-pin-o"></span></a></div>
    <div class="circle reblog">
        <a href="{ReblogURL}" target="_blank" style="margin-top:4px;" title="Reblog"><span class="th th-reblog"></span></a>
    </div>
    <div class="circle">
    <div class="controls">
<a href="#" class="like" style="margin-top:4px;" title="like">{LikeButton}
<svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 442.403 442.403" style="enable-background:new 0 0 442.403 442.403;" xml:space="preserve"><g><g><path d="M213.05,422.652c2.833,1.7,5.95,2.833,9.35,2.833c3.117,0,6.517-0.85,9.35-2.833c7.65-5.1,187.283-123.533,207.683-243.95    c10.483-62.333-8.783-100.867-26.633-122.117c-20.967-24.933-52.133-39.667-83.017-39.667c-10.2,0-20.117,1.7-28.9,5.1    c-43.067,16.15-72.25,44.767-88.117,64.317c-15.583-19.267-42.217-47.033-74.517-58.083c-9.917-3.4-20.683-5.1-32.017-5.1    c-28.9,0-56.383,11.9-75.367,32.867c-16.717,18.417-35.7,53.55-29.75,114.75C13.016,291.185,204.833,417.268,213.05,422.652z     M56.083,78.685c17.283-18.983,38.817-21.817,50.15-21.817c7.367,0,14.45,1.133,20.967,3.4    c39.383,13.317,70.833,63.467,71.4,63.75c3.117,5.1,8.783,8.217,14.733,7.933c5.95,0,11.333-3.4,14.45-8.5    c0.283-0.567,28.617-48.733,85.283-69.983c4.817-1.7,10.767-2.833,16.717-2.833c20.967,0,42.217,10.483,56.95,27.767    c19.267,22.667,25.783,55.533,18.983,94.633c-7.367,43.067-42.5,94.633-101.717,149.317c-33.433,30.883-66.3,54.683-81.6,65.45    c-16.15-11.05-51-36.55-86.417-68.85C74.216,262.285,39.366,209.868,35.116,167.368C31.433,128.552,38.516,97.952,56.083,78.685z"/></g></g></svg>
</a>
</div>
    </div>
    </div>
{/block:Date}

<section class="post" id="{PostID}">

{block:Audio}
{block:AudioPlayer}
    {block:AlbumArt}
<div class="album-cover">
<img src="{AlbumArtURL}">
</div>
{/block:AlbumArt}
<div class="playbox">
<div class="playbutton">{block:AudioPlayer}{AudioPlayerGrey}{/block:AudioPlayer}</div>
<div class="info">
{block:Artist}{Artist}{/block:Artist} &mdash;
{block:TrackName}{TrackName}{/block:TrackName}
</div>
</div>
{/block:Audio}


{block:Photo}
<div class="photo">
<a href="{Permalink}"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/></a>
</div>
{/block:Photo}


{block:Photoset}
<div class="wrap">
    <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
</div>
{/block:Photoset}


{block:Video}
<div class="video">{Video-500}</div>
{/block:Video}


{block:Answer}
<div class="question">
<div class="ask-img"><img src="{AskerPortraitURL-30}"></div>
    <div class="asker">
        <div class="sender">
            {Asker}
        </div>
        <span class="inquiry">{Question}</span>
    </div>
</div>
<div class="answer text">{Answer}</div>
{/block:Answer}


{block:Chat}
{block:Title}<div class="title">{Title}</div>{/block:Title}
<div class="convo">
<ul class="chat text">
    {block:Lines}
    <li class="line">
        {block:Label}
        <span class="label">{Label}&nbsp; </span>
        {/block:Label}
        {Line}
    </li>
    {/block:Lines}
</ul>
</div>
{/block:Chat}


{block:Link}
<div class="title"><a href="{URL}">{Name}</a></div>
{block:Description}<div class="text">{Description}</div>{/block:Description}
{/block:Link}


{block:Quote}
<div class="quote">{Quote}</div>
{block:Source}
<div class="source">{Source}</div>
{/block:Source}
{/block:Quote}


{block:Text}
{block:Title}<div class="title">{Title}</div>{/block:Title}
<div class="text caption">{Body}</div>
{/block:Text}


{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}

{block:ifShowTags}<div class="tags">
{block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
</div>{/block:ifShowTags}

</section>
</article>

{block:PermalinkPage}{block:PostNotes}<div class="pnotes">{PostNotes}</div>{/block:PostNotes}{/block:PermalinkPage}

{/block:Posts}

<!--- {block:ContentSource}{SourceURL}{/block:ContentSource}{block:RebloggedFrom}{ReblogRootURL}{ReblogParentURL}{/block:RebloggedFrom} --->
</div>

{block:IndexPage}
{block:Pagination}<div class="pagination">{block:PreviousPage}<a class="prev" href="{PreviousPage}">previous</a>{/block:PreviousPage} {block:NextPage}<a class="next" href="{NextPage}">next</a>{/block:NextPage}</div>{/block:Pagination}
{/block:IndexPage}

<div class="pagi">
{block:Pagination}{block:PreviousPage}<a class="prev" href="{PreviousPage}"><span class="th th-left-arrow"></a>{/block:PreviousPage} {block:NextPage}<a class="next" href="{NextPage}"><span class="th th-right-arrow"></span></a>{/block:NextPage}{/block:Pagination}
<div class="cr"><a href="https://solasz.tumblr.com">© solasz</a></div>
</div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
<script src ="//static.tumblr.com/fwgzvyf/l6jnyutne/shythemes.vr.js"></script>
<script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
<script src="https://static.tumblr.com/6jwyigb/LV4pgl2ma/jquery.style-my-tooltips.js"></script>

{block:IndexPage}
<script src="https://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
{/block:IndexPage}

<script>

$('article').unnest({
  yourCaption: ".caption", //initial caption selector
  wrapName: ".tumblr_parent", //separate captions wrapper name
  newCaptionUsername: true, //if user adds new caption, have their names on it
  originalPostCaptionUsername: false, //if user adds new caption on post without an already existing caption
  tumblrAvatars: false, //with or without tumblr avatars before captions
  tumblrAvatarClass: ".tumblr_avatar", //the class applied to tumblr avatars
  usernameColon: false //removes that fucking colon like who asked you tumblr no one wants it
});

$(document).ready(function(){
    $('.photo-slideshow').pxuPhotoset({
        lightbox: true,
        rounded: false,
        gutter: '2px',
        photoset: '.photo-slideshow',
        photoWrap: '.photo-data',
        photo: '.pxu-photo'
    });
    $("[title]").style_my_tooltips({
    tip_follows_cursor:true,
    tip_delay_time:0,
    tip_fade_speed:200,
    attribute:"title"
});
 resizeVideos();
});

</script>

</body>
</html>