Code 03

<!--
    - basecode by southcodes.tumblr.com

    - normalize css by https://github.com/necolas
    - like button by @shythemes
    - captions documentation by @bychloethemes
    - embed audio css and hide empty answers script by @gukthemes
    - pxu photosets by pixel union https://github.com/PixelUnion/Extended-Tumblr-Photoset
        tutorial by @shythemes https://shythemes.tumblr.com/post/113728114758/tutorial-pixel-union-photosets
        modified pxu script by @bychloethemes https://bychloethemes.tumblr.com/post/155956945114/modified-pxu-photoset-script-modified-by

-->

<!DOCTYPE html>
<html>
<head>

    <meta name="viewport" content="width=device-width">

    <title>{Title}</title>

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

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/normalize.css">

    <link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Rubik:300&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

<meta name="image:sidebar" content="https://static.tumblr.com/wgcmeok/mUipv9tx8/tumblr_nu9bm742oj1qg9z02o1_r1_100.png"/>

<meta name="color:background" content="#f8f8f8"/>
<meta name="color:text" content="#333333"/>
<meta name="color:accent" content="#ffb4a7"/>
<meta name="color:links" content="#73c3b9"/>
<meta name="color:sidebar text" content="#ffffff"/>

<meta name="text:home title" content="index"/>
<meta name="text:ask title" content="contact"/>
<meta name="text:link 1 URL" content="/"/>
<meta name="text:link 1 title" content="link 1"/>
<meta name="text:link 2 URL" content="/"/>
<meta name="text:link 2 title" content="link 2"/>
<meta name="text:link 3 URL" content="/"/>
<meta name="text:link 3 title" content="link 3"/>
<meta name="text:archive title" content="archive"/>

<style type="text/css">

.iframe-controls--desktop {
   position:fixed;
   top:0px;
   right:0px;
   z-index:214748364789123456789;
   filter:invert(100%);
   -webkit-filter:invert(100%);
   -webkit-transform:scale(0.6,0.6);
   -webkit-transform-origin: 100% 0%;
   -ms-transform-origin:100% 0%;
   -ms-transform:scale(0.6,0.6);
   transform:scale(0.6,0.6);
   transform-origin:100% 0%;
}

::selection {
  background: {color:accent};
  color:{color:sidebar text};
}
::-moz-selection {
  background: {color:accent};
  color:{color:sidebar text};
}

pre {font-family:consolas;
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4- */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;}      /* Internet Explorer 5.5+ */

