HARPY THEME

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="/style.css" rel="stylesheet" type="text/css" media="all">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

</script>

<script src="https://static.tumblr.com/rtrqcib/VGGnlh8rf/jquery.style-my-tooltips.min.js">

</script>

{block:ifrainbowlinks}

<script type='text/javascript'>
//<![CDATA[
var rate = 50;
if (document.getElementById)
window.onerror=new Function("return true")

var objActive; // The object which event occured in
var act = 0; // Flag during the action
var elmH = 0; // Hue
var elmS = 120; // Saturation
var elmV = 255; // Value
var clrOrg; // A color before the change
var TimerID; // Timer ID
if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}
if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}
if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function ChangeColor()
{
objActive.style.color = makeColor();
}
function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?
// HSVtoRGB
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;
if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}
elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1) elmR = "0" + elmR;
if (elmG.length == 1) elmG = "0" + elmG;
if (elmB.length == 1) elmB = "0" + elmB
elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;
return '#' + elmR + elmG + elmB;
}
//]]>
</script>

{/block:ifrainbowlinks}

<script>

(function($){$(document).ready(function(){$("a[title]").style_my_tooltips({tip_follows_cursor:true,tip_delay_time:0,tip_fade_speed:0,attribute:"title"});});})(jQuery);

</script>

<!--CREDIT EEEK-->

<style>

#credit {

position: fixed;

left: 12px;

bottom: 6px;

font-size: 14px;

}

</style>

<style>
    @import url('https://fonts.googleapis.com/css2?family=Secular+One&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Baloo+2&display=swap');
</style>


<!--METAS-->

<!--IF-->

<meta name="if:rainbow links" contents="" />

<!--SELECT-->

<meta name="select:icon border" content="solid" />

<meta name="select:icon border" content="dashed" />

<meta name="select:icon border" content="dotted" />

<meta name="select:icon border" content="double" />

<meta name="select:icon border" content="groove" />

<meta name="select:icon border" content="ridge" />

<meta name="select:icon border" content="inset" />

<meta name="select:icon border" content="outset" />


<meta name="select:tooltip border" content="solid" />

<meta name="select:tooltip border" content="dashed" />

<meta name="select:tooltip border" content="dotted" />

<meta name="select:tooltip border" content="double" />

<meta name="select:tooltip border" content="groove" />

<meta name="select:tooltip border" content="ridge" />

<meta name="select:tooltip border" content="inset" />

<meta name="select:tooltip border" content="outset" />


<meta name="select:searchbar border" content="solid" />

<meta name="select:searchbar border" content="dashed" />

<meta name="select:searchbar border" content="dotted" />

<meta name="select:searchbar border" content="double" />

<meta name="select:searchbar border" content="groove" />

<meta name="select:searchbar border" content="ridge" />

<meta name="select:searchbar border" content="inset" />

<meta name="select:searchbar border" content="outset" />

<!--IMAGE-->

<meta name="image:background image" contents="" />

<meta name="image:posts outline" contents="" />

<meta name="image:posts background" contents="" />

<meta name="image:sidebar icon" contents="" />

<meta name="image:pixel 1" contents="" />

<meta name="image:pixel 2" contents="" />

<meta name="image:pixel 3" contents="" />

<meta name="image:pixel 4" contents="" />

<meta name="image:pixel 5" contents="" />

<meta name="image:pixel 6" contents="" />

<meta name="image:permalink" contents="" />

<meta name="text:permalink" contents="" />

<meta name="image:notes" contents="" />

<meta name="text:notes" contents="" />

<meta name="image:reblog" contents="" />

<meta name="text:reblog" contents="" />

<!--TEXT-->

<meta name="text:description font" contents="" />

<meta name="text:description font size" contents="" />

<meta name="text:searchbar placeholder" contents="" />

<meta name="text:description" contents="" />

<meta name="text:footer font family" contents="" />

<meta name="text:footer font size" contents="" />

<meta name="text:tooltip font family" contents="" />

<!--COLOR-->

<meta name="color:background color" contents="" />

