Create a new version of paste:

<!DOCTYPE html>
<html lang="en" class="no-js">
<!--THEME 05 v1 (Revamp) Square Pegs by hermionegrangcr
 
THEME BLOG: grangersdesigns
 
 
          ♛      ♛     ♛                                
         ♛♛♛    ♛♛♛   ♛♛♛                      
         ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛              
         ♛♛♛  ♥ G♚D ♥ ♛♛♛  
         ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛                            
          ♛ ♛ ♛ ♛ ♛ ♛ ♛      © hermionegrangcr     
 
                           
Important:
 
♚ Basic rules apply (see https://hermionegrangcr.tumblr.com/rules)

♚ This theme is optimised for Google Chrome and laptops of 13~15 in.

♚ Tweak this to your preference as long as the credits remain intact.

♚ If you encounter any issues or have any suggestions, please message me at https://grangersdesigns.tumblr.com/faq
 
-->
    <head>
        <title>{Title}</title>

    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="{Favicon}">  
    
{block:Description}
<meta name="description" content="{MetaDescription}"/>
{/block:Description}   

<meta name="image:sidebar" content="https://i.imgur.com/L7GvW2s.png">
<meta name="image:profile" content="https://i.imgur.com/5MCXyvf.png">   
<meta name="color:highlight" content="#C4D0F5">
<meta name="color:grad1" content="#fafafa">
<meta name="color:grad2" content="#cdcdcd"> 
<meta name="color:bg" content="#000"> 
<meta name="color:overlay" content="#fafafa"> 

<meta name="if:unnested captions" content="">
<meta name="if:infinite scroll" content="">
<meta name="if:manual load" content="">
<meta name="if:hover tags"content="">
<meta name="if:show blogroll"content="">

<meta name="select:background"content="white_bg" title="white"> 
<meta name="select:background"content="simple_bg" title="simple">
<meta name="select:background"content="grad_bg" title="gradient">

<meta name="select:body font" content="Open Sans">
<meta name="select:body font" content="Karla">
<meta name="select:body font" content="Roboto">
<meta name="select:body font" content="Source Sans Pro">
<meta name="select:body font" content="Lato">

<meta name="select:font size" content="12px" title="12px"> 
<meta name="select:font size" content="11px" title="11px"> 
<meta name="select:font size" content="10px" title="10px">
<meta name="select:font size" content="9px" title="9px">   

<meta name="select:post width"content="post500"title="500px"/>    
<meta name="select:post width"content="post540"title="540px"/>
<meta name="select:post width"content="post450"title="450px"/>
<meta name="select:post width"content="post400"title="400px"/>
<meta name="select:post width"content="post350"title="350px"/>
<meta name="select:post width"content="post300"title="300px"/> 

<meta name="select:sidebar width"content="sb120"title="120px"/>
<meta name="select:sidebar width"content="sb80" title="80px"/>
<meta name="select:sidebar width"content="sb100"title="100px"/>
<meta name="select:sidebar width"content="sb150"title="150px"/>

<meta name="select:post spacing" content="100px">
<meta name="select:post spacing" content="80px">
<meta name="select:post spacing" content="70px">
<meta name="select:post spacing" content="60px">
<meta name="select:post spacing" content="50px">
<meta name="select:post spacing" content="90px">
<meta name="select:post spacing" content="110px">
<meta name="select:post spacing" content="120px">


<meta name="select:photoset gutter"content="5px"title="5px">
<meta name="select:photoset gutter"content="10px"title="10px">
<meta name="select:photoset gutter"content="2px"title="2px">
<meta name="select:photoset gutter"content="1px"title="1px">
<meta name="select:photoset gutter"content="0px"title="0px">

<meta name="select:notes display" content="def_notes" title="default">
<meta name="select:notes display" content="grid_notes" title="grid">

<meta name="text:Link1" content="Link1">
<meta name="text:link1 URL" content="/">
<meta name="text:Link2" content="Link2">
<meta name="text:link2 URL" content="/">
<meta name="text:Link3" content="Link3">
<meta name="text:link3 URL" content="/">
<meta name="text:Link4" content="Link4">
<meta name="text:link4 URL" content="/">
<meta name="text:Link5" content="Link5">
<meta name="text:link5 URL" content="/">
<meta name="text:Link6" content="Link6">
<meta name="text:link6 URL" content="/">
<meta name="text:Link7" content="Link7">
<meta name="text:link7 URL" content="/">
<meta name="text:Link8" content="Link8">
<meta name="text:link8 URL" content="/">
<meta name="text:Link9" content="Link9">
<meta name="text:link9 URL" content="/">

<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
 
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Karla:400,700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Lora:400,400i" rel="stylesheet">

<link href='https://static.tumblr.com/xbvpdcx/iSdosrzqp/th5v1stylings.css' rel='stylesheet' type='text/css'>

<!--MAIN STYLINGS; DO NOT REMOVE-->
<link href='https://static.tumblr.com/xbvpdcx/CjJossfaz/th5v1main.css' rel='stylesheet' type='text/css'>
<!-- / MAIN STYLINGS; DO NOT REMOVE-->

        
<style type="text/css">
/*Tumblr Controls*/
.iframe-controls--desktop{
    padding-right:10px !important;
    right:-35px !important;
    top:-5px !important;
    opacity:0;
    transform: scale(0.7);
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -o-transform: scale(0.7);
    -ms-transform: scale(0.7);     
    -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out; 
  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;    
    
}
.iframe-controls--desktop:hover {
    opacity:0.6;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;       
}

{block:permalinkpage}
.tmblr-iframe-compact .tmblr-iframe--unified-controls {
    width: 500px!important;
}

.iframe-controls--desktop {right:-70px!important;}
{/block:permalinkpage}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/*hover controls*/
#controlscog {
    z-index:50;
    font-size:12px;
    position:fixed;
    top:15px;
    right:5px;
    background:transparent!important;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
}

