myrtillenne | Brittle (Reply)

FEATURES

400 - 700px wide posts
4 extra navigation links with custom icons (choose from here)
page links and/or 8 links in popup
show/hide tags on index page (optional)
like and reblog links on index page
pagination or infinite scroll (with optional 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="">
<meta name="image:Sidebar Image" content="https://static.tumblr.com/10d56bbeadbb59e833c19303588ac0c7/edqql3l/Qh3os2lss/tumblr_static_65lzhsa2pgg0cc44800s844w.jpg">
<meta name="color:Background" content="#f4f1e2">
<meta name="color:Title" content="#565041">
<meta name="color:Title Shadow 1" content="#fff">
<meta name="color:Title Shadow 2" content="#f4cd79">
<meta name="color:Sidebar Background" content="#fff">
<meta name="color:Sidebar Text" content="#544956">
<meta name="color:Sidebar Link" content="#9956b6">
<meta name="color:Sidebar Link Hover" content="#DC9E1F">
<meta name="color:Sidebar Link Border" content="#ede5f3">
<meta name="color:Sidebar Borders" content="#b4ac9a">
<meta name="color:Sidebar Border Effect" content="#c030fe">
<meta name="color:Description Background" content="#fffef8">
<meta name="color:Description Border" content="#f2e8d0">
<meta name="color:Navigation Link" content="#fffef8">
<meta name="color:Navigation Link Hover" content="#fff">
<meta name="color:Navigation Link Background" content="#ceafdc">
<meta name="color:Navigation Link Background Hover" content="#f4cd79">
<meta name="color:Post Background" content="#fff">
<meta name="color:Post Text" content="#565041">
<meta name="color:Post Link" content="#DC9E1F">
<meta name="color:Post Link Hover" content="#9956b6">
<meta name="color:Post Title" content="#565041">
<meta name="color:Post Title Shadow 1" content="#fff">
<meta name="color:Post Title Shadow 2" content="#f4cd79">
<meta name="color:Post Borders" content="#b4ac9a">
<meta name="color:Post Border Effect" content="#c030fe">
<meta name="color:Post Background Alt" content="#fffef8">
<meta name="color:Post Border Alt" content="#f2e8d0">
<meta name="color:Post Text Alt" content="#544956">
<meta name="color:Post Link Alt" content="#9956b6">
<meta name="color:Post Link Hover Alt" content="#DC9E1F">
<meta name="color:Blockquote Border" content="#ede5f3">
<meta name="color:Post Icons" content="#fffef8">
<meta name="color:Post Icons Hover" content="#fff">
<meta name="color:Post Icons Background" content="#ceafdc">
<meta name="color:Post Icons Background Hover" content="#f4cd79">
<meta name="color:Photoset Background" content="#fff">
<meta name="color:Photoset Controls" content="#565041">
<meta name="color:Tooltip Background" content="#fff">
<meta name="color:Tooltip Text" content="#565041">
<meta name="color:Scrollbar" content="#ceafdc">
<meta name="color:Scrollbar Track" content="#fff">
<meta name="color:Description Scrollbar" content="#ede5f3">
<meta name="color:Description Scrollbar Track" content="#fffef8">
<meta name="text:Main Google Font" content="Lora">
<meta name="text:Secondary Google Font" content="Great Vibes">
<meta name="text:Subtitle" content="">
<meta name="text:Sidebar Image Width" content="280">
<meta name="text:Sidebar Image Height" content="320">
<meta name="text:Body Font Size" content="13">
<meta name="text:Title Font Size" content="26">
<meta name="text:Post Title Font Size" content="26">
<meta name="text:Post Spacing" content="50">
<meta name="text:Photoset Spacing" content="4">
<meta name="text:Navigation Link 1 Icon" content="link">
<meta name="text:Navigation Link 1 Title" content="">
<meta name="text:Navigation Link 1 URL" content="http://">
<meta name="text:Navigation Link 2 Icon" content="link">
<meta name="text:Navigation Link 2 Title" content="">
<meta name="text:Navigation Link 2 URL" content="http://">
<meta name="text:Navigation Link 3 Icon" content="link">
<meta name="text:Navigation Link 3 Title" content="">
<meta name="text:Navigation Link 3 URL" content="http://">
<meta name="text:Navigation Link 4 Icon" content="link">
<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="select:Background Image Style" content="auto" title="repeat">
<meta name="select:Background Image Style" content="cover" title="cover">
<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: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:Post Size" content="500" title="500px">
<meta name="select:Post Size" content="400" title="400px">
<meta name="select:Post Size" content="450" title="450px">
<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:Text Align" content="left" title="left">
<meta name="select:Text Align" content="justify" title="justify">
<meta name="select:Tumblr Controls" content="gw" title="grey on white">
<meta name="select:Tumblr Controls" content="bw" title="black on white">
<meta name="select:Tumblr Controls" content="wb" title="white on black">
<meta name="if:Show Link List" content="1">
<meta name="if:Show Tags On Click" content="0">
<meta name="if:Infinite Scroll" content="0">
<meta name="if:Manual Load" 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:Post Text};
    background-color:{color:Background};
    background-image:url({image:Background});
    background-size:{select:Background Image Style};
    background-attachment:fixed;
    margin:0;
}

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

