themes/14-Bloodlust

2726 lines
73 KiB
Plaintext

<!----------------------------------------------------
Theme [14]: Bloodlust
Made by glenthemes
Initial release: 2015/12/13
Revamp v1 date: 2020/03/20
v2 date: 2021/11/18
Last updated: 2024/03/
What's new:
✱ added support for long sidebars
------------------------------------------------------
EDITING GUIDE:
https://docs.google.com/presentation/d/19QzgXtEY1JawYEh8vudyXcjFBZT5wgKvDxUCt0bHDqE/edit?usp=sharing
------------------------------------------------------
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:
┻┳|・ω・)ノ ~ glencredits.tumblr.com/bloodlust
----------------------------------------------------->
<!DOCTYPE html>
<html font="{select:font}" tumblr-controls="{select:tumblr controls color}" bg-type="{select:background image type}" portrait="{PortraitURL-64}" {block:TagPage}tag-page{/block:TagPage}>
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
{block:Description}
<meta name="description" content="{MetaDescription}">
{/block:Description}
<!-------- FONTS -------->
<!-- google fonts -->
<link href="//fonts.googleapis.com/css?family=Work+Sans|Cousine|Libre+Franklin|Manrope:500|Karla|Open+Sans|Averia+Serif+Libre|Vollkorn|Abril+Fatface|Tenor+Sans" rel="stylesheet">
<!-- caslon fs -->
<link rel="stylesheet" href="//assets.tumblr.com/fonts/caslonfs/stylesheet.css">
<!-------- ICON FONTS -------->
<!-- phosphor icons -->
<link rel="stylesheet" href="//unpkg.com/phosphor-icons@1.3.2/src/css/phosphor.css">
<!-- cappucicons -->
<link href="//static.tumblr.com/gtjt4bo/tQkr83ou4/cappuccicons.css" rel="stylesheet">
<!-- iconsax -->
<script src="//glenthemes.github.io/iconsax/geticons.js"></script>
<link href="//glenthemes.github.io/iconsax/style.css" rel="stylesheet">
<!-- boobstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">
<!-------- PRELOAD -------->
<link rel="preload" href="{image:header image}" as="image">
<link rel="preload" href="//glen-assets.github.io/fonts/Canela-Regular-Web.ttf" as="font">
<!-------- JQUERY -------->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-------- THEME SCRIPTS -------->
<script src="//npf-images-v3.github.io/script.js"></script>
<link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
<script src="//rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
<link href="//static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
<script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script src="//static.tumblr.com/gtjt4bo/sgMrymui0/waitforelement.js"></script>
<script src="//glen-themes.gitlab.io/thms/14/lactose-intolerance.js"></script>
<script src="//glen-themes.gitlab.io/thms/14/milk-tea.js"></script>
<script src="//smart-sticky.gitlab.io/i/init.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
smartSticky({
scroll_container: ".ensoot",
stick: ".left-sidebar, .right-sidebar"
})
})
</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: var(--Body-Font-Size);
--Poll-Option-Background-Color: transparent;
--Poll-Option-Corner-Rounding: 0px;
--Poll-Option-Border-Size: 1px;
--Poll-Option-Border-Color: var(--Post-Borders-Inner);
--Poll-Option-Padding: 10px;
--Poll-Option-Font-Size: var(--Body-Font-Size);
--Poll-Option-Spacing: 10px;
--Poll-Option-Text-Color: var(--Body-Text-Color);
--Poll-Option-HOVER-Border-Color: var(--Post-Borders-Inner);
--Poll-Option-HOVER-Background-Color: transparent;
--Poll-Option-HOVER-Text-Color: var(--Body-Text-Color);
--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: var(--Audio-Post-Buttons-Size);
--NPF-Audio-Buttons-Color: var(--Audio-Post-Buttons-Color);
--NPF-Audio-Buttons-Padding: var(--Audio-Post-Buttons-Padding);
--NPF-Audio-Buttons-Spacing: calc(var(--p) + var(--Audio-Post-Album-Right-Gap));
--NPF-Audio-Image-Size: var(--Audio-Post-Album-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;
background:{color:special background};
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));
margin-left:calc(0px - var(--NPF-Audio-Buttons-Padding));
width:calc(100% + (var(--NPF-Audio-Buttons-Padding) * 2));
height:calc(100% + (var(--NPF-Audio-Buttons-Padding) * 2));
background:var(--Audio-Post-Buttons-Background);
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]{
display:none;
}
.npf-audio-image {
position:absolute;
top:0;left:0;
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">
<!-------- CUSTOMIZE PANEL OPTIONS -------->
<!-- hi if you're reading this, GO BACK to edit! -->
<!-- editing stuff here (the meta names) won't do anything -->
<meta name="image:top bar icon" content="//64.media.tumblr.com/a7a2734ed0af7053247dcc7e4c2e8743/aa56c24116a90bd2-42/s2048x3072/3173d13466cd4f08688b3b479d5dcda204e20945.png">
<meta name="image:header image" content="//64.media.tumblr.com/d2ba94111296ea9b986d405b68274c6b/aa56c24116a90bd2-a7/s2048x3072/2ccbdecc910fb487b66032cad5ba98f93bd52db8.png">
<meta name="image:sidebar banner 1" content="//64.media.tumblr.com/7c2e7a845810c922c7ae15a0de787160/aa56c24116a90bd2-97/s2048x3072/e3455e11e4b69c296ca8add8c7d2501e5696fa1b.gif">
<meta name="image:sidebar banner 2" content="//64.media.tumblr.com/4555dfb0f792547cba9db169b9153869/aa56c24116a90bd2-e4/s2048x3072/69e6f4b54125f93354c70b49897188c253aabe75.gif">
<meta name="image:background image" content="">
<!----- TOP BAR COLORS ----->
<meta name="color:top bar background" content="#040404">
<meta name="color:top bar icon border" content="#2a2727">
<meta name="color:top left title" content="#a39795">
<meta name="color:navlinks" content="#b49a97">
<meta name="color:top center title" content="#9b7f7d">
<meta name="color:custom links" content="#b49a97">
<meta name="color:searchbar text" content="#b49a97">
<meta name="color:searchbar underline" content="#45403f">
<meta name="color:searchbar button" content="#b49a97">
<!----- HEADER COLORS ----->
<meta name="color:header background" content="#040404">
<!----- SIDEBAR COLORS ----->
<meta name="color:sidebar heading" content="#977969">
<meta name="color:sidebar dividers" content="#625b5a">
<meta name="color:sidebar hyperlinks" content="#af8465">
<meta name="color:sidebar blog names" content="#aa836f">
<meta name="color:sidebar social icons" content="#a0705f">
<meta name="color:sidebar stat label" content="#a77b6b">
<!----- MAIN COLORS ----->
<meta name="color:background" content="#040404">
<!----- POST COLORS ----->
<meta name="color:post" content="#040404">
<meta name="color:text" content="#a39795">
<meta name="color:link" content="#aa836f">
<meta name="color:post borders outer" content="#252221">
<meta name="color:post borders inner" content="#3a3635">
<meta name="color:special border" content="#3a3635">
<meta name="color:special background" content="#040404">
<meta name="color:special text" content="#a39795">
<meta name="color:reblogger" content="#a77b6b">
<meta name="color:tags" content="#978a87">
<meta name="color:permalink" content="#a4928e">
<meta name="color:permalink background" content="#040404">
<meta name="color:permalink border" content="#252221">
<meta name="color:post buttons" content="#988580">
<meta name="color:like button liked" content="#c06751">
<meta name="color:post dividers" content="#625b5a">
<meta name="color:scrollbar" content="#625b5a">
<meta name="color:scrollbar background" content="#040404">
<meta name="color:text selection background" content="#2c2221">
<meta name="color:text selected" content="#a39795">
<!-------- DROPDOWN OPTIONS -------->
<meta name="select:background image type" title="small" content="repeat">
<meta name="select:background image type" title="large" content="full">
<meta name="select:font" title="Vollkorn" content="Vollkorn">
<meta name="select:font" title="Libre Franklin" content="Libre Franklin">
<meta name="select:font" title="Open Sans" content="Open Sans">
<meta name="select:font" title="Manrope" content="Manrope">
<meta name="select:font" title="Karla" content="Karla">
<meta name="select:font" title="Tenor Sans" content="Tenor Sans">
<meta name="select:font size" title="12px" content="12px">
<meta name="select:font size" title="10px" content="10px">
<meta name="select:font size" title="11px" content="11px">
<meta name="select:font size" title="13px" content="13px">
<meta name="select:font size" title="14px" content="14px">
<meta name="select:font size" title="15px" content="15px">
<!----- HEADER OPTIONS ----->
<meta name="select:-------------------">
<meta name="select:header image position" title="center center" content="center center">
<meta name="select:header image position" title="top left" content="top left">
<meta name="select:header image position" title="top center" content="top center">
<meta name="select:header image position" title="top right" content="top right">
<meta name="select:header image position" title="center left" content="center left">
<meta name="select:header image position" title="center right" content="center right">
<meta name="select:header image position" title="bottom left" content="bottom left">
<meta name="select:header image position" title="bottom center" content="bottom center">
<meta name="select:header image position" title="bottom right" content="bottom right">
<!-------- SIDEBAR OPTIONS -------->
<meta name="select:sidebar width" title="250px" content="250px">
<meta name="select:sidebar width" title="175px" content="175px">
<meta name="select:sidebar width" title="200px" content="200px">
<meta name="select:sidebar width" title="225px" content="225px">
<meta name="select:sidebar width" title="175px" content="175px">
<meta name="select:sidebar box 1 text align" title="left" content="left">
<meta name="select:sidebar box 1 text align" title="right" content="right">
<meta name="select:sidebar box 1 text align" title="center" content="center">
<meta name="select:sidebar box 1 text align" title="justify" content="justify">
<!-------- GAPS BETWEEN POST & SIDEBARS -------->
<meta name="select:center gaps" title="60px" content="60px">
<meta name="select:center gaps" title="20px" content="20px">
<meta name="select:center gaps" title="30px" content="30px">
<meta name="select:center gaps" title="35px" content="35px">
<meta name="select:center gaps" title="40px" content="40px">
<meta name="select:center gaps" title="45px" content="45px">
<meta name="select:center gaps" title="55px" content="55px">
<meta name="select:center gaps" title="50px" content="50px">
<meta name="select:center gaps" title="55px" content="55px">
<meta name="select:center gaps" title="65px" content="65px">
<meta name="select:center gaps" title="70px" content="70px">
<meta name="select:center gaps" title="75px" content="75px">
<meta name="select:center gaps" title="80px" content="80px">
<!-------- POST OPTIONS -------->
<meta name="select:---------------------">
<meta name="select:borderless posts" title="yes" content="yes">
<meta name="select:borderless posts" title="no" content="no">
<meta name="select:post width" title="500px" content="500px">
<meta name="select:post width" title="400px" content="400px">
<meta name="select:post width" title="425px" content="425px">
<meta name="select:post width" title="450px" content="450px">
<meta name="select:post width" title="475px" content="475px">
<meta name="select:post width" title="520px" content="520px">
<meta name="select:post width" title="540px" content="540px">
<meta name="select:post width" title="600px" content="600px">
<meta name="select:post padding" title="0px" content="0px">
<meta name="select:post padding" title="10px" content="10px">
<meta name="select:post padding" title="14px" content="14px">
<meta name="select:post padding" title="18px" content="18px">
<meta name="select:post padding" title="22px" content="22px">
<meta name="select:photoset spacing" title="4px" content="4px">
<meta name="select:photoset spacing" title="2px" content="2px">
<meta name="select:photoset spacing" title="6px" content="6px">
<meta name="select:photoset spacing" title="8px" content="8px">
<meta name="select:photoset spacing" title="10px" content="10px">
<meta name="select:grayscale images" title="reblogger icon only" content="rb-ico">
<meta name="select:grayscale images" title="everything in posts" content="everything">
<meta name="select:grayscale images" title="off" content="off">
<meta name="select:click tags" title="no" content="no">
<meta name="select:click tags" title="yes" content="yes">
<meta name="select:post spacing" title="50px" content="50px">
<meta name="select:post spacing" title="25px" content="25px">
<meta name="select:post spacing" title="30px" content="30px">
<meta name="select:post spacing" title="35px" content="35px">
<meta name="select:post spacing" title="40px" content="40px">
<meta name="select:post spacing" title="45px" content="45px">
<meta name="select:post spacing" title="55px" content="55px">
<meta name="select:post spacing" title="60px" content="60px">
<meta name="select:post spacing" title="65px" content="65px">
<meta name="select:post spacing" title="70px" content="70px">
<meta name="select:post spacing" title="75px" content="75px">
<!--------- TUMBLR CONTROLS OPTIONS --------->
<meta name="select:------------------------">
<meta name="select:tumblr controls color" title="white" content="white">
<meta name="select:tumblr controls color" title="black" content="black">
<!--------- TEXT FIELDS --------->
<meta name="text:PLEASE READ THE GUIDE BELOW" content="https://docs.google.com/presentation/d/19QzgXtEY1JawYEh8vudyXcjFBZT5wgKvDxUCt0bHDqE/edit?usp=sharing">
<meta name="text:top left title" content="farewell, good hunter">
<meta name="text:top center title" content="bloodlust.">
<meta name="text:customlink 1 name" content="sample link">
<meta name="text:customlink 1 url" content="https://youtube.com/watch?v=ZkNMZlkrzaU">
<meta name="text:customlink 2 name" content="">
<meta name="text:customlink 2 url" content="">
<meta name="text:customlink 3 name" content="">
<meta name="text:customlink 3 url" content="">
<meta name="text:customlink 4 name" content="">
<meta name="text:customlink 4 url" content="">
<meta name="text:customlink 5 name" content="">
<meta name="text:customlink 5 url" content="">
<meta name="text:customlink 6 name" content="">
<meta name="text:customlink 6 url" content="">
<meta name="text:left sidebar box 1 title" content="welcome">
<meta name="text:left sidebar box 1" content="Some welcome text here! To use your description, empty this box! :)">
<meta name="text:left sidebar box 2 title" content="other blogs">
<meta name="text:left sidebar box 2" content="***&NewLine;[pic] [https://static.tumblr.com/2pnwama/kOas1psfy/haru.png]&NewLine;[link-text] [freestyle dance teacher]&NewLine;[link-url] [https://youtube.com/watch?v=ZkNMZlkrzaU]&NewLine;[subtitle] [remember to drink water]">
<meta name="text:left sidebar box 3 title" content="socials&ensp;&&ensp;elsewhere">
<meta name="text:left sidebar box 3" content="***&NewLine;[icon-name] [brush]&NewLine;[link-url] [https://instagram.com/anyilia_]&NewLine;[hover-text] [art account]">
<meta name="text:right sidebar box 1" content="* name: HT&NewLine;* birthday: 05.21&NewLine;* MBTI: your mbti&NewLine;* status: sleeping&NewLine;* level: 69&NewLine;* bias: Lady Maria">
<meta name="text:right sidebar box 2 title" content="currently">
<meta name="text:right sidebar box 2" content="* reading: something&NewLine;* watching: something&NewLine;* playing: something&NewLine;* listening: something">
<!--------------------------------------------------->
<style type="text/css">
@font-face { font-family: "canela"; src: url('//glen-assets.github.io/fonts/Canela-Regular-Web.ttf'); }
/*-------- TUMBLR CONTROLS --------*/
iframe#tumblr_controls, .iframe-controls--desktop {
top:calc(3px + var(--Top-Bar-Height))!important;
right:calc(5px + (var(--Scrollbar-Padding) / 2))!important;
position:fixed!important;
transform:scale(0.65,0.65);
-webkit-transform:scale(0.65,0.65);
transform-origin:100% 0;
z-index:11!important;
user-select:none;
}
[tumblr-controls="black"] iframe#tumblr_controls,
[tumblr-controls="black"] .iframe-controls--desktop {
filter:invert(100%) hue-rotate(180deg)!important;
-webkit-filter:invert(100%) hue-rotate(180deg)!important;
}
.tmblr-iframe--follow-teaser, .follow-teaser {
display:none!important;
}
/*------- SCROLLBAR --------*/
::-webkit-scrollbar {
width:var(--Scrollbar-Padding);
height:0;
background-color:{color:scrollbar background};
}
::-webkit-scrollbar-thumb {
background-color:{color:scrollbar};
border:calc((var(--Scrollbar-Padding) - 1px) / 2) solid transparent;
border-top:calc(var(--Scrollbar-Padding) / 1.69) solid transparent;
border-bottom:calc(var(--Scrollbar-Padding) / 1.69) solid transparent;
background-clip:padding-box;
}
::-webkit-scrollbar-corner {
background:{color:scrollbar background};
}
/*------- TOOLTIPS --------*/
#s-m-t-tooltip {
padding:5px 9px;
margin:17px;
background-color:{color:post};
border-radius:2px;
border:1px solid rgba({RGBcolor:text},0.25);
font-family:var(--SmallCaps-Font-Family);
font-size:calc(var(--SmallCaps-Font-Size) - .5px);
letter-spacing:0.5px;
text-transform:uppercase;
color:{color:text};
line-height:var(--Line-Height);
z-index:99;
max-width:40vw;
}
/*---- GLOBAL FONT SETTINGS -----*/
[font]{
font-family:var(--Body-Font-Family);
font-size:var(--Body-Font-Size);
color:var(--Body-Text-Color);
}
[font="Libre Franklin"]{
font-size:calc(var(--Body-Font-Size) - .5px)!important;
letter-spacing:0.1px;
}
[font="Manrope"]{
font-size:calc(var(--Body-Font-Size) - 1px)!important;
letter-spacing:0.3px;
}
[font="Vollkorn"]{
font-size:calc(var(--Body-Font-Size) + 1px)!important;
}
/*------- TEXT HIGHLIGHT --------*/
::selection {
background:{color:text selection background};
color:{color:text selected};
}
::-moz-selection {
background:{color:text selection background};
color:{color:text selected};
}
/*------- BASICS --------*/
html, body {
scrollbar-width:thin; /* firefox only */
}
body {
margin:0;
background-color:{color:background};
background-image:url('{image:background image}');
background-attachment:fixed;
overscroll-behavior-y:none;
}
[bg-type="repeat"] body {
background-repeat:repeat;
}
[bg-type="full"] body {
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
a {
text-decoration:none;
color:var(--Link);
}
a[title][class*="smt-current-element"]:not([href]){
cursor:help;
}
a[title=""]:not([href]){
cursor:initial;
}
p {
margin:var(--Paragraph-Margins) 0;
}
blockquote {
margin:var(--Paragraph-Margins);
margin-right:0;
padding-left:var(--Paragraph-Margins);
border-left:1px solid rgba({RGBcolor:text},0.169);
}
h1, h2, h3, h4, h5, h6, .linkpost-title {
margin:var(--Heading-Margins) 0;
font-family:var(--Heading-Font-Family);
font-size:var(--Body-Font-Size);
text-transform:uppercase;
letter-spacing:.3px;
line-height:calc(var(--Line-Height) * 1.1);
}
img, iframe {
vertical-align:middle;
max-width:100%;
}
figure {
margin:0;
}
pre, code {
white-space:pre-wrap;
font-family:cousine;
font-size:calc(var(--Body-Font-Size) - 2px);
background:{color:special background};
border:1px solid {color:special border};
color:{color:special text};
}
pre {
padding:0.8em 1em;
}
code {
padding:3px 4px;
}
hr {
display:block;
margin:var(--Heading-Margins) auto;
border-width:0px;
width:69%;
height:1px;
background:{color:post borders inner};
}
a.read_more {
display:block;
margin-bottom:-3px;
font-family:var(--SmallCaps-Font-Family);
font-size:calc(var(--SmallCaps-Font-Size) + 2px);
text-transform:uppercase;
letter-spacing:.7px;
text-align:center;
}
ul, ol {
margin:var(--Paragraph-Margins) 0;
margin-left:1.69em;
padding:0;
}
ol li {
padding-left:0.420em;
}
ul li {
position:relative;
padding-left:0.25em;
margin-left:calc((var(--Body-Font-Size) * 1.420) - 3px);
list-style:none;
}
ul li:before {
content:"";
position:absolute;
margin-top:calc(((var(--Body-Font-Size) * var(--Line-Height-INT)) / 2) - 0px);
transform:translateY(-50%);
left:0;margin-left:calc((var(--Body-Font-Size) * -1.420) - 3px);
width:var(--Body-Font-Size);
height:.7px;
background:rgba({RGBcolor:text},0.420);
}
.flex, [flex]{
display:flex!important;
align-items:center;
}
:root {
/*--- GENERAL SETTINGS ---*/
--Page-FadeIn-Speed:0.5s;
--Main-Content-Width-Total:calc(var(--Post-Width-Total) + (var(--Center-Aisle-Gaps) * 2) + (var(--Sidebar-Width) * 2));
/*--- TOP BAR SETTINGS ---*/
--Top-Bar-BG:{color:top bar background};
--Top-Bar-Title-Center:{color:top center title};
--Top-Bar-Padding:18px;
--Top-Bar-Icon-Size:45px;
--Top-Bar-Icon-Padding:4px;
--Top-Bar-Icon-Right-Gap:12px;
--Top-Left-Title-Size:13px;
--Navlinks-Size:9px;
--Navlinks-Spacing:8px;
--Top-Center-Title-Size:26px;
--CustomLinks-Font-Size:9px;
--CustomLinks-Spacing:13px;
--Searchbar-Font-Size:8px;
--Magnifying-Glass-Size:14px;
/*--- HEADER SETTINGS ---*/
--Header-Height:60vh;
--Header-Bottom-Gap:50px; /* space between header and stuff under it */
/*--- SIDEBAR SETTINGS ---*/
--Sidebar-Width:{select:sidebar width};
--Sidebar-Top-Sticky-Gap:30px; /* when scrolled, this is the space between the top bar and the sidebars */
--Sidebar-Sections-Spacing:30px;
--Sidebar-Heading-Padding:13px; /* space between title and underline */
--Sidebar-Heading-Bottom-Gap:15px; /* space between underline and body text */
--Sidebar-Divider-Width:85%;
--Sidebar-Blogs-Image-Size:36px;
--Sidebar-Blogs-Image-Gap-Right:10px;
--Sidebar-Blogs-Row-Spacing:12px;
--Sidebar-Socials-Icon-Size:16px;
--Sidebar-Socials-Icon-Spacing:12px;
--Sidebar-Stats-LineHeight:calc(var(--Body-Font-Size) * 1.69);
--Sidebar-Stats-Column-Spacing:6px;
--Center-Aisle-Gaps:{select:center gaps};
/*--- POST SETTINGS ---*/
--Paragraph-Margins:1em;
--Heading-Margins:1em;
--Body-Font-Family:{select:font};
--Body-Font-Size:{select:font size};
--Body-Text-Color:{color:text};
--Line-Height:1.7em; /* line-height with suffix */
--Line-Height-INT:1.7; /* line-height without suffix */
--Heading-Font-Family:"caslon fs";
--Heading-Font-Size:calc(var(--Body-Font-Size) + 1.5px);
--SmallCaps-Font-Family:"Averia Serif Libre";
--SmallCaps-Font-Size:calc(var(--Body-Font-Size) - 2px);
--Post-Width:{select:post width};
--Post-Padding:{select:post padding};
--Post-Width-Total:calc(var(--Post-Width) + (var(--Post-Padding) * 2));
--Post-Spacing:calc({select:post spacing} * 2);
--Reblogger-Avatar-Size:22px;
--Reblogger-Avatar-Gap-Right:8px;
--Reblogger-Username-Color:{color:reblogger};
--Reblogger-Avatar-Bottom-Gap:12px;
--Reblogs-Spacing:15px;
--Reblogs-Border:{color:post borders inner};
--Captions-Gap:15px;
--NPF-Caption-Spacing:var(--Captions-Gap);
--Photoset-Spacing:{select:photoset spacing};
--NPF-Image-Spacing:var(--Photoset-Spacing);
--Grayscale-Settings:grayscale(100%) contrast(110%) brightness(104%);
--Grayscale-Transition-Speed:0.269s;
--AskerPortrait-Size:42px;
--AskerPortrait-Padding:6px;
--Audio-Post-Album-Size:64px;
--Audio-Post-Album-Right-Gap:13px;
--Audio-Post-Buttons-Size:11px;
--Audio-Post-Buttons-Color:{color:special text};
--Audio-Post-Buttons-Padding:11px;
--Audio-Post-Buttons-Background:{color:special background};
--Link:{color:link};
--Post-Borders-Inner:{color:post borders inner};
--Quote-Font-Family:var(--SmallCaps-Font-Family);
--Quote-Font-Size:calc(var(--Body-Font-Size) + 1px);
--Post-Dividers-Width:69%;
/*--- TAGS SETTINGS ---*/
--Tags-Fade-Speed-MS:269; /* fade speed without suffix */
--Tags-Fade-Speed-MS-SFX:269ms; /* fade speed with suffix */
--Tags-Spacing:4px;
/*--- PERMALINK SETTINGS ---*/
--Permalink-Text-Spacing:15px;
/*--- POST BUTTONS SETTINGS ---*/
--Post-Buttons-Size:var(--Body-Font-Size);
--Post-Buttons-Color:{color:post buttons};
--Like-Button-Liked:{color:like button liked};
--Post-Buttons-Spacing:4px;
/*--- POST NOTES SETTINGS ---*/
--Notes-Indicator-Size:14px;
--Notes-Indicator-Gap-Right:7px;
--Notes-Row-Spacing:10px;
/*--- MISC ---*/
--Side-Padding:{select:side padding};
--Pagination-Color:{color:text};
--TumblrControls-Color:{select:tumblr controls color};
--Scrollbar-Padding:13px;
}
/*---- TOP BAR ----*/
.topbar {
position:fixed;
top:0;left:0;
width:calc(100% - (var(--Top-Bar-Padding) * 2));
padding:var(--Top-Bar-Padding);
background:{color:top bar background};
z-index:12;
display:grid;
grid-template-columns:repeat(3, 1fr);
grid-gap:var(--Top-Bar-Padding);
--ccwhat:calc((var(--ClientWidth) - (var(--Top-Bar-Padding) * 4)) / 3);
}
.otae, .cheddar {
max-width:var(--ccwhat);
overflow:hidden;
}
.dango {
position:relative;
width:calc(var(--Top-Bar-Icon-Size) + (var(--Top-Bar-Icon-Padding) * 2));
height:calc(var(--Top-Bar-Icon-Size) + (var(--Top-Bar-Icon-Padding) * 2));
border-radius:100%;
border:1px solid {color:top bar icon border};
flex-shrink:0;
}
.ichi-avi {
position:absolute;
margin-top:var(--Top-Bar-Icon-Padding);
margin-left:var(--Top-Bar-Icon-Padding);
width:var(--Top-Bar-Icon-Size);
height:var(--Top-Bar-Icon-Size);
background-image:url('{image:top bar icon}');
background-position:center;
background-size:cover;
border-radius:100%;
}
.ichi-invis {
position:absolute;
margin-top:var(--Top-Bar-Icon-Padding);
margin-left:var(--Top-Bar-Icon-Padding);
width:var(--Top-Bar-Icon-Size);
height:var(--Top-Bar-Icon-Size);
border-radius:100%;
z-index:2;
opacity:0;
}
.dango + [butain]{
margin-left:var(--Top-Bar-Icon-Right-Gap);
}
[butain]{
line-height:1em;
}
[tl-title]{
font-family:canela;
font-size:var(--Top-Left-Title-Size);
text-transform:uppercase;
letter-spacing:1.5px;
word-spacing:.3px;
color:{color:top left title};
line-height:1em;
}
[tl-title] + .navlinks {
margin-top:8px;
}
.navlinks {
display:flex;
align-items:center;
font-family:var(--SmallCaps-Font-Family);
font-size:var(--Navlinks-Size);
text-transform:uppercase;
letter-spacing:1px;
color:{color:navlinks};
line-height:1em;
--NV-Dot-Size:3px;
}
.navlinks > * {
display:block;
}
.navlinks a {
position:relative;
color:{color:navlinks};
line-height:1em;
}
.navlinks a + a {
margin-left:calc(var(--NV-Dot-Size) + (var(--Navlinks-Spacing) * 2));
}
.navlinks a + a:before {
content:"";
position:absolute;
top:50%;transform:translateY(-50%);
left:0;margin-left:calc(0px - var(--Navlinks-Spacing) - var(--NV-Dot-Size));
width:var(--NV-Dot-Size);
height:var(--NV-Dot-Size);
border-radius:100%;
background:rgba({RGBcolor:navlinks},0.7);
}
[customize-page="true"] .kirin {
overflow:hidden;
}
.kirin {
margin-top:-1px;
display:table;
width:100%;
height:100%;
}
.jindosh {
display:table-cell;
vertical-align:middle;
}
[tit-center]{
font-family:abril fatface;
font-size:var(--Top-Center-Title-Size);
text-transform:uppercase;
letter-spacing:1px;
color:{color:top center title};
line-height:var(--Top-Center-Title-Size);
text-align:center;
line-height:1em;
}
[tit-center] + .customlinks {
margin-top:10px;
}
.customlinks {
display:flex;
align-items:center;
justify-content:center;
flex-wrap:nowrap;
margin:0 calc(var(--CustomLinks-Spacing) / -2);
font-family:var(--SmallCaps-Font-Family);
font-size:var(--CustomLinks-Font-Size);
text-transform:uppercase;
letter-spacing:1px;
color:{color:custom links};
line-height:1em;
}
.customlinks > * {
display:block;
}
.customlinks a {
margin:0 calc(var(--CustomLinks-Spacing) / 2);
color:{color:custom links};
flex-shrink:0;
}
.cheddar {
margin-top:3px;
display:flex;
align-items:center;
justify-content:flex-end;
}
.srchbar {
display:flex;
align-items:center;
justify-content:flex-end;
flex-wrap:nowrap;
}
.srchbar > * {
display:block;
}
.srchbar input {
outline:none;
border:none;
background:transparent!important;
border-bottom:1px solid transparent;
padding:7px 0;
transition:border-bottom .269s ease-in-out;
}
.srchbar input, .srchbar input::placeholder {
font-family:var(--SmallCaps-Font-Family);
font-size:var(--Searchbar-Font-Size);
text-transform:uppercase;
letter-spacing:1.5px;
color:{color:searchbar text};
text-align:right;
}
.srchbar input::placeholder {
opacity:0.7;
}
.srchbar input:focus {
border-bottom:1px solid {color:searchbar underline};
}
.srchbar input:focus::placeholder {
color:transparent;
}
.srchgo {
margin-left:5px;
margin-right:-5px;
padding:5px;
border-radius:0;
background:transparent;
border:none;
cursor:pointer;
}
.srchgo i {
display:block;
transform:scaleX(-1);
font-size:var(--Magnifying-Glass-Size);
color:{color:searchbar button};
}
/*------------------*/
.le-header, .mynoots {
visibility:hidden;
opacity:0;
}
.showpls {
visibility:visible;
opacity:1;
transition:opacity var(--Page-FadeIn-Speed) ease-in-out, visibility var(--Page-FadeIn-Speed) 0s ease-in-out;
}
/*---- HEADER ----*/
.le-header {
margin-top:var(--Top-Bar-Height);
width:100%;
min-width:calc(var(--Main-Content-Width-Total) + (2rem * 2));
height:var(--Header-Height);
background-color:{color:header background};
background-image:url('{image:header image}');
background-size:cover;
background-position:{select:header image position};
margin-bottom:var(--Header-Bottom-Gap);
{block:TagPage}
display:none;
{/block:TagPage}
}
.le-header:not([page-1]){
display:none;
}
/* force header image to show 100% on portrait devices */
@media(max-width:540px){
body {
position:absolute;
}
}
/*---- MAIN CONTENT CONTAINER ----*/
.mynoots {
margin:auto;
text-align:center;
}
.nymoots {
display:inline-block;
text-align:initial;
}
.ensoot {
display:flex;
flex-wrap:nowrap;
align-items:flex-start;
}
/*---- SIDEBARS ----*/
.left-sidebar, .right-sidebar {
position:sticky;
width:var(--Sidebar-Width);
}
.left-sidebar.short-stick,
.right-sidebar.short-stick {
top:calc(var(--Sidebar-Top-Sticky-Gap) + var(--Top-Bar-Height));
}
.left-sidebar.stick,
.right-sidebar.stick {
top:calc(100vh - var(--Target-Height) - var(--Sidebar-Sections-Spacing));
}
.left-sidebar > * + *,
.right-sidebar > * + * {
margin-top:var(--Sidebar-Sections-Spacing);
}
.box-title {
position:relative;
padding-bottom:var(--Sidebar-Heading-Padding);
font-family:canela;
font-size:calc(var(--Heading-Font-Size) - 1.5px);
text-transform:uppercase;
letter-spacing:1.5px;
color:{color:sidebar heading};
text-align:center;
line-height:1em;
}
.box-title:after {
content:"";
position:absolute;
bottom:0;
left:50%;transform:translateX(-50%);
width:var(--Sidebar-Divider-Width);
height:1px;
background:linear-gradient(to right, transparent, {color:sidebar dividers}, transparent);
}
.box-title + * {
margin-top:var(--Sidebar-Heading-Bottom-Gap);
}
[box-body]{
}
[box-body] a {
font-family:var(--SmallCaps-Font-Family);
font-size:calc(var(--SmallCaps-Font-Size) - .5px);
text-transform:uppercase;
letter-spacing:1px;
color:{color:sidebar hyperlinks};
}
[box-body] a:not(.blog-tit, .soc-item a){
padding-bottom:1px;
border-bottom:1px solid rgba({RGBcolor:sidebar hyperlinks},0.25);
}
.sb-banner {
width:100%;
height:auto;
}
.sb-banner[src*='cdn.glitch.com/bdf00c8f-434a-46d9-a514-ec8332ec176a/1x1.png']{
display:none;
}
/*---- LEFT SIDEBAR BOX 1 ----*/
.descbox {
text-align:{select:sidebar box 1 text align};
line-height:var(--Line-Height);
}
/*---- LEFT SIDEBAR BOX 2 ----*/
.blog-row {
display:flex;
align-items:center;
}
.blog-row + .blog-row {
margin-top:var(--Sidebar-Blogs-Row-Spacing);
}
.blog-row img {
width:var(--Sidebar-Blogs-Image-Size);
height:var(--Sidebar-Blogs-Image-Size);
border-radius:3px;
flex-shrink:0;
}
.blog-row .mt {
flex:1;
margin-left:var(--Sidebar-Blogs-Image-Gap-Right);
}
.blog-row .mt > * {
display:block;
}
.blog-row a.blog-tit {
font-family:var(--SmallCaps-Font-Family);
font-size:var(--SmallCaps-Font-Size);
text-transform:uppercase;
letter-spacing:1px;
line-height:1em;
color:{color:sidebar blog names};
}
.blog-row a.blog-tit [et]{
margin-right:.7px;
}
.blog-subtitle {
margin-top:2px;
line-height:var(--Line-Height);
margin-bottom:calc(((var(--Body-Font-Size) * var(--Line-Height-INT)) - var(--Body-Font-Size)) / -2);
}
.blog-subtitle.has-et {
margin-left:2px;
}
/*---- LEFT SIDEBAR BOX 3 ----*/
.socials-box {
text-align:center;
}
.socials-box .soc-item {
display:inline-block;
}
.socials-box a {
line-height:var(--Sidebar-Socials-Icon-Size);
}
.socials-box .bootstrap-icon {
font-size:var(--Sidebar-Socials-Icon-Size);
color:{color:sidebar social icons};
padding:calc(var(--Sidebar-Socials-Icon-Spacing) / 2);
line-height:1em;
}
/*---- RIGHT SIDEBAR BOXES ----*/
.statsbox {
}
[two-cols] .stat-row {
display:grid;
grid-template-columns:repeat(2, 1fr);
grid-gap:var(--Sidebar-Stats-Column-Spacing);
}
[two-cols] .stat-row .stat-grp:nth-child(2){
justify-content:flex-end;
}
[one-col] .stat-grp {
justify-content:space-between;
}
[one-col] .stat-detail {
text-align:right;
}
.stat-grp {
display:flex;
line-height:var(--Sidebar-Stats-LineHeight);
}
.stat-label {
font-family:var(--SmallCaps-Font-Family);
font-size:var(--SmallCaps-Font-Size);
text-transform:uppercase;
letter-spacing:1px;
color:{color:sidebar stat label};
}
.stat-label + .stat-detail {
margin-left:5px;
}
/*---- POST CONTAINER ----*/
.postscont {
margin:0 var(--Center-Aisle-Gaps);
}
.le-header:not([page-1]) + .mynoots .postscont,
[tag-page] .postscont {
margin-top:calc(var(--Top-Bar-Height) + var(--Sidebar-Top-Sticky-Gap));
}
.posts {
position:relative;
width:var(--Post-Width-Total);
}
/*---- POST BORDERS ----*/
.posts[seamless="yes"] .postinner,
.posts[seamless="yes"] .permadiv,
.posts[seamless="yes"] .notescont {
border:none;
}
.posts[seamless="yes"] .permadiv {
margin-top:25px;
padding:0;
}
/*----------------------*/
.posts:first-child, .posts + * {
margin-bottom:var(--Post-Spacing);
}
.posts:only-child {
{block:PermalinkPage}
margin-bottom:calc(var(--Post-Spacing) / 2);
{/block:PermalinkPage}
}
.posts + *:not(.posts) {
margin-top:calc(var(--Post-Spacing) / -2);
}
[black-and-white="rb-ico"] .reblog-head img {
transition:filter var(--Grayscale-Transition-Speed) ease-in-out;
filter:var(--Grayscale-Settings);
}
[black-and-white="everything"] img,
[black-and-white="everything"] iframe,
[black-and-white="everything"] video {
transition:filter var(--Grayscale-Transition-Speed) ease-in-out;
filter:var(--Grayscale-Settings);
}
[black-and-white="everything"] .posts:hover img,
[black-and-white="everything"] .posts:hover iframe,
[black-and-white="everything"] .posts:hover video {
filter:none;
}
.posts + .posts:before {
content:"";
position:absolute;
top:0;margin-top:calc(0px - (var(--Post-Spacing) / 2));
left:0;margin-left:calc((100% - var(--Post-Dividers-Width)) / 2);
width:var(--Post-Dividers-Width);
height:1px;
background:linear-gradient(to right, transparent, {color:post dividers}, transparent);
}
/*-----------------------*/
.postinner {
padding:var(--Post-Padding);
background:{color:post};
border:1px solid {color:post borders outer};
line-height:var(--Line-Height);
overflow:hidden;
}
.postinner a:not(.reblog-url a, .tumblr_blog, .linkpost-title, .single-photo, .post_media_photo_anchor, .inari, .tagsdiv a, a.read_more, .tmblr-attribution a){
padding-bottom:.5px;
border-bottom:1px solid rgba({RGBcolor:link},0.420);
}
/*---- REBLOG HEAD ----*/
.reblog-wrap {
margin:0 calc(0px - var(--Post-Padding));
padding:0 var(--Post-Padding);
}
.reblog-wrap + .reblog-wrap {
margin-top:var(--Reblogs-Spacing);
padding-top:var(--Reblogs-Spacing);
border-top:1px solid var(--Reblogs-Border);
}
.reblog-head {
display:flex;
align-items:center;
}
.reblog-head img {
width:var(--Reblogger-Avatar-Size);
height:var(--Reblogger-Avatar-Size);
border-radius:100%;
}
.reblog-head img + .reblog-url {
margin-left:var(--Reblogger-Avatar-Gap-Right);
}
.reblog-url, .reblog-url a, p > a.tumblr_blog[target='_blank']{
font-family:var(--SmallCaps-Font-Family);
font-size:var(--SmallCaps-Font-Size);
text-transform:uppercase;
letter-spacing:.5px;
color:var(--Reblogger-Username-Color);
line-height:1em;
}
.reblog-url .deac {
margin-left:3px;
color:var(--Body-Text-Color);
}
.reblog-head + .reblog-comment {
margin-top:calc(0px - var(--Paragraph-Margins) + var(--Reblogger-Avatar-Bottom-Gap));
}
/*---- NPF... STUFF ----*/
figure[data-orig-src] + figure[data-orig-src]{
margin-top:var(--Photoset-Spacing);
}
.tmblr-full video {
cursor:pointer;
}
video::-webkit-media-controls-panel {
position:absolute;
bottom:0;
background:transparent!important;
width:100%;
box-sizing:border-box;
opacity:1!important;
}
video::-webkit-media-controls-volume-slider, video::-webkit-media-controls-timeline {
display:none!important;
}
* + .npf-link-block {
margin-top:10px;
}
.npf-link-block {
margin-top:0px;
margin-bottom:0;
border-color:{color:special border}!important;
border-radius:0!important;
}
.npf-link-block + * {
margin-bottom:var(--Paragraph-Margins);
}
.npf-link-block a {
padding:0!important;
border:none!important;
}
.npf-link-block .title {
font-family:var(--SmallCaps-Font-Family)!important;
font-size:calc(var(--SmallCaps-Font-Size) + 4px)!important;
text-transform:uppercase;
letter-spacing:.5px;
color:{color:link}!important;
line-height:1.7em!important;
text-shadow:1px 1px 1px rgba(0,0,0,0.1);
}
.npf-link-block .bottom {
background:{color:special background}!important;
}
.npf-link-block .description {
font-family:var(--SmallCaps-Font-Family)!important;
font-weight:bold;
font-size:calc(var(--SmallCaps-Font-Size) + 2px)!important;
text-transform:uppercase;
letter-spacing:.5px;
color:{color:link}!important;
line-height:1.7em!important;
}
.npf-link-block .site-name {
text-transform:initial!important;
font-family:var(--Body-Font-Family)!important;
font-weight:normal!important;
font-size:var(--Body-Font-Size)!important;
color:{color:special text}!important;
}
.npf-link-block .description + .site-name {
margin-top:0;
}
.npf-link-block.no-poster .title {
padding:0.8em!important;
text-shadow:none!important;
}
.npf-link-block.no-poster .title + .bottom {
border-top:1px solid {color:special border};
}
/* gif src attribution */
.tmblr-attribution {
font-family:var(--SmallCaps-Font-Family);
font-size:var(--SmallCaps-Font-Size);
text-transform:uppercase;
letter-spacing:1px;
}
/*---- TEXT POSTS (TITLE) ----*/
.post-title, .linkpost-title {
margin-top:2px;
margin-bottom:0;
padding:0.8em;
background:{color:special background};
border:1px solid {color:special border};
font-size:var(--Heading-Font-Size);
font-weight:bold;
color:{color:special text};
text-align:center;
}
.post-title + *, .linkpost-title + * {
margin-top:var(--Heading-Margins);
}
/*---- LINK POSTS (TITLE) ----*/
.linkpost-title {
display:flex;
align-items:center;
justify-content:space-between;
color:{color:special text};
text-align:left;
}
.linkpost-title span {
display:block;
max-width:calc(100% - (var(--Heading-Font-Size) * 1.1) - 10px - 2px);
}
span + .linksym {
margin-left:10px;
margin-right:2px;
}
.linksym {
width:calc(var(--Heading-Font-Size) * 1.1);
height:calc(var(--Heading-Font-Size) * 1.1);
-webkit-mask-size:contain;
-webkit-mask-repeat:no-repeat;
-webkit-mask-position:center;
-webkit-mask-image:var(--ext);
background:{color:special text};
}
.linkpost-title + .link-excerpt {
margin-top:-1px;
}
.link-excerpt {
padding:0.8em calc(0.8em + 2px);
border:1px solid {color:post borders inner};
}
.link-excerpt + * {
margin-top:var(--Heading-Margins);
}
.le-host {
font-family:var(--SmallCaps-Font-Family);
font-size:var(--SmallCaps-Font-Size);
text-transform:uppercase;
letter-spacing:.7px;
}
/*---- PHOTO POSTS ----*/
a.single-photo {
cursor:pointer;
}
img.photopic {
width:100%;
}
[photoset-layout] {
grid-gap:var(--Photoset-Spacing);
}
[photoset-layout] div {
cursor:pointer;
backface-visibility:hidden;
}
.caption {
margin-top:var(--Captions-Gap);
}
/*----- LIGHTBOX BS -----*/
.tmblr-lightbox, #tumblr_lightbox {
background-color:rgba({RGBcolor:post},0.69)!important;
}
.tmblr-lightbox .vignette {
background-image:none!important;
}
#vignette {display:none!important}
.lightbox-image, #tumblr_lightbox_left_image, #tumblr_lightbox_center_image, #tumblr_lightbox_right_image {
margin-top:calc(0px - var(--Post-Padding));
}
.tmblr-lightbox img, #tumblr_lightbox img {
max-width:initial;
box-shadow:none!important;
border-radius:0px!important;
padding:var(--Post-Padding);
background:{color:post}!important;
}
/*----- QUOTE POSTS -----*/
.quote-words, .npf_quote {
padding:0 var(--Post-Padding);
font-family:var(--Quote-Font-Family)!important;
font-size:var(--Quote-Font-Size)!important;
text-transform:uppercase;
letter-spacing:.3px;
text-align:center;
line-height:169%;
}
.quote-words + .quote-source,
.npf_quote + p[style*="margin-bottom: 0px;"]{
margin-top:var(--Paragraph-Margins);
text-align:center;
}
/*----- VIDEO POSTS -----*/
.tmblr-video {
max-width:initial;
}
.tumblr_video_container, .tumblr_video_iframe {
width:100%!important;
}
/*---- CHAT POSTS ----*/
.chatwrap {
border:1px solid var(--Post-Borders-Inner);
}
.chat_row {
position:relative;
display:table-row;
overflow:hidden;
}
.chat_row:after {
content:"";
position:absolute;
bottom:0;left:0;
transform:translateY(-.5px);
width:100%;
height:1px;
background:var(--Post-Borders-Inner);
}
.chatwrap .chat_row:last-child:after {
display:none;
}
.chat_row code:only-child {
display:block;
padding:0.8em;
border:none;
background:transparent;
}
.chat_label {
display:table-cell;
padding:1em;
white-space:nowrap;
padding-right:1em;
font-family:var(--SmallCaps-Font-Family);
font-size:var(--SmallCaps-Font-Size);
text-transform:uppercase;
letter-spacing:1px;
}
.chat_content {
display:table-cell;
padding:1em;
width:100%;
}
.chat_label + .chat_content {
border-left:1px solid var(--Post-Borders-Inner);
}
/*---- AUDIO POSTS ----*/
.audio-post .npf_inst img {
width:100%;
}
.aud-emb {display:none}
.audiowrap {
display:flex;
align-items:center;
}
.albumwrap {
position:relative;
width:var(--Audio-Post-Album-Size);
height:var(--Audio-Post-Album-Size);
display:flex;
align-items:center;
justify-content:center;
}
.albumwrap[has-cover] .audplac {display:none}
.butts {
width:calc(var(--Audio-Post-Buttons-Size) + (var(--Audio-Post-Buttons-Padding) * 2));
height:calc(var(--Audio-Post-Buttons-Size) + (var(--Audio-Post-Buttons-Padding) * 2));
background:var(--Audio-Post-Buttons-Background);
border-radius:100%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
z-index:2;
}
.overplay, .overpause {
width:var(--Audio-Post-Buttons-Size);
height:var(--Audio-Post-Buttons-Size);
-webkit-mask-size:contain;
-webkit-mask-repeat:no-repeat;
-webkit-mask-position:center;
background:var(--Audio-Post-Buttons-Color);
}
.overplay {
margin-left:2px;
-webkit-mask-image:var(--audioplay);
}
.overpause {
display:none;
-webkit-mask-image:var(--audiopause);
}
.ov-y {display:block}
.ov-z {display:none}
.audplac {
position:absolute;
top:0;left:0;
width:var(--Audio-Post-Album-Size);
height:var(--Audio-Post-Album-Size);
background:var(--Audio-Post-Buttons-Background);
}
.albumwrap img {
position:absolute;
top:0;left:0;
width:100%;
height:100%;
}
.audiotxt {
flex:1;
height:var(--Audio-Post-Album-Size);
padding:var(--Audio-Post-Album-Right-Gap);
background:{color:special background};
display:flex;
align-items:center;
box-sizing:border-box;
display:flex;
align-items:center;
justify-content:space-between;
}
.audiotxt, .npf-audio-details {
font-size:calc(var(--Body-Font-Size) - .3px);
color:{color:special text};
}
.odin > div + div, .npf-audio-details > * + * {
margin-top:-1.5px;
}
.aud-song-name, .npf-audio-title {
font-family:var(--SmallCaps-Font-Family);
font-size:calc(var(--SmallCaps-Font-Size) + .3px);
text-transform:uppercase;
letter-spacing:1px;
}
.aud-song-name[has-name] .untit {
display:none;
}
.aud-artist[has-artist] .unart {
display:none;
}
.inari {
display:block;
padding:6px;
margin-right:-6px;
cursor:pointer;
}
.int-all {
display:block;
width:calc(var(--Audio-Post-Buttons-Size) + 6px);
height:calc(var(--Audio-Post-Buttons-Size) + 6px);
-webkit-mask-size:contain;
-webkit-mask-repeat:no-repeat;
-webkit-mask-position:center;
-webkit-mask-image:var(--install);
background:{color:special text};
}
/*---- SPOTIFY ----*/
iframe[src*='open.spotify.com'][src*='track'], figure[data-npf*='open.spotify.com'][data-npf*='track']{
height:80px!important;
}
.spotify_audio_player {
width:100%;
}
/*---- SOUNDCLOUD ----*/
.tmblr-video iframe[src*='soundcloud.com']{
}
.audio-soundcloud {
max-height:113px;
border-radius:4px;
overflow:hidden;
}
.soundcloud_audio_player {
margin:-1px;
margin-bottom:0;
width:calc(100% + 2px);
max-width:initial;
}
/*---- ASK/ANSWER POSTS ----*/
.une_question {
}
.que-person {
text-align:right;
padding-top:var(--hargaosize);
line-height:1em;
--hargaosize:calc(var(--Body-Font-Size) + 2px);
}
.que-person .reblog-url {
position:relative;
margin-right:calc((var(--Post-Width) * 0.15) + var(--hargaosize));
/* 'asked' color */
color:{color:text};
}
/* arrow fill */
.que-person .reblog-url:before {
content:"";
position:absolute;
top:0;margin-top:calc(0px - var(--hargaosize) - 2px);
right:0;
margin-right:calc(0px - (var(--hargaosize) * 2) + 1px);
width:0;height:0;
border-width:calc(var(--hargaosize) - 2px) calc(var(--hargaosize) - 2px) 0 0;
border-color:{color:special background} transparent transparent transparent;
border-style:solid;
z-index:3;
}
/* arrow outline */
.que-person .reblog-url:after {
content:"";
position:absolute;
top:0;margin-top:calc(0px - var(--hargaosize) - 1px);
margin-left:var(--hargaosize);
width:0;height:0;
border-width:var(--hargaosize) var(--hargaosize) 0 0;
border-color:{color:special border} transparent transparent transparent;
border-style:solid;
}
.que-person .reblog-url b {
/* asker username color */
font-weight:normal;
color:var(--Reblogger-Username-Color);
}
.question_text {
position:relative;
padding:calc(var(--Captions-Gap) - 2px) var(--Captions-Gap);
background:{color:special background};
border-radius:3px;
border:1px solid {color:special border};
color:{color:special text};
text-align:right;
}
/* thin invisible strip to cover the 1px bug */
.question_text:after {
content:"";
position:absolute;
bottom:0;margin-bottom:-1px;
right:0;margin-right:3px;
width:calc(100% - 6px);
height:3px;
border-bottom:1px solid {color:special border};
background:{color:special background};
z-index:3;
}
.question_text > p:first-child {
margin-top:0px;
}
.question_text > p:only-child {
margin-bottom:0;
}
.une_question + .une_reponse {
margin-top:var(--Reblogs-Spacing);
}
.une_reponse .reblog-url {
/* 'answered' text color */
color:{color:text};
}
/*---- TAGS SECTION ----*/
.tagsdiv {
margin-top:var(--Captions-Gap);
}
.tagsdiv[clicktags="yes"] {
{block:IndexPage}
display:none;
opacity:0;
transition:opacity var(--Tags-Fade-Speed-MS-SFX) ease-in-out;
{/block:IndexPage}
}
.tagsfade {
opacity:1!important;
}
.tagsin {
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
margin:calc(0px - var(--Tags-Spacing));
/*margin-top:calc(var(--Captions-Gap) - var(--Tags-Spacing));*/
margin-bottom:calc((((var(--SmallCaps-Font-Size) - 1px) * var(--Line-Height-INT)) / 2) * -1);
}
.tagsin a {
position:relative;
display:block;
margin:var(--Tags-Spacing);
font-family:var(--SmallCaps-Font-Family);
font-size:calc(var(--SmallCaps-Font-Size) - 1px);
text-transform:uppercase;
letter-spacing:.7px;
color:{color:tags};
}
.tagsin a:before {
content:"#";
font-family:work sans;
margin-right:.5px;
}
/*---- PERMALINK BAR ----*/
.permadiv {
margin-top:10px;
display:flex;
align-items:center;
justify-content:space-between;
padding:calc(var(--Post-Padding) - 2px) var(--Post-Padding);
background:{color:permalink background};
border:1px solid {color:permalink border};
font-family:var(--SmallCaps-Font-Family);
font-size:calc(var(--SmallCaps-Font-Size) - .5px);
text-transform:uppercase;
letter-spacing:.5px;
}
.permadiv, .permadiv a {
color:{color:permalink};
}
.permaleft {
text-transform:uppercase;
letter-spacing:.7px;
word-spacing:1px;
}
.permaleft a {
display:flex;
align-items:center;
margin:calc(0px - var(--Post-Padding)) 0;
padding:var(--Post-Padding) 0;
}
.permaleft a + a {
margin-left:var(--Permalink-Text-Spacing);
}
.permaleft .iconsax {
--Iconsax-Size:calc(var(--Body-Font-Size) + 2px);
--Iconsax-Color:{color:permalink};
margin-right:7px;
}
.permaright {
display:flex;
align-items:center;
justify-content:center;
letter-spacing:1px;
}
.permaright a {
display:block;
position:relative;
{block:IndexPage}
width:var(--Post-Buttons-Size);
height:var(--Post-Buttons-Size);
{/block:IndexPage}
backface-visibility:hidden;
}
.permaright .iconsax {
display:block;
--Iconsax-Size:var(--Post-Buttons-Size);
--Iconsax-Color:var(--Post-Buttons-Color);
backface-visibility:hidden;
}
.permaright .iconsax[icon-name='repeat']{
transform-origin:center;
transform:scaleX(1.1);
}
.permaright .cp {
padding-left:1px;
font-size:var(--Post-Buttons-Size);
color:var(--Post-Buttons-Color);
}
.permaright span {display:block}
.permaright a + a {
margin-left:var(--Post-Buttons-Spacing);
}
.permaright[clicktags="no"] .clicktags {
display:none;
}
.clicktags {
cursor:help;
}
.like_button {
position:absolute;
top:0;left:0;
width:100%;
height:100%;
z-index:2;
}
.like_button iframe {
width:100%;
height:100%;
vertical-align:initial;
opacity:0;
}
.like_button.liked + .cp-heart-o {
color:var(--Like-Button-Liked);
}
.permaright a[dash]{
font-size:calc(var(--SmallCaps-Font-Size) + 1px);
}
/*---- POST NOTES ----*/
.notescont {
margin-top:calc(var(--Post-Spacing) / 2);
padding:var(--Post-Padding);
background:{color:post};
border:1px solid {color:post borders outer};
}
.notescont h1 {
margin-top:5px;
margin-bottom:calc(var(--Heading-Margins) + 10px);
letter-spacing:1px;
text-align:center;
}
.notescont ol.notes {
padding:0;
margin:0;
}
.notescont li {
list-style-type:none;
padding:0!important;
}
.notescont li + li {
margin-top:var(--Notes-Row-Spacing);
}
.notescont li:before {
font-family:phosphor;
font-size:var(--Notes-Indicator-Size);
color:{color:text};
vertical-align:middle;
}
.notescont li.like:before {
content:"\f1ca";
}
.notescont li.reblog:before {
content:"\f2c3";
}
.notescont li.reply:before,
.notescont li.with_commentary:before {
content:"\f0db"!important;
}
.notescont .avatar_frame {
display:none;
}
.notescont .avatar_frame + .action {
margin-left:var(--Notes-Indicator-Gap-Right);
}
.notescont .action a {
font-family:var(--SmallCaps-Font-Family);
font-size:calc(var(--SmallCaps-Font-Size) - .5px);
text-transform:uppercase;
letter-spacing:.7px;
color:var(--Reblogger-Username-Color);
}
.notescont blockquote {
margin-left:calc(var(--Notes-Indicator-Size) / 2);
padding-left:calc((var(--Notes-Indicator-Size) / 2) + var(--Notes-Indicator-Gap-Right));
}
.more_notes_link_container {
margin-top:1em!important;
margin-bottom:calc(var(--Paragraph-Margins) / 2);
}
.more_notes_link, .notes_loading {
font-family:var(--SmallCaps-Font-Family);
font-size:var(--SmallCaps-Font-Size);
text-transform:uppercase;
letter-spacing:.5px;
color:{color:link};
}
/*---- PAGINATION ----*/
.botpagi {
display:flex;
align-items:center;
justify-content:space-between;
width:var(--Post-Width-Total);
margin-bottom:calc(var(--Post-Spacing) / 2);
font-family:var(--SmallCaps-Font-Family);
font-size:calc(var(--SmallCaps-Font-Size) - 1px);
text-transform:uppercase;
letter-spacing:.7px;
line-height:1em;
}
.botpagi a {
padding:0.69em;
margin:-0.69em;
color:var(--Pagination-Color)!important;
}
.botpagi span {
padding:0 4px;
}
.prev-svg {
margin-top:-.5px;
width:calc(var(--Body-Font-Size) + 3px);
height:calc(var(--Body-Font-Size) + 3px);
-webkit-mask-image:var(--BackSVG);
-webkit-mask-repeat:no-repeat;
-webkit-mask-size:contain;
background:var(--Pagination-Color)
}
.next-svg {
margin-top:-.5px;
width:calc(var(--Body-Font-Size) + 3px);
height:calc(var(--Body-Font-Size) + 3px);
-webkit-mask-image:var(--NextSVG);
-webkit-mask-repeat:no-repeat;
-webkit-mask-size:contain;
background:var(--Pagination-Color)
}
.pn {
margin-left:auto!important;
}
/*--- ignore this ---*/
[customize-page='true'] .msby {
display:block;
}
.msby {
display:none;
position:fixed;
bottom:0;left:0;
width:100%;
padding:15px 17px;
background:{color:background};
border-top:1px solid rgba({RGBcolor:sidebar dividers},0.420);
box-sizing:border-box;
color:{color:text};
text-align:center;
z-index:69;
}
.msby a {
font-family:var(--SmallCaps-Font-Family);
font-size:calc(var(--SmallCaps-Font-Size) + 1px);
text-transform:uppercase;
letter-spacing:1.3px;
color:#de706f;
}
/*-------------------*/
{CustomCSS}
</style>
</head>
<!-------------------->
<body>
<!---- TOP BAR ---->
<div class="topbar">
<div flex class="otae">
<div class="dango">
<div class="ichi-avi"></div>
<img class="ichi-invis" src="{image:top bar icon}">
</div>
<div butain>
{block:iftoplefttitle}
<div tl-title>{text:top left title}</div>
{/block:iftoplefttitle}
{block:ifnottoplefttitle}
<div tl-title>{Title}</div>
{/block:ifnottoplefttitle}
<div class="navlinks">
<a href="//{Name}.tumblr.com">home</a>
<a href="//{Name}.tumblr.com/ask">askbox</a>
<a href="//{Name}.tumblr.com/archive">archive</a>
<!--please do not remove the credit, thank you!!-->
<a href="//glenthemes.tumblr.com" title="&#34;bloodlust&#34; by glenthemes">theme</a>
</div><!--navlinks-->
</div><!--butain (icon's right text)-->
</div><!--flex (left)-->
<div class="kirin">
<div class="jindosh">
{block:iftopcentertitle}
<div tit-center>{text:top center title}</div>
{/block:iftopcentertitle}
<div class="customlinks">
{block:ifcustomlink1name}
<a href="{text:customlink 1 url}">{text:customlink 1 name}</a>
{/block:ifcustomlink1name}
{block:ifcustomlink2name}
<a href="{text:customlink 2 url}">{text:customlink 2 name}</a>
{/block:ifcustomlink2name}
{block:ifcustomlink3name}
<a href="{text:customlink 3 url}">{text:customlink 3 name}</a>
{/block:ifcustomlink3name}
{block:ifcustomlink4name}
<a href="{text:customlink 4 url}">{text:customlink 4 name}</a>
{/block:ifcustomlink4name}
{block:ifcustomlink5name}
<a href="{text:customlink 5 url}">{text:customlink 5 name}</a>
{/block:ifcustomlink5name}
{block:ifcustomlink6name}
<a href="{text:customlink 6 url}">{text:customlink 6 name}</a>
{/block:ifcustomlink6name}
</div><!--customlinks-->
</div><!--jindosh-->
</div><!--kirin-->
<!--- SEARCHBAR --->
<div class="cheddar">
<form class="srchbar" action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}" placeholder="search..." autocomplete="off">
<button class="srchgo" type="submit">
<i class="ph-magnifying-glass"></i>
</button>
</form>
</div><!--end searchbar-->
</div><!--topbar-->
<!---- HEADER ---->
<div class="le-header" page-{CurrentPage}></div>
<!---- MAIN CONTAINER ---->
<div class="mynoots">
<div class="nymoots">
<div class="ensoot">
<!---- LEFT SIDEBAR ---->
<div class="left-sidebar">
{block:ifleftsidebarbox1title}
<div class="box-title">{text:left sidebar box 1 title}</div>
{/block:ifleftsidebarbox1title}
{block:ifleftsidebarbox1}
<div box-body class="descbox">{text:left sidebar box 1}</div>
{/block:ifleftsidebarbox1}
{block:ifnotleftsidebarbox1}
{block:Description}
<div class="descbox">{Description}</div>
{/block:Description}
{/block:ifnotleftsidebarbox1}
<!--------------------------->
{block:ifleftsidebarbox2title}
<div class="box-title">{text:left sidebar box 2 title}</div>
{/block:ifleftsidebarbox2title}
{block:ifleftsidebarbox2}
<div box-body class="blogs-box" input="{text:left sidebar box 2}">{text:left sidebar box 2}</div>
{/block:ifleftsidebarbox2}
<!--------------------------->
{block:ifleftsidebarbox3title}
<div class="box-title">{text:left sidebar box 3 title}</div>
{/block:ifleftsidebarbox3title}
{block:ifleftsidebarbox3}
<div box-body class="socials-box" input="{text:left sidebar box 3}">{text:left sidebar box 3}</div>
{/block:ifleftsidebarbox3}
</div><!--left-sidebar-->
<!---- POSTS ---->
<div class="postscont" black-and-white="{select:grayscale images}">
{block:Posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
<div class="posts {PostType}-post" id="{PostID}" post-type="{PostType}" seamless="{select:borderless posts}">
<div class="postinner">
<!------ POST TITLE ------>
{block:Title}
<h1 class="post-title">{Title}</h1>
{/block:Title}
<!------ TEXT POSTS ------>
{block:Text}
{block:NotReblog}{Body}{/block:NotReblog}
{block:RebloggedFrom}
{block:Reblogs}
<div class="reblog-wrap">
<div class="reblog-head source-head">
<img src="{PortraitURL-64}">
<span class="reblog-url">
<a href="{Permalink}">{Username}</a>
</span>
</div>
<div class="reblog-comment">{Body}</div>
</div>
{/block:Reblogs}
{/block:RebloggedFrom}
{/block:Text}
<!------ SINGLE PHOTO ------>
{block:Photo}
<a class="single-photo" 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}
<!------ PHOTOSETS ------>
{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}
<!------ QUOTE POSTS ------>
{block:Quote}
<div class="quote-words">{Quote}</div>
{block:Source}
<div class="quote-source">
<span mdash>&mdash;</span>
{Source}
</div>{/block:Source}
{/block:Quote}
<!------ LINK POSTS ------>
{block:Link}
<a class="linkpost-title" href="{URL}" {Target}>
<span>{Name}</span>
<div class="linksym"></div>
</a>
{block:Excerpt}
<div class="link-excerpt">
{Excerpt}
{block:Host}— <a class="le-host" href="{URL}" {Target}>{Host}</a>{/block:Host}
</div>
{/block:Excerpt}
{block:Description}
<div class="link-description">
{block:NotReblog}{Description}{/block:NotReblog}
{block:RebloggedFrom}
{block:Reblogs}
<div class="reblog-wrap">
<div class="reblog-head">
<img src="{PortraitURL-64}">
<span class="reblog-url">
<a href="{Permalink}">{Username}</a>
</span>
</div>
<div class="reblog-comment">{Body}</div>
</div>
{/block:Reblogs}
{/block:RebloggedFrom}
</div>
{/block:Description}
{/block:Link}
<!------ CHAT POSTS ------>
{block:Chat}
{block:Lines}
<div class="chat_row">
{block:Label}
<div class="chat_label">{Label}</div>
{/block:Label}
<div class="chat_content">
{Line}
</div>
</div>
{/block:Lines}
{/block:Chat}
<!------ AUDIO POSTS ------>
{block:Audio}
<div class="audiowrap">
{block:AudioPlayer}
<div class="aud-emb">
{AudioPlayer}
</div>
{/block:AudioPlayer}
<div class="albumwrap" {block:AlbumArt}has-cover{/block:AlbumArt}>
{block:AlbumArt}
<img src="{AlbumArtURL}">
{/block:AlbumArt}
<div class="audplac"></div>
<div class="butts">
<div class="overplay"></div>
<div class="overpause"></div>
</div>
</div>
<div class="audiotxt">
<div class="odin">
<div class="aud-song-name" {block:TrackName}has-name{/block:TrackName}>
<div class="untit">Untitled track</div>
{block:TrackName}
<div class="hastit">{TrackName}</div>
{/block:TrackName}
</div>
{block:Album}
<div class="aud-album-name">{Album}</div>
{/block:Album}
<div class="aud-artist" {block:Artist}has-artist{/block:Artist}>
<div class="unart">Unknown artist</div>
{block:Artist}
<div class="hasart">{Artist}</div>
{/block:Artist}
</div>
</div><!--odin-->
<a class="inari" title="download" target="_blank">
<span class="int-all"></span>
</a>
</div><!--audiotxt-->
</div><!--audiowrap-->
{/block:Audio}
<!------ VIDEO POSTS ------>
{block:Video}
<div class="tmblr-video">{Video-500}</div>
{/block:Video}
<!------ ANSWER POSTS ------>
{block:Answer}
<!-- who asked? -->
<div class="une_question">
<div class="question_text">{Question}</div>
<div class="que-person">
<span class="reblog-url"><b>{Asker}</b> asked:</span>
</div>
</div>
<!--------------------------------------->
<!-- who answered? -->
{block:Answerer}
<div class="reblog-wrap une_reponse">
<div class="answerer reblog-head">
<img src="{AnswererPortraitURL-64}">
<span class="reblog-url">{Answerer} answered:</span>
</div>
<p class="answer_text">{Answer}</p>
</div>
<!-- additional reblogs to the ask post -->
{block:Reblogs}
<div class="reblog-wrap reply_container">
<div class="replier reblog-head">
<img src="{PortraitURL-64}">
<span class="reblog-url">
<a href="{Permalink}">{Username}</a>
</span>
</div>
<div class="reply">{Body}</div>
</div>
{/block:Reblogs}
{/block:Answerer}
<!--------------------------------------->
<!-- original answer post -->
{block:NotReblog}
<div class="reblog-wrap une-reponse">
<div class="answerer reblog-head">
<img src="{PortraitURL-64}">
<span class="reblog-url">
<a href="{Permalink}">{Name}</a>
</span>
</div>
<div class="answer_text">{Answer}</div>
</div><!--answer-container-->
{/block:NotReblog}
{/block:Answer}
<!------ END ANSWER ------>
<!------ 'CAPTION'? ------>
{block:Caption}
<div class="caption">
{block:NotReblog}{Caption}{/block:NotReblog}
{block:RebloggedFrom}
{block:Reblogs}
<div class="reblog-wrap">
<div class="reblog-head">
<img src="{PortraitURL-64}">
<span class="reblog-url">
<a href="{Permalink}">{Username}</a>
</span>
</div><!--reblog-head-->
<div class="reblog-comment">{Body}</div>
</div><!--comment-container-->
{/block:Reblogs}
{/block:RebloggedFrom}
</div><!--caption-->
{/block:Caption}
<!------ TAGS ------>
{block:HasTags}
<div class="tagsdiv" clicktags="{select:click tags}">
<div class="tagsin">
{block:Tags}
<a href="{TagURL}">{Tag}</a>
{/block:Tags}
</div>
</div>
{/block:HasTags}
</div><!--postinner-->
<!------ PERMALINK ------>
{block:Date}
<div class="permadiv">
<div class="permaleft" flex>
<i class="iconsax" icon-name="stickynote"></i>
{block:RebloggedFrom}
<a href="{ReblogRootURL}">Source:&ensp;<span src-link>{ReblogRootName}</span></a>
{/block:RebloggedFrom}
{block:NotReblog}
<a{block:IndexPage} href="{Permalink}"{/block:IndexPage}>Original Post</a>
{/block:NotReblog}
<a{block:IndexPage} href="{Permalink}"{/block:IndexPage}>{NoteCountWithLabel}</a>
<a{block:IndexPage} href="{Permalink}"{/block:IndexPage}>{TimeAgo}</a>
{block:IndexPage}
{block:PinnedPostLabel}<a>Pinned Post</a>{/block:PinnedPostLabel}
{/block:IndexPage}
</div>
<!------------------------------>
{block:IndexPage}
<div class="permaright" clicktags="{select:click tags}">
{block:HasTags}
<a class="clicktags">
<i class="iconsax" icon-name="hashtag"></i>
</a>
{/block:HasTags}
<a href="{ReblogURL}" title="reblog this post">
<i class="iconsax" icon-name="repeat"></i>
</a>
<a title="like this post">
{LikeButton}
<i class="cp cp-heart-o"></i>
</a>
</div>
{/block:IndexPage}
<!------------------------------>
{block:PermalinkPage}
<div class="permaright">
{block:NotReblog}
original post
{/block:NotReblog}
{block:RebloggedFrom}
<a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>
<a dash>/</a>
<a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>
{/block:RebloggedFrom}
</div>
{/block:PermalinkPage}
</div><!--permadiv-->
{/block:Date}
{block:PostNotes}
<div class="notescont">
<h1>{NoteCountWithLabel}</h1>
{PostNotes}
</div>
{/block:PostNotes}
</div><!--posts-->
{/block:Posts}
<!------ PAGINATION ------>
{block:Pagination}
<div class="botpagi">
{block:PreviousPage}
<a class="flex" href="{PreviousPage}">
<div class="prev-svg"></div>
<span>previous page</span>
</a>
{/block:PreviousPage}
{block:NextPage}
<a class="flex pn" href="{NextPage}">
<span>next page</span>
<div class="next-svg"></div>
</a>
{/block:NextPage}
</div>
{/block:Pagination}
</div><!--postscont-->
<!---- RIGHT SIDEBAR ---->
<div class="right-sidebar">
<img class="sb-banner" src="{image:sidebar banner 1}">
{block:ifrightsidebarbox1}
<div box-body class="statsbox" two-cols>{text:right sidebar box 1}</div>
{/block:ifrightsidebarbox1}
<!-------------------------->
{block:ifrightsidebarbox2title}
<div class="box-title">{text:right sidebar box 2 title}</div>
{/block:ifrightsidebarbox2title}
{block:ifrightsidebarbox2}
<div box-body class="statsbox" one-col>{text:right sidebar box 2}</div>
{/block:ifrightsidebarbox2}
<img class="sb-banner" src="{image:sidebar banner 2}">
</div><!--right-sidebar-->
</div><!--ensoot-->
</div><!--nymoots-->
</div><!--mynoots-->
<div class="msby"></div>
<script src="//static.tumblr.com/0podkko/jfMplm3f8/modified_photosets.js"></script>
</body>
</html>