html {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

html, body {height:100%;}   

body {
    color:#5f5f5f;
    font-family:'{select:body font}';
    font-size: {select:font size};
    line-height:160%;
    overflow-x:hidden;
    background-attachment:fixed;
    margin:0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;      
}

body.simple_bg, .simple_bg .container {background:#f5f5f5;}
body.white_bg, .white_bg .container {background:#fff;}

body.grad_bg, .grad_bg .container {
    background: -webkit-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* IE10 */
  background:      -o-linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* Opera 11.10+ */
  background:         linear-gradient(90deg, {color:grad1} 10%, {color:grad2} 90%); /* W3C */   
}

.container {min-height: 100%;}

::-webkit-scrollbar {
    width:11px;
    background:inherit;
}

::-webkit-scrollbar:horizontal {display:none;}

::-webkit-scrollbar-thumb { background-color: {color:highlight}; border:5px solid #f5f5f5; }

a {
    text-decoration:none;
    color:#999;
    cursor:help;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;        
}

a:hover {
    color:{color:highlight};
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;     
}


iframe, img:not(.lightbox-image), embed, object, video, pre, li, blockquote {max-width: 100% !important;}

pre { 
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
background:#f5f5f5;
padding:5px;
}

#s-m-t-tooltip{
    position:absolute;
    margin-top: 10px;
    z-index:9999999999;
    padding:2px 5px 2px 5px;
    max-width:500px;
    background: #fff;
    font-size:{select:font size};
    font-size:90%;
    letter-spacing:1.1px;
    text-transform:uppercase;
    box-shadow: 1px 1px 3px #dfdfdf;
    border-left:2px solid {color:highlight};
}

/*Customisable Modal Stylings*/ 
.md-perspective body  {background:{color:bg};}
.overlay{background: rgba({RGBcolor:overlay}, 0.8);}
div.abtpop {font-size:{select:font size};}


/*sidebar*/
#desc {margin-top:{select:font size};}
nav.snav {margin-top:{select:font size};}

nav.snav a {
    display:block;
    margin-bottom:calc({select:font size}/3);
}


/*posts*/

main {display:block;}

.posts {margin:{select:post spacing} auto;}


{block:ifinfinitescroll}
.posts {
    -webkit-animation:fadeIn ease-in 1s;
    -o-animation:fadeIn ease-in 1s;
    -moz-animation:fadeIn ease-in 1s;
    animation:fadeIn ease-in 1s;     
}
{/block:ifinfinitescroll}

.unnested .posts img.photop, .unnested .posts .tumblr_video_container {margin-bottom:calc({select:font size} * (2/3));}

.posts h1:only-child {margin-bottom:calc({select:font size} * 0.8);}

.posts h1 {
    margin:calc(({select:font size} * 2)/3) 0 calc(({select:font size} * 4)/3) 0;
    font-size:calc({select:font size} * 2);
}

.posts li {margin-bottom:calc({select:font size} / 2);}

.posts ol ol,.posts ol ul, .posts ul ol,.posts ul ul {
  margin:{select:font size} 0 {select:font size} 0;
}

.defcap blockquote {
  border-left: 1px solid #eaeaea;
  margin-left: 0;
  margin-right: 0;
  padding-left: {select:font size};
}

.defcap .captions a:hover, .qsource a:hover, span.action a:hover, .tumblr_parent p a:hover, a.append:hover {border-bottom:1px solid {color:highlight};} 

.tumblr_parent blockquote {
 padding: 0 0 0 10px;
 margin: 0 0 0 0;    
 border-left:1px {color:highlight} solid;
}

.tumblr_parent blockquote div {margin:{select:font size} 0 {select:font size} 0;}

img.tumblr_avatar {border-radius:10%;margin-right:{select:font size};margin-top:calc({select:font size} / 2);margin-bottom:calc({select:font size} / 2);width:36px;height:36px;}

/*quotes*/
h1.qmedium {font-size:calc({select:font size} * 1.5);}

h1.qlong {font-size:calc({select:font size} * 1.2);}

span.qsource {width:100%;padding:{select:font size};display:block;text-align:center;}

.divider {margin-top:{select:font size};text-align:center;}
 
.divider::before {background-color:{color:highlight};}

/*links*/
.linkp {margin-bottom:calc({select:font size} * (2/3));}

.linkp > span {
    font-size:calc({select:font size} * 1.5);
    margin-right:calc({select:font size});    
}

.linkp a {max-width:calc(100% - (({select:font size} * 1.5) + ({select:font size}/2)));}

.linkp a:hover:after {
width: 100%;
background: {color:highlight};
}


/*lightbox*/
#tumblr_lightbox,.tmblr-lightbox {background:#f5f5f5!important;backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px); }


#tumblr_lightbox img,.tmblr-lightbox .vignette {
    opacity:0;
    -webkit-box-shadow:none!important;
    box-shadow:none!important;
}

#tumblr_lightbox_center_image {
    opacity: 1!important; 
    background-color: #fff!important;
}

#tumblr_lightbox_left_image, #tumblr_lightbox_right_image {opacity:0.5!important;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;     
}

