2017-06-05

FEATURES

300 - 800px wide posts
1 - 4 columns
popup menu containing search, description and links
navigation links, page links and 8 extra links
full header on first page (optional)
subtitle and header text (optional)
unnested captions (optional)
like and reblog links on index page
pagination or infinite scroll with manual load
font size and google fonts of your choice
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://cdnjs.cloudflare.com/ajax/libs/metro/3.0.17/css/metro-icons.css">
<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">
{block:Description}
<meta name="description" content="{MetaDescription}">
{/block:Description}
<meta name="image:Background" content="https://static.tumblr.com/8254b6bd7ab5249ffde52e13851e06d1/edqql3l/3OAoqzhjq/tumblr_static_a81x9pgqq348sw0wg44084gw8.jpg">
<meta name="color:Background" content="#f2f2f2">
<meta name="color:Gradient 1" content="#83bfd6">
<meta name="color:Gradient 2" content="#ddd0a2">
<meta name="color:Text" content="#44636a">
<meta name="color:Link" content="#3f9bbe">
<meta name="color:Link Hover" content="#d4b132">
<meta name="color:Navigation Link" content="#f6f6f6">
<meta name="color:Navigation Link Hover" content="#fff">
<meta name="color:Title" content="#f6f6f6">
<meta name="color:Content Background" content="#f6f6f6">
<meta name="color:Post Background" content="#fff">
<meta name="color:Post Gradient 1" content="#d4b132">
<meta name="color:Post Gradient 2" content="#3f9bbe">
<meta name="color:Post Inner Border" content="#e7e7e7">
<meta name="color:Photoset Background" content="#fff">
<meta name="color:Photoset Controls" content="#44636a">
<meta name="color:Tooltip Background" content="#fff">
<meta name="color:Tooltip Text" content="#44636a">
<meta name="color:Scrollbar" content="#83bfd6">
<meta name="color:Scrollbar Track" content="#f2f2f2">
<meta name="select:Main Font" content="georgia, serif" title="Georgia">
<meta name="select:Main Font" content="arial, sans-serif" title="Arial">
<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:Text Align" content="left" title="left">
<meta name="select:Text Align" content="justify" title="justify">
<meta name="select:Background Image Style" content="cover" title="cover">
<meta name="select:Background Image Style" content="auto" title="repeat">
<meta name="select:Header Content Position" content="flex-end" title="bottom">
<meta name="select:Header Content Position" content="flex-start" title="top">
<meta name="select:Header Content Position" content="center" title="middle">
<meta name="select:Content Opacity" content="0.8" title="80%">
<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.5" title="50%">
<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.9" title="90%">
<meta name="select:Content Opacity" content="1.0" title="100%">
<meta name="select:Post Size" content="300" title="300px">
<meta name="select:Post Size" content="350" title="350px">
<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="select:Post Size" content="600" title="600px">
<meta name="select:Post Size" content="650" title="650px">
<meta name="select:Post Size" content="700" title="700px">
<meta name="select:Post Size" content="750" title="750px">
<meta name="select:Post Size" content="800" title="800px">
<meta name="select:Column Number" content="1" title="1 column">
<meta name="select:Column Number" content="2" title="2 columns">
<meta name="select:Column Number" content="3" title="3 columns">
<meta name="select:Column Number" content="4" title="4 columns">
<meta name="text:Subtitle" content="Subtitle or short description">
<meta name="text:Header Text" content="">
<meta name="text:Main Google Font" content="Lora">
<meta name="text:Secondary Google Font" content="Macondo">
<meta name="text:Body Font Size" content="13">
<meta name="text:Navigation Font Size" content="15">
<meta name="text:Post Title Font Size" content="18">
<meta name="text:Post Spacing" content="20">
<meta name="text:Photoset Spacing" content="2">
<meta name="text:Navigation Link 1 Title" content="">
<meta name="text:Navigation Link 1 URL" content="http://">
<meta name="text:Navigation Link 2 Title" content="">
<meta name="text:Navigation Link 2 URL" content="http://">
<meta name="text:Navigation Link 3 Title" content="">
<meta name="text:Navigation Link 3 URL" content="http://">
<meta name="text:Navigation Link 4 Title" content="">
<meta name="text:Navigation Link 4 URL" content="http://">
<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="if:Show Header" content="1">
<meta name="if:Show Caption" content="1">
<meta name="if:Unnest Caption" content="1">
<meta name="if:Show Tags" content="1">
<meta name="if:Infinite Scroll" content="0">
<meta name="if:Inverted Tumblr Controls" content="1">

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

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