<meta name="color:posts outline" contents="" />

<meta name="color:posts background" contents="" />

<meta name="color:searchbar font color" contents="" />

<meta name="color:searchbar background" contents="" />

<meta name="color:searchbar border" contents="" />

<meta name="color:icon border" contents="" />

<meta name="color:description text" contents="" />

<meta name="color:posts font color" contents="" />

<meta name="color:bold" contents="" />

<meta name="color:italic" contents="" />

<meta name="color:link" contents="" />

<meta name="color:link hover" contents="" />

<meta name="color:post footer text" contents="" />

<meta name="color:footer text outline" contents="" />

<meta name="color:permalink notes" contents="" />

<meta name="color:tooltip background" contents="" />

<meta name="color:tooltip font color" contents="" />

<meta name="color:tooltip border" contents="" />

<meta name="color:scrollbar" contents="" />
<!--ELEMENTSSS-->

<style>

::-webkit-scrollbar {

width: 2px;

background: transparent;

border: 2px solid transparent;


}

::-webkit-scrollbar-thumb {

background: transparent;

border: 2px solid {color:scrollbar};

}



blockquote {

    margin: 0;

}

.npf_row {

    margin: 0 !important;

}

iframe, img, embed, object, video {

   max-width: 100%;

}

.photoset {

    margin-top: 5px;
}

.posts p, paragraph {

    margin-top: 0px;
}

.tumblr_audio_player {

    max-width: 100%;

}

body {

    margin: 0;

    margin-top: 20px;

    background-image: url('{image:background image}');

    background-color: {color:background color};

    background-size: cover;

    background-attachment: fixed;

    font-family: 'Baloo 2', cursive;

}

b, bold {

color: {color:bold};

}

i, italic {

color: {color:italic};

}

a, ahref {

color: {color:link};

}

a:hover, ahref:hover {

color: {color:link hover};

}

.postscover {

    background-image: url('{image:posts outline}');

    background-color: {color:posts outline};

    background-size: cover;

    background-repeat: no-repeat;

    padding: 10px;
}


.post-footer a:hover {

  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;

  transition-property: transform;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

blockquote {

margin: 0px;

padding-left: 5px;

border-left: 1px dotted {color:post font color};

}

.npf_row {

    margin: 0 !important;

}

.search {

width: auto;

padding: 2px;

margin-bottom: 2px;

font-size: 12px;

display: inline-block;

font-family: ms gothic;

background-color: {color:searchbar background}{select:searchbar background opacity};

color: {color:searchbar text};

}

.wrap {

    width: 440px;

    border: none;

    border-top: transparent;

    border-bottom: transparent;

    border-width: 1px;

    display: inline-block;

    margin-left: 0px;

    max-width: 100%;

    overflow-x: hidden;

    word-break: break-word;

}

.sidebar {

    width: 162px;

    height: auto;

    border: solid;

    margin-top: 150px;

    border: 1px transparent;

    margin-left: 50px;

    margin-top: 0px;

    display: inline-block;

    background-color: transparent;

    position: fixed;

    padding: 2px;

    word-wrap: break-word;

}

.sidebar-image {

    width: 160px;

    height: 160px;

    max-width: 100%;

    padding: 0px;

    border-style: {select:icon border};

    border-width: 1px;

    border-color: {color:icon border};


}

.sidebar-image:hover {

    -webkit-animation-name: hvr-pulse;
  animation-name: hvr-pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

/* Pulse */
@-webkit-keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
@keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }

}
}

.sidebar-image img {

    max-width: 100%;

}

.pixels-2 {

    width: 160px;

    padding-top: 2px;

    border: transparent;

    background-color: transparent;

}

.sidebar-desc {

    text-align: justify;

    font-family: {text:description font};

    font-size: {text:description font size};

    color: {color:description text};

    padding: 4px;

    background: transparent;

    border: transparent;

    max-height: 500px;

    overflow: auto;

}

