myrtillenne

FEATURES

container theme
post width, sidebar width, font size, google fonts, post spacing, photoset spacing of your choice
sidebar image (optional)
page links and 8 extra links
like and reblog links on index page
show tags on click (optional)
pagination or infinite scroll with manual load
custom photoset lightbox

CODE

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:ifMainGoogleFont}<link href="https://fonts.googleapis.com/css?family={text:Main Google Font}" rel="stylesheet" type="text/css">{/block:ifMainGoogleFont}
{block:ifSecondaryGoogleFont}<link href="https://fonts.googleapis.com/css?family={text:Secondary Google Font}" rel="stylesheet" type="text/css">{/block:ifSecondaryGoogleFont}
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link href="https://static.tumblr.com/vywm3oc/SKaog4f6h/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/metro/3.0.17/css/metro-icons.css">
{block:Description}
<meta name="description" content="{MetaDescription}">
{/block:Description}
<meta name="image:Background" content="https://secure.static.tumblr.com/9bcd993977d2928e3d1cecfc3a2e36dc/vywm3oc/Fyiomxd0d/tumblr_static_b0ad4hd6xcwk48g4wogwkw840.jpg">
<meta name="image:Sidebar Image" content="https://secure.static.tumblr.com/95418612de6ba1923501cf4a790b6f07/vywm3oc/S1womz358/tumblr_static_6zyqd2f4wx448o40g0848cock.png">
<meta name="color:Background" content="#fce8e0">
<meta name="color:Text" content="#9b7870">
<meta name="color:Link" content="#dd5b8c">
<meta name="color:Link Hover" content="#e8798c">
<meta name="color:Navigation Background" content="#e8798c">
<meta name="color:Navigation Link" content="#fce8e0">
<meta name="color:Navigation Link Hover" content="#f6f6f6">
<meta name="color:Searchbar Text" content="#f6f6f6">
<meta name="color:Pagination Background" content="#dd5b8c">
<meta name="color:Pagination Link" content="#fce8e0">
<meta name="color:Pagination Link Hover" content="#f6f6f6">
<meta name="color:Content Background" content="#ffffff">
<meta name="color:Post Background" content="#ffffff">
<meta name="color:Post Border" content="#fc89b3">
<meta name="color:Post Border Gradient" content="#f9b2a0">
<meta name="color:Post Inner Border" content="#f7c6c1">
<meta name="color:Post Icons" content="#f6f6f6">
<meta name="color:Post Icons Hover" content="#e8798c">
<meta name="color:Photoset Background" content="#ffffff">
<meta name="color:Photoset Controls" content="#9b7870">
<meta name="color:Tooltip Background" content="#ffffff">
<meta name="color:Tooltip Text" content="#9b7870">
<meta name="color:Scrollbar" content="#f7c6c1">
<meta name="color:Scrollbar Track" content="#f6f6f6">
<meta name="text:Post Width" content="450">
<meta name="text:Sidebar Width" content="320">
<meta name="text:Sidebar Image Width" content="">
<meta name="text:Main Google Font" content="">
<meta name="text:Secondary Google Font" content="Cookie">
<meta name="text:Body Font Size" content="14">
<meta name="text:Title Font Size" content="26">
<meta name="text:Links Font Size" content="22">
<meta name="text:Post Title Font Size" content="26">
<meta name="text:Post Spacing" content="40">
<meta name="text:Photoset Spacing" content="4">
<meta name="text:Link 1 Title" content="">
<meta name="text:Link 1 URL" content="http://">
<meta name="text:Link 2 Title" content="">
<meta name="text:Link 2 URL" content="http://">
<meta name="text:Link 3 Title" content="">
<meta name="text:Link 3 URL" content="http://">
<meta name="text:Link 4 Title" content="">
<meta name="text:Link 4 URL" content="http://">
<meta name="text:Link 5 Title" content="">
<meta name="text:Link 5 URL" content="http://">
<meta name="text:Link 6 Title" content="">
<meta name="text:Link 6 URL" content="http://">
<meta name="text:Link 7 Title" content="">
<meta name="text:Link 7 URL" content="http://">
<meta name="text:Link 8 Title" content="">
<meta name="text:Link 8 URL" content="http://">
<meta name="select:Background Style" content="cover" title="Full Screen Image">
<meta name="select:Background Style" content="auto" title="Pattern">
<meta name="select:Sidebar Position" content="left" title="left">
<meta name="select:Sidebar Position" content="right" title="right">
<meta name="select:Content Opacity" content="0.5" title="50%">
<meta name="select:Content Opacity" content="0" title="0%">
<meta name="select:Content Opacity" content="0.1" title="10%">
<meta name="select:Content Opacity" content="0.2" title="20%">
<meta name="select:Content Opacity" content="0.3" title="30%">
<meta name="select:Content Opacity" content="0.4" title="40%">
<meta name="select:Content Opacity" content="0.6" title="60%">
<meta name="select:Content Opacity" content="0.7" title="70%">
<meta name="select:Content Opacity" content="0.8" title="80%">
<meta name="select:Content Opacity" content="0.9" title="90%">
<meta name="select:Content Opacity" content="1.0" title="100%">
<meta name="select:Main Font" content="cambria, serif" title="Cambria">
<meta name="select:Main Font" content="arial, sans-serif" title="Arial">
<meta name="select:Main Font" content="georgia, serif" title="Georgia">
<meta name="select:Main Font" content="Palatino, 'Palatino Linotype', serif" title="Palatino">
<meta name="select:Main Font" content="Times, 'Times New Roman', serif" title="Times New Roman">
<meta name="select:Main Font" content="courier, monospace" title="Courier">
<meta name="select:Main Font" content="lucida console, monospace" title="Lucida Console">
<meta name="select:Main Font" content="verdana, sans-serif" title="Verdana">
<meta name="select:Title Style" content="font-weight:normal;" title="normal">
<meta name="select:Title Style" content="font-style:italic;" title="italic">
<meta name="select:Title Style" content="font-weight:bold;" title="bold">
<meta name="select:Title Style" content="font-weight:bold;font-style:italic;" title="bold italic">
<meta name="select:Text Align" content="left" title="left">
<meta name="select:Text Align" content="justify" title="justify">
<meta name="if:Sidebar Image" content="1">
<meta name="if:Show Tags On Click" content="0">
<meta name="if:Infinite Scroll" content="0">
<style>
body{
    line-height:1.5;
    font-size:{text:Body Font Size}px;
    font-family:{block:ifMainGoogleFont}{text:Main Google Font}, {/block:ifMainGoogleFont}{select:Main Font};
    color:{color:Text};
    background-color:{color:Background};
    background-image:url('{image:Background}');
    background-size:{select:Background Style};
    background-position:center center;
    background-attachment:fixed;
    margin:0;
}

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