#tumblr_lightbox_left_image:hover, #tumblr_lightbox_right_image:hover {
    opacity:1!important;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out; 
}


#tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image, .tmblr-lightbox .lightbox-image { 
    box-shadow: 0 0 0 transparent !important;
}

#tumblr_lightbox img, #tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image, .tmblr-lightbox .lightbox-image {
    border-radius:0!important;
    -moz-border-radius: 0!important;
    -webkit-border-radius: 0!important;
    -o-border-radius: 0!important;   
    background:#fff !important;
    padding:{select:photoset gutter} !important;
}


/* cr: agustd/gukthemes & sughyun/caulfielld; do not take w/o credit. */
.photo-slideshow .count-1 {
    margin-bottom:{select:photoset gutter}!important;
}

 
.photo-slideshow .count-2 {
    margin-left:{select:photoset gutter}!important;
    margin-bottom:{select:photoset gutter}!important;
    width:calc(50% - ({select:photoset gutter}/2))!important;
}
 
.photo-slideshow .count-2:first-child {
    margin-left:0!important;
}
 
.photo-slideshow .count-3 {
    margin-left:{select:photoset gutter}!important;
    margin-bottom:{select:photoset gutter}!important;
    width:calc((100% - (2 * {select:photoset gutter}))/3)!important;
}
 