::-webkit-scrollbar-thumb{
    background:{color:Scrollbar};
    border:2px solid {color:Scrollbar Track};
}

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

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

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

a img{
    border:0;
}

pre{
    white-space:pre-wrap;
}

iframe#tumblr_controls, .iframe-controls--desktop{
    margin-top:3px;
    {block:ifInvertedTumblrControls}
    -webkit-filter:invert(100%);
    filter:invert(100%);
    {/block:ifInvertedTumblrControls}
    margin-right:25px;
    opacity:0.7;
}

#canvas{
    width:100%;
    height:100%;
    border:30px solid transparent;
    padding:3em;
    box-sizing:border-box;
    position:fixed;
    top:0;
    left:0;
    font-size:{text:Navigation Font Size}px;
}

#topbar, #bottombar{
    position:absolute;
    left:0;
    width:100%;
    z-index:9;
}

#topbar{
    top:0;
}

#bottombar{
    bottom:0;
}

#leftbar, #rightbar{
    position:absolute;
    top:3em;
    width:3em;
    height:calc(100% - 6em);
    z-index:9;
}

#leftbar{
    left:0;
    background-color:{color:Gradient 2};
    background-image:linear-gradient(to bottom, {color:Gradient 1}, {color:Gradient 2});
}

#rightbar{
    right:0;
    background-color:{color:Gradient 2};
    background-image:linear-gradient(to top, {color:Gradient 1}, {color:Gradient 2});
    display:flex;
    justify-content:center;
    flex-direction:column;
}

#topbar:before, #leftbar:before, #rightbar:before, #bottombar:before{
    content:"";
    width:3em;
    height:3em;
    position:absolute;
    z-index:-1;
}

#topbar:before{
    background:{color:Gradient 1};
    top:0;
    left:0;
}

#leftbar:before{
    background:{color:Gradient 2};
    left:0;
    bottom:-3em;
}

#rightbar:before{
    background:{color:Gradient 2};
    top:-3em;
    right:0;
}

#bottombar:before{
    background:{color:Gradient 1};
    right:0;
    bottom:0;
}

#navbar{
    padding:0.75em 0;
    line-height:1.5;
    text-align:center;
    margin:0 3em;
    background-color:{color:Gradient 1};
    background-image:linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
}

#navbar ul{
    list-style:none;
    margin:0;
    padding:0;
    text-transform:uppercase;
}

#navbar li{
    display:inline-block;
    padding:0 0.5em;
}

#navbar a{
    color:{color:Navigation Link};
}

#navbar a:hover{
    color:{color:Navigation Link Hover};
}

#titles-wrapper{
    padding:0.75em 0;
    line-height:1.5;
    text-align:center;
    margin:0 3em;
    background-color:{color:Gradient 1};
    background-image:linear-gradient(to left, {color:Gradient 1}, {color:Gradient 2});
    color:{color:Title};
}

#bottombar .title{
    text-transform:uppercase;
    padding:0 0.25em;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
}

#subtitle{
    padding:0 0.25em;
}

#subtitle:before{
    content:"[ ";
}

#subtitle:after{
    content:" ]";
}

#subtitle:empty{
    display:none;
}

#top{
    display:none;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    line-height:1.5;
}

#top a{
    display:block;
    padding:0.5em;
    width:0.75em;
    word-wrap:break-word;
    text-transform:uppercase;
    font-size:0.75em;
    text-align:center;
    margin:0 auto;
    color:{color:Navigation Link};
}

#menu-wrapper{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:10;
    display:none;
    font-size:{text:Body Font Size}px;
}

#menu{
    display:flex;
    width:100%;
    height:100%;
    align-items:center;
}

#menu .inner{
    width:500px;
    min-width:500px;
    position:relative;
    padding:2px;
    margin:auto;
    z-index:1;
}

#menu .inner:before, #menu .inner:after {
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    bottom:0;
    left:0;
    z-index:-1;
}

#menu .inner:before{
    background-position:0 0, 0 100% ;
    background-repeat:no-repeat;
    background-size:100% 2px;
    background-image:linear-gradient(to right, {color:Post Gradient 1}, {color:Post Gradient 2}), linear-gradient(to left, {color:Post Gradient 1}, {color:Post Gradient 2});;
}