::-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};
}

#description::-webkit-scrollbar, #links::-webkit-scrollbar{
    width:8px;
    height:8px;
}

#description::-webkit-scrollbar-track, #links::-webkit-scrollbar-track{
    background:{color:Description Scrollbar Track};
}

#description::-webkit-scrollbar-thumb, #links::-webkit-scrollbar-thumb{
    background:{color:Description Scrollbar};
    border-color:{color:Description Scrollbar Track};
}

#description::-webkit-scrollbar-corner, #links::-webkit-scrollbar-corner{
    background:{color:Description Scrollbar Track};
}

iframe#tumblr_controls, .iframe-controls--desktop{
    margin-top:calc({text:Title Font Size}px + 2.5em);
    padding-top:4px;
}

.bw iframe#tumblr_controls, .bw .iframe-controls--desktop{
    filter:invert(100%);
    -webkit-filter:invert(100%);
}

.gw iframe#tumblr_controls, .gw .iframe-controls--desktop{
    filter:invert(100%);
    -webkit-filter:invert(100%);
    opacity:0.4;
}

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

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

a img{
     border:0;
}

pre{
    white-space:pre-wrap;
}

#header{
    width:100%;
    height:calc({text:Title Font Size}px + 2.5em);
    background:{color:Sidebar Background};
    position:fixed;
    top:0;
    left:0;
    z-index:2;
}

#header .inner{
    width:calc({text:Sidebar Image Width}px + 148px + {select:Post Size}px + {text:Post Spacing}px);
    margin:0 auto;
    padding:1.25em 0;
    line-height:1;
    color:{color:Title};
    display:flex;
    align-items:center;
    position:relative;
}

#header .title{
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    font-size:{text:Title Font Size}px;
    {select:Title Style}
    text-shadow:1px 1px 0 {color:Title Shadow 1}, 2px 2px 0 {color:Title Shadow 2};
    height:1em;
    margin-left:55px;
}

#subtitle{
    margin-left:1.5em;
    text-transform:uppercase;
}

#search{
    position:absolute;
    top:50%;
    right:53px;
    background:{color:Description Background};
    border:1px solid {color:Description Border};
    padding:0.5em 1em;
    margin-top:-1.25em;
    box-sizing:border-box;
    height:2.5em;
}

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

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

::-webkit-input-placeholder{
  color:{color:Sidebar Text};
}

#search input[type="submit"]{
    color:{color:Sidebar Link};
    font-family:metro;
    line-height:1;
    cursor:pointer;
    position:absolute;
    top:50%;
    right:0;
    margin-top:-0.5em;
    padding:0 1em;
    transition:color 0.4s;
}

#search input[type="submit"]:hover{
    color:{color:Sidebar Link Hover};
}

#search input:focus{
    outline:none;
}

#content{
    width:calc({text:Sidebar Image Width}px + 148px + {select:Post Size}px + {text:Post Spacing}px);
    margin:calc({text:Title Font Size}px + 2.5em) auto 0;
    position:relative;
    padding:0 30px;
}