::-webkit-scrollbar-track {
    background: {color:Scrollbar Track};
}

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

::-webkit-scrollbar-corner {
    background: {color:Scrollbar Track};
}

a{
    color:{color:Link};
    text-decoration:none;
    transition:color 0.4s;
}

a:hover{
    color:{color:Link Hover};
}

a img{
     border:0;
}

blockquote:not(.instagram-media){
    border-left:1px solid {color:Post Inner Border};
    padding-left:1em;
    margin-left:0;
    margin-right:0;
}

blockquote:last-child{
    margin-bottom:0;
}

p:first-of-type{
    margin-top:0;
}

p:last-child{
    margin-bottom:0;
}

pre{
    white-space:pre-wrap;
}

#canvas{
    width:84vw;
    min-width:860px;
    height:84%;
    padding:54px;
    box-sizing:border-box;
    position:fixed;
    top:8%;
    left:0;
    right:0;
    margin:auto;
    display:flex;
}

@media(min-width:1000px){
    #canvas{
        left:8%;
        right:8%;
    }
}

#canvas > .border-left{
    position:absolute;
    left:0;
    top:34px;
    width:34px;
    height:calc(100% - 68px);
    background-image: linear-gradient(to bottom, {color:Navigation Background}, {color:Pagination Background});
}

#canvas > .border-right{
    position:absolute;
    right:0;
    top:34px;
    width:34px;
    height:calc(100% - 68px);
    background-image: linear-gradient(to bottom, {color:Navigation Background}, {color:Pagination Background});
}