#menu .inner:after{
    background-position:0 0, 100% 0;
    background-repeat:no-repeat;
    background-size:2px 100%;
    background-image:linear-gradient(to bottom, {color:Post Gradient 1}, {color:Post Gradient 2}), linear-gradient(to top, {color:Post Gradient 1}, {color:Post Gradient 2});;
}

#menu .contents{
    margin:3px;
    padding:5px;
    background:{color:Post Background};
}

#description{
    margin:1.2em;
    text-align:{select:Text Align};
}

#links{
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    list-style:none;
    text-align:center;
}

#links:empty{
    display:none;
}

#links li{
    min-width:25%;
    line-height:1.5;
    flex-grow:1;
}

#links li a, #search{
    margin:2px;
    display:block;
    border:1px solid {color:Post Inner Border};
    padding:0.25em 0.5em;
}

#search{
    font-size:1em;
    position:relative;
}

#search input{
    background:transparent;
    border:0;
    font-size:1em;
    overflow:visible;
}

#search input[type="text"]{
    width:100%;
    height:1.5em;
    color:{color:Text};
    font-family:{block:ifMainGoogleFont}{text:Main Google Font}, {/block:ifMainGoogleFont}{select:Main Font};
    padding:0;
}

#search input[type="submit"]{
    color:{color:Link};
    font-family:metro;
    cursor:pointer;
    position:absolute;
    right:0;
    margin-top:0.2em;
    padding:0 0.5em;
}

#search input:focus{
    outline:none;
}

#menu #close{
    margin:1.2em;
    text-align:center;
}

#menu #close a{
    text-transform:uppercase;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
}

#content{
    overflow:auto;
    height:100%;
    border:3px solid {color:Background};
    box-sizing:border-box;
    background-image:url({image:Background});
    background-size:{select:Background Image Style};
    background-position:center center;
    font-size:{text:Body Font Size}px;
}

{block:ifShowHeader}
#header{
    display:none;
    width:100%;
    height:100%;
    justify-content:{select:Header Content Position};
    flex-direction:column;
    align-items:center;
}

.page1 #header{
    display:flex;
}

#header-content{
    margin:2em auto;
    border:1px double rgba({RGBcolor:Content Background}, {select:Content Opacity});
    padding:2px;
    max-width:300px;
    text-align:center;
}

#header .contents{
    border:3px solid rgba({RGBcolor:Content Background}, {select:Content Opacity});
    background:{color:Post Background};
    background-clip:padding-box;
    padding:1em;
}

#header-text{
    margin-bottom:1em;
}

#header-text:empty{
    display:none;
}

#scroll{
    text-transform:uppercase;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
}
{/block:ifShowHeader}

#content .inner{
    background:rgba({RGBcolor:Content Background}, {select:Content Opacity});
    min-height:100%;
    padding:{text:Post Spacing}px;
    box-sizing:border-box;
}

#container{
    {block:IndexPage}max-width:calc(({select:Post Size}px + 20px + {text:Post Spacing}px * 2) * {select:Column Number});{/block:IndexPage}
    margin:0 auto;
}

#posts{
    margin:0 auto;
}

.post-wrapper{
    float:left;
    margin:{text:Post Spacing}px;
    padding:2px;
    width:calc({select:Post Size}px + 16px);
    {block:PermalinkPage}
    min-width:516px;
    float:none;
    margin:{text:Post Spacing}px auto;
    {/block:PermalinkPage}
    position:relative;
    z-index:1;
}

.post-wrapper:before, .post-wrapper:after {
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    bottom:0;
    left:0;
    z-index:-1;
}

.post-wrapper:before{
    background-position:0 0, 0 100%;
    background-repeat:no-repeat;
    background-size:100% 2px;
    background-image:linear-gradient(to right, {color:Post Gradient 1}, {color:Post Gradient 2}), linear-gradient(to left, {color:Post Gradient 1}, {color:Post Gradient 2});
}

.post-wrapper:after{
    background-position:0 0, 100% 0;
    background-repeat:no-repeat;
    background-size:2px 100%;
    background-image:linear-gradient(to bottom, {color:Post Gradient 1}, {color:Post Gradient 2}), linear-gradient(to top, {color:Post Gradient 1}, {color:Post Gradient 2});
}