.photo-slideshow .count-3:first-child {
    margin-left:0!important;
}
.photo-slideshow {
	display:block!important;
	margin-bottom:calc(-({select:photoset gutter} - 3px));
	position:relative;
	width:100%;
}

.defcap .photo-slideshow.processed {margin-bottom:0!important;}

.defcap .row:last-of-type .count-1 {margin-bottom:0!important;}

.unnested .photo-slideshow.processed {margin-bottom:calc({select:font size} * (2/3)) !important;}

.unnested .photo-slideshow.processed .row:last-of-type .count-1 {margin-bottom:0!important;}

/* cr: agustd/gukthemes & sughyun/caulfielld; do not take w/o credit. */


/*audio*/
.unnested .flitwick {margin-bottom:calc({select:font size} * (2/3));}


/*asks*/
div.ask_cont {
  padding-bottom:{select:font size};
  margin-bottom:{select:font size};    
}

.unnested .ask_cont {margin-bottom:calc({select:font size} * (2/3));}


/*permalink / info*/
.p_info {margin-top:calc({select:font size} * 1.5);}

.p_obj {margin-left:calc(1.5 * {select:font size});font-size:90%;}
.p_obj span {margin-right:calc({select:font size}/3);}


.tags {
    width:100%;
    position:absolute;
    text-align:center;
    top: calc(100% + ({select:font size} * 2));
    right:0;
    left:0;
    {block:ifhovertags}
    opacity:0;
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;     
    {/block:ifhovertags}
}

.tags a {margin-right:10px;    word-break: break-all;}

.post500 .tags {max-width:500px;}
.post540 .tags {max-width:540px;}
.post450 .tags {max-width:450px;}
.post400 .tags {max-width:400px;}
.post350 .tags {max-width:350px;}
.post300 .tags {max-width:300px;}

/*pagination*/
.pg {
    margin:auto;
    text-align:center;
{block:ifinfinitescroll}
    display:none;
{/block:ifinfinitescroll}    
}

/*notes*/
h1.notehead {font-size:140%;margin:calc({select:font size}) 0 calc({select:font size} * 2) 0;}

.def_notes h1.notehead {margin-left:calc({select:font size}/3);}

.def_notes li.more_notes_link_container a:hover, .grid_notes li.more_notes_link_container a:hover{
    color:{color:highlight};
    border-bottom:1px solid {color:highlight};
    -webkit-transition: all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;      
}


</style>   
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
<script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>


<script>
$(document).ready(function() {
  
   $('.photo-slideshow').pxuPhotoset({
       lightbox: true,
       rounded: false,
       gutter: '0px',
       borderRadius: '0px',
       photoset: '.photo-slideshow',
       photoWrap: '.photo-data',
       photo: '.pxu-photo'
   }); 

});

</script>

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

<script> 

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

{block:indexpage}
{block:ifinfinitescroll}
<script src="https://static.tumblr.com/xbvpdcx/9LRo1g4a7/jquery.infinitescroll.min.js"></script>

<script>