#sidebar{
    width:calc({text:Sidebar Image Width}px + 75px);
    position:fixed;
    top:calc({text:Title Font Size}px + 2.5em);
    color:{color:Sidebar Text};
}

#sidebar .inner{
    width:calc({text:Sidebar Image Width}px + 20px);
    padding-left:11px;
    padding-bottom:11px;
    margin-left:44px;
    margin-bottom:44px;
    position:relative;
}

#sidebar .b1{
    position:absolute;
    top:44px;
    left:0;
    width:1px;
    height:100%;
    background:{color:Sidebar Borders};
    overflow:hidden;
}

#sidebar .b1:before{
    content:"";
    position:absolute;
    top:-40px;
    left:0;
    width:1px;
    height:40px;
    background-image:linear-gradient(to bottom, transparent, {color:Sidebar Border Effect}, transparent);
    transition:all 2s;
}

#sidebar .inner:hover .b1:before{
    top:100%;
}

#sidebar .b2{
    position:absolute;
    right:44px;
    bottom:0;
    width:100%;
    height:1px;
    background:{color:Sidebar Borders};
    overflow:hidden;
}

#sidebar .b2:before{
    content:"";
    position:absolute;
    right:-40px;
    top:0;
    height:1px;
    width:40px;
    background-image:linear-gradient(to right, transparent, {color:Sidebar Border Effect}, transparent);
    transition:all 2s;
}

#sidebar .inner:hover .b2:before{
    right:100%;
}

#sidebar ul{
    list-style:none;
    margin:0;
    padding:0;
}

#navigation{
    position:absolute;
    left:-44px;
    bottom:1px;
    width:34px;
    padding-right:10px;
    padding-bottom:10px;
    text-align:center;
}

#navigation li{
    margin-top:4px;
}

#navigation li a{
    display:block;
    width:34px;
    height:34px;
    color:{color:Navigation Link};
    background:{color:Navigation Link Background};
    line-height:0;
}

#navigation li a:hover{
    color:{color:Navigation Link Hover};
    background:{color:Navigation Link Background Hover};
}

#navigation li a.nav{
    display:none;
}

#navigation li a.nav.active{
    display:block;
}

#navigation span{
    font-size:16px;
    line-height:34px;
}

.mif-mail, .mif-menu{
    font-size:18px!important;
}

.mif-cross{
    font-size:12px!important;
}

#sidebar a{
    color:{color:Sidebar Link};
}

#sidebar a:hover{
    color:{color:Sidebar Link Hover};
}

#sidebar .contents{
    width:{text:Sidebar Image Width}px;
    background:{color:Sidebar Background};
    padding:0 10px 10px;
    position:relative;
}

#sidebar-image{
    width:{text:Sidebar Image Width}px;
    height:{text:Sidebar Image Height}px;
    background-image:url({image:Sidebar Image});
    background-size:cover;
}

#description-wrapper{
    background:{color:Description Background};
    border:1px solid {color:Description Border};
    padding:1em;
    margin-top:10px;
}

#description{
    max-height:12em;
    overflow:auto;
}

{block:ifShowLinkList}
#menu{
    position:absolute;
    top:0;
    left:10px;
    width:{text:Sidebar Image Width}px;
    height:{text:Sidebar Image Height}px;
    background:{color:Description Background};
    border:1px solid {color:Description Border};
    box-sizing:border-box;
    padding:1em;
    display:none;
}

#links{
    height:100%;
    text-align:center;
    overflow:auto;
}

#links li a{
    display:block;
    border-bottom:1px solid {color:Sidebar Link Border};
    padding-bottom:0.5em;
    margin-bottom:0.5em;
}

#links li:last-child a{
    margin-bottom:0;
}
{/block:ifShowLinkList}

#pagination-wrapper{
    position:absolute;
    left:1px;
    bottom:-44px;
    height:34px;
    padding-top:10px;
    padding-left:10px;
}

.pagination, .pagination li, #load-more, #top{
    float:left;
    margin-right:4px;
}

#pagination-wrapper a{
    width:34px;
    height:34px;
    display:block;
    text-align:center;
    color:{color:Navigation Link};
    background:{color:Navigation Link Background};
    line-height:0;
}