#header{
    width:100%;
    height:34px;
    position:absolute;
    top:0;
    left:0;
}

#navigation{
    width:100%;
    height:34px;
}

#navigation ul{
    margin:0;
    padding:0;
    display:flex;
}

#navigation li{
    list-style:none;
    width:34px;
    height:34px;
    background:{color:Navigation Background};
    margin-right:6px;
    position:relative;
}

#navigation li a{
    display:block;
    text-align:center;
    color:{color:Navigation Link};
    font-size:16px;
    width:34px;
    height:34px;
    line-height:0;
}

#navigation li a:hover, #search input#search-btn:hover{
    color:{color:Navigation Link Hover};
}

#navigation li a span{
    line-height:34px;
}

.block{
    flex:1;
}

.block2{
    margin-right:0!important;
}

.mif-mail, .mif-paper-plane{
    font-size:20px;
}

#search input[type="text"]{
    width:20px;
    height:34px;
    margin-left:5px;
    vertical-align:top;
    border:0;
    color:{color:Searchbar Text};
    background:transparent;
}

#search input:focus{
    outline:none;
}

#search input#search-btn{
    border:0;
    font-family:metro;
    font-size:16px;
    vertical-align:top;
    position:absolute;
    top:0;
    right:0;
    width:34px;
    height:34px;
    line-height:0;
    color:{color:Navigation Link};
    background:{color:Navigation Background};
    cursor:pointer;
    transition:color 0.6s;
}

#sidebar{
    width:{text:Sidebar Width}px;
    overflow:auto;
    background:{color:Post Background};
    display:flex;
    flex-direction:column;
    border:10px solid {color:Post Background};
}

.left-sidebar #sidebar{
    border-right:0;
}

.right-sidebar #sidebar{
    order:2;
    border-left:0;
}

#sidebar .inner{
    padding:1.5em;
    margin:auto;
}

#icon{
    margin-bottom:1.5em;
}

#icon img{
    border:5px solid {color:Post Inner Border};
    padding:5px;
    background:{color:Post Background};
    {block:ifSidebarImageWidth}max-width:{text:Sidebar Image Width}px;
    height:auto;{/block:ifSidebarImageWidth}
    display:block;
    margin:0 auto;
}

#sidebar .title{
    text-align:center;
    font-size:{text:Title Font Size}px;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    line-height:1;
    {select:Title Style}
}

#sidebar .description{
    margin-top:1.5em;
}

#sidebar .description:before{
    content:"\f063";
    float:left;
    font-family:metro;
    width:1.9em;
    height:1.9em;
    line-height:1.9em;
    font-size:1.5em;
    text-align:center;
    color:{color:Post Background};
    background:{color:Post Inner Border};
    margin-right:0.5em;
}

#links{
    margin-top:1.5em;
    text-align:center;
}

#links a{
    margin:0 0.25em;
    display:inline-block;
    font-size:{text:Links Font Size}px;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    {select:Title Style}
    line-height:1.2;
}

#content{
    flex:1;
    background:rgba({RGBcolor:Content Background},{select:Content Opacity});
    overflow:auto;
    border:10px solid {color:Post Background};
}

#container{
    padding:20px;
}

.posts{
    position:relative;
    margin:{text:Post Spacing}px auto;
    max-width:calc({text:Post Width}px + 10px + 3em);
    padding:0 10px;
    border-top:10px solid {color:Post Border};
    border-bottom:30px solid transparent;
    {block:PermalinkPage}border-bottom:10px solid {color:Post Border Gradient};{/block:PermalinkPage}
}

.posts .border-left{
    position:absolute;
    left:0;
    top:0;
    width:10px;
    height:100%;
    background-image: linear-gradient(to bottom, {color:Post Border}, {color:Post Border Gradient});
}

.posts .border-right{
    position:absolute;
    right:0;
    top:0;
    width:10px;
    height:100%;
    background-image: linear-gradient(to bottom, {color:Post Border}, {color:Post Border Gradient});
}

.posts .contents{
    background:{color:Post Background};
    max-width:{text:Post Width}px;
    padding:1.5em;
    margin:5px;
}

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

.post{
    width:100%;
    text-align:{select:Text Align};
}

