Create a new version of paste:

<!--

Tourmaline by @Laighlin

    1. leave the credit intact
    2. don't redistribute or lift large chunks of code
    3. send me a message if you need any help, with an example
    of your problem if possible
    4. check my faq on @linthm if you have questions about adding custom links!

Update [16/08/2018] Fixed a bug that was preventing Tumblr's lightbox from kicking in on photoset posts.

-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<meta name="image:Favicon" content=""/>
<meta name="image:Background banner" content=""/>

<meta name="if:Custom favicon" content="0"/>
<meta name="if:500px posts" content="1"/>
<meta name="if:Centered banner" content="0"/>
<meta name="if:Shadow effects" content="0"/>

<meta name="color:Blog title" content="#d4efec"/>
<meta name="color:Background" content="#bbbbbb"/>
<meta name="color:Banner background" content="#00aa99"/>
<meta name="color:Gradient left" content="#15706b"/>
<meta name="color:Gradient center" content="#578683"/>
<meta name="color:Gradient right" content="#17a695"/>
<meta name="color:Navigation text" content="#fff"/>
<meta name="color:Post background" content="#fff"/>
<meta name="color:Text highlight" content="#fff"/>
<meta name="color:Text highlight bg" content="#333"/>
<meta name="color:Text" content="#555"/>
<meta name="color:Text accent" content="#42b1a0"/>
<meta name="color:Link" content="#737879"/>
<meta name="color:Link hover" content="#48a295"/>
<meta name="color:Shadows" content="#2e3635"/>

<meta name="select:Corner rounding" title="Soft" content="10px"/>
<meta name="select:Corner rounding" title="Subtle" content="5px"/>
<meta name="select:Corner rounding" title="Sharp" content="0"/>

<meta name="select:Background size" title="Cover" content="no-repeat;background-size:cover"/>
<meta name="select:Background size" title="Tiled" content="repeat"/>

<!-- text fields -->
<meta name="text:Accent font" content="Roboto Slab"/>
<meta name="text:Body font" content="Roboto"/>
<meta name="text:Body font size" content="14px"/>


<link rel="alternate" type="application/rss+xml" href="{RSS}">

<head><title>{Title}{block:PostSummary} &bull; {PostSummary}{/block:PostSummary}{block:SearchPage} &bull; {lang:Search results for SearchQuery}{/block:SearchPage}</title>

{block:ifCustomFavicon}
<link rel="shortcut icon" href="{image:favicon}"/>
{/block:ifCustomFavicon}
{block:ifNotCustomFavicon}
<link rel="shortcut icon" href="{Favicon}"/>
{/block:ifNotCustomFavicon}

<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

<!--Custom Google font import-->
<link href="https://fonts.googleapis.com/css?family={text:Body font}:400,400i,700,700i|{text:Accent font}:400,400i,700,700i" rel="stylesheet">

<!--FontAwesome import-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/solid.css" integrity="sha384-wnAC7ln+XN0UKdcPvJvtqIH3jOjs9pnKnq9qX68ImXvOGz2JuFoEiCjT8jyZQX2z" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/regular.css" integrity="sha384-zkhEzh7td0PG30vxQk1D9liRKeizzot4eqkJ8gB3/I+mZ1rjgQk+BSt2F6rT2c+I" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/fontawesome.css" integrity="sha384-HbmWTHay9psM8qyzEKPc8odH4DsOuzdejtnr+OFtDmOcIVnhgReQ4GZBH7uwcjf6" crossorigin="anonymous">

<style type="text/css">

* { transition:.2s all ease-out; }
.fas, #main-wrapper, #s-m-t-tooltip { transition:none; }

/*To do: improve and compact transition attributes, this is just lazy*/

body, html { 
    margin:0; 
    padding:0;
}

body {
    color:{color:text};
    font-family:'{text:body font}',sans-serif;
    font-size:{text:body font size};
    background:{color:background};
    word-wrap:break-word;
    overflow-y:scroll;
    overflow-x:hidden;
    line-height:1.6em;
}