.post-wrapper .contents{
    margin:3px;
    padding:5px;
    background:{color:Post Background};
}

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

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

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

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

.post ol, .caption ol{
    padding-left:1em;
    list-style-position:inside;
}

.post ul, .caption 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.text{
    margin:1.2em;
}

.post .title h3{
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    font-size:{text:Post Title Font Size}px;
}

.post.photo img{
    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;
}

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

.question, .answer{
    border:1px solid {color:Post Inner Border};
    margin-bottom:5px;
}

.ask-avatar img{
    width:50px;
    height:50px;
    padding:5px;
    border-bottom:1px solid {color:Post Inner Border};
}

.question .ask-avatar img{
    float:left;
    border-right:1px solid {color:Post Inner Border};
    margin-right:1em;
}

.answer .ask-avatar img{
    float:right;
    border-left:1px solid {color:Post Inner Border};
    margin-left:1em;
}

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

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

.ask-inner{
    margin:1.2em;
}

.replies .text-body{
    margin:1.2em;
}

.replies .text-body:empty{
    display:none;
}

.chat .title{
    margin:0 1.2em;
}

.chat-item{
    padding:0.5em 1.2em;
    border:1px solid transparent;
}

.chat-item.odd{
    border:1px solid {color:Post Inner Border};
}

.chat span{
    font-weight:bold;
}

.quote-text{
    border:1px solid {color:Post Inner Border};
    padding:1.2em;
}

.quote-text p{
    font-size:1.5em;
    font-style:italic;
    margin:0;
}

.source{
    text-align:center;
    margin:1.2em;
}

.link .title{
    border:1px solid {color:Post Inner Border};
    padding:1.2em;
}

.link .title h3{
    margin:0;
}

.link .description{
    margin:1.2em;
}

.audio-wrapper{
    display:flex;
    align-items:center;
    border:1px solid {color:Post Inner Border};
}

.audio-player{
    width:32px;
    min-width:32px;
    height:27px;
    overflow:hidden;
}

.audio-caption{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:110px;
    padding:1em;
    box-sizing:border-box;
    border-left:1px solid {color:Post Inner Border};
    border-right:1px solid {color:Post Inner Border};
}

.album-art{
    min-width:100px;
    height:100px;
    padding:5px;
}

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

.song{
    font-weight:bold;
}

.album{
    font-style:italic;
}

.caption{
    margin:1.2em;
}

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

blockquote.tumblr_parent{
    border:0;
    padding:0;
    background:transparent;
}

blockquote.tumblr_parent .tumblr_blog{
    display:table;
    margin-bottom:1em;
}

.post:not(.quote) .tumblr_blog, .caption .tumblr_blog{
    text-transform:uppercase;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    position:relative;
}

{block:ifNotUnnestCaption}
.post:not(.quote) .tumblr_blog:after, .caption .tumblr_blog:after{
    content:"";
    position:absolute;
    right:-0.25em;
    width:0.25em;
    height:100%;
    background:{color:Post Background};
}
{/block:ifNotUnnestCaption}

.footer{
    clear:both;
}

.footer.index{
    border:1px solid {color:Post Inner Border};
    padding:0.5em 1em;
    margin-top:5px;
}

.footer.index .item:not(.tags){
    margin-right:0.5em;
    text-transform:uppercase;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
}

.custom-like-button{
    position:relative;
    display:inline-block;
}
 
.like_button iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    z-index:10;
}
 
.like_button:hover + .like-button-heart{
    color:{color:Link Hover};
}
 
.like_button.liked + .like-button-heart:before{
    content:"Un";
}

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

.footer.entry{
    margin:1.2em;
}

.footer.entry .item{
    margin:1em 0;
}

.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:0;
    padding:0;
}

#notes li{
    padding:0.5em 1.2em;
    border:1px solid transparent;
}

#notes li:nth-child(odd){
    border:1px solid {color:Post Inner Border};
}

#notes blockquote{
    margin:1em 0 0.5em;
}

#notes .avatar{
    display:inline-block;
    margin-right:0.5em;
    vertical-align:middle;
}

.more_notes_link, .notes_loading{
    display:block;
    text-transform:uppercase;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
}

li.more_notes_link_container{
    border:0!important;
}

.clearfix{
    clear:both;
}