.posts .contents ol{
    padding-left:1em;
    list-style-position:inside;
}

.posts .contents ul{
    padding-left:1em;
    list-style:none;
}

.post ul li:before, .caption ul li:before{
    content:"▪";
    color:{color:Post Inner Border};
    margin-right:0.5em;
}

.post img, .post iframe{
    display:block;
}

.post.photo img{
    margin:0 auto;
}

.post .title{
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    line-height:1.2;
    margin-bottom:1em;
    text-align:center;
    {select:Title Style}
}

.post .title a{
    font-size:{text:Post Title Font Size}px;
}

.post.video{
    max-width:700px;
    margin:0 auto;
}

.post.photoset img{
    cursor:pointer;
}

.photo-slideshow .count-2 {
    width: calc((100% - {text:Photoset Spacing}px) / 2);
}

.photo-slideshow .count-2:first-child{
     margin-right:{text:Photoset Spacing}px;
}

.photo-slideshow .count-3 {
    width: calc(33.333333% - {text:Photoset Spacing}px * 2 / 3);
    margin-right:{text:Photoset Spacing}px;
}

.photo-slideshow .count-3:last-child{
    margin-right:0;
}

.photo-slideshow .row{
    margin-bottom:{text:Photoset Spacing}px!important;
}

.photo-slideshow .row:last-child{
    margin-bottom:0!important;
}

.read_more{
    display:block;
    border-top:1px dashed {color:Post Inner Border};
    padding-top:0.75em;
    text-align:center;
}

.quote-text{
    font-style:italic;
    font-size:1.5em;
    line-height:1.2;
}

.quote .source{
    margin-top:1em;
    padding-top:1em;
    border-top:1px dashed {color:Post Inner Border};
    text-align:center;
}

.link-container{
    font-size:1.2em;
    line-height:1.2;
}

.post.link .description{
    margin-top:1em;
    padding-top:1em;
    border-top:1px dashed {color:Post Inner Border};
}

.answer, .replies{
    margin-top:1em;
    padding-top:1em;
    border-top:1px dashed {color:Post Inner Border};
    clear:both;
}

.ask-avatar{
    float:left;
    width:4.3em;
    height:4.3em;
    color:{color:Post Background};
    border:3px solid {color:Post Inner Border};
    padding:3px;
    box-sizing:border-box;
    margin-right:0.75em;
}

.ask-avatar img{
    width:100%;
    height:100%;
    display:block;
}

.ask-name{
    font-weight:bold;
}

.answer p{
    margin-bottom:0;
}

.answer p:first-of-type{
    display:inline;
}

.replies:empty{
    display:none;
}

.audio-wrapper{
    position:relative;
    width:100px;
    height:100px;
    border:3px solid {color:Post Inner Border};
    padding:5px;
    margin-right:1em;
}

.audio-player{
    position:absolute;
    top:5px;
    left:5px;
}

.player{
    width:100px;
    height:28px;
    overflow:hidden;
    padding:36px 0;
}

.album-art{
    width:100px;
    height:100px;
    position:absolute;
    visibility:visible;
    opacity:1;
    transition: visibility 0.4s step-start, opacity 0.4s linear;
    top:5px;
    left:5px;
}

.album-art img{
    width:100%;
    height:100%;
}

.post.audio:hover .album-art{
    visibility:hidden;
    opacity:0;
    transition:visibility 0.4s step-end, opacity 0.4s linear;
}

.audio-wrapper, .audio-caption{
    display:inline-block;
    vertical-align:middle;
}

.audio-caption div{
    border-bottom:1px dashed {color:Post Inner Border};
    padding:0.25em 1em;
}

.chat-item{
    margin:0.5em 0;
    padding-bottom:0.5em;
    border-bottom:1px dashed {color:Post Inner Border};
}

.chat .chat-item:last-child{
    margin:0;
    padding:0;
    border:0;
}

.chat span{
    font-weight:bold;
}

.caption{
    margin-top:1.5em;
}

.tags.index{
    margin-top:1.5em;
    padding-top:0.75em;
    line-height:1.2;
    color:{color:Post Inner Border};
    border-top:1px dashed {color:Post Inner Border};
    text-align:center;
    clear:both;
    {block:ifShowTagsOnClick}display:none;{/block:ifShowTagsOnClick}
}