#pagination-wrapper a:hover{
    color:{color:Navigation Link Hover};
    background:{color:Navigation Link Background Hover};
}

#pagination-wrapper span{
    font-size:16px;
    line-height:34px;
}

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

#load-more a.empty{
    display:none;
}

#top{
    display:none;
}

#container{
    padding-top:{text:Post Spacing}px;
    padding-left:{text:Post Spacing}px;
    margin-left:calc({text:Sidebar Image Width}px + 75px);
    position:relative;
}

.post-wrapper{
    margin-bottom:{text:Post Spacing}px;
    width:calc({select:Post Size}px + 73px);
    position:relative;
    float:left;
}

.post-wrapper .inner{
    padding-right:11px;
    padding-bottom:11px;
    margin-right:42px;
    margin-bottom:42px;
    position:relative;
}

.post-wrapper .b1{
    position:absolute;
    top:42px;
    right:0;
    width:1px;
    height:100%;
    background:{color:Post Borders};
    overflow:hidden;
}

.post-wrapper .b1:before{
    content:"";
    position:absolute;
    top:-40px;
    left:0;
    width:1px;
    height:40px;
    background-image:linear-gradient(to bottom, transparent, {color:Post Border Effect}, transparent);
    transition:all 2s;
}

.post-wrapper:hover .b1:before{
    top:100%;
}

.post-wrapper .b2{
    position:absolute;
    left:42px;
    bottom:0;
    width:100%;
    height:1px;
    background:{color:Post Borders};
    overflow:hidden;
}

.post-wrapper .b2:before{
    content:"";
    position:absolute;
    top:0;
    left:-40px;
    height:1px;
    width:40px;
    background-image:linear-gradient(to right, transparent, {color:Post Border Effect}, transparent);
    transition:all 2s;
}

.post-wrapper:hover .b2:before{
    left:100%;
}

.post-wrapper .contents{
    width:{select:Post Size}px;
    padding:10px;
    background:{color:Post Background};
}

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

.read_more{
    border-bottom:1px solid {color:Blockquote Border};
}

.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:Blockquote Border};
    margin-right:0.5em;
}

.post .title{
    text-align:center;
    margin:0.75em 1em 1em;
    text-shadow:1px 1px 0 {color:Post Title Shadow 1}, 2px 2px 0 {color:Post Title Shadow 2};
}

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

.post .title a{
    color:{color:Post Title};
}

.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;
}

.ask-user-wrapper{
    display:flex;
    align-items:center;
    color:{color:Post Text Alt};
    background:{color:Post Background Alt};
    border:1px solid {color:Post Border Alt};
}

.ask-avatar{
    width:40px;
    height:40px;
}

.answer .ask-avatar{
    order:2;
}

.ask-user{
    flex:1;
    padding:0 1em;
}

.question .ask-user{
    text-align:right;
}

.ask-user a{
    color:{color:Post Link Alt};
}

.ask-user a:hover{
    color:{color:Post Link Hover Alt};
}

.ask-inner{
    margin:1em;
}

.chat-line{
    display:flex;
    align-items:center;
    margin-bottom:10px;
}

.chat .chat-line:last-child{
    margin-bottom:0;
}

.chat .label{
    margin:0.25em 1em;
}

.chat .label span{
    text-transform:uppercase;
}

.chat .label.even{
    order:2;
}

.chat .even{
    text-align:right;
}

.chat-item{
    flex:1;
    padding:0.5em 1em;
    color:{color:Post Text Alt};
    background:{color:Post Background Alt};
    border:1px solid {color:Post Border Alt};
}

.quote-text{
    text-align:center;
    margin:0.75em 1em 1em;
}

.quote-text p{
    font-size:{text:Post Title Font Size}px;
    font-family:{block:ifSecondaryGoogleFont}{text:Secondary Google Font}, {/block:ifSecondaryGoogleFont}{select:Main Font};
    margin:0;
    color:{color:Post Title};
    text-shadow:1px 1px 0 {color:Post Title Shadow 1}, 2px 2px 0 {color:Post Title Shadow 2};
    {select:Title Style};
}

