themes/37-Empyrean

2784 lines
78 KiB
Plaintext

<!----------------------------------------------------
Theme [37]: Empyrean
Made by glenthemes
Release date: 2020/12/29
Last updated: 2023/09/18
What's new:
✱ NPF audio post support
TERMS OF USE:
1) Do not remove the theme credit.
2) Do not repost/redistribute my themes.
3) Do not take parts of the code and use it as your own.
4) Do not use my themes as a base code.
5) Do not mix my themes together.
Credits:
- dashboard style captions base code by annasthms
annasthms.tumblr.com/post/178371187885
- css photosets by annasthms & eggdesign
annasthms.github.io/photosets
- change '.gifv' to '.gif' tutorial by felicitysmoak
felicitysmoak.tumblr.com/post/188159105501
- responsive videos & iframes tutorial by nouvae
nouvae.tumblr.com/post/17681541505
- 'Beaufort' font by Nick Shinn
shinntype.com/typefaces/beaufort
----------------------------------------------------->
<!DOCTYPE html>
<html>
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<link href="//fonts.googleapis.com/css?family=Karla|Libre+Franklin" rel="stylesheet">
<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="//rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
<link href="//static.tumblr.com/0podkko/xIbplezmo/modified_photosets.css" rel="stylesheet">
<script src="//static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
<script src="//static.tumblr.com/gtjt4bo/sgMrymui0/waitforelement.js"></script>
<script src="//glen-themes.gitlab.io/thms/37/fkn-audio.js"></script>
<script src="//glen-themes.gitlab.io/thms/37/200years.js"></script>
<script src="//glen-themes.gitlab.io/thms/37/sencha.js"></script>
{block:ifshowmusicplayer}
<script src="//glenthemes.github.io/-music-/glenplayer07.js"></script>
{/block:ifshowmusicplayer}
<script src="//npf-images-v3.github.io/script.js"></script>
<link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
<style tmblr-npf>
:root {
--NPF-Caption-Spacing:1em;
--NPF-Image-Spacing:{select:photoset images spacing};
}
a.post_media_photo_anchor, a.post_media_photo_anchor:hover {
padding-bottom:0!important;
border-bottom:none!important;
}
.spotify_audio_player {
height:80px!important;
}
</style>
<script>
// minimal soundcloud player @ shythemes.tumblr
// shythemes.tumblr.com/post/114792480648
$(document).ready(function(){
var soundcloud_btn = '{color:link}';
$('.soundcloud_audio_player').each(function(){
$(this).attr({ src: $(this).attr('src').split('&')[0] + '&amp;liking=false&amp;sharing=false&amp;auto_play=false&amp;show_comments=false&amp;continuous_play=false&amp;buying=false&amp;show_playcount=false&amp;show_artwork=true&amp;origin=tumblr&amp;color=' + soundcloud_btn.split('#')[1], height: 116, width: '100%' });
$(this).attr("style", "height:116px!important");
});
$(".spotify_audio_player").each(function(){
$(this).attr("style", "height:80px!important")
})
});
</script>
<!-- unblue polls -->
<!-- glenthemes.tumblr.com/post/708014819571302400 -->
<link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet">
<style unblue-polls>
.poll-post {
--Poll-Question-Font-Size: {select:post font size};
--Poll-Option-Background-Color: transparent;
--Poll-Option-Corner-Rounding: 4px;
--Poll-Option-Border-Size: 1px;
--Poll-Option-Border-Color: var(--Blockquote-Border-Color);
--Poll-Option-Padding: 10px;
--Poll-Option-Font-Size: {select:post font size};
--Poll-Option-Spacing: 10px;
--Poll-Option-Text-Color: {color:post text};
--Poll-Option-HOVER-Border-Color: var(--Blockquote-Border-Color);
--Poll-Option-HOVER-Background-Color: transparent;
--Poll-Option-HOVER-Text-Color: {color:link};
--Poll-Option-HOVER-Speed: 0.4s;
}
.poll-see-results {
padding-bottom:0!important;
border-bottom:none!important;
font-size:calc(var(--Poll-Option-Font-Size) - 1px)!important;
text-transform:uppercase;
letter-spacing:0.5px;
}
</style>
<!-- npf audio player -->
<!-- glenthemes.tumblr.com/post/722160746171072512 -->
<script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
<link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
<script>
tumblr_npf_audio({
emptyTitleText: "Untitled track",
emptyArtistText: "Untitled artist",
emptyAlbumText: "Untitled album",
titleLabel: "",
artistLabel: "",
albumLabel: ""
});
</script>
<style edit-npf-audio-player>
.npf-audio-wrapper {
--NPF-Audio-Buttons-Size: calc(var(--Audio-Post-PlayButton-Size) * 0.6);
--NPF-Audio-Buttons-Color: {color:post text};
--NPF-Audio-Buttons-Padding: calc(var(--Audio-Post-PlayButton-Padding) + (var(--Audio-Post-PlayButton-Size) * (1 - 0.6)) - 3px);
--NPF-Audio-Buttons-Spacing: calc(var(--p) + 14px);
--NPF-Audio-Image-Size: var(--Audio-Post-Album-Image-Size);
--NPF-Audio-Image-Spacing: 0px;
--t:calc((var(--NPF-Audio-Buttons-Padding) * 2) + var(--NPF-Audio-Buttons-Size));
--p:calc(var(--NPF-Audio-Buttons-Padding) + ((var(--NPF-Audio-Image-Size) - var(--t)) / 2));
}
.npf-audio-wrapper {
position:relative;
z-index:0;
}
.npf-audio-background {
margin-left:var(--p);
}
.npf-audio-play, .npf-audio-pause {
position:relative;
z-index:0;
}
.npf-audio-play:after, .npf-audio-pause:after {
content:"";
position:absolute;
top:0;left:0;
margin-top:calc(0px - var(--NPF-Audio-Buttons-Padding) - 1px);
margin-left:calc(0px - var(--NPF-Audio-Buttons-Padding) - 1px);
width:calc(100% + (var(--NPF-Audio-Buttons-Padding) * 2));
height:calc(100% + (var(--NPF-Audio-Buttons-Padding) * 2));
background:{color:background};
border:1px solid rgba({RGBcolor:post divider},0.8);
border-radius:100%;
z-index:-1;
}
.npf-audio-play svg { margin-left:1px; }
.npf-audio-pause svg { margin-left:0; }
figcaption.audio-caption,
figcaption.audio-caption ~ audio[controls],
.npf-audio-album {
display:none;
}
.npf-audio-image {
position:absolute;
top:0;left:0;
border-radius:3px;
z-index:-1;
}
</style>
<script src="//glen-npf.gitlab.io/other/neue.js"></script>
<link href="//glen-npf.gitlab.io/other/neue.css" rel="stylesheet">
<!------- CUSTOMIZATION PANEL OPTIONS ------->
<!---- IMAGES ---->
<meta name="image:sidebar frame" content="//static.tumblr.com/2pnwama/nOBs1xbr5/eborder_e2s_shad.png"/>
<meta name="image:sidebar image" content="//static.tumblr.com/2pnwama/TZbs1xbql/16-9_a.png"/>
<meta name="image:sidebar icon" content="//64.media.tumblr.com/bb9b81332b260660cc18ab04f4e381c8/79ba516a6188a2f8-37/s2048x3072/75f365ec7feaad1cc42139440d1ebb4da035ca74.png"/>
<meta name="image:summoner icon" content="//64.media.tumblr.com/8970dace72482b8b3183b06757239bca/79ba516a6188a2f8-44/s2048x3072/83d59c0924341b1d4f35da71f0b408f70e7480fc.png"/>
<!---- GENERAL COLORS ---->
<meta name="color:background" content="#161920"/>
<meta name="color:scrollbar thumb" content="#746561"/>
<meta name="color:scrollbar track" content="#2c292e"/>
<!---- SIDEBAR COLORS ---->
<meta name="color:sidebar title" content="#bbb4b1"/>
<meta name="color:sidebar text" content="#a59b9b"/>
<meta name="color:nav icons" content="#c6b1ac"/>
<meta name="color:sidebar icon border" content="#645f5b"/>
<meta name="color:sidebar icon shadow" content="#0c0a08"/>
<!---- SIDEBAR COLORS ---->
<meta name="color:summoner icon shadow" content="#161920"/>
<meta name="color:summoner icon text" content="#bbb4b1"/>
<meta name="color:sidebar dividers" content="#bbb4b1"/>
<meta name="color:custom links border" content="#363332"/>
<meta name="color:custom links" content="#bbb4b1"/>
<!---- POST COLORS ---->
<meta name="color:post text" content="#a59b9b"/>
<meta name="color:reblogger" content="#c6b1ac"/>
<meta name="color:link" content="#b56479"/>
<meta name="color:tags" content="#8d8080"/>
<meta name="color:permalink" content="#746561"/>
<meta name="color:post divider" content="#bbb4b1"/>
<meta name="color:post buttons" content="#c6b1ac"/>
<!------------- TOGGLE OPTIONS ------------->
<meta name="if:reblog separators" content="1"/>
<meta name="if:tags on click" content="1"/>
<meta name="if:show music player" content="1"/>
<!------- DROPDOWNS / OPTIONS ------->
<!---- LEFT SIDEBAR OPTIONS ---->
<!---- LEFT SIDEBAR WIDTH ---->
<meta name="select:left sidebar width" title="275px" content="275px"/>
<meta name="select:left sidebar width" title="225px" content="225px"/>
<meta name="select:left sidebar width" title="250px" content="250px"/>
<meta name="select:left sidebar width" title="300px" content="300px"/>
<!---- LEFT SIDEBAR IMAGE MARGIN ---->
<meta name="select:sidebar image size" title="100%" content="0px"/>
<meta name="select:sidebar image size" title="80%" content="20px"/>
<meta name="select:sidebar image size" title="90%" content="10px"/>
<meta name="select:sidebar image size" title="110%" content="-10px"/>
<meta name="select:sidebar image size" title="120%" content="-20px"/>
<!---- LEFT SIDEBAR IMAGE SHADOW SIZE ---->
<meta name="select:sidebar image shadow size" title="26px" content="26px"/>
<meta name="select:sidebar image shadow size" title="10px" content="10px"/>
<meta name="select:sidebar image shadow size" title="14px" content="14px"/>
<meta name="select:sidebar image shadow size" title="18px" content="18px"/>
<meta name="select:sidebar image shadow size" title="22px" content="22px"/>
<meta name="select:sidebar image shadow size" title="30px" content="30px"/>
<meta name="select:sidebar image shadow size" title="34px" content="34px"/>
<meta name="select:sidebar image shadow size" title="38px" content="38px"/>
<!---- LEFT SIDEBAR FRAME SIZE ---->
<meta name="select:sidebar frame size" title="90%" content="10px"/>
<meta name="select:sidebar frame size" title="60%" content="40px"/>
<meta name="select:sidebar frame size" title="70%" content="30px"/>
<meta name="select:sidebar frame size" title="80%" content="20px"/>
<meta name="select:sidebar frame size" title="100%" content="0px"/>
<meta name="select:sidebar frame size" title="110%" content="-10px"/>
<meta name="select:sidebar frame size" title="120%" content="-20px"/>
<!---- LEFT SIDEBAR FRAME BOTTOM GAP ---->
<meta name="select:sidebar frame bottom gap" title="15px" content="15px"/>
<meta name="select:sidebar frame bottom gap" title="-25px" content="-25px"/>
<meta name="select:sidebar frame bottom gap" title="-20px" content="-20px"/>
<meta name="select:sidebar frame bottom gap" title="-15px" content="-15px"/>
<meta name="select:sidebar frame bottom gap" title="-10px" content="-10px"/>
<meta name="select:sidebar frame bottom gap" title="none" content="0px"/>
<meta name="select:sidebar frame bottom gap" title="10px" content="10px"/>
<meta name="select:sidebar frame bottom gap" title="20px" content="20px"/>
<meta name="select:sidebar frame bottom gap" title="25px" content="25px"/>
<!---- SIDEBAR TITLE FONT SIZE ---->
<meta name="select:sidebar title font size" title="14px" content="14px"/>
<meta name="select:sidebar title font size" title="13px" content="13px"/>
<meta name="select:sidebar title font size" title="12px" content="12px"/>
<meta name="select:sidebar title font size" title="15px" content="15px"/>
<!---- SIDEBAR ICON SIZE ---->
<meta name="select:sidebar icon size" title="42px" content="42px"/>
<meta name="select:sidebar icon size" title="36px" content="36px"/>
<meta name="select:sidebar icon size" title="50px" content="50px"/>
<meta name="select:sidebar icon size" title="64px" content="64px"/>
<!---- NAV ICONS SIZE ---->
<meta name="select:nav icons size" title="16px" content="16px"/>
<meta name="select:nav icons size" title="12px" content="12px"/>
<meta name="select:nav icons size" title="14px" content="14px"/>
<meta name="select:nav icons size" title="18px" content="18px"/>
<!---- NAV ICONS SPACING ---->
<meta name="select:nav icons spacing" title="7px" content="7px"/>
<meta name="select:nav icons spacing" title="5px" content="5px"/>
<meta name="select:nav icons spacing" title="9px" content="9px"/>
<meta name="select:nav icons spacing" title="11px" content="11px"/>
<!---- SIDEBAR GAPS ---->
<meta name="select:sidebar gaps" title="16px" content="16px"/>
<meta name="select:sidebar gaps" title="18px" content="18px"/>
<meta name="select:sidebar gaps" title="20px" content="20px"/>
<!---- LEFT SIDEBAR QUOTE WIDTH ---->
<meta name="select:sidebar quote width" title="80%" content="80%"/>
<meta name="select:sidebar quote width" title="90%" content="90%"/>
<meta name="select:sidebar quote width" title="100%" content="100%"/>
<meta name="select:sidebar quote width" title="110%" content="110%"/>
<meta name="select:sidebar quote width" title="120%" content="120%"/>
<!---- SIDEBAR TEXT FONT SIZE ---->
<meta name="select:sidebar font size" title="11px" content="11px"/>
<meta name="select:sidebar font size" title="12px" content="12px"/>
<meta name="select:sidebar font size" title="13px" content="13px"/>
<meta name="select:sidebar font size" title="14px" content="14px"/>
<!---- SIDEBAR TEXT LINE HEIGHT ---->
<meta name="select:sidebar line height" title="90%" content="1.9em"/>
<meta name="select:sidebar line height" title="80%" content="1.8em"/>
<meta name="select:sidebar line height" title="100%" content="2em"/>
<meta name="select:sidebar line height" title="120%" content="2.2em"/>
<!---- SIDEBAR TEXT ALIGN ---->
<meta name="select:sidebar text align" title="justify" content="justify"/>
<meta name="select:sidebar text align" title="center" content="center"/>
<meta name="select:sidebar text align" title="left" content="left"/>
<meta name="select:sidebar text align" title="right" content="right"/>
<!---- POST OPTIONS ---->
<!---- POST WIDTH ---->
<meta name="select:post width" title="450px" content="450px"/>
<meta name="select:post width" title="500px" content="500px"/>
<meta name="select:post width" title="400px" content="400px"/>
<meta name="select:post width" title="540px" content="540px"/>
<!---- POST FONT SIZE ---->
<meta name="select:post font size" title="11px" content="11px"/>
<meta name="select:post font size" title="12px" content="12px"/>
<meta name="select:post font size" title="13px" content="13px"/>
<meta name="select:post font size" title="14px" content="14px"/>
<!---- POST TEXT LINE HEIGHT ---->
<meta name="select:post text line height" title="80%" content="1.8em"/>
<meta name="select:post text line height" title="90%" content="1.9em"/>
<meta name="select:post text line height" title="100%" content="2em"/>
<!---- REBLOGGER ICON ---->
<meta name="select:reblogger icon" title="moon" content="moon"/>
<meta name="select:reblogger icon" title="star" content="star"/>
<meta name="select:reblogger icon" title="@" content="at-sign"/>
<meta name="select:reblogger icon" title="box" content="box"/>
<meta name="select:reblogger icon" title="bookmark" content="bookmark"/>
<!---- PHOTOSET SPACING ---->
<meta name="select:photoset images spacing" title="4px" content="4px"/>
<meta name="select:photoset images spacing" title="2px" content="2px"/>
<meta name="select:photoset images spacing" title="6px" content="6px"/>
<meta name="select:photoset images spacing" title="8px" content="8px"/>
<meta name="select:photoset images spacing" title="10px" content="10px"/>
<!---- CAPTIONS SPACING ---->
<meta name="select:captions spacing" title="15px" content="15px"/>
<meta name="select:captions spacing" title="12px" content="12px"/>
<meta name="select:captions spacing" title="17px" content="17px"/>
<!---- POST BUTTONS SIZE ---->
<meta name="select:post buttons size" title="11px" content="11px"/>
<meta name="select:post buttons size" title="12px" content="12px"/>
<meta name="select:post buttons size" title="13px" content="13px"/>
<meta name="select:post buttons size" title="14px" content="14px"/>
<!---- POST BUTTONS SPACING ---->
<meta name="select:post buttons spacing" title="6px" content="6px"/>
<meta name="select:post buttons spacing" title="4px" content="4px"/>
<meta name="select:post buttons spacing" title="8px" content="8px"/>
<meta name="select:post buttons spacing" title="10px" content="10px"/>
<!---- POST SPACING ---->
<meta name="select:post spacing" title="40px" content="40px"/>
<meta name="select:post spacing" title="50px" content="50px"/>
<meta name="select:post spacing" title="30px" content="30px"/>
<meta name="select:post spacing" title="60px" content="60px"/>
<!---- RIGHT SIDEBAR ---->
<!---- RIGHT SIDEBAR OPTIONS ---->
<!---- RIGHT SIDEBAR WIDTH ---->
<meta name="select:right sidebar width" title="225px" content="225px"/>
<meta name="select:right sidebar width" title="200px" content="200px"/>
<meta name="select:right sidebar width" title="250px" content="250px"/>
<meta name="select:right sidebar width" title="275px" content="275px"/>
<meta name="select:right sidebar width" title="300px" content="300px"/>
<!---- SUMMONER ICON SIZE ---->
<meta name="select:summoner icon size" title="100px" content="100px"/>
<meta name="select:summoner icon size" title="70px" content="70px"/>
<meta name="select:summoner icon size" title="80px" content="80px"/>
<meta name="select:summoner icon size" title="90px" content="90px"/>
<meta name="select:summoner icon size" title="110px" content="110px"/>
<meta name="select:summoner icon size" title="120px" content="120px"/>
<!---- SUMMONER BORDER TYPE ---->
<meta name="select:summoner border" title="type 1" content="//static.tumblr.com/2pnwama/L36s1xbrn/450_e1.png"/>
<meta name="select:summoner border" title="type 2" content="//static.tumblr.com/2pnwama/gzus1xbvd/100_e2.png"/>
<meta name="select:summoner border" title="type 3" content="//static.tumblr.com/2pnwama/9ZWs1xbvt/150_e1.png"/>
<meta name="select:summoner border" title="type 4" content="//static.tumblr.com/2pnwama/4f2s1xbw9/250_e1.png"/>
<meta name="select:summoner border" title="type 5" content="//static.tumblr.com/2pnwama/Lcqs1xbwu/400_e2.png"/>
<meta name="select:summoner border" title="type 6" content="//static.tumblr.com/2pnwama/XDHs1xbxb/500_e2.png"/>
<!---- CUSTOM LINKS SPACING ---->
<meta name="select:custom links spacing" title="10px" content="10px"/>
<meta name="select:custom links spacing" title="8px" content="8px"/>
<meta name="select:custom links spacing" title="12px" content="12px"/>
<!---- LEVEL NUMBER FONT SIZE ---->
<meta name="select:level font size" title="9px" content="9px"/>
<meta name="select:level font size" title="10px" content="10px"/>
<meta name="select:level font size" title="11px" content="11px"/>
<meta name="select:level font size" title="12px" content="12px"/>
<!---- MISC OPTIONS ---->
<meta name="select:window margin" title="70px" content="70px"/>
<meta name="select:window margin" title="50px" content="50px"/>
<meta name="select:window margin" title="60px" content="60px"/>
<meta name="select:window margin" title="80px" content="80px"/>
<meta name="select:window margin" title="90px" content="90px"/>
<meta name="select:side margins" title="60px" content="60px"/>
<meta name="select:side margins" title="40px" content="40px"/>
<meta name="select:side margins" title="50px" content="50px"/>
<meta name="select:side margins" title="70px" content="70px"/>
<meta name="select:side margins" title="80px" content="80px"/>
<meta name="select:move everything to the right" title="default" content="0px"/>
<meta name="select:move everything to the right" title="30px" content="30px"/>
<meta name="select:move everything to the right" title="40px" content="40px"/>
<meta name="select:move everything to the right" title="50px" content="50px"/>
<meta name="select:move everything to the right" title="60px" content="60px"/>
<meta name="select:move everything to the right" title="70px" content="70px"/>
<meta name="select:theme alignment" title="centered" content="centered"/>
<meta name="select:theme alignment" title="left" content="left"/>
<!------------- CUSTOM TEXT FIELDS ------------->
<meta name="text:left title" content="empyrean">
<meta name="text:sidebar quote" content="If the moon smiled, she would resemble you. You leave the same impression of something beautiful, but annihilating.">
<meta name="text:level number" content="69">
<meta name="text:right title" content="">
<meta name="text:right desc" content="">
<meta name="text:custom link 1 name" content="sample link">
<meta name="text:custom link 1 url" content="//tumblr.com">
<meta name="text:custom link 2 name" content="">
<meta name="text:custom link 2 url" content="">
<meta name="text:custom link 3 name" content="">
<meta name="text:custom link 3 url" content="">
<meta name="text:custom link 4 name" content="">
<meta name="text:custom link 4 url" content="">
<meta name="text:custom link 5 name" content="">
<meta name="text:custom link 5 url" content="">
<meta name="text:custom link 6 name" content="">
<meta name="text:custom link 6 url" content="">
<meta name="text:custom link 7 name" content="">
<meta name="text:custom link 7 url" content="">
<meta name="text:custom link 8 name" content="">
<meta name="text:custom link 8 url" content="">
<meta name="text:how to link music" content="linktr.ee/direct_file_links">
<meta name="text:music player song name" content="To Dance with Daedra">
<meta name="text:music player artist name" content="Brad Derrick">
<meta name="text:music MP3 URL" content="https://rhizo.gitlab.io/m/To_Dance_with_Daedra.mp3">
<!----------- START CSS ----------->
<style type="text/css">
@font-face { font-family: "beaufort"; src: url('//glen-assets.github.io/fonts/Beaufort%20W01%20Regular.ttf'); }
/*------------ TUMBLR CONTROLS ------------*/
iframe#tumblr_controls, .iframe-controls--desktop {
top:7px!important;
right:7px!important;
position:fixed!important;
transform:scale(0.7,0.7);
-webkit-transform:scale(0.7,0.7);
transform-origin:100% 0;
z-index:999999!important;
transition:0.3s ease-in-out;
}
* {
margin:0;
padding:0;
position:relative;
}
:root {
--PostFontSize:{select:post font size};
--PostLineHeight:{select:post text line height};
--Nav-Icons-Color:{color:nav icons};
--Original-Poster-Icon-Size:13px;
--Captions-Gap:{select:captions spacing};
--Blockquote-Border-Color:rgba({RGBcolor:post text},0.7);
--Paragraph-Margins:0.69em;
--Heading-Margins:0.5em;
--Like-Button-Liked:#f75c64;
--BackToTop-Button-Icon-Size:14px;
--BackToTop-Button-Padding:8px;
--Audio-Post-Album-Image-Size:64px;
--Audio-Post-PlayButton-Size:18px;
--Audio-Post-PlayButton-Padding:8px;
}
img {
vertical-align:middle;
}
.post iframe {max-width:100%;}
a {
color:{color:link};
text-decoration:none;
}
p:first-child {
margin-top:0;
}
p:last-child {
margin-bottom:0;
}
.post.link .path {
display:block;
font-family:beaufort;
font-size:calc({select:post font size} + 2px);
font-weight:bold;
text-transform:uppercase;
letter-spacing:1.5px;
text-align:center;
line-height:1.8em;
}
.link-description {
margin-top:{select:captions spacing};
}
h1, h2, h3, h4, h5, h6 {
margin:calc(var(--Heading-Margins) * 2) 0;
font-family:beaufort;
font-weight:bold;
font-size:calc({select:post font size} + 1px);
text-transform:uppercase;
letter-spacing:1.5px;
}
h1 {
font-size:calc({select:post font size} + 2.5px);
}
h1.title {
text-align:center;
}
p {
margin:var(--Paragraph-Margins) 0;
}
ul {
margin-left:1.69em;
}
li {
padding-left:0.420em;
}
pre {
display:block;
white-space:break-spaces;
padding:0.69em 0.8em;
border:1px solid rgba({RGBcolor:post divider},0.2);
margin:1em 0;
}
body {
background:{color:background};
font-family:karla;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
.flex {
display:flex;
align-items:center;
}
.flex.space-between {
justify-content:space-between;
}
/*--------- GENERAL TOOLTIPS ---------*/
a[data-title]{
position:relative;
}
a[data-title]:not([data-title=""]):hover:before {
content:"";
position:absolute;
top:100%;margin-top:calc(6px - .5px);
left:50%;transform:translateX(-50%);
margin-left:-3px;
width:6px;
height:6px;
transform:rotate(45deg);
background:{color:background};
border-top:1px solid rgba({RGBcolor:post divider},0.420);
border-left:1px solid rgba({RGBcolor:post divider},0.420);
z-index:70;
}
a[data-title]:not([data-title=""]):hover:after {
content:attr(data-title);
position:absolute;
top:calc(100% + 3px + 6px);
left:50%;transform:translateX(-50%);
background:{color:background};
padding:5px;
border:1px solid rgba({RGBcolor:post divider},0.420);
font-family:karla;
text-transform:uppercase;
font-size:calc({select:post font size} - 2px);
letter-spacing:1px;
color:{color:post text};
text-align:center;
white-space:nowrap;
line-height:1.69em;
z-index:69;
}
/*----------------- SCROLLBAR -----------------*/
::-webkit-scrollbar {
width:13px;
height:13px;
background-color:{color:background};
}
::-webkit-scrollbar-thumb {
border-top:8px solid {color:background};
border-right:6px solid {color:background};
border-bottom:8px solid {color:background};
border-left:6px solid {color:background};
background-color:{color:scrollbar thumb};
}
::-webkit-scrollbar-track {
border-top:8px solid {color:background};
border-right:6px solid {color:background};
border-bottom:8px solid {color:background};
border-left:6px solid {color:background};
background-color:{color:scrollbar track};
}
::-webkit-scrollbar-corner {
background:{color:background};
}
/*------------ LEFT/CENTERED THEME OPTS ------------*/
.bigwrap.centered .lemon {
position:absolute;
top:0;left:0;right:0;
margin:0 auto;
text-align:center;
}
.bigwrap.centered .berry {
display:inline-block;
margin-left:{select:move everything to the right};
text-align:left;
}
.bigwrap.centered .dianaside {
left:initial;
margin-left:calc(-{select:left sidebar width} - {select:side margins});
}
.bigwrap.centered .postscont {
position:relative;
margin-left:0;
}
.bigwrap.centered .rightside {
left:initial;
margin-left:calc({select:sidebar frame size} + {select:post width} + {select:side margins});
}
/*-------------- LEFT SIDEBAR --------------*/
.dianaside {
position:fixed;
top:0;
left:0;margin-left:{select:move everything to the right};
width:{select:left sidebar width};
height:100vh;
background:{color:background};
display:table;
}
.mc {
display:table-cell;
vertical-align:middle;
}
.cov {
}
.hc {
position:relative;
width:100%;
}
.sb-image, .shadroe, .palir, .pakku {
position:absolute;
margin-top:{select:sidebar image size};
margin-left:{select:sidebar image size};
width:calc(100% - ({select:sidebar image size} * 2));
height:calc(100% - {select:sidebar image size});
}
.sb-image {
background-image:url({image:sidebar image});
background-size:cover;
background-position:50% 0%;
background-repeat:no-repeat;
}
.shadroe {
margin-top:calc({select:sidebar image size} - 100%);
box-shadow:inset 0 0 {select:sidebar image shadow size} {select:sidebar image shadow size} {color:background};
height:200%;
}
.pakku {
background-image:linear-gradient(to bottom, {color:background} 0%, transparent 22%);
}
.palir {
background-image:linear-gradient(to bottom, transparent 52%, {color:background} 100%);
}
.ff {
position:absolute;
visibility:hidden;
}
.frame, .trans {
margin-top:calc({select:sidebar image size} + {select:sidebar frame size});
margin-left:calc({select:sidebar image size} + {select:sidebar frame size});
width:calc(100% - ({select:sidebar image size} * 2) - ({select:sidebar frame size} * 2));
}
.trans {
display:none;
height:calc({select:left sidebar width});
}
.stuffbelow {
position:absolute;
top:0;
margin-left:{select:sidebar image size};
width:calc(100% - ({select:sidebar image size} * 2));
text-align:center;
}
.uma-tit {
margin-top:{select:sidebar frame bottom gap};
font-family:beaufort;
font-size:{select:sidebar title font size};
font-weight:bold;
text-transform:uppercase;
letter-spacing:2px;
color:{color:sidebar title};
text-shadow:0 2px 4px rgba({RGBcolor:background},0.69);
}
.xwrap {
display:flex;
align-items:center;
justify-content:center;
padding-top:{select:sidebar gaps};
line-height:1em;
}
.xwrap a {
margin:0 calc({select:nav icons spacing} / 2);
padding:calc({select:nav icons spacing} / 2);
}
.xwrap svg {
width:{select:nav icons size};
height:{select:nav icons size};
color:{color:nav icons};
stroke-width:1.5px;
}
.glenjamin {
opacity:0.9;
}
.ring {
position:relative;
margin:0 calc({select:nav icons spacing} * 1.69);
width:calc({select:sidebar icon size} + 2px);
height:calc({select:sidebar icon size} + 2px);
border-radius:100%;
background:{color:sidebar icon border};
}
.icoe {
position:absolute;
top:0;margin-top:1px;
left:0;margin-left:1px;
width:{select:sidebar icon size};
height:{select:sidebar icon size};
border-radius:100%;
}
.i-shad {
position:absolute;
top:0;margin-top:1px;
left:0;margin-left:1px;
width:{select:sidebar icon size};
height:{select:sidebar icon size};
border-radius:100%;
box-shadow:inset 0 0 6px 0 {color:sidebar icon shadow};
}
.desc {
padding-top:calc({select:sidebar gaps} - 2px);
margin-left:calc(({select:sidebar quote width} - 100%) / -2);
width:{select:sidebar quote width};
font-family:libre franklin;
letter-spacing:0.3px;
font-size:{select:sidebar font size};
color:{color:sidebar text};
line-height:{select:sidebar line height};
text-align:{select:sidebar text align};
}
/* disable highlight when user tries to drag 'image' */
.frame, .i-shad, .sumframe, .circleofdeath {
-webkit-touch-callout:none;
-webkit-user-select:none;
-html-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
/*------------- RIGHT SIDEBAR -------------*/
.rightside {
position:fixed;
top:0;
left:0;margin-left:calc({select:left sidebar width} + {select:sidebar frame size} + {select:post width} + ({select:side margins} * 2) + {select:move everything to the right});
width:{select:right sidebar width};
height:100vh;
display:table;
}
.emily {
display:table-cell;
vertical-align:middle;
}
.owrap {
position:relative;
margin:auto;
margin-top:calc(({select:summoner icon size} * .4) + 10px);
margin-bottom:calc(({select:summoner icon size} * .4) + ({select:sidebar gaps} * 0.420));
width:{select:summoner icon size};
height:{select:summoner icon size};
}
.img-i {
position:absolute;
top:0;
left:0;
width:{select:summoner icon size};
height:{select:summoner icon size};
background-image:url({image:summoner icon});
background-size:cover;
background-position:center;
background-repeat:no-repeat;
border-radius:100%;
}
.sumshad {
position:absolute;
top:0;
left:0;
width:{select:summoner icon size};
height:{select:summoner icon size};
box-shadow:inset 0 0 calc({select:summoner icon size} * 0.1) 0 {color:summoner icon shadow};
border-radius:100%;
}
.sumframe {
position:absolute;
top:0;
left:0;
width:{select:summoner icon size};
height:{select:summoner icon size};
display:flex;
align-items:center;
justify-content:center;
}
.sf-border {
/*width:180%;*/
height:180%;
}
.lvl {
position:absolute;
top:0;margin-top:99%;
width:100%;
height:11%;
display:flex;
align-items:center;
justify-content:center;
}
.lvltxt {
margin-top:-0.169em;
margin-left:0.169em;
max-width:30%;
font-family:beaufort;
font-size:{select:level font size};
font-weight:bold;
text-transform:uppercase;
letter-spacing:2px;
color:{color:summoner icon text};
text-align:center;
line-height:1em;
white-space:nowrap;
overflow:hidden;
}
/*-----------------------*/
/* divider stuff */
:root {
--Divider-Ratio:45%;
--Divider-Ratio-2:15%;
--Divider-Mid-Adjust:7%;
}
.dovwrap {
position:relative;
transform:scale(0.9,0.9);
}
.dline {
margin:auto;
width:1px;
height:20px;
background:linear-gradient(to bottom, transparent 0%, {color:sidebar dividers} 69%);
}
.dia {
margin:auto;
width:4px;
height:4px;
border:1px solid {color:sidebar dividers};
transform:rotate(45deg);
transform-origin:center;
}
.hz {
width:calc(var(--Divider-Ratio) + .5px);
height:1px;
background:{color:sidebar dividers};
}
.hz.l {
background:linear-gradient(to left, {color:sidebar dividers} var(--Divider-Ratio-2), transparent 100%);
}
.hz.r {
background:linear-gradient(to right, {color:sidebar dividers} var(--Divider-Ratio-2), transparent 100%);
}
.rl {
position:absolute;
bottom:0;
left:calc(var(--Divider-Ratio) + .5px);
height:1px;
background:{color:sidebar dividers};
transform:rotate(45deg);
transform-origin:left;
}
.rr {
position:absolute;
bottom:0;
right:0;margin-right:calc(var(--Divider-Ratio) + .5px);
height:1px;
background:{color:sidebar dividers};
transform:rotate(-45deg);
transform-origin:right;
}
.rl, .rr, .vl, .vr {
width:var(--Divider-Mid-Adjust);
}
.bl {
position:absolute;
bottom:0;
margin-bottom:-4px;
margin-left:calc(var(--Divider-Ratio) - var(--Divider-Ratio-2));
width:calc(var(--Divider-Ratio-2) + 2%);
height:1px;
background:{color:sidebar dividers};
}
.bl:before {
content:"";
position:absolute;
top:0;margin-top:-4px;
margin-left:-3px;
width:5px;
height:1px;
background:{color:sidebar dividers};
transform:rotate(45deg);
transform-origin:left;
}
.br {
position:absolute;
bottom:0;
margin-bottom:-4px;
right:0;margin-right:calc(var(--Divider-Ratio) - var(--Divider-Ratio-2));
width:calc(var(--Divider-Ratio-2) + 2%);
height:1px;
background:{color:sidebar dividers};
}
.br:after {
content:"";
position:absolute;
top:0;margin-top:-4px;
right:0;margin-right:-3px;
width:5px;
height:1px;
background:{color:sidebar dividers};
transform:rotate(-45deg);
transform-origin:right;
}
.vot {
margin-top:calc({select:sidebar gaps} * 1.8);
transform:scale(0.69,0.69);
}
.vl {
position:absolute;
bottom:0;
left:calc(var(--Divider-Ratio) + .5px);
height:1px;
background:{color:sidebar dividers};
transform:rotate(-45deg);
transform-origin:left;
}
.vr {
position:absolute;
bottom:0;
right:0;margin-right:calc(var(--Divider-Ratio) + .5px);
height:1px;
background:{color:sidebar dividers};
transform:rotate(45deg);
transform-origin:right;
}
.gl {
position:absolute;
bottom:0;
left:calc(var(--Divider-Ratio) + .5px - 8px);
width:calc(var(--Divider-Mid-Adjust) + 11px);
height:1px;
background:{color:sidebar dividers};
transform:rotate(-45deg);
transform-origin:left;
opacity:0.9;
}
.gr {
position:absolute;
bottom:0;
right:0;margin-right:calc(var(--Divider-Ratio) + .5px - 8px);
width:calc(var(--Divider-Mid-Adjust) + 11px);
height:1px;
background:{color:sidebar dividers};
transform:rotate(45deg);
transform-origin:right;
opacity:0.9;
}
/*------- CUSTOM LINKS -------*/
.one-box {
margin-top:calc({select:sidebar gaps} * 1.69);
}
.boxtitle {
font-family:beaufort;
font-size:calc({select:sidebar title font size} - 2px);
font-weight:bold;
text-transform:uppercase;
letter-spacing:1.5px;
color:{color:sidebar title};
text-align:center;
}
.boxtext {
margin-top:calc({select:sidebar gaps} * 0.8);
font-family:libre franklin;
font-size:{select:sidebar font size};
letter-spacing:0.3px;
line-height:1.69em;
color:{color:sidebar text};
text-align:justify;
}
.ummcanvas {
margin-top:calc(-{select:custom links spacing} * 1.5);
display:flex;
flex-wrap:wrap;
}
.sausage {
display:block;
position:relative;
margin-top:{select:custom links spacing};
width:calc((100% - {select:custom links spacing}) / 2);
height:calc({select:sidebar title font size} * 1.69);
}
.sausage:nth-of-type(odd){
}
.sausage:nth-of-type(even){
margin-left:{select:custom links spacing};
}
.longue {
position:relative;
margin-left:auto;
width:calc(100% - 8px);
height:8px;
background:linear-gradient(to right, {color:custom links border} 0%, {color:sidebar dividers} 69%, {color:custom links border} 100%);
}
.longue:before {
content:"";
position:absolute;
top:0;
left:0;margin-left:-8px;
border-style:solid;
border-width:0 0 8px 8px;
border-color:transparent transparent {color:custom links border} transparent;
}
.longue:after {
content:"";
position:absolute;
right:0;
width:calc(100% - 3px);
height:1.5px;
background:{color:custom links border};
opacity:0.420;
transition:all .269s ease-in-out;
}
.sausage:hover .longue:after {
opacity:0;
}
.bread {
width:100%;
height:calc(100% - (8px * 2));
background:{color:custom links border};
}
.baguette {
position:relative;
margin-right:auto;
width:calc(100% - 8px);
height:8px;
background:linear-gradient(to right, {color:custom links border} 0%, {color:sidebar dividers} 31%, {color:custom links border} 100%);
}
.baguette:before {
content:"";
position:absolute;
right:0;margin-right:-8px;
border-style:solid;
border-width:8px 8px 0 0;
border-color:{color:custom links border} transparent transparent transparent;
}
.baguette:after {
content:"";
position:absolute;
bottom:0;
width:calc(100% - 3px);
height:1.5px;
background:{color:custom links border};
opacity:0.420;
transition:all .269s ease-in-out;
}
.sausage:hover .baguette:after {
opacity:0;
}
.butter {
position:absolute;
top:0;margin-top:1.5px;
left:0;margin-left:1.5px;
width:calc(100% - 3px);
height:calc(100% - 3px);
}
.sizzle {
position:relative;
margin-left:auto;
width:calc(100% - 8px);
height:8px;
background:{color:background};
}
.sizzle:before {
content:"";
position:absolute;
top:0;
left:0;margin-left:-8px;
border-style:solid;
border-width:0 0 8px 8px;
border-color:transparent transparent {color:background} transparent;
}
.oeuf {
width:100%;
height:calc(100% - (8px * 2));
background:{color:background};
}
.tomate {
position:relative;
margin-right:auto;
width:calc(100% - 8px);
height:8px;
background:{color:background};
}
.tomate:before {
content:"";
position:absolute;
right:0;margin-right:-8px;
border-style:solid;
border-width:8px 8px 0 0;
border-color:{color:background} transparent transparent transparent;
}
.tct {
position:absolute;
top:0;margin-top:1.5px;
left:0;margin-left:1.5px;
width:calc(100% - 3px);
height:calc(100% - 3px);
display:flex;
align-items:center;
justify-content:center;
line-height:1em;
}
.cl-text {
max-width:90%;
font-family:beaufort;
font-weight:bold;
font-size:calc({select:sidebar title font size} * 0.6);
text-transform:uppercase;
letter-spacing:1.5px;
color:{color:custom links};
white-space:nowrap;
overflow:hidden;
}
/*------- MUSIC PLAYER -------*/
:root {
--Circle-Size:33px;
--Progress-Border-Size:1px;
--Progress-Empty:{color:custom links border};
--Progress-Fill:{color:sidebar title};
--Player-Background:{color:background};
--Play-Pause-Buttons-Size:14px;
--Player-Text-Margin:13px;
}
.glenplayer07 {
margin-top:calc({select:sidebar gaps} * 1.25);
}
.flamingo {
display:flex;
align-items:center;
}
.circleofdeath {
width:var(--Circle-Size);
height:var(--Circle-Size);
border-radius:100%;
overflow:hidden;
}
.tinfoil {
width:var(--Circle-Size);
height:var(--Circle-Size);
background:var(--Progress-Empty);
border-radius:100%;
}
.oven {
background:var(--Progress-Fill);
}
.oliveoil {
width:100%;
height:100%;
}
.crust {
position:absolute;
top:0;
display:flex;
align-items:center;
justify-content:center;
width:var(--Circle-Size);
height:var(--Circle-Size);
}
.cherry {
display:flex;
align-items:center;
justify-content:center;
width:calc(var(--Circle-Size) - (var(--Progress-Border-Size) * 2));
height:calc(var(--Circle-Size) - (var(--Progress-Border-Size) * 2));
background:var(--Player-Background);
border-radius:100%;
cursor:pointer;
z-index:1;
}
.music-controls .material-icons {
font-size:var(--Play-Pause-Buttons-Size);
color:{color:sidebar text};
}
.pausee {display:none;}
.beff {display:none;}
.aff {display:block;}
.music-info {
margin-left:var(--Player-Text-Margin);
line-height:1em;
}
.song-name {
font-family:beaufort;
font-size:calc({select:sidebar font size} - 1px);
font-weight:bold;
text-transform:uppercase;
letter-spacing:1.5px;
color:{color:sidebar title};
}
.artist-name {
margin-top:1.5px;
font-family:libre franklin;
font-size:calc({select:sidebar font size} - 1px);
letter-spacing:0.3px;
color:{color:sidebar text};
}
/*-------------- POSTS --------------*/
.postscont {
position:absolute;
top:0;margin-top:{select:window margin};
left:0;margin-left:calc({select:left sidebar width} + {select:side margins} + {select:move everything to the right} - ({select:sidebar image size} / 2));
font-family:libre franklin;
letter-spacing:0.3px;
font-size:{select:post font size};
color:{color:post text};
line-height:{select:post text line height};
margin-bottom:calc({select:window margin} - (({select:post spacing} * 2) / 2));
}
.post {
position:relative;
width:{select:post width};
}
hr:not(.hr-fordiv) {
border:none;
width:69%;
height:1px;
background:linear-gradient(to left, transparent 0%, {color:post divider} 25%, {color:post divider} 75%, transparent 100%);
}
.hr-fordiv {
display:block;
position:absolute;
border:none;
margin-top:calc(((({select:post buttons size} + 5px) * -1.414) / 2) - (({select:post spacing} * 2) / 2) - .5px);
left:calc((100% - 69%) / 2);
width:69%;
height:1px;
background:linear-gradient(to left, transparent 0%, {color:post divider} 25%, {color:post divider} 75%, transparent 100%);
}
.romholder {
position:relative;
display:flex;
align-items:center;
justify-content:center;
margin:calc(({select:post spacing} * 2) / 2) auto;
z-index:2;
}
.square {
display:flex;
align-items:center;
justify-content:center;
margin:0 calc((10px / 2) + ({select:post buttons spacing} / 2));
width:calc({select:post buttons size} + 10px);
height:calc({select:post buttons size} + 10px);
background:{color:background};
transform:rotate(45deg);
transform-origin:center;
border:1px solid {color:post divider};
}
.sqctn {
transform:rotate(-45deg);
display:flex;
align-items:center;
justify-content:center;
width:calc({select:post buttons size} + 20px);
height:calc({select:post buttons size} + 20px);
padding:0 10px;
cursor:pointer;
}
.sqctn svg {
display:block;
width:{select:post buttons size};
height:{select:post buttons size};
fill:{color:post buttons};
}
.sqctn[sq-title] {
position:relative;
}
.sqctn[sq-title]:not([sq-title=""]):before {
content:"";
position:absolute;
top:100%;
left:50%;transform:translateX(-50%);
width:1px;
height:0px;
background:linear-gradient(to bottom, {color:post divider} 0%, rgba({RGBcolor:post divider},0.420) 100%);
transition:all .4s .269s ease-in-out;
cursor:default;
z-index:68;
}
.sqctn[sq-title]:not([sq-title=""]):hover:before {
transition:all .4s .0s ease-in-out;
height:10px;
}
.sqctn[sq-title]:not([sq-title=""]):after {
content:attr(sq-title);
position:absolute;
top:calc(100% + 10px);
left:50%;transform:translateX(-50%);
background:{color:background};
padding:5px;
border:1px solid rgba({RGBcolor:post divider},0.420);
font-family:karla;
text-transform:uppercase;
font-size:calc({select:post font size} - 2px);
letter-spacing:1px;
color:{color:post text};
white-space:nowrap;
line-height:1.69em;
opacity:0;
transition:all .269s .069s ease-in-out;
cursor:default;
z-index:69;
}
.sqctn[sq-title]:not([sq-title=""]):hover:after {
transition:all .269s .4s ease-in-out;
opacity:1;
}
.fth svg {
fill:none;
color:{color:post buttons};
stroke-width:1.5px;
}
.retweet svg {
transform:scaleX(-1);
}
.likecont {
position:relative;
}
.like_button {
position:absolute;
width:100%;
height:100%;
padding:0!important;
}
.like_button iframe {
position:absolute;
top:0;left:0;
width:100%;
height:100%;
opacity:0;
z-index:2;
}
.like_button.liked + .heart svg {
fill:var(--Like-Button-Liked)!important;
}
.clicktags {cursor:help;}
.teaseen {
display:none;
opacity:0;
}
.theo {
opacity:1;
}
.teaseen, .theo {
transition:opacity 0.4s ease-in-out;
}
.tagholder {
padding-top:{select:captions spacing};
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
text-align:right;
margin:0 -4px;
font-family:karla;
font-size:calc({select:post font size} - 2px);
text-transform:uppercase;
letter-spacing:1px;
line-height:1.5em;
}
.tagholder a {
display:block;
margin:0 4px;
color:{color:tags};
}
.permarow {
margin-top:calc({select:captions spacing});
font-family:karla;
font-size:calc({select:post font size} - 2px);
text-transform:uppercase;
letter-spacing:1px;
overflow:auto;
}
.notecount {
float:left;
}
.permarow, .permarow a {
color:{color:permalink};
}
.permarow {
{block:PermalinkPage}
color:{color:post text};
{/block:PermalinkPage}
}
.permarow a {
{block:PermalinkPage}
color:{color:reblogger};
{/block:PermalinkPage}
}
.nc-r {
float:right;
}
.viasrc {
float:right;
}
.viasrc a {
margin-left:9px;
}
/*----- TEXT STYLES -----*/
.postscont blockquote {
position:relative;
margin:calc((var(--Original-Poster-Icon-Size) / 2) + 4px);
padding:0 calc((var(--Original-Poster-Icon-Size) / 2) + 4px);
}
.postscont blockquote:before {
content:"";
position:absolute;
top:0;
left:0;margin-left:-1px;
width:1px;
height:100%;
background:linear-gradient(to bottom, transparent 0%, var(--Blockquote-Border-Color) 25%, var(--Blockquote-Border-Color) 75%, transparent 100%);
}
@font-face {
font-family:Calluna;
src:url("//assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.eot?3=&v=f685dc881c60c298ea22a73fe505b88a");
font-weight:700;
font-style:italic
}
p.npf_quote {font-family:Calluna;}
@font-face {
font-family:Fairwater;
src:url("//assets.tumblr.com/fonts/fairwater/fairwater_script_regular-webfont.woff2?v=b7ab7a58cded3365889a447bfd9e9c45") format("woff2"),url("//assets.tumblr.com/fonts/fairwater/fairwater_script_regular-webfont.woff?v=96e975b7468359e6f67086305577e43e") format("woff");
font-weight:400;
font-style:normal
}
p.npf_quirky {font-family:Fairwater;}
p.npf_chat {font-family:inherit;}
/*----- PHOTOSETS -----*/
[photoset-layout] {
grid-gap:{select:photoset images spacing};
}
[photoset-layout] div {
cursor:pointer;
}
/*----- PHOTO POSTS -----*/
.photopic {
width:100%;
cursor:pointer;
}
/*---- LIGHTBOXES ----*/
.vignette, #vignette {
opacity:0;
}
.lightbox-image, #tumblr_lightbox img {
box-shadow:none!important;
border-radius:0px!important;
max-width:none;
padding:0px!important;
border:none!important;
}
.tmblr-lightbox, #tumblr_lightbox {
background-color:rgba({RGBcolor:background},0.69) !important;
}
/*---- REBLOG STYLING ----*/
.caption {
margin-top:calc(var(--Captions-Gap) * 1.2);
}
.comment_container {
{block:ifreblogseparators}
padding:calc({select:captions spacing} / 2) 0;
border-bottom:1px solid rgba({RGBcolor:post divider},0.169);
{/block:ifreblogseparators}
{block:ifnotreblogseparators}
padding:calc({select:captions spacing} / 2.5) 0;
{/block:ifnotreblogseparators}
}
.comment_container:first-of-type {
padding-top:0px;
border-top:0px solid transparent;
}
.comment_container:last-of-type {
padding-bottom:0px;
border-bottom:0px solid transparent;
}
.commenter, .asker_, .answerer_ {
display:flex;
align-items:center;
margin-top:calc({select:captions spacing} / 2); /* og: no /2 */
margin-bottom:calc({select:captions spacing} / 2);
}
.commenter svg, .asker_ svg, .answerer_ svg {
width:var(--Original-Poster-Icon-Size);
height:var(--Original-Poster-Icon-Size);
color:{color:reblogger};
}
.commenter span, .asker_ span, .answerer_ span, .replier a, .answerer a {
padding-left:9px;
font-family:beaufort;
font-weight:bold;
font-size:calc({select:post font size} - 1px);
text-transform:uppercase;
letter-spacing:1.5px;
}
.commenter span, .asker_ span, .answerer_ span, .replier span
.commenter a, .commenter span a, .asker_ a, .answerer_ a, .answerer a, .replier a {
color:{color:reblogger}!important;
}
/*----- ASK POSTS -----*/
.answer_text {
text-align:right;
}
.answerer_, .answerer {
justify-content:flex-end;
}
/*----- AUDIO -----*/
.tumblr_audio_player[width] {
width:100%!important;
height:0!important;
}
.audiocont {
position:absolute;
display:none;
overflow:hidden;
width:0!important;
height:0!important;
opacity:0;
}
.alcove {
position:relative;
width:var(--Audio-Post-Album-Image-Size);
height:var(--Audio-Post-Album-Image-Size);
}
.strawberries {
position:absolute;
top:0;margin-top:calc((100% - (var(--Audio-Post-PlayButton-Size) + (var(--Audio-Post-PlayButton-Padding) * 2) + 2px)) / 2);
left:0;margin-left:calc((100% - (var(--Audio-Post-PlayButton-Size) + (var(--Audio-Post-PlayButton-Padding) * 2) + 2px)) / 2);
width:calc(var(--Audio-Post-PlayButton-Size) + (var(--Audio-Post-PlayButton-Padding) * 2) + 2px);
height:calc(var(--Audio-Post-PlayButton-Size) + (var(--Audio-Post-PlayButton-Padding) * 2) + 2px);
}
.summer {
border:1px solid rgba({RGBcolor:post divider},0.8);
width:100%;
height:100%;
background:rgba({RGBcolor:background},1);
box-sizing:border-box;
border-radius:100%;
display:flex;
align-items:center;
justify-content:center;
line-height:0;
cursor:pointer;
}
.splay {
}
.splay i {
font-size:var(--Audio-Post-PlayButton-Size);
color:{color:post text};
}
.spause {
display:none;
margin-top:2px;
}
.spause i {
font-size:calc(var(--Audio-Post-PlayButton-Size) - 1px);
}
.a-lbum-img {
width:100%;
height:100%;
border-radius:3px;
visibility:hidden;
}
.tin {
width:calc(100% - var(--Audio-Post-Album-Image-Size));
height:var(--Audio-Post-Album-Image-Size);
}
.trackinfo {
margin-left:14px;
}
.t-name, .npf-audio-title {
font-family:beaufort;
font-weight:bold;
text-transform:uppercase;
letter-spacing:1.5px;
}
.dongload {
text-transform:initial!important;
}
.dongload svg {
width:calc({select:post font size} + 4px);
height:calc({select:post font size} + 4px);
color:{color:reblogger};
stroke-width:1.5px;
}
/*----- VIDEOS -----*/
video {
display:block;
outline:none;
cursor:default;
width:100%;
}
/*----- CHAT POSTS -----*/
.chatholder {
padding:var(--Paragraph-Margins) calc(var(--Paragraph-Margins) * 1.2);
border:1px solid rgba({RGBcolor:post divider},0.169);
border-top:none;
}
.chatholder:first-of-type {
border-top:1px solid rgba({RGBcolor:post divider},0.169);
}
p.chatholder {
margin:0;
}
.chat_label {
font-family:beaufort;
font-weight:bold;
text-transform:uppercase;
font-size:calc({select:post font size} - 1px);
letter-spacing:1px;
}
.chat_content {
margin-left:5px;
}
/*----- POST NOTES -----*/
.notescont {
width:{select:post width};
color:{color:permalink};
}
.notescont a {
color:{color:reblogger};
}
ol.notes {
padding:0;
list-style:none;
}
ol.notes .avatar {
display:none;
}
ol.notes li {
margin-bottom:1.5em;
}
ol.notes .answer_content {
color:rgba({RGBcolor:reblogger},0.7);
}
.more_notes_link_container {
margin-top:1.69em;
font-family:beaufort;
font-weight:bold;
text-transform:uppercase;
letter-spacing:2px;
}
/*------- PAGINATION -------*/
.botpagi {
margin-bottom:calc({select:window margin} - ({select:post spacing} / 2));
width:{select:post width};
}
.botpagi span {
padding:0 4px;
font-family:beaufort;
font-size:calc({select:post font size} - 1px);
font-weight:bold;
text-transform:uppercase;
letter-spacing:1.5px;
color:{color:post text};
}
.botpagi svg {
width:calc({select:post font size} + 2px);
height:calc({select:post font size} + 2px);
color:{color:post text};
}
.pn {
margin-left:auto;
}
/*----- BACKTOTOP BUTTON -----*/
.fraise {
display:none;
position:fixed;
bottom:0;margin-bottom:22px;
right:0;margin-right:16px;
cursor:pointer;
z-index:6;
}
.lait {
display:flex;
align-items:center;
justify-content:center;
width:calc(var(--BackToTop-Button-Icon-Size) + (var(--BackToTop-Button-Padding) * 2));
height:calc(var(--BackToTop-Button-Icon-Size) + (var(--BackToTop-Button-Padding) * 2));
background:{color:background};
border:1px solid rgba({RGBcolor:sidebar text},0.69);
overflow:hidden;
transform:rotate(45deg);
transform-origin:center;
}
.creme {
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:var(--BackToTop-Button-Icon-Size);
height:100%;
transform:rotate(-45deg);
}
.banane {
position:absolute;
top:0;margin-top:calc(var(--BackToTop-Button-Padding) * -1);
left:0;margin-left:1px;
width:calc(100% - 2px);
height:calc(var(--BackToTop-Button-Icon-Size) + var(--BackToTop-Button-Padding));
background:linear-gradient(to bottom, {color:background} 20%, transparent 100%);
z-index:2;
}
.melon {
position:absolute;
bottom:0;margin-bottom:calc(var(--BackToTop-Button-Padding) * -1);
left:0;margin-left:1px;
width:calc(100% - 2px);
height:calc(var(--BackToTop-Button-Icon-Size) + var(--BackToTop-Button-Padding));
background:linear-gradient(to top, {color:background} 20%, transparent 100%);
z-index:2;
}
.wangfire, .sapphire {
position:absolute;
}
.fraise:hover .wangfire {
margin-top:calc((var(--BackToTop-Button-Icon-Size) + (var(--BackToTop-Button-Padding) * 2)) * -2);
}
.sapphire {
margin-top:calc((var(--BackToTop-Button-Icon-Size) + (var(--BackToTop-Button-Padding) * 2)) * 2);
}
.fraise:hover .sapphire {
margin-top:0;
}
.fraise:hover .wangfire, .fraise:hover .sapphire {
transition:margin 0.4s ease-in-out;
}
.fraise svg {
width:var(--BackToTop-Button-Icon-Size);
height:var(--BackToTop-Button-Icon-Size);
color:{color:sidebar title};
stroke-width:1.5px;
}
.devola[data-title]:not([data-title=""]):before {
left:0!important;
margin-left:calc(var(--BackToTop-Button-Padding) * -2.414)!important;
top:50%!important;
transform:translateY(-50%) rotate(45deg)!important;
border:0px solid transparent!important;
border-top:1px solid rgba({RGBcolor:post divider},0.420)!important;
border-right:1px solid rgba({RGBcolor:post divider},0.420)!important;
margin-top:0!important;
}
.devola[data-title]:not([data-title=""]):after {
left:initial!important;
right:100%!important;
margin-right:calc(var(--BackToTop-Button-Padding) * 2)!important;
top:50%!important;
transform:translateY(-50%)!important;
}
.tmblr-attribution {
margin-top:var(--Paragraph-Margins)!important;
}
</style>
<style>{CustomCSS}</style>
</head>
<body>
<div class="fraise">
<a class="devola flex" title="scroll to top">
<div class="lait">
<div class="creme">
<div class="banane"></div>
<div class="melon"></div>
<div class="wangfire">
<i data-feather="arrow-up"></i>
</div>
<div class="sapphire">
<i data-feather="arrow-up"></i>
</div>
</div>
</div>
</a>
</div>
<div class="bigwrap {select:theme alignment}">
<div class="lemon">
<div class="berry">
<!-- START LEFT SIDEBAR -->
<div class="dianaside">
<div class="mc">
<div class="cov">
<div class="hc">
<div class="sb-image"></div>
<div class="shadroe"></div>
<div class="pakku"></div>
<div class="palir"></div>
<div class="ff">
<img class="frame" src="{image:sidebar frame}">
<div class="trans"></div>
</div>
<div class="stuffbelow">
<div class="uma-tit">
{block:iflefttitle}
{text:left title}
{/block:iflefttitle}
</div>
<div class="xwrap">
<a href="/" title="home">
<i data-feather="home"></i>
</a>
<a href="/ask" title="message">
<i data-feather="mail"></i>
</a>
<div class="ring">
<img class="icoe" src="{image:sidebar icon}">
<div class="i-shad"></div>
</div>
<a href="/archive" title="archive">
<i data-feather="grid"></i>
</a>
<a href="//glenthemes.tumblr.com" title="theme by glenthemes">
<div class="glenjamin"></div>
</a>
</div><!--xwrap-->
<div class="desc">
{block:ifsidebarquote}
{text:sidebar quote}
{/block:ifsidebarquote}
</div>
</div><!--stuffbelow-->
</div><!--hc-->
</div><!--cov-->
</div><!--mc-->
</div><!--dianaside-->
<!-- END LEFT SIDEBAR -->
<!-- START RIGHT SIDEBAR -->
<div class="rightside">
<div class="emily">
<div class="owrap">
<div class="img-i"></div>
<div class="sumshad"></div>
<div class="sumframe">
<img class="sf-border" src="{select:summoner border}">
</div>
<div class="lvl">
<div class="lvltxt">{text:level number}</div>
</div>
</div><!--owrap-->
<div class="dovwrap">
<div class="dline"></div>
<div class="dia"></div>
<div class="flex space-between">
<div class="hz l"></div>
<div class="hz r"></div>
</div>
<div class="rl"></div>
<div class="rr"></div>
<div class="bl"></div>
<div class="br"></div>
</div>
<div class="one-box">
<div class="boxtitle">
{block:ifrighttitle}
{text:right title}
{/block:ifrighttitle}
{block:ifnotrighttitle}
{Title}
{/block:ifnotrighttitle}
</div>
<div class="boxtext">
{block:ifrightdesc}
{text:right desc}
{/block:ifrightdesc}
{block:ifnotrightdesc}
{Description}
{/block:ifnotrightdesc}
</div>
</div>
<div class="one-box">
<div class="ummcanvas">
{block:ifcustomlink1name}
<a class="sausage" href="{text:custom link 1 url}">
<div class="longue"></div>
<div class="bread"></div>
<div class="baguette"></div>
<div class="butter">
<div class="sizzle"></div>
<div class="oeuf"></div>
<div class="tomate"></div>
</div>
<div class="tct">
<div class="cl-text">{text:custom link 1 name}</div>
</div>
</a><!--one sausage-->
{/block:ifcustomlink1name}
{block:ifcustomlink2name}
<a class="sausage" href="{text:custom link 2 url}">
<div class="longue"></div>
<div class="bread"></div>
<div class="baguette"></div>
<div class="butter">
<div class="sizzle"></div>
<div class="oeuf"></div>
<div class="tomate"></div>
</div>
<div class="tct">
<div class="cl-text">{text:custom link 2 name}</div>
</div>
</a><!--one sausage-->
{/block:ifcustomlink2name}
{block:ifcustomlink3name}
<a class="sausage" href="{text:custom link 3 url}">
<div class="longue"></div>
<div class="bread"></div>
<div class="baguette"></div>
<div class="butter">
<div class="sizzle"></div>
<div class="oeuf"></div>
<div class="tomate"></div>
</div>
<div class="tct">
<div class="cl-text">{text:custom link 3 name}</div>
</div>
</a><!--one sausage-->
{/block:ifcustomlink3name}
{block:ifcustomlink4name}
<a class="sausage" href="{text:custom link 4 url}">
<div class="longue"></div>
<div class="bread"></div>
<div class="baguette"></div>
<div class="butter">
<div class="sizzle"></div>
<div class="oeuf"></div>
<div class="tomate"></div>
</div>
<div class="tct">
<div class="cl-text">{text:custom link 4 name}</div>
</div>
</a><!--one sausage-->
{/block:ifcustomlink4name}
{block:ifcustomlink5name}
<a class="sausage" href="{text:custom link 5 url}">
<div class="longue"></div>
<div class="bread"></div>
<div class="baguette"></div>
<div class="butter">
<div class="sizzle"></div>
<div class="oeuf"></div>
<div class="tomate"></div>
</div>
<div class="tct">
<div class="cl-text">{text:custom link 5 name}</div>
</div>
</a><!--one sausage-->
{/block:ifcustomlink5name}
{block:ifcustomlink6name}
<a class="sausage" href="{text:custom link 6 url}">
<div class="longue"></div>
<div class="bread"></div>
<div class="baguette"></div>
<div class="butter">
<div class="sizzle"></div>
<div class="oeuf"></div>
<div class="tomate"></div>
</div>
<div class="tct">
<div class="cl-text">{text:custom link 6 name}</div>
</div>
</a><!--one sausage-->
{/block:ifcustomlink6name}
{block:ifcustomlink7name}
<a class="sausage" href="{text:custom link 7 url}">
<div class="longue"></div>
<div class="bread"></div>
<div class="baguette"></div>
<div class="butter">
<div class="sizzle"></div>
<div class="oeuf"></div>
<div class="tomate"></div>
</div>
<div class="tct">
<div class="cl-text">{text:custom link 7 name}</div>
</div>
</a><!--one sausage-->
{/block:ifcustomlink7name}
{block:ifcustomlink8name}
<a class="sausage" href="{text:custom link 8 url}">
<div class="longue"></div>
<div class="bread"></div>
<div class="baguette"></div>
<div class="butter">
<div class="sizzle"></div>
<div class="oeuf"></div>
<div class="tomate"></div>
</div>
<div class="tct">
<div class="cl-text">{text:custom link 8 name}</div>
</div>
</a><!--one sausage-->
{/block:ifcustomlink8name}
</div><!--ummcanvas-->
</div><!--one-box-->
{block:ifshowmusicplayer}
<div class="dovwrap vot">
<div class="flex space-between">
<div class="hz l"></div>
<div class="hz r"></div>
</div>
<div class="vl"></div>
<div class="vr"></div>
<div class="gl"></div>
<div class="gr"></div>
</div>
<!-------MUSIC PLAYER------->
<div class="glenplayer07">
<div class="flamingo">
<div class="circleofdeath">
<div class="tinfoil">
<div class="oliveoil"></div>
</div>
<div class="crust">
<div class="cherry">
<div class="music-controls flex">
<i class="material-icons playy">play_arrow</i>
<i class="material-icons pausee">pause</i>
</div>
</div><!--cherry-->
</div><!--crust-->
</div><!--circleofdeath-->
<div class="music-info">
<div class="song-name">{text:music player song name}</div>
<div class="artist-name">{text:music player artist name}</div>
</div><!--music-info-->
</div><!--flamingo-->
</div><!--glenplayer07-->
<audio id="audio" src="{text:music MP3 URL}" type="audio"></audio>
{/block:ifshowmusicplayer}
<!----end music player---->
</div><!--emily-->
</div><!--rightside-->
<!-- END RIGHT SIDEBAR -->
<!-- START MAIN POSTS -->
<div class="postscont {block:ifreblogseparators}oui{/block:ifreblogseparators}">
{block:Posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
<div class="hold">
<div class="post" id="{PostID}" post-type="{PostType}">
{block:Title}
<h1 class="title">{Title}</h1>
{/block:Title}
{block:Text}
<div class="body">
{block:NotReblog}{Body}{/block:NotReblog}
{block:RebloggedFrom}
{block:Reblogs}
<div class="comment_container">
<div class="commenter source-head">
<i data-feather="{select:reblogger icon}"></i>
<span>
{block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a>{/block:HasPermalink}
</span>
</div>
<div class="comment">{Body}</div>
</div>
{/block:Reblogs}
{/block:RebloggedFrom}
</div>
{/block:Text}
{block:Photo}
<a class="single" 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="photopic" src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>
{/block:Photo}
{block:Photoset}<div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>{/block:Photoset}
{block:Quote}
<div class="quote-words">{Quote}</div>
{block:Source}<div class="quote-source">{Source}</div>{/block:Source}
{/block:Quote}
{block:Link}
<a href="{URL}" class="path {block:Description}has-desc{/block:Description}" {Target}>{Name}&ensp;&gt;</a>
{block:Description}
<div class="link-description">
{block:NotReblog}{Description}{/block:NotReblog}
{block:RebloggedFrom}
{block:Reblogs}
<div class="comment_container">
<div class="commenter">
<i data-feather="{select:reblogger icon}"></i>
<span>
{block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a>{/block:HasPermalink}
</span>
</div>
<div class="comment">{Body}</div>
</div>
{/block:Reblogs}
{/block:RebloggedFrom}
</div>
{/block:Description}
{/block:Link}
{block:Chat}
<div>
{block:Lines}
<div class="chatholder">
{block:Label}
<span class="chat_label">{Label}</span>
{/block:Label}
<span class="chat_content">{Line}</span>
</div>
{/block:Lines}
</div>
{/block:Chat}
{block:Audio}
<div class="flex">
<div class="audiocont">
{AudioEmbed}
</div>
<div class="alcove">
<img class="a-lbum-img">
<div class="strawberries">
<div class="summer">
<div class="splay">
<i class="material-icons">play_arrow</i>
</div>
<div class="spause">
<i class="material-icons">pause</i>
</div>
</div><!--summer-->
</div>
</div>
<div class="tin flex space-between">
<div class="trackinfo">
{block:TrackName}
<div class="t-name">{TrackName}</div>
{/block:TrackName}
{block:Artist}
<div class="t-artist">{Artist}</div>
{/block:Artist}
</div><!--trackinfo-->
<a class="dongload" title="download">
<i data-feather="download"></i>
</a>
</div><!--flex-->
</div><!--oofy-->
{/block:Audio}
{block:Video}<div class="video">{Video-500}</div>{/block:Video}
{block:Answer}
<div class="question_container">
<div class="asker_">
<i data-feather="help-circle"></i>
<span>{Asker} asked:</span>
</div>
<div class="question_text">{Question}</div>
</div>
{block:Answerer}
<div class="answer_container">
<div class="answerer_">
<i data-feather="{select:reblogger icon}"></i>
<span>{Answerer} replied:</span>
</div>
<div class="answer_text">{Answer}</div>
</div>
{block:Reblogs}
<div class="reply_container">
<div class="replier commenter">
<i data-feather="{select:reblogger icon}"></i>
{block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a> {/block:HasPermalink}
</div>
<div class="reply">{Body}</div>
</div>
{/block:Reblogs}
{/block:Answerer}
{block:NotReblog}
<div class="answer_container">
<div class="answerer commenter">
<i data-feather="{select:reblogger icon}"></i>
<a href="{Permalink}">{Name}</a>
</div>
<div class="answer_text">{Answer}</div>
</div>
{/block:NotReblog}
{/block:Answer}
{block:Caption}
<div class="caption">
{block:NotReblog}{Caption}{/block:NotReblog}
{block:RebloggedFrom}
{block:Reblogs}
<div class="comment_container">
<div class="commenter">
<i data-feather="{select:reblogger icon}"></i>
<span>
{block:HasPermalink}<a href="{Permalink}">{/block:HasPermalink}{Username}{block:HasPermalink}</a>{/block:HasPermalink}
</span>
</div>
<div class="comment">{Body}</div>
</div>
{/block:Reblogs}
{/block:RebloggedFrom}
</div>
{/block:Caption}
{block:Date}
{block:RebloggedFrom}
<div class="commenter src">
<i data-feather="{select:reblogger icon}"></i>
<span><a href="{ReblogRootURL}">{ReblogRootName}</a></span>
</div>
{/block:RebloggedFrom}
{block:HasTags}
<div class="{block:IndexPage}{block:iftagsonclick}teaseen{/block:iftagsonclick}{/block:IndexPage}">
<div class="tagholder">
{block:Tags}
<a href="{TagURL}">#{Tag}</a>
{/block:Tags}
</div>
</div>
{/block:HasTags}
<div class="permarow">
<div class="notecount">
{block:IndexPage}
<a href="{Permalink}">
{ShortMonth} {DayOfMonthWithZero}{DayOfMonthSuffix}
&emsp;{TimeAgo}
</a>
{/block:IndexPage}
{block:PermalinkPage}
{block:NotReblog}Posted{/block:NotReblog}
{block:RebloggedFrom}Reblogged{/block:RebloggedFrom}
on {Month} {DayOfMonth}{DayOfMonthSuffix}, {Year}
&middot; {NoteCountWithLabel}
{/block:PermalinkPage}
</div>
<div class="nc-r">
{block:IndexPage}
<a href="{Permalink}">{NoteCountWithLabel}</a>
{/block:IndexPage}
</div>
{block:PermalinkPage}
{block:RebloggedFrom}
<div class="viasrc">
<a href="{ReblogParentURL}">via</a>
<a href="{ReblogRootURL}">source</a>
</div>
{/block:RebloggedFrom}
{/block:PermalinkPage}
</div><!--permarow-->
{/block:Date}
</div><!--post-->
{block:Date}
<div class="romholder">
{block:IndexPage}
<a class="square" href="{Permalink}" title="view post">
<div class="sqctn fth">
<i data-feather="eye"></i>
</div>
</a>
{block:IndexPage}
{block:iftagsonclick}
{block:IndexPage}
{block:HasTags}
<a class="square clicktags" title="tags">
<div class="sqctn fth">
<i data-feather="hash"></i>
</div>
</a>
{block:HasTags}
{/block:IndexPage}
{/block:iftagsonclick}
{block:PermalinkPage}
{block:RebloggedFrom}
<a class="square" href="{ReblogRootURL}" title="source: {ReblogRootName}">
<div class="sqctn fth">
<i data-feather="user"></i>
</div>
</a>
{/block:RebloggedFrom}
{block:PermalinkPage}
<a class="square" href="{ReblogURL}" target="_blank" title="reblog">
<div class="sqctn">
<span class="retweet"></span>
</div>
</a>
<a class="square likecont like" title="like">
<div class="sqctn">
{LikeButton}
<span class="heart"></span>
</div>
</a>
</div>
<hr class="hr-fordiv">
</div><!--hold-->
{/block:Date}
{block:PostNotes}
<div class="notescont">
{PostNotes}
</div>
{/block:PostNotes}
{/block:Posts}
<!------- PAGINATION ------->
{block:Pagination}
<div class="botpagi flex space-between">
{block:PreviousPage}
<a class="flex" href="{PreviousPage}">
<i data-feather="chevron-left"></i>
<span>previous</span>
</a>
{/block:PreviousPage}
{block:NextPage}
<a class="flex pn" href="{NextPage}">
<span>next</span>
<i data-feather="chevron-right"></i>
</a>
{/block:NextPage}
</div><!--botpagi-->
{/block:Pagination}
</div><!--postscont-->
<!-- END MAIN POSTS -->
</div><!--berry-->
</div><!--lemon-->
</div><!--bigwrap-->
<!---- scripts and stuff ---->
<script src="//static.tumblr.com/0podkko/jfMplm3f8/modified_photosets.js"></script>
<script>
// change .gifv to .gif
// tutorial by @felicitysmoak
$(document).ready(function(){
$('img[src*="media.tumblr.com"]').each(function(){
var newsrc = $(this).attr('src').replace('gifv','gif');
$(this).attr('src', newsrc);
});
$('a[href*="media.tumblr.com"]').each(function(){
var newhref = $(this).attr('href').replace('gifv','gif');
$(this).attr('href', newhref);
});
$('div[data-lowres*="media.tumblr.com').each(function(){
var newdata = $(this).attr('data-lowres').replace('gifv','gif');
$(this).attr('data-lowres', newdata);
});
$('div[data-highres*="media.tumblr.com').each(function(){
var newdata = $(this).attr('data-highres').replace('gifv','gif');
$(this).attr('data-highres', newdata);
});
});
</script>
<script>
initPhotosets();
feather.replace();
</script>
</body>
</html>