.tags.index a{
    margin-right:0.25em;
}

.footer{
    clear:both;
}

.footer ul{
    margin:0;
    padding:0;
    list-style:none;
}

.footer.index{
    position:absolute;
    width:100%;
    height:30px;
    left:0;
    bottom:-30px;
}

.footer.index ul{
    display:flex;
}

.footer.index li{
    width:30px;
    height:30px;
    margin-right:5px;
    text-align:center;
    background:{color:Post Border Gradient};
    position:relative;
}

.footer.index li a{
    display:block;
    font-size:14px;
    width:30px;
    height:30px;
    line-height:0;
    color:{color:Post Icons};
}

.footer.index li a:hover{
    color:{color:Post Icons Hover};
}

.footer.index li a span{
    line-height:30px;
}

.mif-star-full, .mif-image, .mif-film, .mif-camera{
    font-size:16px;
}

.mif-alarm, .mif-drafts{
    font-size:18px;
}

.mif-quote{
    font-size:22px;
}

.mif-cross{
    font-size:10px;
}

.custom-like-button{
    position:relative;
    width:30px;
    height:30px;
}

.like_button{
    position:absolute;
    top:0;
    left:0;
    width:30px;
    height:30px;
    opacity:0;
    z-index:10;
}

.like_button iframe{
    width:100%!important;
    height:100%!important;
}

.like-button-heart{
    position:absolute;
    top:0;
    left:0;
    z-index:1;
}

.like_button:hover + .like-button-heart{
    color: red;
}

.like_button.liked + .like-button-heart{
    color: red;
}

{block:ifShowTagsOnClick}
.footer.index .show-tags a{
    display:none;
}

.footer.index .show-tags a.active{
    display:block;
}
{/block:ifShowTagsOnClick}

.footer.entry{
    background:{color:Post Background};
    margin:-5px 5px 5px;
    padding:0 1.5em 1.5em;
}

.footer.entry:empty{
    display:none;
}

.footer.entry .li{
    padding-top:0.5em;
}

.footer.entry .li:first-child{
    padding-top:1.5em;
    border-top:1px dashed {color:Post Inner Border};
}

.tags ul{
    display:inline;
    margin:0;
    padding:0;
}

.tags li{
    display:inline;
}

.tags li:after{
    content:", ";
}

.tags li:nth-last-child(2):after{
    content:" and ";
}

.tags li:last-child:after{
    content:"";
}

#notes ol{
    list-style:none;
    margin:1em 0 0;
    padding:0;
}

#notes li{
    margin-top:0.75em;
    border-top:1px dashed {color:Post Inner Border};
    padding-top:0.75em;
}

#notes blockquote{
    margin:1em 0;
}

.avatar_frame img{
    display:inline-block;
    vertical-align:middle;
    margin-right:0.5em;
}

#footer{
    position:absolute;
    width:100%;
    bottom:0;
    left:0;
    height:34px;
}

#pagination{
    display:flex;
}

#pagination ul{
    list-style:none;
    margin:0;
    padding:0;
    {block:IndexPage}{block:ifInfiniteScroll}display:none;{/block:ifInfiniteScroll}{/block:IndexPage}
}

#pagination .li, #pagination li{
    width:34px;
    height:34px;
    background:{color:Pagination Background};
    margin-right:6px;
}

#pagination li{
    float:left;
}

#pagination a{
    display:block;
    text-align:center;
    width:34px;
    height:34px;
    color:{color:Pagination Link};
    font-size:16px;
    line-height:0;
}

#pagination a:hover{
    color:{color:Pagination Link Hover};
}

#pagination a:not(.active){
    opacity:0.5;
    cursor:default;
}

#pagination a span{
    line-height:34px;
}

.clearfix{
    display:block;
    clear:both;
}

#infscr-loading{
    text-align:center;
    font-size:20px;
    color:{color:Post Border Gradient};
}

#infscr-loading img{
    display:none!important;
}

#lightbox{
    top:0;
    left:0;
    width:100%;
    height:100%;
    position:fixed;
    padding:30px 40px;
    box-sizing:border-box;
    z-index:99999;
    display:none;
}