.source{
    color:{color:Post Text Alt};
    background:{color:Post Background Alt};
    border:1px solid {color:Post Border Alt};
    padding:0.5em;
    text-align:center;
}

.source a{
    color:{color:Post Link Alt};
}

.source a:hover{
    color:{color:Post Link Hover Alt};
}

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

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

.audio-caption{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:1em;
}

.album-art{
    min-width:120px;
    height:120px;
}

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

.song{
    font-size:1.2em;
}

.artist{
    font-weight:bold;
}

.album{
    font-style:italic;
}

.caption, .text-body{
    color:{color:Post Text Alt};
    background:{color:Post Background Alt};
    border:1px solid {color:Post Border Alt};
    padding:1em;
}

.caption a, .text-body a{
    color:{color:Post Link Alt};
}

.caption a:hover, .text-body a:hover{
    color:{color:Post Link Hover Alt};
}

.caption{
    margin-top:10px;
}

blockquote:not(.instagram-media){
    border-left:1px solid {color:Blockquote 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;
}

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

.post:not(.quote) .tumblr_blog, .caption .tumblr_blog{
    border-bottom:1px solid {color:Blockquote Border};
}

.footer.left{
    position:absolute;
    right:-42px;
    bottom:1px;
    width:32px;
    padding-left:10px;
    padding-bottom:10px;
    text-align:center;
}

.footer.bottom{
    position:absolute;
    right:1px;
    bottom:-42px;
    height:32px;
    padding-top:10px;
    padding-right:10px;
}

.footer .item a{
    height:32px;
    display:block;
    color:{color:Post Icons};
    background:{color:Post Icons Background};
}

.footer .item a:hover{
    color:{color:Post Icons Hover};
    background:{color:Post Icons Background Hover};
}

.footer.left .item a{
    width:32px;
    line-height:0;
}

.footer.left .item span{
    font-size:14px;
    line-height:32px;
}

.footer.left .item{
    margin-top:4px;
}

.footer.bottom .item{
    float:left;
    margin-left:4px;
}

.footer.bottom .item img{
    display:block;
    padding:1px;
}

.footer.bottom .with-text a{
    padding:0 9px;
    text-transform:uppercase;
    line-height:32px;
}

.footer.bottom .with-text a:before{
    font-family:metro;
    font-size:14px;
    margin-right:7px;
    float:left;
}

.date a:before{
    content:"\e953";
}

.note-count a:before{
    content:"\e9d9";
}

.show-tags a:before{
    content:"\e935";
}

.custom-like-button{
    position:relative;
}

.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:red;
    background:{color:Post Icons Background Hover};
}

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

.tags.index{
    margin:1em 1em 0.5em;
    {block:ifShowTagsOnClick}display:none;{/block:ifShowTagsOnClick}
}

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

.post-info .item{
    margin:1em;
}

.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:not(.more_notes_link_container){
    margin-top:10px;
    color:{color:Post Text Alt};
    background:{color:Post Background Alt};
    border:1px solid {color:Post Border Alt};
}

#notes li a{
    color:{color:Post Link Alt};
}

#notes li a:hover{
    color:{color:Post Link Hover Alt};
}

#notes blockquote{
    margin:1em;
}

#notes .avatar{
    width:40px;
    height:40px;
    display:inline-block;
    vertical-align:middle;
}

#notes .action{
    padding:0 1em;
}

.more_notes_link_container{
    position:absolute;
    right:1px;
    bottom:-42px;
    width:32px;
    height:32px;
    padding-top:10px;
    padding-right:10px;
    font-size:0;
}

.more_notes_link:after, .notes_loading:after{
    display:block;
    font-size:14px;
    font-family:metro;
    line-height:32px;
    color:{color:Post Icons};
    background:{color:Post Icons Background};
    transition:color 0.4s, background 0.4s;
}

.more_notes_link:hover:after, .notes_loading:hover:after{
    color:{color:Post Icons Hover};
    background:{color:Post Icons Background Hover};
}

.more_notes_link:after{
    content:"\ea0a";
}

.notes_loading:after{
    content:"\e979";
}