.post-footer {

width: auto;

text-align: left;

box-sizing: border-box;

font-family: {text:footer font family};

font-size: {text:footer font size};

overflow: hidden;

height: 32px;

color: {color:post footer text};

vertical-align: center;

padding-top: 4px;

text-shadow: -1px -1px 0 {color:footer text outline}, 1px -1px 0 {color:footer text outline}, -1px 1px 0 {color:footer text outline}, 1px 1px 0 {color:footer text outline};

}

.post-footer a {

    color: {color:post footer text};

    text-shadow: -1px -1px 0 {color:footer text outline}, 1px -1px 0 {color:footer text outline}, -1px 1px 0 {color:footer text outline}, 1px 1px 0 {color:footer text outline};

}

.posts {

padding: 10px;

border: 1px dotted #d0caae;

background-color: {color:posts background};

background-image: url('{image:posts background}');

font-family: {text:posts font};

color: {color:posts font color};

text-align: justify;

}


.posts img {

    max-width: 100%;
}

.pagination {

    float: left;
}

.songart {

float: left;

margin-right:10px;

}

.songart img {

width: 100px;

height: 100px;

}

.songtitle {

margin-bottom: 10px;

margin-left: 90px;

}

.songauthor{

margin-bottom: 10px;

font-size: 10px;

margin-left: 90px;

}

.tumblr_audio_player {

height: 50px;

}

#s-m-t-tooltip {

    max-width: 250px;

    text-align: center;

    margin: 10px 0 0 15px;

    padding: 4px;

    background-color: {color:tooltip background};

    color: {color:tooltip font color};

    word-wrap: break-word;

    border: 1px {select:tooltip border} {color:tooltip border};

    font-size: 14px;

    z-index: 99;

    -webkit-transition:all 0.2s linear;

    -moz-transition:all 0.2s linear;

    -o       -transition-duration:0.2s;

    transition: all 0.2s linear;

    font-family: {text:tooltip font family};

    letter-spacing: 2px;

}

.spotify_audio_player {

    height: 80px!important;

    width: 100%!important;

}

.soundcloud_audio_player {

    height: 150px!important;

    width: 100%!important;

}

.trackback {

    position: absolute;

    left: 20px;

    top: 20px;

    width: 19px;

    height: 19px;

    background-color: #fff;

    padding: 10px;

    opacity: .4;

}

.pressplay {

    position: relative;

    width: 25px;

    height: 25px;

    overflow: hidden;

    left: -6px;

    top: -3px;

}

.albumpic {

    position: absolute;

    left: 0px;

    top: 0px;

    width: 79px;

    height: 79px;

}

.albumpic img {

    width: 100%;

    height: auto;

    border: 1px solid {color:font color};

}

.trackinfo {

    width: auto;

    position: relative;

    display: inline-block;

    margin-left: 90px;

    min-height: 85px;

}

.audiowrapper {

    position: relative;

    display: inline-block;

    margin-top: 10px;

}

ol.notes {

    text-align: justify;

    color: {color:permalink notes};

}


</style>

</head>

<body>

<center>

<div class="wrap">

{block:Posts}

<div class="postscover">

<div class="posts" style="background-color: {color:post background color};">

{block:Text}
{block:Title}<a href="{Permalink}">{Title}</a>{/block:Title}
{Body}
{/block:Text}

{block:Quote}
<div class="quote"><h2 style="margin-top: 2px; margin-bottom: 2px;"><b>"</b> <i>{Quote}</i> <b>"</b></h2></div>
{block:Source}<div class="source">&mdash; {Source}</div>{/block:Source}
{/block:Quote}

{block:Link}
<big><a href="{URL}">{Name}</a></big>
{block:Description}{Description}{/block:Description}
{/block:Link}

{block:Chat}
{block:Title}{Title}{/block:Title}
{block:Lines}
<div class="{Alt} user_{UserNumber}">
{block:Label}{Label}{/block:Label} {Line}
</div>
{/block:Lines}
{/block:Chat}

{block:Answer}
<span style="float: right;"><i>{Asker}</i></span><br>
<div class="question"><blockquote>{Question}</blockquote></div><hr>
{Answer}
{/block:Answer}