#lightboxbg {
    background:{color:Photoset Background};
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

#lightbox img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    position:relative;
    top:50%;
    left:50%;
    box-shadow:0 0 2px rgba(0,0,0,0.4);
    transform:translate(-50%, -50%);
    cursor:pointer;
}

.arrow-left, .arrow-right{
    color:{color:Photoset Controls};
    position:absolute;
    top:50%;
    margin-top:-20px;
    cursor:pointer;
    font-size:20px;
    width:40px;
    height:40px;
    line-height:0;
    text-align:center;
}

.arrow-left{
    left:50%;
}

.arrow-right{
    right:50%;
}

.arrow-left span, .arrow-right span{
    line-height:40px;
}

.custom-tooltip{
    display: none;
    max-width: 300px;
    font-size: 1em;
    color:{color:Tooltip Text};
    background:{color:Tooltip Background};
    box-shadow:0 0 2px rgba(0,0,0,0.3),0 0 1px rgba(255,255,255,0.5);
    font-family: inherit;
    padding: 0.25em 0.5em;
    z-index:9999;
    border:0;
    border-radius:0;
}

{CustomCSS}
</style>
</head>

<body class="{select:Sidebar Position}-sidebar">
<div id="canvas">
<div class="border-left"></div>
<div class="border-right"></div>
<div id="header">
<div id="navigation">
<ul>
<li class="block block1"></li>
<li><a href="/" title="Index"><span class="mif-home"></span></a></li>
<li><a href="/archive" title="Archive"><span class="mif-folder-open"></span></a></li>
{block:AskEnabled}<li><a href="/ask" title="{AskLabel}"><span class="mif-mail"></span></a></li>{/block:AskEnabled}
{block:SubmissionsEnabled}<li><a href="/submit" title="{SubmitLabel}"><span class="mif-paper-plane"></span></a></li>{/block:SubmissionsEnabled}
<li id="search"><form name="search" action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}"/><input id="search-btn" type="submit" value="" title="Search"/>
</form></li>
<li id="credit"><a href="http://myrtillenne.dreamwidth.org" title="Theme"><span class="mif-paint"></span></a></li>
<li class="block block2"></li>
</ul>
</div>
</div>
<div id="sidebar">
<div class="inner">
{block:ifSidebarImage}<div id="icon"><img src="{image:Sidebar Image}"></div>{/block:ifSidebarImage}
<div class="title">{Title}</div>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
<div id="links">
{block:HasPages}{block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}
{block:ifLink1Title}<a href="{text:Link 1 URL}">{text:Link 1 Title}</a>{/block:ifLink1Title}
{block:ifLink2Title}<a href="{text:Link 2 URL}">{text:Link 2 Title}</a>{/block:ifLink2Title}
{block:ifLink3Title}<a href="{text:Link 3 URL}">{text:Link 3 Title}</a>{/block:ifLink3Title}
{block:ifLink4Title}<a href="{text:Link 4 URL}">{text:Link 4 Title}</a>{/block:ifLink4Title}
{block:ifLink5Title}<a href="{text:Link 5 URL}">{text:Link 5 Title}</a>{/block:ifLink5Title}
{block:ifLink6Title}<a href="{text:Link 6 URL}">{text:Link 6 Title}</a>{/block:ifLink6Title}
{block:ifLink7Title}<a href="{text:Link 7 URL}">{text:Link 7 Title}</a>{/block:ifLink7Title}
{block:ifLink8Title}<a href="{text:Link 8 URL}">{text:Link 8 Title}</a>{/block:ifLink8Title}
</div>
</div>
</div>
<div id="content">
<div id="container">
{block:Posts}
<div class="posts" id="{PostID}">
<div class="border-left"></div>
<div class="border-right"></div>
<div class="contents">
{block:Text}
<div class="post text">
{block:Title}
<div class="title"><a href="{Permalink}">{Title}</a></div>
{/block:Title}
<div class="text-body">{Body}</div>
</div>
{/block:Text}
{block:Photo}
<div class="post photo">
{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>{LinkCloseTag}
</div>
{/block:Photo}
{block:Panorama}
<div class="post panorama">
{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
{LinkCloseTag}
</div>
{/block:Panorama}
{block:Photoset}
<div class="post photoset"><div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-HighRes}" width="{PhotoWidth-HighRes}" height="{PhotoHeight-HighRes}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"{block:Caption} title="{Caption}" alt="{Caption}"{/block:Caption} /></div></div>{/block:Photos}</div></div>
{/block:Photoset}
{block:Quote}
<div class="post quote"><div class="quote-text">{Quote}</div>
{block:Source}
<div class="source">{Source}</div>
{/block:Source}
</div>
{/block:Quote}
{block:Link}
<div class="post link">
<div class="link-container"><a href="{URL}" class="link" {Target}>{Name}</a></div>
{block:Description}<div class="description">{Description}
</div>{/block:Description}
</div>
{/block:Link}
{block:Chat}
<div class="post chat">
{block:Title}<div class="title"><a href="{Permalink}">{Title}</a></div>{/block:Title}
{block:Lines}
<div class="chat-item {Alt} user_{UserNumber}">
{block:Label}<span class="label">{Label}</span>{/block:Label}
{Line}
</div>{/block:Lines}
</div>
{/block:Chat}
{block:Video}
<div class="post video">{Video-700}</div>
{/block:Video}
{block:Audio}
<div class="post audio"><div class="audio-wrapper">{block:AudioPlayer}<div class="audio-player"><div class="player">{AudioPlayer}</div></div>{/block:AudioPlayer}{block:AlbumArt}<div class="album-art"><img src="{AlbumArtURL}" /></div>{/block:AlbumArt}</div>
<div class="audio-caption">
{block:TrackName}<div class="song">Track: {TrackName}</div>{/block:TrackName}
{block:Artist}<div class="artist">Artist: {Artist}</div>{/block:Artist}
{block:Album}<div class="album">Album: {Album}</div>{/block:Album}
</div>
</div>
{/block:Audio}
{block:Answer}
<div class="post ask">
<div class="question"><div class="ask-avatar"><img src="{AskerPortraitURL-128}" /></div><span class="ask-name">{Asker} asked: </span>{Question}</div>
{block:Answerer}
<div class="answer"><div class="ask-avatar"><img src="{AnswererPortraitURL-128}" /></div><span class="ask-name">{Answerer} answered: </span>{Answer}</div>
{/block:Answerer}
<div class="replies">{Replies}</div>
</div>
{/block:Answer}
<div class="clearfix"></div>

{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{block:IndexPage}{block:HasTags}<div class="tags index">{block:Tags}.<a href="{TagURL}">{Tag}</a> {/block:Tags}</div>{/block:HasTags}{/block:IndexPage}
</div>

{block:IndexPage}<div class="footer index">
<ul>
<li class="block block1"></li>
{block:Photo}<li><a href="{Permalink}" title="View post"><span class="mif-image"></span></a></li>{/block:Photo}
{block:Photoset}<li><a href="{Permalink}" title="View post"><span class="mif-images"></span></a></li>{/block:Photoset}
{block:Video}<li><a href="{Permalink}" title="View post"><span class="mif-film"></span></a></li>{/block:Video}
{block:Audio}<li><a href="{Permalink}" title="View post"><span class="mif-music"></span></a></li>{/block:Audio}
{block:Text}<li><a href="{Permalink}" title="View post"><span class="mif-pencil"></span></a></li>{/block:Text}
{block:Link}<li><a href="{Permalink}" title="View post"><span class="mif-link"></span></a></li>{/block:Link}
{block:Chat}<li><a href="{Permalink}" title="View post"><span class="mif-bubbles"></span></a></li>{/block:Chat}
{block:Quote}<li><a href="{Permalink}" title="View post"><span class="mif-quote"></span></a></li>{/block:Quote}
{block:Answer}<li><a href="{Permalink}" title="View post"><span class="mif-drafts"></span></a></li>{/block:Answer}
{block:Panorama}<li><a href="{Permalink}" title="View post"><span class="mif-camera"></span></a></li>{/block:Panorama}
<li><a href="{Permalink}" title="{DayOfMonth} {Month} {Year}"><span class="mif-alarm"></span></a></li>
{block:NoteCount}<li><a href="{Permalink}#notes" title="{NoteCountWithLabel}"><span class="mif-star-full"></span></a></li>{/block:NoteCount}
{block:ifShowTagsOnClick}{block:HasTags}<li class="show-tags"><a href="#" class="show active" title="View tags"><span class="mif-tag"></span></a><a href="#" class="hide" title="Hide tags"><span class="mif-cross"></span></a></li>{/block:HasTags}{/block:ifShowTagsOnClick}
{block:RebloggedFrom}<li><a href="{ReblogParentURL}" title="Reblogged from {ReblogParentName}"><img src="{ReblogParentPortraitURL-40}" /></a></li>
<li><a href="{ReblogRootURL}" title="Originally by {ReblogRootName}"><img src="{ReblogRootPortraitURL-40}" /></a></li>{/block:RebloggedFrom}
<li class="custom-like-button" title="Like">{LikeButton}<a class="like-button-heart"><span class="mif-heart"></span></a></li>
<li><a href="{ReblogURL}" title="Reblog"><span class="mif-loop2"></span></a></li>
<li class="block block2"></li>
</ul>
</div>{/block:IndexPage}
{block:PermalinkPage}
<div class="footer entry">
{block:HasTags}<div class="li tags">Tagged with <ul>{block:Tags}<li><a href="{TagURL}">{Tag}</a></li>{/block:Tags}</ul></div>{/block:HasTags}
{block:Date}<div class="li date">Posted on {DayOfMonth} {Month} {Year} at {24Hour}:{Minutes} ({TimeAgo})</div>{/block:Date}
{block:RebloggedFrom}<div class="li post-source">Reblogged from <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a>, originally posted by <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a></div>{/block:RebloggedFrom}
{block:NoteCount}<div class="li note-count">Has {NoteCountWithLabel}</div>{/block:NoteCount}
{block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}
</div>
{/block:PermalinkPage}
</div>
{/block:Posts}
</div>
</div>
<div id="footer">
<div id="pagination">
<div class="li block block1"></div>
{block:Pagination}
<ul>
<li class="previous"><a{block:PreviousPage} href="{PreviousPage}" class="active" title="Previous page"{/block:PreviousPage}><span class="mif-arrow-left"></span>
</a></li>
<li class="next"><a{block:NextPage} href="{NextPage}" class="active" title="Next page"{/block:NextPage}><span class="mif-arrow-right"></span>
</a></li>
</ul>
{block:ifInfiniteScroll}<div class="li load-more"><a href="#" class="active" title="Load more posts"><span class="mif-arrow-down"></span></a></div>{/block:ifInfiniteScroll}
{/block:Pagination}
{block:PermalinkPagination}
<ul>
<li class="next"><a{block:NextPost} href="{NextPost}" class="active" title="Previous post"{/block:NextPost}><span class="mif-arrow-left"></span></a></li>
<li class="previous"><a{block:PreviousPost} href="{PreviousPost}" class="active" title="Next post"{/block:PreviousPost}><span class="mif-arrow-right"></span></a></li>
</ul>
{/block:PermalinkPagination}
<div class="li top"><a href="#"><span class="mif-arrow-up"></span></a></div>
<div class="li block block2"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://static.tumblr.com/vywm3oc/QT1og4esa/pxuphotoset.js"></script>
{block:ifInfiniteScroll}<script src="https://static.tumblr.com/vywm3oc/toFo5s9sz/jquery.infinitescroll.min.js"></script>{/block:ifInfiniteScroll}
<script>

$(function(){
    
    $('.photo-slideshow').pxuPhotoset({
        lightbox: false,
        rounded: false,
        gutter: '0px',
        photoset: '.photo-slideshow',
        photoWrap: '.photo-data',
        photo: '.pxu-photo'
   });
    
    var postSize;
    var newSize;
    var width;
    var height;
    var ratio;
    var newHeight;

RESOURCES

photoset grid by Pixel Union
icon font by Metro UI CSS
custom tooltips by JQuery Foundation
audio player tutorial by Roxie
infinite scroll by Paul Irish
images used in previews from Unsplash

Journal layouts

Painting

Painting

Welcome!

Terms of use