#infscr-loading{
    text-align:center;
    font-size:20px;
    color:{color:Post Borders};
    margin-right:53px;
    margin-bottom:{text:Post Spacing}px;
}

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

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

#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%);
    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 span, .arrow-right span{
    line-height:40px;
}

.arrow-left{
    left:50%;
}

.arrow-right{
    right:50%;
}

.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:Tumblr Controls}">
<div id="canvas">
<div id="header"><div class="inner"><div class="title">{Title}</div><div id="subtitle">{text:Subtitle}</div>
<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></div></div>
<div id="content">
<div id="sidebar">
<div class="inner">
<div id="navigation">
<ul>
<li><a href="/" title="Home"><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-pencil"></span></a></li>{/block:SubmissionsEnabled}
{block:ifShowLinkList}<li><a href="#" class="nav show-menu active" title="View links"><span class="mif-menu"></span></a><a href="#" class="nav hide-menu" title="Hide links"><span class="mif-cross"></span></a></li>{/block:ifShowLinkList}
{block:ifNavigationLink1Title}<li><a href="{text:Navigation Link 1 URL}" title="{text:Navigation Link 1 Title}"><span class="mif-{text:Navigation Link 1 Icon}"></span></a></li>{/block:ifNavigationLink1Title}
{block:ifNavigationLink2Title}<li><a href="{text:Navigation Link 2 URL}" title="{text:Navigation Link 2 Title}"><span class="mif-{text:Navigation Link 2 Icon}"></span></a></li>{/block:ifNavigationLink2Title}
{block:ifNavigationLink3Title}<li><a href="{text:Navigation Link 3 URL}" title="{text:Navigation Link 3 Title}"><span class="mif-{text:Navigation Link 3 Icon}"></span></a></li>{/block:ifNavigationLink3Title}
{block:ifNavigationLink4Title}<li><a href="{text:Navigation Link 4 URL}" title="{text:Navigation Link 4 Title}"><span class="mif-{text:Navigation Link 4 Icon}"></span></a></li>{/block:ifNavigationLink4Title}
<li><a href="https://myrtillenne.dreamwidth.org/" title="Theme"><span class="mif-embed2"></span></a></li>
</ul>
</div>
<div class="contents">
<div id="sidebar-image"></div>
{block:Description}<div id="description-wrapper"><div id="description">{Description}</div></div>{/block:Description}
{block:ifShowLinkList}
<div id="menu">
<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>
{/block:ifShowLinkList}
</div>
<div id="pagination-wrapper">
{block:Pagination}
<ul class="pagination">
{block:PreviousPage}<li class="previous"><a href="{PreviousPage}" title="Previous page"><span class="mif-arrow-left"></span></a></li>{/block:PreviousPage}
{block:NextPage}<li class="next"><a href="{NextPage}" title="Next page"><span class="mif-arrow-right"></span></a></li>{/block:NextPage}
</ul>
{block:ifInfiniteScroll}{block:ifManualLoad}<div id="load-more"><a href="#" class="load" title="Load more posts"><span class="mif-arrow-down"></span></a><a href="#" class="empty" title="No more posts to show"><span class="mif-cross"></span></a></div>{/block:ifManualLoad}{/block:ifInfiniteScroll}
{/block:Pagination}
{block:PermalinkPagination}
<ul class="pagination">
{block:NextPost}<li class="previous"><a href="{NextPost}" title="Previous post"><span class="mif-arrow-left"></span></a></li>{/block:NextPost}
{block:PreviousPost}<li class="next"><a href="{PreviousPost}" title="Next post"><span class="mif-arrow-right"></span></a></li>{/block:PreviousPost}
</ul>
{/block:PermalinkPagination}
<div id="top"><a href="#" title="Back to top"><span class="mif-arrow-up"></span></a></div>
</div>
<div class="b1"></div>
<div class="b2"></div>
</div>
</div>
<div id="container">
<div id="posts">
{block:Posts}
<div class="post-wrapper" id="{PostID}">
<div class="inner">
<div class="contents">
{block:Text}
<div class="post text">
{block:Title}
<div class="title"><span><a href="{Permalink}">{Title}</a></span></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"><span><a href="{URL}" {Target}>{Name}</a></span></div>
{block:Description}<div class="text-body">{Description}</div>{/block:Description}
</div>
{/block:Link}
{block:Chat}
<div class="post chat">
{block:Title}
<div class="title"><span><a href="{Permalink}">{Title}</a></span></div>
{/block:Title}
{block:Lines}<div class="chat-line">{block:Label}<div class="label {Alt}"><span>{Label}</span></div>{/block:Label}
<div class="chat-item {Alt} user_{UserNumber}">{Line}</div></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-user-wrapper"><div class="ask-avatar"><img src="{AskerPortraitURL-40}"></div><div class="ask-user"><span class="ask-name">{Asker}</span> asked</div></div><div class="ask-inner">{Question}</div></div>
{block:Answerer}
<div class="answer"><div class="ask-user-wrapper"><div class="ask-avatar"><img src="{AnswererPortraitURL-40}"></div><div class="ask-user"><span class="ask-name">{Answerer}</span> answered</div></div><div class="ask-inner">{Answer}</div></div>
{/block:Answerer}
<div class="text-body">{Replies}</div>
</div>
{/block:Answer}
{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}
{block:PermalinkPage}
<div class="post-info">
{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}
{block:PostNotes}<div id="notes">{PostNotes-64}</div>{/block:PostNotes}
</div>
{/block:PermalinkPage}
</div>
<div class="b1"></div>
<div class="b2"></div>
{block:IndexPage}
<div class="footer left">
<div class="item custom-like-button" title="Like">{LikeButton}<a class="like-button-heart"><span class="mif-heart"></span></a></div>
<div class="item reblog-btn"><a href="{ReblogURL}" title="Reblog"><span class="mif-loop2"></span></a></div>
{block:Photo}<div class="item post-type"><a href="{Permalink}" title="View post"><span class="mif-image"></span></a></div>{/block:Photo}
{block:Photoset}<div class="item post-type"><a href="{Permalink}" title="View post"><span class="mif-images"></span></a></div>{/block:Photoset}
{block:Video}<div class="item post-type"><a href="{Permalink}" title="View post"><span class="mif-film"></span></a></div>{/block:Video}
{block:Audio}<div class="item post-type"><a href="{Permalink}" title="View post"><span class="mif-music"></span></a></div>{/block:Audio}
{block:Text}<div class="item post-type"><a href="{Permalink}" title="View post"><span class="mif-file-text"></span></a></div>{/block:Text}
{block:Link}<div class="item post-type"><a href="{Permalink}" title="View post"><span class="mif-link"></span></a></div>{/block:Link}
{block:Chat}<div class="item post-type"><a href="{Permalink}" title="View post"><span class="mif-bubbles"></span></a></div>{/block:Chat}
{block:Quote}<div class="item post-type"><a href="{Permalink}" title="View post"><span class="mif-bubble"></span></a></div>{/block:Quote}
{block:Answer}<div class="item post-type"><a href="{Permalink}" title="View post"><span class="mif-mail-read"></span></a></div>{/block:Answer}
{block:Panorama}<div class="item post-type"><a href="{Permalink}" title="View post"><span class="mif-camera"></span></a></div>{/block:Panorama}
</div>
<div class="footer bottom">
{block:Date}<div class="item with-text date"><a href="{Permalink}" title="{TimeAgo}">{DayOfMonth} {Month} {Year}</a></div>{/block:Date}
{block:NoteCount}<div class="item with-text note-count"><a href="{Permalink}#notes" title="View notes">{NoteCountWithLabel}</a></div>{/block:NoteCount}
{block:ifShowTagsOnClick}{block:HasTags}<div class="item with-text show-tags"><a href="#" data-id="tags" title="View tags">Tags</a></div>{/block:HasTags}{/block:ifShowTagsOnClick}
{block:RebloggedFrom}<div class="item"><a href="{ReblogParentURL}" title="Reblogged from {ReblogParentName}"><img src="{ReblogParentPortraitURL-30}"></a></div>
<div class="item"><a href="{ReblogRootURL}" title="Originally posted by {ReblogRootName}"><img src="{ReblogRootPortraitURL-30}"></a></div>{/block:RebloggedFrom}
<div class="clearfix"></div>
</div>
{/block:IndexPage}
</div>
</div>
{/block:Posts}
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>