.background:before {
    content:'';
    position:fixed;
    {block:ifcenteredbanner}
    height:40vh;
    top:30vh;
    {/block:ifcenteredbanner}
    right:0;
    left:0;
    z-index:-1;
}

{block:ifnotcenteredbanner}
.p1.background:before {
    height:230px;
    top:0;
}

.background:not(.p1):before {
    height:55px;
    top:0;
}
{/block:ifnotcenteredbanner}

::selection {
    background:rgba({RGBcolor:text highlight bg},.7);
    color:{color:text highlight};
}
 
::moz-selection {
    background:rgba({RGBcolor:text highlight bg},.7);
    color:{color:text highlight};
}

#s-m-t-tooltip {
    margin:0 16px;
    z-index:999999999;
    padding:5px 7px;
    border:2px solid rgba({RGBcolor:content borders},.5);
    pointer-events:none;
    white-space:pre;
    font:italic .9em '{text:accent font}';
}

.background:before {
    background:{color:banner background} url('{image:background banner}') fixed {select:background size};
}

a {
    color:{color:link};
    text-decoration:none;
}

.post ol { 
    list-style-type:decimal-leading-zero;
    padding-left:40px;
}

.post ul { 
    list-style-type:none; 
    padding-left:35px;
}

.post ul li { position:relative; }
.post ul li:before {
    font-family:'Font Awesome 5 Free';
    font-weight:900;
    content:'\F0DA';
    color:{color:text accent};
    position:absolute;
    left:-1.2em;
    top:0;
}

code {
    font-family:monospace;
    border:1px solid {color:borders};
    padding:5px;
    display:inline-block;
}

h1, h2 {
    margin:0;
    font-weight:inherit;
    font-family:{text:accent font};
}

#content i, #content em, #desc i, #desc em { color:{color:text accent}; }
#desc b, #desc strong, #content b, #content strong { color:rgba({RGBcolor:text accent},.7); }
#desc p { margin:.7em 0; }

p:first-child, blockquote:first-child { margin-top:0; }
p:last-child, blockquote:last-child { margin-bottom:0; }

blockquote, blockquote blockquote {
    margin:1em 0 1em 10px;
    padding-left:10px;
    border-left:1px solid rgba({RGBcolor:text accent},.6);
}

#main-wrapper {
    position:absolute;
    min-height:100vh;
    {block:if500pxposts}
    width:500px;
    left:calc(50vw - 355px);
    {/block:if500pxposts}
    {block:ifnot500pxposts}
    width:700px;
    left:calc(50vw - 455px);
    {/block:ifnot500pxposts}
}

@media screen and (max-width:801px) {
    #main-wrapper {
        margin-left:100px;
    }
}

#head-wrap, .post-wrap, #bomtom { background:{color:post background}; }

#head-wrap, .post-wrap, #bomtom, .linky, .more {
    border-radius:{select:corner rounding};
}

{block:ifShadowEffects}
#head-wrap, .post-wrap, .linky, #bomtom, .pag {
    box-shadow:1px 2px 5px rgba({RGBcolor:shadows},.5);
}
{/block:ifShadowEffects}

#head.p-1 {
    margin-top:calc(30vh - 100px);
}

#head.p-1 #title {
    text-align:right;
    font-weight:bold;
    margin-bottom:15px;
    color:{color:blog title};
}

#head:not(.p-1) #title { display:none; }

#head-wrap {
    position:relative;
    margin-bottom:25px;
    overflow:hidden;
}

#user-icon {
    float:left;
    pointer-events:none;
}

#head:not(.p-1) #user-icon { border-radius:0 0 0 10px; }
#head:not(.p-1) #head-wrap { border-radius:0 0 10px 10px; }

#desc {
    padding:15px;
    height:98px;
    overflow:hidden;
}