body, figure{margin:0;padding:0}
html{font: 15px 'Rubik', sans-serif;}
body {color:{color:text};background:{color:background};}
a {text-decoration:underline;color:{color:links};word-break:break-word;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
a:hover {color:{color:links};
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
blockquote {margin:0;padding:0;}
img {max-width:100%;height: auto;display: block;margin: .7rem 0}
hr {border:0;border-top:1px solid #aaa;margin:0;}
b{font-weight: 600}
video { max-width:100%;}
small {font-size:.9rem}

#container {
    width:800px;
    margin:auto;
    padding-top:5rem;
}

.sidebar {
    width: 300px;
    position:fixed;
    height:100%;
    left:0;
    top:0;
    background-color:{color:accent};
    color:{color:sidebar text};
}

.sidebar img{
    width:80px;
    height:80px;
    border-radius:50px;
    border:3px solid {color:sidebar text};
    margin-left:20px;
}

.ttl{
    padding-left:25px;
    padding-top:20px;
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:14px;
    color:{color:sidebar text};
}

.sidelinks{
    padding-top:10px;
    text-align:right;
}


.sidelinks a{
    color:{color:sidebar text};
    border-top:1px solid #ffffff;
    border-bottom:1px solid #ffffff;
    border-left:1px solid #ffffff;
    text-decoration:none;
    border-radius:20px 0 0 20px;
    padding:10px;
    line-height:39px;
    background-size: 200% 100%;
  background-image: linear-gradient(to right, transparent 50%, {color:sidebar text} 50%);
 transition: background-position 1s;
}

.sidelinks a:hover{
    color:{color:accent};
    text-decoration:none;
    background-position: 100% 0;
}

.description {
    padding:25px;
    text-align:justify;
    color:{color:sidebar text};
}

.description a{
    color:{color:sidebar text};
}

.posttitle {
    {block:AskPage}
    {/block:AskPage}
    {block:SubmitPage}
    {/block:SubmitPage}
}

/* main */

#main {
    width:800px;
    margin: auto;
}

.posts {
    width:500px;
    margin:0 0 5rem 350px;
    background:#fff;
    padding:20px;
    border-radius:20px;
}

.photo {display: block;margin: 0;padding:10px 0 10px 0;}

/*               posts              */

/*      photosets      */


.photo-slideshow {
    width:500px;
}


/*      asks        */

.question{
    border-bottom:1px solid #eee;
    min-height:60px;
    display:inline-block;
    vertical-align:middle;
    width:100%;
    margin-top:15px;
}

.question img{
    width:40px;
    height:40px;
    display:inline-block;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    margin:0 10px 10px 0;
    vertical-align:middle;
}

/*    chat    */

.label_odd {font-weight:600;}
.label_even{font-weight:600;}

/*    quotes    */
.quote {
    padding:10px 0 0 0;
}
.qsrc {
    padding:0 0 10px 0;
}

/*  audio   */

iframe.spotify_audio_player {height:85px;overflow:hidden;}

/*  captions    */
.cimg {display:none;}
.user {

}

/* extras */

.posts date {
    display:block;
    margin-bottom:10px;
    padding-bottom:10px;
    border-bottom:5px solid #f8f8f8;
}

.pnotes {
}

.rl {
    border-top:5px solid #f8f8f8;
    padding-top:10px;
}
.rbg {
}

svg {width:10px;height:auto;opacity:.5;display:block;overflow:visible;}
.controls {display:inline-block;margin:.2rem .2rem 0 .5rem;}
.controls .like .liked + svg {opacity:1;}
.controls .like .liked + svg path {fill:#ec5a5a;}
.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;}

.tags {
    font-style:italic;
    margin-right:5px;
}

.via {
}

.notes {
    font-size:1rem;
    line-height:2rem;
    margin:6rem auto;
    box-sizing:border-box;}
.notes ol{max-height:30rem;overflow:auto;padding:.2px;}
.notes a{font-weight:600;}
.notes img{display:none;}
.notes li, .notes ol {margin:0;padding:0;list-style-type:none;}

/*.jump_page,.jump_page2 {*/
/*    display:block;*/
/*    margin:5rem 0 4rem;}*/

/*.jump_page {float:left;}*/
/*.jump_page2 {float:right;}*/

.pagi{
    position:absolute;
    bottom:15px;
    right:5px;
    background-color:{color:sidebar text};
    padding:10px;
    border-radius:15px;
}

.pagi a{
    color:{color:accent};
    text-decoration:none;
}

.ttop {
    display:none;
    position:fixed;
    bottom:2rem;
    right:3rem;
    z-index:99999;
    font-size:.9rem;
    font-weight:300;
    letter-spacing:.07rem;
    color:{color:text};
    text-decoration:none;
}

.s{
    position:fixed;
    bottom:2rem;
    right:10px;
    font-size:.9rem;
    font-weight:300;
    color:{color:text};
    text-decoration:none;
}

{CustomCSS}

</style>
</head>
<body id="top">

<section id="container">

<div class="sidebar">
    <img src="{image:sidebar}"/>
    <div class="ttl">{Title}</div>
    <div class="description">{Description}</div>
    <div class="sidelinks">
    <a href="/">{text:home title}</a><br>
    <a href="/ask">{text:ask title}</a><br>
    <a href="{text:link 1 URL}">{text:link 1 title}</a><br>
    <a href="{text:link 2 URL}">{text:link 2 title}</a><br>
    <a href="{text:link 3 URL}">{text:link 3 title}</a><br>
    <a href="/archive">{text:archive title}</a>
    </div><!---sidelinks--->
    {block:Pagination}<div class="pagi">
{block:PreviousPage}<a href="{PreviousPage}" class="jump_page">back</a>{/block:PreviousPage}
{block:NextPage}<a href="{NextPage}" class="jump_page2">next</a>{/block:NextPage}</div>
{/block:Pagination}
    </div><!---sidebar--->

<main id="main">

{block:Posts}
<article class="posts" id="{PostID}">

{block:Date}<date>
<a href="{Permalink}">{ShortMonth} {DayOfMonthWithSuffix}</a>
</date>{/block:Date}

{block:Text}
{block:Title}<h2 class="posttitle">{Title}</h2>{/block:Title}
{block:Body}<div class="capt">
{block:NotReblog}{Body}{/block:NotReblog}
{block:RebloggedFrom}{block:Reblogs}
{block:HasAvatar}
    {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
    {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
    {/block:HasAvatar}
    {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
    {block:HasNoPermalink}<div class="user">{Username}</div>{/block:HasNoPermalink}
        {Body}
{/block:Reblogs}{/block:RebloggedFrom}
</div>{/block:Body}
{/block:Text}

{block:Answer}<div class="answer">
<div class="question"><img src="{AskerPortraitURL-96}" alt="">{Asker} asked:
</div><br><br>{Question}
{block:Answerer}
<div class="reply">{Answer}</div></div></div>
{/block:Answerer}
    {block:NotReblog}{Replies}
    {/block:NotReblog}
    {block:RebloggedFrom}{block:Reblogs}
{block:HasAvatar}
    {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
    {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
    {/block:HasAvatar}
    {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
    {block:HasNoPermalink}<div class="user">{Username}</div>{/block:HasNoPermalink}
        {Body}
{/block:Reblogs}{/block:RebloggedFrom}
{/block:Answer}


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

{block:Link}
<a href="{URL}">{Name}</a>
{block:Description}<div class="capt">
{block:NotReblog}{Description}{/block:NotReblog}
{block:RebloggedFrom}{block:Reblogs}
{block:HasAvatar}
    {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
    {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
    {/block:HasAvatar}
    {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
    {block:HasNoPermalink}<div class="user">{Username}</div>{/block:HasNoPermalink}
        {Body}
{/block:Reblogs}{/block:RebloggedFrom}
</div>{/block:Description}
{/block:Link}

{block:Chat}
{block:Title}<h2 class="posttitle">{Title}</h2>{/block:Title}
{block:Lines}{block:Label}
<span class="label_{alt}">{Label}</span>{/block:Label} {Line}<br>
{/block:Lines}
{/block:Chat}

{block:Photo}
<img src="{PhotoURL-500}" class="photo" alt="{PhotoAlt}"/>
{block:Caption}<div class="capt">
{block:NotReblog}{Caption}{/block:NotReblog}
{block:RebloggedFrom}{block:Reblogs}
{block:HasAvatar}
    {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
    {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
    {/block:HasAvatar}
    {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
    {block:HasNoPermalink}<div class="user">{Username}</div>{/block:HasNoPermalink}
        {Body}
{/block:Reblogs}{/block:RebloggedFrom}
</div>{/block:Caption}
{/block:Photo}

{block:Photoset}
<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>
{block:Caption}<div class="capt">
{block:NotReblog}{Caption}{/block:NotReblog}
{block:RebloggedFrom}{block:Reblogs}
{block:HasAvatar}
    {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
    {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
    {/block:HasAvatar}
    {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
    {block:HasNoPermalink}<div class="user">{Username}</div>{/block:HasNoPermalink}
        {Body}
{/block:Reblogs}{/block:RebloggedFrom}
</div>{/block:Caption}
{/block:Photoset}

{block:Audio}
{block:AudioEmbed}<div style="height:85px;overflow:hidden;margin:15px 0 15px 0;" class="audio">{AudioEmbed}</div>{/block:AudioEmbed}
{/block:Audio}

{block:Video}
<div class="video">{Video-500}</div>
{block:Caption}<div class="capt">
{block:NotReblog}{Caption}{/block:NotReblog}
{block:RebloggedFrom}{block:Reblogs}
{block:HasAvatar}
    {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
    {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
    {/block:HasAvatar}
    {block:HasPermalink}<a target="_blank" class="user" href="{Permalink}">{Username}</a>{/block:HasPermalink}
    {block:HasNoPermalink}<div class="user">{Username}</div>{/block:HasNoPermalink}
        {Body}
{/block:Reblogs}{/block:RebloggedFrom}
</div>{/block:Caption}
{/block:Video}

{block:Date}
<div class="rl">
<span class="rbg"><a href="{ReblogURL}" title="reblog" target="_blank">reblog</a></span>

<div class="controls"><a class="like">{LikeButton}<svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://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>{/block:Date}

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

{block:PermalinkPage}
{block:RebloggedFrom}<div class="via">
via: <a href="{ReblogParentURL}">{ReblogParentName}</a><br>
src: <a href="{ReblogRootURL}">{ReblogRootName}</a>
</div>{/block:RebloggedFrom}
{/block:PermalinkPage}

<!-- {block:ContentSource}{SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}"height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}<!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->

</article> <!--posts-->

{block:PostNotes}
<div class="notes">{PostNotes}</div>
{/block:PostNotes}
{/block:Posts}

<a href="#top" class="achl ttop">scroll to top</a>
<a href="https://simplethemes.tumblr.com" class="s">S</a>
</main>

</section> <!--container-->

<!-- scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
<script src ="https://static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.photo-slideshow').pxuPhotoset({
    lightbox: true,
    rounded: false,
    gutter: '2px',
    borderRadius: '0px',
    photoset: '.photo-slideshow',
    photoWrap: '.photo-data',
    photo: '.pxu-photo'});

    $(document).scroll(function() {
    var y = $(this).scrollTop();
    if (y > 500) {$('.ttop').fadeIn();}
    else {$('.ttop').fadeOut();}});

    $(".audio iframe").each(function(index, elem) {elem.setAttribute("width","100%");});

    $( ".answer span.reply:empty" ).parent().hide();

    $('.achl').click(function(){
    $('html, body').animate({
    scrollTop: $( $(this).attr('href') ).offset().top
    }, 500); return false;});
});
</script>
</body>
</html>