// Infinite Scroll
$(function() {
    
var $container = $('main');
    $container.infinitescroll({
        
      loading: {
        finishedMsg: "<em>No more posts</em>",
        img: null,
        msg: null,
        msgText: "<em>Loading posts...</em>",
        {block:ifmanualload}
        finished: function () {$('.append').text('Load More'); },
        {/block:ifmanualload}

      },
    
        navSelector  : '.pg',            
        nextSelector : '.pg a.nxtpg',
        itemSelector : '.posts',
        {block:ifmanualload}
    errorCallback: function () {$('.append').fadeOut();},
        {/block:ifmanualload}
        bufferPx     : 600,

    }, 
        
    function( newElements ) {
           $( newElements ).find('.photo-slideshow').pxuPhotoset({
               lightbox: true,
               rounded: true,
               gutter: '0px',
               borderRadius: '0px',
               photoset: '.photo-slideshow',
               photoWrap: '.photo-data',
               photo: '.pxu-photo'
            });

var $newElems = $(newElements);


{block:ifunnestedcaptions}
$newElems.unnest({

    yourCaption: ".captions",  
    wrapName: ".tumblr_parent", 
    newCaptionUsername: false,
    originalPostCaptionUsername: false, 
    tumblrAvatars: true,
    tumblrAvatarClass: ".tumblr_avatar",
    usernameColon: false
    
});  

{/block:ifunnestedcaptions}


    });

{block:ifmanualload}    
    $container.infinitescroll('unbind');
        $('.append').on('click', function(e) {
      e.preventDefault();
      $container.infinitescroll('retrieve');
    }); 
{/block:ifmanualload}    
});
</script>
{/block:ifinfinitescroll}
{/block:indexpage}

    </head>
<body class="{select:post width} {block:ifnotunnestedcaptions}defcap{/block:ifnotunnestedcaptions} {block:ifunnestedcaptions}unnested{/block:ifunnestedcaptions} {select:background} {select:notes display} {select:sidebar width}">

<div id="controlscog">
<span class="lnr lnr-cog"></span>
</div> 

<!--ASKBOX-->
<div class="voldemort poppy" id="modal-1">
    <div class="contenu">
        <h3>{AskLabel}</h3>
        <div>
<center>
    <iframe frameborder="0" scrolling="no" width="500" height="190" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:auto;" id="ask_form"></iframe>
</center>  
<button class="invisibilitycloak">Close</button>
        </div>
    </div>
</div>
<!--ASKBOX-->


<!--INFO-->
<div class="voldemort poppy" id="modal-2">
    <div class="contenu">
        <h3>Info</h3>
        <div class="abtpop">

<!--Edit here-->
<div id="abtprofile">
    <img src="{image:profile}">
    
</div>


<div id="abttxt">

<!--WRITE YOUR INFO HERE: BASIC HTML TAGS INCLUDED-->
<p>
<b>Bold.</b> 

<i>Italic.</i> 

<strike>Strike.</strike> 

<u>Underline.</u> Line break.<br> 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.   
</p>

<blockquote>This is a blockquote</blockquote>

<p>This is a new paragraph</p>

<!--TO HERE!-->

</div>

<!--To here-->

<button class="invisibilitycloak">Close</button>
        </div>
    </div>
</div>
<!--INFO-->

<!--NAVI-->
<div class="voldemort poppy" id="modal-3">
    <div class="contenu">
        <h3>Navigation</h3>
        <div class="pointme">

  <a href="{text:Link1 URL}">{text:Link1}</a>  
  <a href="{text:Link2 URL}">{text:Link2}</a>  
  <a href="{text:Link3 URL}">{text:Link3}</a>  
  <a href="{text:Link4 URL}">{text:Link4}</a>  
  <a href="{text:Link5 URL}">{text:Link5}</a>  
  <a href="{text:Link6 URL}">{text:Link6}</a>  
  <a href="{text:Link7 URL}">{text:Link7}</a>  
  <a href="{text:Link8 URL}">{text:Link8}</a>  
  <a href="{text:Link9 URL}">{text:Link9}</a>

<button class="invisibilitycloak">Close</button>
        </div>
    </div>
</div>
<!--NAVI-->

{block:ifshowblogroll}
{block:following} 
<!--BROLL-->
<div class="voldemort poppy" id="modal-4">
    <div class="contenu">
        <h3>Following</h3>
        <div class="broll">
        
{block:Followed}
<a href="{FollowedURL}" title="{FollowedName}"><img class="followed" src="{FollowedPortraitURL-96}"></a> 
{/block:Followed}

<button class="invisibilitycloak">Close</button>
        </div>
    </div>