#linx {
    position:relative;
    margin:-5px -5px 50px;
    display:flex;
    flex-flow:row wrap;
    /*me? using flexbox to solve annoying but extremely minor issues that could be fixed in a dozen other ways? it's more likely than you think*/
}

.linky {
    display:inline-block;
    font-size:.9em;
    margin:5px;
    padding:6px 9px;
    color:{color:navigation text};
}

.linky:hover, .pag:hover { background:{color:navigation text}!important; }
.linky:active, .pag:active { box-shadow:none; }

.linky:nth-child(3n+1), .pag.prev { background:{color:gradient left}; }
.linky:nth-child(3n+1):hover, .pag.prev:hover {
    color:{color:gradient left};
}

.linky:nth-child(3n+2) { background:{color:gradient center}; }
.linky:nth-child(3n+2):hover {
    color:{color:gradient center};
}

.linky:nth-child(3n), .pag.next { background:{color:gradient right}; }
.linky:nth-child(3n):hover, .pag.next:hover {
    color:{color:gradient right};
}

.post-wrap {
    position:relative;
    margin-bottom:70px;
    overflow:hidden;
}

/*.post-wrap:last-of-type {*/
/*    margin-bottom:120px;*/
/*}*/

.caption, .title, .info, .quote, .tag-wrap, #bomtom {
    padding:15px;
}

.title { font-size:1.3em; }
.caption h1 { font-size:1.3em; }
.caption h2 { font-size:1.1em; }

.title, .info, hr, .more {
    background-image:linear-gradient(to right,
    {color:gradient left} 5%,
    {color:gradient center},
    {color:gradient right} 95%);
    color:{color:navigation text};
}

.info, .linky, #bomtom, .more, .tag-wrap .lbl {
    text-transform:uppercase;
}

hr {
    border:none;
    margin:1em 20%;
    height:3px;
    border-radius:2px;
}

#content {
    /*display:none;*/
}

{block:AskPage} .caption { padding:0; } {/block:AskPage}
{block:SubmitPage} .caption { padding:0; } {/block:SubmitPage}

.caption:empty { 
    padding:0;
    height:3px;
}
/*the fact that i didn't know this existed for over a year still fucks me up. like i had No Idea how to make text posts not look awful if they only had a title and no body. dicks out for the :empty selector*/

.caption a, #desc a, #bomtom a { border-bottom:1px solid rgba({RGBcolor:text},.5); }
.caption a:hover, #desc a:hover, .tag:hover, #bomtom a:hover { 
    border-color:transparent; 
    color:{color:link hover};
}

.chat { 
    padding:3px 15px;
    font-family:monospace;
}
.chat:first-child { padding-top:10px; }
.chat:last-child { padding-bottom:10px; }
.chat.odd { background:rgba({RGBcolor:text},.18); }
.chat.even { background:rgba({RGBcolor:text},.08); }

.chat b { 
    font-family:'{text:accent font}'; 
    text-transform:uppercase;
}

.quote {
    border:none;
    margin:0;
    font:1.25em '{text:accent font}';
    z-index:1;
    position:relative;
}

.quote-text { position:relative; z-index:1; }
.quote .fa-quote-left, .a-url .fa-question {
    color:rgba({RGBcolor:text accent},.5);
    position:absolute;
    font-size:2em;
    z-index:0;
    margin-top:-5px;
    margin-left:-5px;
}

.link-post .fa-caret-right, .more .fa-caret-right { transition:.2s margin ease-out; }
.link-post:hover .fa-caret-right { margin-left:5px; }

.info a { color:{color:navigation text}; }
.info a:hover, .link-post:hover, .more:hover { color:rgba({RGBcolor:navigation text},.7); }
.info {
    font-size:.9em;
    line-height:.9em;
}

.spacer {
    height:50px;
    pointer-events:none;
}

.media-wrap { margin:0; }
.media-wrap.no-text { line-height:0; }

{block:ifnot500pxposts}
iframe.tumblr_audio_player { width:700px!important; }
{/block:ifnot500pxposts}