#footer{
    text-align:center;
    padding:{text:Post Spacing}px 0;
    text-transform:uppercase;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
}

#footer:empty{
    display:none;
}

#footer ul{
    margin:0;
    padding:0;
}

#footer li, #load-more{
    display:inline-block;
    margin:0 0.5em;
    padding:1px;
    position:relative;
    z-index:1;
}

#footer li:before, #footer li:after, #load-more:before, #load-more:after{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    bottom:0;
    left:0;
    z-index:-1;
}

#footer li:before, #load-more:before{
    background-position:0 0, 0 100%;
    background-repeat:no-repeat;
    background-size:100% 1px;
    background-image:linear-gradient(to right, {color:Post Gradient 1}, {color:Post Gradient 2}), linear-gradient(to left, {color:Post Gradient 1}, {color:Post Gradient 2});
}

#footer li:after, #load-more:after{
    background-position:0 0, 100% 0;
    background-repeat:no-repeat;
    background-size:1px 100%;
    background-image:linear-gradient(to bottom, {color:Post Gradient 1}, {color:Post Gradient 2}), linear-gradient(to top, {color:Post Gradient 1}, {color:Post Gradient 2});
}

#footer li a, #footer span{
    display:block;
    margin:2px;
    padding:0.25em 1em;
    background:{color:Post Background};
}

.pagination.index{
    {block:ifInfiniteScroll}display:none;{/block:ifInfiniteScroll}
}

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

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

.fade{
    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%);
    -webkit-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{block:ifShowHeader}{block:HomePage} class="page{CurrentPage}"{/block:HomePage}{/block:ifShowHeader}>