</div>
<!--BROLL-->
{/block:following} 
{/block:ifshowblogroll}

<!--MAIN CONTAINER-->
<div class="container">
<section id="everything">

<!--SIDEBAR-->
    <aside>
        <div id="sidebar">
            <img class="sprof" src="{image:sidebar}">
                {block:Description}
                <div id="desc">{Description}</div>
                {/block:Description}  
                <nav class="snav">
            <a href="/"><span class="lnr lnr-home"></span> Home</a>
            {block:AskEnabled}
            <a class="md-trigger md-setperspective" data-modal="modal-1">
            <span class="lnr lnr-envelope"></span> Mail</a>
            {/block:AskEnabled}
    <a class="md-trigger md-setperspective" data-modal="modal-2">
        <span class="lnr lnr-user"></span> Info
    </a>
    
    <a class="md-trigger md-setperspective" data-modal="modal-3">
        <span class="lnr lnr-menu"></span> Links
    </a>
{block:ifshowblogroll}   
{block:following}     
    <a class="md-trigger md-setperspective" data-modal="modal-4">
        <span class="lnr lnr-heart"></span> Blogroll
    </a>
{/block:following}     
{/block:ifshowblogroll}      
                </nav>
        </div>
    </aside>
<!--SIDEBAR-->    

<!--POSTS-->    
    <main>
        {block:posts}
        <article class="posts">

{block:Text}
{block:Title}<h1>{Title}</h1>{/block:Title}
<div class="captions">
{Body}    
</div>
{/block:Text}     
 
 {block:Photo}
    {LinkOpenTag}
<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false">
    <img class="photop" src="{PhotoURL-500}" width="100%" height="auto">
</a>
    {LinkCloseTag}

{block:Caption}<div class="captions">{Caption}</div>{/block:Caption}

{/block:Photo} 

{block:Photoset}
<div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">

{block:Photos}
<div class="photo-data">
    <div class="pxu-photo">
    <img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
    </div>
    <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
</div>
{/block:Photos}
    
</div>