.quest-wrap { padding:15px 15px 10px; }
.a-url { 
    position:relative; 
    text-transform:uppercase;
    font:1.1em '{text:accent font}';
}

.asker:hover { color:{color:text accent}; }
.askr {
    position:relative;
    padding-left:10px;
    z-index:1;
    letter-spacing:1px;
}

.quest {
    font-style:italic;
    text-align:right;
}

.more a { color:{color:navigation text}; }
.more {
    letter-spacing:1px;
    text-align:center;
    font:.9em '{text:accent font}';
    padding:6px 8px;
    line-height:1em;
}

.controls .fa-retweet, .controls .fa-heart { 
    transition:.2s all ease-out;
}

.more:hover .fas.fa-caret-right {
    margin-left:4px;
}

/*Tags*/

.tag-wrap { font-size:.95em; padding:10px 15px; }
.tag-wrap .lbl {
    letter-spacing:1px;
    font-family:{text:accent font};
    color:{color:text accent};
}

.tag { margin-right:7px; }
.hash:nth-of-type(3n+1) { color:{color:gradient left}; }
.hash:nth-of-type(3n+2) { color:{color:gradient center}; }
.hash:nth-of-type(3n) { color:{color:gradient right}; }

/*Like and reblog buttons*/

.controls {
    font-size:16px;
    line-height:16px;
    text-align:center;
    color:{color:navigation text};
}

.controls {
    float:right;
}
 
.controls a {
    color:{color:navigation text};
}

.fa-retweet {
    margin-right:2px;
}
 
.like-wrap {
    position:relative;
    width:30px;
    height:30px;
}
 
.like_button {
    position:absolute;
    z-index:5;
    top:0;
    left:0;
    opacity:0.0001;
    width:16px;
    height:16px;
}
 
.like_button iframe {
    width:100% !important;
    height:100% !important;
}
 
.like-btn { z-index:1; }
 
.like_button.liked + .like-btn { color:#f55; }

/*Post notes*/

#notes {
    padding:0;
    font-size:.9em;
}

ol.notes { 
    list-style-type:none; 
    margin:0;
    padding-left:30px;
}

ol.notes li.note { 
    position:relative; 
    margin:5px 0;
}

li.note:before {
    position:absolute;
    left:-25px;
    font-family:'Font Awesome 5 Free';
    color:{color:text accent};
    font-size:1em;
    top:2px;
}

a.avatar_frame { display:none !important; }

li.note.reblog.without_commentary:before { content:'\f079'; font-weight:900; }
li.note.like:before { content:'\f004'; }
li.note.reblog.with_commentary:before, li.note.reply:before { content:'\f075'; }
li.note.original_post { content:'\f304'; }

/*Pagination*/

#pagination {
    position:fixed;
    font-size:1.6em;
    bottom:0;
    right:15px;
}

.pag {
    line-height:1em;
    transition:.2s all ease;
    color:{color:navigation text};
    border-radius:calc(.5em + 10px);
    text-align:center;
    display:block;
    margin-bottom:15px;
}

.prev { padding:10px 12px 10px 8px; }
.next { padding:10px 8px 10px 12px; }

.prev, .next {
    height:1em;
    width:1em;
}

/*Footer*/

#bomtom {
    font-size:.9em;
    letter-spacing:1px;
    text-align:center;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    width:calc(100% - 30px);
    position:absolute;
    bottom:0;
}

{CustomCSS}

</style>
</head>

<body class="background {block:HomePage}p{CurrentPage}{/block:HomePage}">

<div id="main-wrapper">