<div id="canvas">
<div id="topbar">
<div id="navbar">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/archive">Archive</a></li>
{block:AskEnabled}<li><a href="/ask">{AskLabel}</a></li>{/block:AskEnabled}
{block:SubmissionsEnabled}<li><a href="/submit">{SubmitLabel}</a></li>{/block:SubmissionsEnabled}
{block:ifNavigationLink1Title}<li><a href="{text:Navigation Link 1 URL}">{text:Navigation Link 1 Title}</a></li>{/block:ifNavigationLink1Title}
{block:ifNavigationLink2Title}<li><a href="{text:Navigation Link 2 URL}">{text:Navigation Link 2 Title}</a></li>{/block:ifNavigationLink2Title}
{block:ifNavigationLink3Title}<li><a href="{text:Navigation Link 3 URL}">{text:Navigation Link 3 Title}</a></li>{/block:ifNavigationLink3Title}
{block:ifNavigationLink4Title}<li><a href="{text:Navigation Link 4 URL}">{text:Navigation Link 4 Title}</a></li>{/block:ifNavigationLink4Title}
<li><a class="popbox" href="#" title="Click to open">Menu</a></li>
<li><a href="https://myrtillenne.dreamwidth.org">Theme</a></li>
</ul>
</div>
</div>
<div id="leftbar"></div>
<div id="rightbar"><div id="top"><a href="#">Scroll to top</a></div></div>
<div id="bottombar"><div id="titles-wrapper"><span class="title">{Title}</span><span id="subtitle">{text:Subtitle}</span></div></div>
<div id="menu-wrapper">
<div class="fade"></div>
<div id="menu">
<div class="inner">
<div class="contents">
<div id="search"><form name="search" action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}" placeholder="Search"/><input type="submit" value="" title="Search"/>
</form></div>
{block:Description}
<div id="description">{Description}</div>
{/block:Description}
<ul id="links">
{block:HasPages}{block:Pages}<li><a href="{URL}">{Label}</a></li>{/block:Pages}{/block:HasPages}
{block:ifLink1Title}<li><a href="{text:Link 1 URL}">{text:Link 1 Title}</a></li>{/block:ifLink1Title}
{block:ifLink2Title}<li><a href="{text:Link 2 URL}">{text:Link 2 Title}</a></li>{/block:ifLink2Title}
{block:ifLink3Title}<li><a href="{text:Link 3 URL}">{text:Link 3 Title}</a></li>{/block:ifLink3Title}
{block:ifLink4Title}<li><a href="{text:Link 4 URL}">{text:Link 4 Title}</a></li>{/block:ifLink4Title}
{block:ifLink5Title}<li><a href="{text:Link 5 URL}">{text:Link 5 Title}</a></li>{/block:ifLink5Title}
{block:ifLink6Title}<li><a href="{text:Link 6 URL}">{text:Link 6 Title}</a></li>{/block:ifLink6Title}
{block:ifLink7Title}<li><a href="{text:Link 7 URL}">{text:Link 7 Title}</a></li>{/block:ifLink7Title}
{block:ifLink8Title}<li><a href="{text:Link 8 URL}">{text:Link 8 Title}</a></li>{/block:ifLink8Title}
</ul>
<div id="close"><a href="#">Close</a></div>
</div>
</div>
</div>
</div>
<div id="content">
{block:ifShowHeader}{block:HomePage}<div id="header">
<div id="header-content">
<div class="contents">
<div id="header-text">{text:Header Text}</div>
<div id="scroll"><a href="#">Scroll to posts</a></div>
</div>
</div>
</div>{/block:HomePage}{/block:ifShowHeader}
<div class="inner">
<div id="container">
<div id="posts">
{block:Posts}
<div class="post-wrapper" id="{PostID}">
<div class="contents">
{block:Text}
<div class="post text">
{block:Title}
<div class="title"><h3><a href="{Permalink}">{Title}</a></h3></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 class="clearfix"></div>
</div>
{/block:Photoset}
{block:Quote}
<div class="post quote"><div class="quote-text"><p>"{Quote}"</p></div>{block:Source}
<div class="source">{Source}</div>
{/block:Source}
</div>
{/block:Quote}
{block:Link}
<div class="post link">
<div class="title"><h3><a href="{URL}" {Target}>{Name}</a></h3></div>
{block:Description}<div class="description"><div class="text-body">{Description}</div></div>{/block:Description}
</div>
{/block:Link}
{block:Chat}
<div class="post chat">
{block:Title}
<div class="title"><h3><a href="{Permalink}">{Title}</a></h3></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}<div class="audio-caption">{block:TrackName}<div class="song">{TrackName}</div>{/block:TrackName}{block:Artist}<div class="artist">{Artist}</div>{/block:Artist}{block:Album}<div class="album">{Album}</div>{/block:Album}</div>{block:AlbumArt}<div class="album-art"><img src="{AlbumArtURL}" /></div>{/block:AlbumArt}
</div></div>
{/block:Audio}
{block:Answer}
<div class="post ask">
<div class="question"><div class="ask-avatar"><img src="{AskerPortraitURL-64}" /></div><div class="ask-inner"><span class="ask-name">{Asker}</span> asked: {Question}</div><div class="clearfix"></div></div>
{block:Answerer}
<div class="answer"><div class="ask-avatar"><img src="{AnswererPortraitURL-64}" /></div><div class="ask-inner"><span class="ask-name">{Answerer}</span> answered: {Answer}</div><div class="clearfix"></div></div>
{/block:Answerer}
<div class="replies"><div class="text-body">{Replies}</div></div>
</div>
{/block:Answer}

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