{block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
{/block:Photoset}

{block:Audio}
<div class="flitwick">

<div class="mariah">
    <div class="playbox">{AudioPlayerWhite}</div>
</div>

<div class="grammy">
<img src="https://static.tumblr.com/jn9hrij/20Ul2zzsr/albumart.jpg" style="position:absolute;" width="100" height="100" />
{block:AlbumArt}
<img src="{AlbumArtURL}" style="position:absolute;">
{/block:AlbumArt}    
</div>


<div class="taylor">
    <div class="swift">
{block:TrackName}
<b>Song:</b> {TrackName}
{/block:TrackName}<br>

{block:Artist}
<b>Artist:</b> {Artist}
{/block:Artist}<br>

{block:Album}
<b>Album:</b> {Album}
{/block:Album}

    </div>
</div>

</div>
{block:Caption}
<div class="captions">{Caption}</div>
{/block:Caption}
{/block:Audio}

{block:Video}
{Video-500}
{block:Caption}<div class="captions">{Caption}</div>{/block:Caption}
{/block:Video}

{block:Chat}
{block:Title}<h1>{Title}</h1>{/block:Title}
<div class="captions">
{block:Lines}<p>
{block:Label}<b>{Label}</b>{/block:Label} {Line}    
</p>{/block:Lines}


</div>
{/block:Chat}

{block:Link}
<div class="linkp">
<span class="lnr lnr-link"></span>
<a href="{URL}"><h1>{Name}</h1></a></div>
{block:Description}
<div class="captions">
{Description}
</div>
{/block:Description}
{/block:Link}

{block:Quote}
<h1 class="q{length}">&ldquo;{Quote}&rdquo;</h1>

{block:Source}
<div class="divider"></div>
<span class="qsource">{Source}</span>{/block:Source}
{/block:Quote}

{block:Answer}
<div class="ask_cont">
    <div class="asker_img">
        <img src="{AskerPortraitURL-40}">       
    </div>
    <div class="sender">{Asker}: {Question}</div>
</div>

<div class="captions">
{Answer}    
</div>
{/block:Answer}

{block:date}

<div class="p_info">
    <div class="p_obj">
    <span class="lnr lnr-clock"></span> 
<a title="{TimeAgo}" href="{Permalink}">{ShortMonth}. {DayOfMonth}{DayOfMonthSuffix}</a>
    </div>
    {block:NoteCount}
    <div class="p_obj">
    <span class="lnr lnr-heart"></span>
<a href="{Permalink}">{NoteCountWithLabel}</a>        
    </div>
    {/block:NoteCount}

{block:RebloggedFrom}
<div class="p_obj">
<a href="{ReblogParentURL}" title="{ReblogParentName}"target="_blank">via</a>
{block:ContentSource}
/ <a href="{SourceURL}"  title="{ReblogRootName}" target="_blank">src</a>
{/block:ContentSource}
</div>
{/block:RebloggedFrom}       
    
    <div class="p_obj">
        <span class="lnr lnr-sync"></span>
        <a href="{ReblogURL}">Reblog</a>
    </div>
</div>

<!-- {block:NoRebloggedFrom}
{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
{/block:NoRebloggedFrom} -->

{block:ContentSource}<!-- {SourceURL}
{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource} 
{/block:date}

{block:HasTags}
<div class="tags">
    {block:Tags}
    <a href="{TagURL}">#{Tag}</a>
    {/block:Tags}      
</div>
{/block:HasTags}
        </article>

{block:permalinkpage}
{block:NoteCount} 
<article class="posts postnotes">
<h1 class="notehead">{NoteCountWithLabel}</h1>
{block:PostNotes}{PostNotes-64}{/block:PostNotes}    
</article>
{/block:NoteCount}
{/block:permalinkpage}   
        
        {/block:posts}
    </main>
<!--POSTS-->  

{block:Pagination}  
{block:IndexPage}
  <!--PAGINATION-->
<div class="pg">
{block:PreviousPage}
<a href="{PreviousPage}">&laquo;</a>
{/block:PreviousPage}

{block:JumpPagination length="5"} 

{block:CurrentPage} 
<span class="currentpg">{PageNumber}</span>
{/block:CurrentPage}

{block:JumpPage} 
<a href="{URL}">{PageNumber}</a>
{/block:JumpPage}

{/block:JumpPagination}    
    

{block:NextPage}
<a class="nxtpg" href="{NextPage}">&raquo;</a>
{/block:NextPage}      
</div>
{/block:IndexPage}
{/block:Pagination}    

{block:IndexPage}

{block:ifinfinitescroll}
{block:ifmanualload}
{block:Pagination}

<div class="manual_cont">
    <a class="append">Load More</a>
</div>
{/block:Pagination}
{/block:ifmanualload}
{/block:ifinfinitescroll}

{/block:Indexpage}

</section>    
</div>
<!--MAIN CONTAINER-->

<div class="overlay"></div><!-- the overlay element -->

<!--PLEASE DO NOT ALTER OR COVER THE CREDIT-->
<div id="leo">
<a class="a-link" href="https://hermionegrangcr.tumblr.com">♚</a>
</div>
<!--END OF CREDIT-->

<!--Tooltips. It's placed here bc it's only compatible to jQuery 1.7-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  

<script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>

<script>
jQuery.noConflict();
(function($){
 
$(document).ready(function(){
 
$("a[title],img[title],[title]").style_my_tooltips({
 
tip_follows_cursor:true,
 
tip_delay_time:30,
 
tip_fade_speed:300,
 
attribute:"title"
 
});
 
});
 
})(jQuery); 
</script> 
<!--Tooltips-->  

<!--MODAL SCRIPTS-->
<script src="https://static.tumblr.com/xbvpdcx/8a7nkqvai/classie.js" ></script> 

<script src="https://static.tumblr.com/xbvpdcx/Ppyossfve/th05v1modal.js" ></script> 
<!--MODAL SCRIPTS-->
                
    
</body>    
</html>