<header id="head" {block:HomePage}class="p-{CurrentPage}"{/block:HomePage}>
    <a href="/"><h1 id="title">{Title}</h1></a>
    {block:Description}<div id="head-wrap">
        <img id="user-icon" src="{PortraitURL-128}">
        <aside id="desc">{Description}</aside>
    </div>
    {/block:Description}
    <nav id="linx">
        <a class="linky" href="/"><span class="fas fa-home" aria-hidden="true"></span> Home</a>
        {block:AskEnabled}
        <a class="linky" href="/ask"><span class="fas fa-pen" aria-hidden="true"></span> Ask</a>
        {/block:AskEnabled}
        {block:SubmissionsEnabled}
        <a class="linky" href="/submit"><span class="fas fa-envelope" aria-hidden="true"></span> Submit</a>
        {/block:SubmissionsEnabled}
        <a class="linky" href="/archive"><span class="fas fa-clock" aria-hidden="true"></span> Archive</a>
        {block:HasPages}
        {block:Pages}
        <a class="linky" href="{URL}"><span class="fas fa-link"></span> {Label}</a>
        {/block:Pages}
        {/block:HasPages}
    </nav>
</header>

<main id="content">
    {block:SearchPage}
    <div class="post-wrap">
    <h2 class="title">
        {block:SearchResults}
            {lang:SearchResultCount results for SearchQuery 2}
        {/block:SearchResults}
        {block:NoSearchResults}
            {lang:No search results for SearchQuery 2}
        {/block:NoSearchResults}
    </h2>
    </div>
    {/block:SearchPage}
    {block:TagPage}
    <div class="post-wrap">
    <h2 class="title">
        {lang:Posts tagged Tag 3}
    </h2>
    </div>
    {/block:TagPage}
    {block:Posts inlineMediaWidth="470" nestedMediaWidth="450"}
    <div class="post-wrap">
    <article class="post {block:Date}not-page{/block:Date}">
        {block:Title}
        <h2 class="title">{Title}</h2>
        {/block:Title}
       
        {block:Text}
        <div class="text-body caption">{Body}</div>
        {/block:Text}
       
        {block:Answer}
        <div class="quest-wrap">
        <div class="a-url"><div class="fas fa-question" aria-hidden="true"></div><span class="askr">{Asker}</span> <span class="fas fa-caret-right"></span></div>
            <div class="quest">&ldquo;{Question}&rdquo;</div>
        </div>
        <div class="caption">{Answer}</div>
        {/block:Answer}
       
        {block:Chat}
        {block:Lines}
        <div class="chat {Alt}">{block:Label}<b>{Label} </b>{/block:Label}{Line}</div>
        {/block:Lines}
        {/block:Chat}
       
        {block:Link}
        <a href="{URL}">
        <h2 class="title link-post">
            <span class="fas fa-link"></span>&nbsp;{Name}&nbsp;&nbsp;<span class="fas fa-caret-right" aria-hidden="true"></span>
        </h2></a>
        <div class="caption">
            {block:Excerpt}<blockquote>{Excerpt}</blockquote>{/block:Excerpt}
            {block:Description}{Description}{/block:Description}
        </div>
        {/block:Link}
       
        {block:Quote}
        <blockquote class="quote"><div class="fas fa-quote-left" aria-hidden="true"></div><div class="quote-text">{Quote}</div></blockquote>
        {block:Source}<div class="caption" style="text-align:right">&mdash; {Source}</div>{/block:Source}
        {/block:Quote}
       
        {block:Photo}
        <figure class="media-wrap no-text">
            {LinkOpenTag}<img src="{PhotoURL-500}" width="100%">{LinkCloseTag}
        </figure>
        {block:Caption}
        <div class="caption">{Caption}</div>
        {/block:Caption}
        {/block:Photo}
       
        {block:Photoset}
        <figure class="media-wrap no-text">
        {block:if500pxposts}
            {Photoset-500}
        {/block:if500pxposts}
        {block:ifnot500pxposts}
            {Photoset-700}
        {/block:ifnot500pxposts}
        </figure>
        {block:Caption}
        <div class="caption">{Caption}</div>
        {/block:Caption}
        {/block:Photoset}
       
        {block:Audio}
        <figure class="media-wrap no-text">
            {AudioEmbed}
        </figure>
        {block:Caption}
        <div class="caption">{Caption}</div>
        {/block:Caption}
        {/block:Audio}
       
        {block:Video}
        <figure class="media-wrap no-text">
        {block:if500pxposts}
            {Video-500}
        {/block:if500pxposts}
        {block:ifnot500pxposts}
            {Video-700}
        {/block:ifnot500pxposts}
        </figure>
        {block:Caption}
        <div class="caption">{Caption}</div>
        {/block:Caption}
        {/block:Video}
       
        {block:More}
        <div style="text-align:center; margin:10px auto">
            <a class="more" href="{Permalink}">{lang:Keep reading} <span class="fas fa-caret-right" aria-hidden="true"></span></a>
        </div>
        {/block:More}
       
        {block:HasTags}
        <footer class="tag-wrap">
        <span class="lbl">Tagged&nbsp;<span class="fas fa-caret-right" aria-hidden="true"></span></span>
            {block:Tags}<span class="hash">#</span><a class="tag" href="{TagURL}">{Tag}</a>{/block:Tags}
        </footer>
        {/block:HasTags}
        
    </article>
    
    {block:Date}
    <footer class="info">
        <span class="fas fa-calendar" aria-label="posted on"></span>&nbsp;<a href="{Permalink}" title="{TimeAgo}">{DayofMonth}.{MonthNumber}.{Year}</a>&nbsp;
        {block:NoteCount}
        <span class="fas fa-bookmark" aria-hidden="true"></span>&nbsp;<a href="{Permalink}#notes">{NoteCountWithLabel}</a>&nbsp;
        {/block:NoteCount}
        {block:RebloggedFrom}
        {block:ifnot500pxposts}
        <span class="fas fa-reply" aria-label="reblogged from"></span>&nbsp;<a href="{ReblogParentURL}">{ReblogParentName}</a>&nbsp;
        <span class="src" {block:ContentSource}style="display:none;"{/block:ContentSource}><span class="fas fa-reply-all" aria-label="originally posted by"></span>&nbsp;<a href="{ReblogRootURL}">{ReblogRootName}</a></span>
        {/block:ifnot500pxposts}
        {block:if500pxposts}
        <span class="fas fa-reply" aria-hidden="true"></span>&nbsp;<a href="{ReblogParentURL}" title="{ReblogParentName}">Via</a>&nbsp;
        <span class="src" {block:ContentSource}style="display:none;"{/block:ContentSource}><span class="fas fa-reply-all" aria-hidden="true"></span>&nbsp;<a href="{ReblogRootURL}" title="{ReblogRootName}">OP</a></span>
        {/block:if500pxposts}
        {/block:RebloggedFrom}
        {block:ContentSource}
        <span class="fas fa-reply-all" aria-label="source"></span>&nbsp;<a href="{SourceURL}">Source</a>
        {/block:ContentSource}
       
        <div class="controls">
            <a href="{ReblogURL}" class="fas fa-retweet"></a>
            <span class="like-wrap">{LikeButton}<a class="like-btn fas fa-heart"></a></span>
        </div>
    </footer>
    {/block:Date}
    </div>
    
    {block:PostNotes}
    <footer id="notes" class="post-wrap" name="notes">
        <h2 class="title">Notes</h2>
        <div class="caption">{PostNotes}</div>
    </footer>
    {/block:PostNotes}
    {/block:Posts}
    
    <div class="spacer"></div>
</main>

<footer id="bomtom">
    &copy; {CopyrightYears} <b>{Name}</b> &bull; Theme by <a href="http://linthm.tumblr.com/thm"><b>Laighlin</b></a>
</footer>

</div>

{block:Pagination}
<nav id="pagination">
    {block:PreviousPage}
    <a class="pag prev fas fa-caret-left" title="Previous" aria-label="Previous page" href="{PreviousPage}"></a>
    {/block:PreviousPage}
    {block:NextPage}
    <a class="pag next fas fa-caret-right" title="Next" aria-label="Next page" href="{NextPage}"></a>
    {/block:NextPage}
</nav>
{/block:Pagination}

</body>
</html>