$(function(){
    $('#navigation').on('click', 'li a.nav', function(e){
        e.preventDefault();
        $('#menu').fadeToggle();
        $(this).parent().find('a').toggleClass('active');
    });
    
    $('.photo-slideshow').pxuPhotoset({
        lightbox: false,
        rounded: false,
        gutter: '0px',
        photoset: '.photo-slideshow',
        photoWrap: '.photo-data',
        photo: '.pxu-photo'
   });
    
    function resizeVideo(){
        if ({select:Post Size} < 700){
            newSize = {select:Post Size};
            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);
    
    $('.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><img id="mainImage"><div class="arrow-left"><span class="mif-arrow-left"></span></div><div class="arrow-right"><span class="mif-arrow-right"></span></div></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 $window = $(window);
    var $top = $('#top');
    
    $window.on('scroll', function(){
        if ($(this).scrollTop() > $(this).innerHeight()){
            $top.fadeIn()
        } else {
            $top.fadeOut();
        }
    });
    
    $top.on('click', 'a', function(e){
        e.preventDefault();
        $('html, body').animate({scrollTop : 0},600);
    });
    
    $('[title], #container, #notes').tooltip({ 
        track: true,
		show: {delay:100, duration: 500},
		tooltipClass: "custom-tooltip",
		position: { my: "left+15 top+15" }
    });
    
    {block:ifShowTagsOnClick}
    $('.show-tags a').tooltip({
        content: 'View tags'
    });
    
    $('body').on('click', '.show-tags a', function(e){
        e.preventDefault();
        $(this).closest('.post-wrapper').find('.tags').slideToggle();
        var crtContent = $(this).tooltip( "option", "content");
        var newContent = (crtContent === 'View tags') ? 'Hide tags' : 'View tags';
        $(this).tooltip( "option", "content", newContent);
    });
    {/block:ifShowTagsOnClick}
    
    function styleAudio(){
        $(this).contents().find('head').append($('<style "type=text/css">.audio-player, .progress{background:{color:Post Background Alt}!important;color:{color:Post Link Alt}!important;}</style>'));
    }
    
    $('iframe.tumblr_audio_player').load(styleAudio);
    
    function removeColon(_,txt){
        return txt.slice(0, -1);
    }
    
    $('.post.chat').find('.label span').text(removeColon);
    
    var container = $('#posts');
    
    {block:IndexPage}
    {block:ifInfiniteScroll}
    container.infinitescroll({
        navSelector: '.pagination',
        nextSelector: '.pagination .next a',
        itemSelector: '.post-wrapper',
        loading: {
            finishedMsg: '',
            img: '',
            msgText: '<span class="mif-spinner3 mif-ani-spin"></span>'
        }{block:ifManualLoad},
        errorCallback: function(){ $('a.load').hide(); $('a.empty').css('display', 'block'); }{/block:ifManualLoad}
    }, 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.find('iframe.tumblr_audio_player').load(styleAudio);
        newElems.find('.post.chat').find('.label span').text(removeColon);
        {block:ifShowTagsOnClick}
        newElems.find('.show-tags a').tooltip({
            content: 'View tags',
            track: true,
    		show: {delay:100, duration: 500},
    		tooltipClass: "custom-tooltip",
    		position: { my: "left+10 top+20" }
        });
        {/block:ifShowTagsOnClick}
        var newElemsIDs = newElems.map(function(){ 
            return this.id; 
        }).get();
        Tumblr.LikeButton.get_status_by_post_ids(newElemsIDs);
    });
    {block:ifManualLoad}
    $(window).off('.infscr');
    $('#load-more a').click(function(e){
        e.preventDefault();
    });
    $('#load-more a.load').click(function(e){
        container.infinitescroll('retrieve');
    });
    {/block:ifManualLoad}
    {/block:ifInfiniteScroll}
    {/block:IndexPage}

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

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

Brittle

Post a comment in response: