theme 03 - rosewater

<!DOCTYPE html>

<!--

ROSEWATER theme (03) by PEACHTHMS | peachthms.tumblr.com
V1.1 - new tumblr controls
V1.2 - fixed page bug, link error
V1.3 - final page fix


- do not claim this page or any of the code as your own
- do not redistribute this page or any of the code as your own
- do not mix my code with another theme maker's code
- do not remove or edit the credit in anyway; it must remain visible

magnusthemes, neothm - unnested captions

-->

<head>

<title>{Title} {block:PostSummary}| {PostSummary}{/block:PostSummary}</title>

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

<link href="https://fonts.googleapis.com/css?family=Droid+Serif|Karla|Lora|Merriweather|Muli|Noto+Sans" rel="stylesheet">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">
 function unhide(divID) {
 var item = document.getElementById(divID);
 if (item) {
 item.className=(item.className=='hidden')?'unhidden':'hidden';
 }
 }
</script>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-dns-prefetch-control" content="off"/>
<meta name="color:background" content="#aa8d8d"/>
<meta name="color:post background" content="#ffffff"/>
<meta name="color:text" content="#686868"/>
<meta name="color:links" content="#686868"/>
<meta name="color:accent" content="#aa8d8d"/>
<meta name="color:accent2" content="#898989"/>
<meta name="text:post gutter" content=""/>
<meta name="text:ask link" content=""/>
<meta name="text:link one title" content=""/>
<meta name="text:link one" content=""/>
<meta name="text:link two title" content=""/>
<meta name="text:link two" content=""/>
<meta name="text:link three title" content=""/>
<meta name="text:link three" content=""/>
<meta name="if:link one" content=""/>
<meta name="if:link two" content=""/>
<meta name="if:link three" content=""/>
<meta name="if:justified captions" content=""/>
<meta name="if:captions on index page" content=""/>
<meta name="select:font" content="Karla" title="Karla"/>
<meta name="select:font" content="Noto Sans" title="Noto Sans"/>
<meta name="select:font" content="Muli" title="Muli"/>
<meta name="select:font" content="Droid Serif" title="Droid Serif"/>
<meta name="select:font" content="Lora" title="Lora"/>
<meta name="select:font" content="Merriweather" title="Merriweather"/>
<meta name="select:font size" content="11px" title="11px"/>
<meta name="select:font size" content="12px" title="12px"/>
<meta name="select:font size" content="14px" title="13px"/>
<meta name="select:font size" content="14px" title="14px"/>
<meta name="select:font size" content="15px" title="15px"/>

<style>

::-moz-selection {
    background-color: {color:accent2};
    color: {color:text};
}

::selection {
    background-color: {color:accent2};
    color: {color:text};
}

::-webkit-scrollbar {
    width: 1px;
    height: 1px;
}

::-webkit-scrollbar-thumb {
    background-color: {color:accent};
}

::-webkit-scrollbar-track {
    background-color: {color:post background};
}

.tmblr-iframe-compact .tmblr-iframe--unified-controls {
    margin-top: 3px;
    right: 5px;
    z-index: 99999999999;
    transform: scale(0.7,0.7);
    -webkit-filter: invert(50%);
    filter: invert(50%);
}

* {
    padding: 0;
    margin: 0;
}

a {
    font-weight: bold;
    text-decoration: none;
    color: {color:links};
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

a:hover {
    color: {color:accent};
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all 0.8s ease;
}

small {
    font-size: {select:font size};
}

ul, ol {
    padding-left: 15px;
}

body {
    background-color: {color:background};
    font-family: '{select:font}', sans-serif, serif;
    color: {color:text};
    font-size: {select:font size};
    line-height: 1.75em;
}

#container {
    width: 100%;
    height: 100%;
    display: flex;
}

section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

section#right {
    {block:PermalinkPage}
    justify-content: flex-start;
    {/block:PermalinkPage}
}

#left {
    background-color: {color:background};
}

#intro {
    width: 260px;
    height: 260px;
    border: 1px solid white;
    background-color: rgba(255,255,255,0.3);
    position: fixed;
    left: calc(25vw - 150px);
    top: calc(50vh - 150px);
    color: white;
    text-align: center;
    display: flex;
    padding: 10px;
}

#intro span {
    margin: auto;
}

#intro h1 {
    text-transform: uppercase;
    letter-spacing: 2px;
}

#intro p {
    max-height: 150px;
    overflow-y: auto;
    margin-top: 15px;
    font-size: calc({select:font size} - 1px);
    font-style: italic;
    padding: 0 3px;
}

#right {
    background-color: #eeeeee;
    overflow-y: scroll;
    overflow-x: hidden;
    {block:PermalinkPage}
    height: 100vh;
    {/block:PermalinkPage}
}

nav {
    padding: 15px;
    width: 100%;
    height: auto;
    position: fixed;
    bottom: 0;
    background-color: {color:post background};
    text-align: center;
}

nav a {
    font-size: calc({select:font size} - 1px);
    padding: 10px;
}

nav a::after {
    content: '\2022';
    padding-left: 20px;
}

nav a:last-of-type::after {
    content: none;
}

#pag {
    margin-bottom: 100px;
    text-align: center;
}

#pag a {
    color: {color:links};
    text-decoration: none;
}

#pag a:hover {
    color: {color:accent};
}

#pag .jump_page, .current_page {
    color: {color:links};
    padding: 5px;
}

#pag .current_page {
    font-weight: bold;
}

#postcol {
    margin: 0 auto;
    width: 75%;
    max-width: 700px;
}

.posts {
    background-color: {color:post background};
    margin: {text:post gutter}px 0;
    padding: 20px;
    padding-bottom: 5px;
}

.info {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.info, #tags {
    font-size: calc({select:font size} - 1px);
}

#tags {
    text-align: center;
    font-size: calc({select:font size} -0.5px);
}

#tags a {
    margin: 0 5px;
}

.info a, #tags a {
    color: #aaaaaa;
    text-transform: lowercase;
}

#quote {
    text-align: center;
}

#source {
    font-style: italic;
    text-align: center;
    margin-top: 20px;
}

#lines {
    margin: 10px 0;
}

#notes {
    background-color: {color:post background};
    margin-bottom: 100px;
    padding: 10px;
    font-size: calc({select:font size} - 1px);
}

#notes ol {
    list-style: none;
}

#notes img {
    display: none;
}

#notes a {
    font-weight: normal;
}

.caption {
    width: 100%;
    {block:ifjustifiedcaptions}
    text-align: justify;
    {/block:ifjustifiedcaptions}
    border: 0;
}

.tumblr_parent a.tumblr_blog {
    display: block;
    vertical-align: middle;
    margin-bottom: 5px;
    font-weight: bold;
    color: {color:accent3};
}

.tumblr_parent .tumblr_avatar {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    display: inline-block;
    float: left;
    clear: left;
    border-radius: 4px;
}

.tumblr_avatar img {
    vertical-align: middle;
}

.tumblr_parent {
    margin: 0 0 5px 0;
}

.tumblr_parent p {
}

.hidden {
    display: none;
}

.unhidden {
    display: block;
}

/** DO NOT TOUCH OR REMOVE **/
#credit {
    font-size: 8px;
    letter-spacing: 2px;
    bottom: 15px;
    right: 15px;
    position: fixed;
}

#credit a {
    color: {color:text};
    text-decoration: none;
    -webkit-transition: all .8;
    -moz-transition: all .8s;
    -o-transition: all .8s;
    -ms-transition: all .8s;
    transition: all .8s;
}

#credit a:hover {
    color: {color:accent};
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -o-transition: all .8s;
    -ms-transition: all .8s;
    transition: all .8s;
}

#mobileheader, #mobilecredit, #mobilenav, #verticalphotoset {
    display: none;
}

/** DO NOT TOUCH OR REMOVE **/

@media only screen and (min-device-width : 319px) and (max-device-width : 736px) {
        #left, nav, #credit, #photoset  {
            display: none;
        }

        #mobileheader, #mobilecredit, #mobilenav, #verticalphotoset {
            display: block;
        }

        .posts {
            margin: 50px 0;
        }

        #postcol {
            width: 100%;
        }

        #mobileheader {
            margin: 0 auto;
            width: 100vw;
            padding: 30px 20px;
            background-color: {color:post background};
        }

        #mobileheader p {
            width: 90vw;
            padding: 10px 0;
        }

        #mobilecredit {
            margin-bottom: 50px;
            text-align: center;
        }

        #mobilenav {
            width: inherit;
            text-transform: uppercase;
        }

        #mobilenav li {
            list-style: none;
            margin-left: -15px;
        }
    }

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  {

    #left, #credit, #photoset {
        display: none;
    }

    #verticalphotoset, #mobilecredit {
        display: block;
    }

    .posts:first-of-type {
        margin-top: 200px;
    }

    #mobileheader {
        display: block;
        width: 100vw;
        padding: 30px 20px;
        background-color: {color:post background};
        position: fixed;
        top: 0;
        z-index: 2;
    }

    #mobilecredit {
        margin-bottom: 150px;
        text-align: center;
    }
}


</style>

</head>

<body>

<div id="container">

<nav>
    <a href="/">home</a>
    <a href="{text:ask link}">message</a>
    <a href="/archive">archive</a>
    {block:iflinkone}<a href="/{text:link one}">{text:link one title}</a>{/block:iflinkone}
    {block:iflinktwo}<a href="/{text:link two}">{text:link two title}</a>{/block:iflinktwo}
    {block:iflinkthree}<a href="/{text:link three}">{text:link three title}</a>{/block:iflinkthree}
</nav>

<section id="left">

<div id="intro">
    <span><h1>{Title}</h1>
    <p>{Description}</p></span>
</div>

</section>

<section id="right">
<div id="mobileheader">

    <h1>{Title}</h1>

    <p>{Description}</p>

    <div id="mobilenav">

        <a href="javascript:unhide('links');">navigation</a>

        <div id="links" class="hidden">
            <ul>
                <li><a href="/">home</a></li>
                <li><a href="{text:ask link}">message</a></li>
                <li><a href="/archive">archive</a></li>
                <li>{block:iflinkone}<a href="/{text:link one}">{text:link one title}</a>{/block:iflinkone}</li>
                <li>{block:iflinktwo}<a href="/{text:link two}">{text:link two title}</a>{/block:iflinktwo}</li>
                <li>{block:iflinkthree}<a href="/{text:link three}">{text:link three title}</a>{/block:iflinkthree}</li>
            </ul>
        </div>

    </div>

</div>
<div id="postcol">



{block:Posts}

{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 class="posts">

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

{block:Photo}<a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="100%"/></a>
{/block:Photo}

<div id="photoset">
{block:Photoset}
{Photoset}
{/block:Photoset}
</div>

<div id="verticalphotoset">
{block:Photoset}
{block:Photos}
<img src="{PhotoURL-HighRes}" width="100%" />
{/block:Photos}
{/block:Photoset}
</div>

{block:Video}
{Video-540}
{/block:Video}

{block:Quote}
<div id="quote">"{Quote}"</div>
{block:Source}<div id="source">&mdash; {Source}</div>{/block:Source}
{/block:Quote}

{block:Link}
<h1><a href="{URL}">{Name}</a></h1>
{block:Description}{Description}{/block:Description}
{/block:Link}

{block:Chat}
{block:Title}<h1>{Title}</h1>{/block:Title}
{block:Lines}<div id="lines">
{block:Label}{Label}{/block:Label}
<span>{Line}<br></span></div>{/block:Lines}
{/block:Chat}

{block:Audio}
{AudioPlayerWhite}
{block:TrackName}Track: {TrackName}<br>{/block:TrackName}
{block:Artist}Artist: {Artist}<br>{/block:Artist}
{block:Album}Album: {Album}<br>{/block:Album}
{/block:Audio}

{block:Answer}
{Asker} asked {Question}
<div id="answer">{Answer}</div>
{/block:Answer}

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

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

{block:RebloggedFrom}
<div class="info">
    <div class="perma">
    <a href="{ReblogParentURL}">via: {ReblogParentName}</a>
    </div>

    <div class="date">
    <a href="{Permalink}">{DayOfWeek}, {TimeAgo}</a>
    </div>

</div>
{/block:RebloggedFrom}

{block:NotReblog}
<div class="info">
    <div class="perma">
    <a href="{BlogURL}" title="posted by {Name}">{Name}</a>
    </div>

    <div class="date">
    <a href="{Permalink}">{DayOfWeek}, {TimeAgo}</a>
    </div>
</div>
{/block:NotReblog}
{/block:Date}

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

</article>


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





{/block:Posts}

{block:Pagination}
<div id="pag">
    {block:PreviousPage}<a href="{PreviousPage}" class="jump_page">previous</a>{/block:PreviousPage}
    {block:JumpPagination length="5"}
    {block:CurrentPage}<span class="current_page">{PageNumber}</span>{/block:CurrentPage}
    {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
    {block:NextPage}<a href="{NextPage}" class="jump_page">forward</a>{/block:NextPage}
</div>
{/block:Pagination}

<!-- DO NOT TOUCH OR REMOVE -->

<div id="mobilecredit">
<a href="http://peachthms.tumblr.com">theme by peachthms</a>
</div>

</div>

</section>

</div>

<!-- DO NOT TOUCH OR REMOVE -->

<div id="credit">
<a href="http://peachthms.tumblr.com" title="theme by peachthms">< / ></a>
</div>

</body>

<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>

<script src="http://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>

<script> $(function(){  $('.posts').unnest({
    yourCaption: ".caption", //your caption selector, the div wrapping {Caption}
    wrapName: ".tumblr_parent", //the name of the captions’ new wrapper
    newCaptionUsername: true, //if the user adds a new caption, following a series of captions, show their username above the caption
    originalPostCaptionUsername: false, //for the original captions, or a user-added caption that previously didn’t have any, have their username on it
    tumblrAvatars: true, //”dashboard style” caption, have the avatar of the blog next to the username
    tumblrAvatarClass: ".tumblr_avatar", //class of the avatar next to the username
    usernameColon: false //if turned to false, removes the colon at the end of usernames
  }); });
</script>

</html>