{block:IndexPage}
<div class="footer index">
{block:Date}<span class="item"><a href="{Permalink}" title="{TimeAgo} - view post">{DayOfMonth} {ShortMonth} {ShortYear}</a></span> {/block:Date}
{block:NoteCount}<span class="item"><a href="{Permalink}#notes" title="{NoteCountWithLabel} - view notes">{NoteCount} N</a></span> {/block:NoteCount}
{block:RebloggedFrom}<span class="item"><a href="{ReblogParentURL}" title="{ReblogParentName}">Via</a></span> <span class="item"><a href="{ReblogRootURL}" title="{ReblogRootName}">Src</a></span> {/block:RebloggedFrom}
<div class="item custom-like-button">{LikeButton}<a class="like-button-heart">Like</a></div>
<span class="item"><a href="{ReblogURL}">Reblog</a></span> 
{block:ifShowTags}{block:HasTags}<span class="item tags">{block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}</span>{/block:HasTags}{/block:ifShowTags}
</div>
{/block:IndexPage}
{block:PermalinkPage}
<div class="footer entry">
{block:HasTags}<div class="item tags">Tagged with <ul>{block:Tags}<li><a href="{TagURL}">{Tag}</a></li>{/block:Tags}</ul></div>{/block:HasTags}
{block:Date}<div class="item">Posted on {DayOfMonth} {Month} {Year} at {24Hour}:{Minutes} ({TimeAgo})</div>{/block:Date}
{block:RebloggedFrom}<div class="item">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="item">Has {NoteCountWithLabel}</div>{/block:NoteCount}
</div>
{/block:PermalinkPage}
{block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}
</div>
</div>
{/block:Posts}
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
<div id="footer">
{block:Pagination}
<ul class="pagination index">
{block:PreviousPage}
<li class="previous"><a href="{PreviousPage}">Previous</a></li>{/block:PreviousPage}
{block:JumpPagination length="5"}{block:CurrentPage}<li class="current_page"><span>{PageNumber}</span></li>
{/block:CurrentPage}{block:JumpPage}<li class="jump_page"><a href="{URL}">{PageNumber}</a></li>{/block:JumpPage}{/block:JumpPagination}
{block:NextPage}
<li class="next"><a href="{NextPage}">Next</a></li>
{/block:NextPage}
</ul>
{block:ifInfiniteScroll}<div id="load-more"><span><a href="#">Load more posts</a></span></div>{/block:ifInfiniteScroll}
{/block:Pagination}
{block:PermalinkPagination}
<ul class="pagination entry">
{block:NextPost}
<li class="next"><a href="{NextPost}">Previous</a></li>
{/block:NextPost}
{block:PreviousPost}
<li class="previous"><a href="{PreviousPost}">Next</a></li>
{/block:PreviousPost}
</ul>
{/block:PermalinkPagination}
</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>
<script src="https://static.tumblr.com/vywm3oc/iGoograd4/masonry.pkgd.min.js"></script>
<script src="https://static.tumblr.com/vywm3oc/uwVograkb/imagesloaded.pkgd.min.js"></script>
{block:ifInfiniteScroll}<script src="https://static.tumblr.com/vywm3oc/toFo5s9sz/jquery.infinitescroll.min.js"></script>{/block:ifInfiniteScroll}
{block:ifUnnestCaption}<script src="https://static.tumblr.com/edqql3l/dA3oqvg04/unnest.min.js"></script>{/block:ifUnnestCaption}
<script type="text/javascript">
$(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;
   
   function resizeVideo(){
        if ({select:Post Size} < 700){
            newSize = $('.post.video').width();
            width = $(this).width();
            height = $(this).height();
            ratio = newSize / width;
            newHeight = Math.floor(height * ratio);
            $(this).attr({'width': newSize, 'height' : newHeight});
            if ($(this).hasClass('tumblr_video_iframe')){
                $(this).parent().css({'width': newSize, 'height' : newHeight});
            }
        }
    }
    
    function resizeEmbed(){
        postSize = $(this).closest('.tmblr-embed').width();
        width = $(this).width();
        if (postSize < width){
            newSize = postSize;
            height = $(this).height();
            ratio = newSize / width;
            newHeight = Math.floor(height * ratio);
            $(this).attr({'width': newSize, 'height' : newHeight});
        }
    }
    
    $('.video iframe').each(resizeVideo);
    $('.tmblr-embed iframe').each(resizeEmbed);
    
    var content = $('#content');
    var container = $('#posts');
    
    function contentGrid(){
        if ({select:Column Number} > 1){
            container.imagesLoaded(function(){
                container.masonry({
                    itemSelector : '.post-wrapper',
                    fitWidth: true
                });
            });
        }
    }
    
    {block:IndexPage}
    contentGrid();
    
    {block:ifInfiniteScroll}
    loadMore = $('#load-more');
    
    container.infinitescroll({
        navSelector: '.pagination',
        nextSelector: '.pagination .next a',
        itemSelector: '.post-wrapper',
        loading: {
            finishedMsg: '',
            img: '',
            msgText: '<span class="mif-spinner3 mif-ani-spin"></span>'
        },
        errorCallback: function(){ loadMore.html('<span>No more posts to show.</span>').delay(500).animate({'opacity' : 0}); $('#footer').delay(1000).slideUp();}
    },
    function(newElements){
        var newElems = $(newElements);
        var newPhotoset = newElems.find('.photo-slideshow');
        newPhotoset.each(function(){
            $(this).pxuPhotoset({
                lightbox: false,
                rounded: false,
                gutter: '0px',
                photoset: '.photo-slideshow',
                photoWrap: '.photo-data',
                photo: '.pxu-photo'
            });
        });
        newPhotoset.on('click', 'img', lightbox);
        newElems.find('.video iframe').each(resizeVideo);
        newElems.find('.tmblr-embed iframe').each(resizeEmbed);
        newElems.css({ opacity: 0 });
        newElems.imagesLoaded(function(){
            newElems.animate({ opacity: 1 });
            if ({select:Column Number} > 1){
                container.masonry( 'appended', newElems, true );
            }
        });
        {block:ifUnnestCaption}
        newElems.unnest({
            yourCaption: '.caption, .text-body',
            tumblrAvatars: false,
            usernameColon: false
        });
        {/block:ifUnnestCaption}
        newElems.find('iframe.tumblr_audio_player').load(function(){
            $(this).contents().find('head').append($('<style "type=text/css">.audio-player{background:{color:Post Background}!important;color:{color:Text}!important;}</style>'));
        });
        var newElemsIDs = newElems.map(function(){ 
            return this.id; 
        }).get();
        Tumblr.LikeButton.get_status_by_post_ids(newElemsIDs);
    });
    $(window).off('.infscr');
    loadMore.on('click', 'a', function(e){
        e.preventDefault();
        container.infinitescroll('retrieve');
    });
    {/block:ifInfiniteScroll}
    {/block:IndexPage}
    
    $('.photo-slideshow').on('click', 'img', lightbox);
    
    var imagesURLs = [];
    var mainImgEl;
    var arrowLeft;
    var arrowRight;
    var crtImgURL;
    var crtImgIndex;
    
    function lightbox(){
        $(this).closest('.photo-slideshow').find('img').each(function(){
            imagesURLs.push($(this).attr('data-highres'));
        });
        
        $('body').append('<div id="lightbox"><div class="fade"></div><div class="arrow-left"><span class="mif-arrow-left"></span></div><div class="arrow-right"><span class="mif-arrow-right"></span></div><img id="mainImage" /></div>');
        
        mainImgEl = $('#mainImage');
        arrowLeft = $('.arrow-left');
        arrowRight = $('.arrow-right');
        
        crtImgURL = $(this).attr('data-highres');
        crtImgIndex = $.inArray(crtImgURL, imagesURLs);
        
        mainImgEl.attr('src', crtImgURL);
        $('#lightbox').fadeIn();
        
        mainImgEl.load(placeArrows);
        placeArrows();
    }
        
    $('body').on('click', '#mainImage', function(){
        window.open(imagesURLs[crtImgIndex], '_blank', 'toolbar=0,location=0,menubar=0,scrollbars=1');
    });
        
    $('body').on('click', '.arrow-left', function(){
        if (crtImgIndex == 0){
            crtImgIndex = imagesURLs.length;
        }
        mainImgEl.attr('src', imagesURLs[crtImgIndex -= 1]).load(placeArrows);
        placeArrows();
    });
        
    $('body').on('click', '.arrow-right', function(){
        if (crtImgIndex == (imagesURLs.length - 1)){
            crtImgIndex = -1;
        }
        mainImgEl.attr('src', imagesURLs[crtImgIndex += 1]).load(placeArrows);
        placeArrows();
    });
        
    $(window).on('resize', function(){
        if (imagesURLs.length){
            placeArrows();
        }
    });
        
    function placeArrows(){
        var arrowMargin = mainImgEl.width()/2 + 40;
        arrowLeft.css({
            'margin-left' : -arrowMargin
        });
        arrowRight.css({
            'margin-right' : -arrowMargin
        });
    }
    
    $('body').on('click', '#lightbox .fade', function() {
        $('#lightbox').fadeOut(function() {
            $('#lightbox').remove();
        });
        imagesURLs = [];
    });
    
    var $top = $('#top');
    
    content.on('scroll', function(){
        if ($(this).scrollTop() > $(this).height()) {
            $top.fadeIn();
        } else {
            $top.fadeOut();
        }
    });
    
    $top.on('click', 'a', function(e){
        e.preventDefault();
        content.animate({scrollTop : 0},600);
    });

});
</script>
</body>
</html>

RESOURCES

photoset grid by Pixel Union
custom tooltips by JQuery Foundation
icon font by Metro UI CSS
audio player tutorial by Roxie
unnest captions script by magnusthemes and neothm
masonry and images loaded by David DeSandro
infinite scroll by Paul Irish

2017-06-05

Gallery