{block:Photo}
{LinkOpenTag}<img src="{PhotoURL-400}" alt="{Permalink}"/>{LinkCloseTag}
<hr>
{block:Caption}{Caption}{/block:Caption}
{/block:Photo}

{block:Photoset}
{Photoset-400}
{block:Caption}{Caption}{/block:Caption}
{/block:Photoset}

{block:Video}
{Video-400}
{block:Caption}{Caption}{/block:Caption}
{/block:Video}

{block:AudioPlayer}
<div class="audiowrapper">
{block:AlbumArt}
<div class="albumpic"><img src="{AlbumArtURL}"></div>
{/block:AlbumArt}
<div class="trackback">
<div class="pressplay">
{AudioPlayer}
</div></div>
<div class="trackinfo">
{block:TrackName}{TrackName}{/block:TrackName}<br>
{block:Artist}<b>{Artist}</b>{/block:Artist}<br>
{block:Album}<i>{Album}</i>{/block:Album}<br>
</div></div>
{block:Caption}{Caption}{/block:Caption}
{/block:AudioPlayer}

{block:Date}

{block:PermalinkPage}
{/block:PermalinkPage}

</div>

{block:PermalinkPage}
{block:NoteCount}
{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}"> via</a> {/block:RebloggedFrom}{block:ContentSource} x <a href="{SourceURL}" title="{SourceTitle}"> source</a>{/block:ContentSource}
<br>
{block:PostNotes}{PostNotes}{/block:PostNotes}
{/block:NoteCount}
{/block:PermalinkPage}
{/block:Date}

</div>

<div class="post-footer" style="height: auto;">

<center>

<a href="{Permalink}" title="#{notecount}" style="color:{color:post type color}; text-decoration: none; float: left;"><img src="{image:notes}">{text:notes}</a>

<a href="{ReblogURL}" class="reblog" style="float: right; text-decoration: none;" target="_blank" title="reblog">{text:reblog}<img src="{image:reblog}"></a>

{block:HasTags}&nbsp;

{block:Tags}

{text:tag symbol} <a href="{TagURL}" title="{Tag}" style="text-decoration: none;">

#{Tag}</a> &nbsp;
{/block:Tags}

{/block:HasTags}

<br>

<a href="{permalink}" title="{timeago}">

<img src="{image:permalink}" style="margin-top: 4px;">{text:permalink}</a>

</center>

</div>

<br>

{/block:Posts}

<br>

</div>

</div>

</div>

<div class="sidebar">

<center>

{block:Pagination}

{block:NextPage}<a href="{NextPage}" style="float: left;">next</a>{/block:NextPage}

{block:PreviousPage}<a href="{PreviousPage}" style="float: right;">prev</a>{/block:PreviousPage}

{/block:Pagination}

<form action="/search" method="get" style=" outline: none; color:{color:searchbar font color};"><input class="search" type="text" placeholder="{text:searchbar placeholder}" name="q" value="" style=" outline: none; color:{color:searchbar font color}; width: 93%; padding: 4px; border: 2px {select:searchbar border} {color:searchbar border};"></input></form>

<a href="/"><div class="sidebar-image" style="margin-top: 12px;">

<img style="max-width: 100%; height: 100%;" src="{image:sidebar icon}">

</div></a>

<div class="pixels-2" style="margin-top: 5px; margin-bottom: -9px;">

<center>

<img src="{image:pixel 1}"> &nbsp;

<img src="{image:pixel 2}"> &nbsp;

<img src="{image:pixel 3}"> &nbsp;

<img src="{image:pixel 4}"> &nbsp;

<img src="{image:pixel 5}">

</center>

</div>

<div class="sidebar-desc" style="margin-top: 2px;">

{text:description}

<br>

</div>

</div>

<!--CREEEDDDIT-->
<div id="credit">

<a href="https://cod.tumblr.com/" target="_blank" title="CODED BY JOYBOY">🦩</a>

</div>

</center>

</body>

</html>