проба
хз
Сообщений 1 страница 2 из 2
Поделиться22025-06-25 21:32:17
[html]<!---
drama by ellie/retrcmoon
// RULES
-> Do NOT remove any credits!
-> Do NOT use this as a base code.
-> Do NOT take parts of this code an claim it as your own.
-> You are free to edit however you want.
-> If you find any bugs, please let me know.
// INFO
-> The code doesn't have to be touched unless you want to do major changes. Everything else can be changed in the control panel!
// IMAGE SIZES
-> Sidebar Image: 250 x 350
-> Navigation Images: 120 x 120
All Images will resize automatically!
// CREDITS:
-> Base Code by seyche.tumblr.com
-> Custom Poll colors by glenthemes.tumblr.com
-> Icons by Fontawesome, Material Icons
-> Fonts by Google Fonts
-> Tooltips by malihu.gr
-> NPF Inline Images fix by glenthemes.tumblr.com
-> NPF Audio fix by glenthemes.tumblr.com
-> Tabs by @Valcntines & https://www.w3schools.com/
--->
<!DOCTYPE html>
<html>
<head>
<title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--- Image Variables --->
<meta name="image:sidebar" content=""/>
<meta name="image:background" content=""/>
<meta name="image:Navigation Pic 1" content=""/>
<meta name="image:Navigation Pic 2" content=""/>
<meta name="image:Navigation Pic 3" content=""/>
<!--- Color Variables --->
<meta name="color:background" content="#070707"/>
<meta name="color:background pattern" content="#635374"/>
<meta name="color:sidebar" content="#0a0a0a"/>
<meta name="color:posts" content="#0a0a0a"/>
<meta name="color:post notes" content="#202020"/>
<meta name="color:borders" content="#202020"/>
<meta name="color:text" content="#898989"/>
<meta name="color:accent" content="#635374"/>
<meta name="color:italic" content="#7ba7af"/>
<meta name="color:links" content="#7b7a86"/>
<meta name="color:Ask Background" content="#070707"/>
<meta name="color:Ask Border" content="#202020"/>
<meta name="color:Palette color one" content="#5e5063"/>
<meta name="color:Palette color two" content="#7b7a86"/>
<meta name="color:Palette color three" content="#4c4565"/>
<meta name="color:Overlay color one" content="#5e5063"/>
<meta name="color:Overlay color two" content="#000"/>
<meta name="color:Audio Player Background" content="#222"/>
<meta name="color:Audio Player Text" content="#777"/>
<meta name="color:Audio Player Button" content="#9B190C"/>
<!--- Text Variables --->
<meta name="text:Blogtitle" content="Blogtitle" />
<meta name="text:Navigation Text Box" content="Your text goes here." />
<meta name="text:Link1" content="/" />
<meta name="text:Link1 Title" content="link 1" />
<meta name="text:Link2" content="/" />
<meta name="text:Link2 Title" content="link 2" />
<meta name="text:Navigation Link1" content="/" />
<meta name="text:Navigation Link1 Title" content="link 1" />
<meta name="text:Navigation Link2" content="/" />
<meta name="text:Navigation Link2 Title" content="link 2" />
<meta name="text:Navigation Link3" content="/" />
<meta name="text:Navigation Link3 Title" content="link 3" />
<meta name="text:Navigation Link4" content="/" />
<meta name="text:Navigation Link4 Title" content="link 4" />
<meta name="text:Navigation Link5" content="/" />
<meta name="text:Navigation Link5 Title" content="link 5" />
<!--- Selecti Variables --->
<meta name="select:Font Size" content="11px" title="11px"/>
<meta name="select:Font Size" content="12px" title="12px"/>
<meta name="select:Font Size" content="13px" title="13px"/>
<meta name="select:Text Align" content="justify" title="justify"/>
<meta name="select:Text Align" content="left" title="left"/>
<meta name="select:Post Size" content="540px" title="540px"/>
<meta name="select:Post Size" content="500px" title="500px"/>
<meta name="select:Post Size" content="450px" title="450px"/>
<meta name="select:Post Size" content="400px" title="400px"/>
<meta name="select:Body Font" content="Work Sans" title="Work Sans"/>
<meta name="select:Body Font" content="Montserrat" title="Montserrat"/>
<meta name="select:Body Font" content="Calibri" title="Calibri"/>
<meta name="select:Body Font" content="Cabin" title="Cabin"/>
<meta name="select:Body Font" content="Karla" title="Karla"/>
<meta name="select:Body Font" content="Be Vietnam" title="Be Vietnam"/>
<meta name="select:Accent Font" content="Rozha One" title="Rozha One"/>
<meta name="select:Accent Font" content="Yeseva One" title="Yeseva One"/>
<meta name="select:Accent Font" content="Passion One" title="Passion One"/>
<meta name="select:Accent Font" content="Lemon" title="Lemon"/>
<meta name="select:Accent Font" content="Chicle" title="Chicle"/>
<meta name="select:Accent Font" content="Girassol" title="Girassol"/>
<meta name="select:Background Pattern Opacity" content=".5" title="50%"/>
<meta name="select:Background Pattern Opacity" content=".1" title="10%"/>
<meta name="select:Background Pattern Opacity" content=".2" title="20%"/>
<meta name="select:Background Pattern Opacity" content=".3" title="30%"/>
<meta name="select:Background Pattern Opacity" content=".4" title="40%"/>
<meta name="select:Background Pattern Opacity" content=".6" title="60%"/>
<meta name="select:Background Pattern Opacity" content=".7" title="70%"/>
<meta name="select:Background Pattern Opacity" content=".8" title="80%"/>
<meta name="select:Background Pattern Opacity" content=".9" title="90%"/>
<meta name="select:Overlay Blend Mode" content="normal" title="normal"/>
<meta name="select:Overlay Blend Mode" content="overlay" title="overlay"/>
<meta name="select:Overlay Blend Mode" content="screen" title="screen"/>
<meta name="select:Overlay Blend Mode" content="multiply" title="multiply"/>
<meta name="select:Overlay Blend Mode" content="darken" title="darken"/>
<meta name="select:Overlay Blend Mode" content="lighten" title="lighten"/>
<meta name="select:Overlay Blend Mode" content="color-dodge" title="color-dodge"/>
<meta name="select:Overlay Blend Mode" content="color-burn" title="color-burn"/>
<meta name="select:Overlay Blend Mode" content="hard-light" title="hard-light"/>
<meta name="select:Overlay Blend Mode" content="soft-light" title="soft-light"/>
<meta name="select:Overlay Blend Mode" content="difference" title="difference"/>
<meta name="select:Overlay Blend Mode" content="exclusion" title="exclusion"/>
<meta name="select:Overlay Blend Mode" content="color" title="color"/>
<meta name="select:Overlay Blend Mode" content="luminosity" title="luminosity"/>
<meta name="select:Overlay Opacity" content=".7" title="70%"/>
<meta name="select:Overlay Opacity" content=".1" title="10%"/>
<meta name="select:Overlay Opacity" content=".2" title="20%"/>
<meta name="select:Overlay Opacity" content=".3" title="30%"/>
<meta name="select:Overlay Opacity" content=".4" title="40%"/>
<meta name="select:Overlay Opacity" content=".5" title="50%"/>
<meta name="select:Overlay Opacity" content=".6" title="60%"/>
<meta name="select:Overlay Opacity" content=".8" title="80%"/>
<meta name="select:Overlay Opacity" content=".9" title="90%"/>
<!--- IF Variables --->
<meta name="if:Description Box" content="1"/>
<meta name="if:Grayscale" content="0"/>
<meta name="if:Color Overlay" content="0"/>
<meta name="if:Grid Background" content="0"/>
<meta name="if:Dotted Background" content="1"/>
<meta name="if:Background Image" content="0"/>
<meta name="if:Post Container Border" content="0"/>
<meta name="if:Navigation" content="1"/>
<meta name="if:Sidebar Scribble" content="1"/>
<meta name="if:Sidebar Position Right" content="0"/>
<!--- Icons --->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<!--- Fonts --->
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Be+Vietnam:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Yeseva+One:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rozha+One:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Passion+One:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lemon:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Chicle:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Girassol:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!----- CSS ----->
<style type="text/css">
/** TUMBLR CONTROLS **/
.iframe-controls--desktop { position:fixed; top:10px; right:20px; z-index:214748364789123456789; filter:invert(0%); -webkit-filter:invert(0%); -webkit-transform:scale(0.6,0.6); -webkit-transform-origin: 100% 0%; -ms-transform-origin:100% 0%; -ms-transform:scale(0.6,0.6); transform:scale(0.6,0.6); transform-origin:100% 0%; }
.tmblr-iframe-compact .tmblr-iframe--unified-controls {z-index: 999999999!important;}
#tumblr_lightbox {background-color:rgba(255, 255, 255, .9)!important;z-index:999999999999999!important;}
#tumblr_lightbox img {opacity:0;}
#tumblr_lightbox_caption {font-weight:normal!important;text-shadow:none!important;}
#tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image {-moz-box-shadow:none!important;-webkit-box-shadow:none!important;box-shadow:none!important;-moz-border-radius:0px!important;-webkit-border-radius:0px!important;border-radius:0px!important;opacity:1!important;}
#tumblr_lightbox_left_image, #tumblr_lightbox_right_image {opacity:.4!important;}
#s-m-t-tooltip { max-width:300px; padding:5px 12px; margin:10px 0px 0px 5px; font-size:10px; color:{color:text}; text-align:center; text-transform:uppercase; border:1px solid {color:borders}; z-index:999999999999999999; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; background:{color:background}; border-radius:10px; opacity:.7;}
/** SCROLLBAR **/
*::-webkit-scrollbar { width: 3px; }
*::-webkit-scrollbar-track { background: {color:background}; }
*::-webkit-scrollbar-thumb { background-color: {color:borders}; border-radius: 0px; }
/** ANIMATIONS **/
@keyframes fadeleft {
0% {
opacity: 1;
transform: translateX(-100px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes scalein {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes slideinbottom {
0% {
opacity: 0;
transform: translateY(250px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/** GENERAL STYLING **/
body {
color:{color:text};
font-size:{select:Font Size};
font-family:'{select:Body Font}', sans-serif;
font-weight:normal;
text-align:left;
background:{color:background};
line-height: 160%;
margin: 0;
padding: 0;
overflow-x:hidden;
}
.background {
position:fixed;
width:100%;
height:100%;
top: 0px;
left: 0px;
{block:ifgridbackground}
background:{color:background};
background-size: 40px 40px;
background-image: linear-gradient(to right, {color:background pattern} 1px, transparent 1px), linear-gradient(to bottom, {color:background pattern} 1px, transparent 1px);
opacity: {select:background pattern opacity};
{/block:ifgridbackground}
{block:ifbackgroundimage}
background:{color:background};
background-image: url({image:background});
background-repeat: repeat;
background-position: center;
{/block:ifbackgroundimage}
{block:ifdottedbackground}
--dot-size: 2px;
--dot-space: 44px;
background:
linear-gradient(90deg, {color:background} calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
linear-gradient({color:background} calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space), {color:background pattern};
opacity:{select:background pattern opacity};
{/block:ifdottedbackground}
}
::-moz-selection {
color: {color:text};
background: {color:accent};
}
::selection {
color: {color:text};
background: {color:accent};
}
blockquote, .text-caption:first-of-type .textquote {
padding: 0 0 0 1em;
border-left: 2px solid {color:borders};
margin: 1.5em 0 1.5em 1.5em;
}
hr {
height: 1px;
border: none;
box-shadow: none;
background-color: {color:borders};
}
pre {
font-family: '{select:Accent Font}';
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
a {
text-decoration:none;
text-transform:uppercase;
color:{color:links};
font-weight:700;
cursor:pointer;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
}
a:hover {
cursor:pointer;
color:{color:text};
}
p { margin:10px 0 10px 0; }
b, strong {
font-size: calc({select:Font Size} + 4px);
text-transform:uppercase;
color:{color:accent};
font-family:'{select:Accent Font}';
}
i, em {
color:{color:italic};
text-transform:lowercase;
font-family:'Tinos';
font-size:15px;
}
small { font-size: {select:font size}; }
big { font-size:calc({select:font size} + 1px);}
h1 {
text-transform:uppercase;
font-size:30px;
letter-spacing:2px;
line-height:20px;
text-align:center;
font-family:'{select:Accent Font}';
border-bottom: 1px solid {color:borders};
padding: 0px 5px 20px 5px;
color:{color:text};
}
h2, h3, h4 {
text-transform:uppercase;
font-size:28px;
font-weight:900;
letter-spacing:2px;
line-height:30px;
text-align:left;
font-family:'{select:Accent Font}';
border-bottom:1px solid {color:accent};
color:{color:accent};
}
figure.tmblr-full {}
figure.tmblr-full img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
/** PAGINATION **/
.sideprev {
position:absolute;
margin-left:-1px;
width:35px;
height:35px;
margin-top:190px;
}
.sidenext {
position:absolute;
margin-left:320px;
width:35px;
height:35px;
margin-top:190px;
}
.sideprev a, .sidenext a {
display:block;
width:30px;
height:30px;
border-radius:50%;
border:1px solid {color:borders};
background:{color:sidebar};
}
.sideprev a:hover, .sidenext a:hover {
background:{color:palette color one};
}
.sideprev i, .sidenext i {
font-size:14px;
color:{color:text};
margin-left:8px;
line-height:30px;
}
.sidenext i {
margin-left:10px;
}
/** POSTS **/
main {
position:absolute;
width:100%;
}
section {
position: relative;
width: calc(155px + {select:post size});
bottom:0px;
padding:5px 0px;
backdrop-filter: blur(6px);
background:;
left:60%;
{block:ifsidebarpositionright}left:30%;{/block:ifsidebarpositionright}
transform: translate(-50%);
{block:ifpostcontainerborder}
border-left:1px solid {color:borders};
border-right:1px solid {color:borders};
{/block:ifpostcontainerborder}
z-index:9999;
}
article {
width: 100%;
position: relative;
margin-top:30px;
margin-left:40px;
margin-bottom:10px;
width: {select:post size};
border:1px solid {color:borders};
padding:15px 15px 0px 15px;
background:{color:posts};
text-align:{select:text align};
}
article:first-of-type, #postinfo2:first-of-type {
}
.posts li, .posts blockquote, figure, video, iframe, .video, .video iframe, figure.tmblr-embed.tmblr-full, figure.tmblr-embed.tmblr-full iframe, .caption iframe {max-width: 100%;}
.pinned {
text-align:center;
margin-top:-45px;
margin-left:calc({select:post size} - {select:post size} - 45px);
margin-bottom:5px;
width:50px;
height:50px;
padding:5px;
color:{color:text};
position:absolute;
}
.pinned:hover, .pinned i:hover { color:{color:text};}
/** CAPTIONS **/
.caption {
margin-top: 2em;
list-style-type: none;
background:;
}
.text-caption:first-of-type {
margin-top: 10px;
border:none;
padding-top:0px;
}
.text-caption {
padding-top:20px;
border: 10px solid;
border-image-slice: 1;
border-width: 3px;
border-image-source: linear-gradient(to left, {color:borders}, {color:borders});
border-left: 0;
border-right: 0;
border-bottom: 0;
}
.user-icon {
display: inline-block;
vertical-align: middle;
margin-top:-5px;
width: 30px;
height: 30px;
z-index:9;
}
.username {
display: inline-block;
vertical-align: middle;
font-weight: 700;
font-size:12px;
z-index:9;
padding:5px 5px;
margin-left:10px;
}
.username a {
text-transform:lowercase;
font-family:'Tinos';
font-size:12px;
letter-spacing:1px;
font-weight:700;
}
.username a:hover {
color:{color:accent};
}
.deactive::after {
content: '(deactivated)';
margin-left: 1em;
opacity: 0.75;
color: {color:text};
}
p.tmblr-attribution {margin-top: 1em !important;}
/** TEXT **/
h1.post-title {margin-top: 5px;}
p.read_more_container {margin: 2em 0; text-align: center;}
a.read_more {
color:{color:text};
display: inline-block;
padding: 5px 10px;
text-align: center;
text-transform: uppercase;
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
border: 1px solid {color:border};
}
a.read_more:hover { color: {color:accent};}
/** LINK **/
a.link-wrap {display: block; border: 1px solid {color:borders};}
.link {padding: 2em;}
.link-host, .link-txt {margin-top: 1.5em;}
.npf-link-block { margin-top: 1.5em; background-color: inherit; border: 1px solid inherit; color: inherit;}
/** PHOTO **/
img { margin: 0; display: block; height: auto; max-width: 100%;}
.photo img {width: 100%;}
.vignette, #vignette {opacity: 0;}
.tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.75) !important;}
.lightbox-image, #tumblr_lightbox img { box-shadow: none !important; border-radius: 0 !important; max-width: none;}
#tumblr_lightbox_caption, .lightbox-caption { color: {color:text} !important; font-family: inherit; margin-top: 1em !important;}
/** PHOTOSET **/
.post-content div.npf_row, .post div.npf_row, body div.npf_row { margin-left: 0 !important; margin-right: 0 !important;}
/** QUOTE **/
.quote {line-height: 160%; font-size: 1.25em;} .quote p:first-of-type {margin-top: 0;} .quote p:last-of-type {margin-bottom: 0;} .source {margin-top: 1.5em;}
/** CHAT **/
.chat {padding: 0; margin: 0;} .chat li {list-style-type: none; margin-top: 1em;}
.chat li:first-of-type {margin-top: 0;}
.chatter {font-weight: bold;}
p.npf_chat, p.npf_chat b {font-family: inherit;}
/** ASK POSTS **/
.ask-wrap {
margin-top:30px;
width:calc({select:Post Size} + 5px);
margin-left:-10px;
padding:5px;
height:auto;
background:{color:ask background};
border:3px solid {color:ask background};
}
.ask-icon {
width:40px;
height:40px;
margin-left:calc({select:Post Size} - 40px);
margin-top:-20px;
position:absolute;
border:3px solid {color:ask border};
}
.ask-icon img {
width:40px;
height:40px;
object-fit:cover;
}
.question {
width:calc({select:Post Size} - 5px);
padding-left:5px;
margin-top:35px;
margin-left:0px;
height:auto;
border-top:1px solid {color:ask border};
}
.asking {
position:absolute;
margin-top:5px;
margin-left:5px;
display:inline-block;
width:100%;
}
.asking b, .asking a {
text-transform:uppercase;
}
/** AUDIO **/
.audiopost {padding: 2em; border: 1px solid {color:borders};}
.album-art { z-index: 1; display: inline-block; vertical-align: middle; float: left; width: 100px; height: 100px; }
.audio-player-wrap { width: 100px; height: 100px; display: inline-block; }
.button { width: 30px; height: 30px; overflow: hidden; position: relative; z-index: 2; margin: 7px; }
.audiobox { background-color: {color:sidebar}; z-index: 3; position: absolute; margin: 28px 0 0 28px; border-radius: 50%;}
.audioinfo { display: inline-block; height: 100px; max-width: calc(100% - 100px); margin-left: 100px; display: flex; justify-content: center; flex-direction: column; box-sizing: border-box; padding-left: 2em;}
.audioinfo li {list-style-type: none;}
.track {font-weight: bold;}
/** POST NOTES **/
.notes {margin: {text:post margin}px 0;}
ol.notes { max-width: 100%; padding: 0; margin: 2em 0 0 0;}
ol.notes li.note {padding: 0.5em 0; list-style-type: none;}
ol.notes li.note img.avatar { margin-right: 1em; vertical-align: middle; display: inline-block; width: 1.25em; height: 1.25em; }
.likeb {
position: relative;
display: inline-block;
height: 1.6em;
margin-bottom: 0px;
padding-right:10px;
}
.likeb .like_button iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 2;
opacity: 0;
}
.like_button iframe {
width: 100% !important;
height: 100% !important;
}
.likeb .liked + .actual-button {
color: red;
}
.likeb .liked + .actual-button:after {
content: 'd';
}
/** CREDIT **/
#credit { padding:5px; font-family:'Calibri', sans-serif; position:fixed; bottom:5px; right:10px; width:11px; height:17px; word-wrap:break-word; overflow:hidden; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; transition:all 1s ease-in-out; z-index:9999999999999999; }
#credit a { font-family:'Calibri', sans-serif; color:{color:text}; text-transform:uppercase; font-size:10px; z-index:9999999999999999999; font-weight:bolder;}
#credit:hover {width:94px;}
#credit span { font-family:'Calibri', sans-serif; color:{color:accent}; margin-right:5px; font-size:15px; font-weight:bolder;}
/** POST INFO **/
#postinfo {
margin-top:10px;
margin-left:-15px;
margin-bottom:0px;
width:calc({select:Post Size} + 20px);
height:25px;
padding:5px;
color:{color:text};
background-color:{color:Post Notes};
border-top: 1px solid {color:borders};
display:flex;
flex-direction:row;
justify-content: space-between;
align-content:center;
flex-wrap:no-wrap;
align-items:center;
}
#postinfo a, #postinfo2 a {
font-family:'{select:Body Font}', sans-serif;
text-decoration:none;
font-size: 10px;
color: {color:text};
font-weight: 700;
display: inline;
text-transform:uppercase;
}
#postinfo a:hover, #postinfo2 a:hover { color:{color:accent};}
#postinfo2 {
text-align:center;
margin-top:25px;
margin-left:calc({select:post size} + 80px);
margin-bottom:5px;
width:50px;
height:50px;
padding:5px;
color:{color:text};
position:absolute;
}
#postinfo2 a {
position:absolute;
padding: 4px 5px 2px 5px;
left:50%;
top:50%;
margin-left:-23px;
margin-top:-30px;
}
#postinfo3 {
text-align:center;
margin-top:105px;
margin-left:calc({select:post size} + 80px);
position:absolute;
}
#postinfo3 a {
display: block;
line-height:45px;
width:50px;
height:50px;
padding:5px;
color:{color:text};
}
#postinfo3 i {
color:{color:accent};
}
#postinfo3 a:hover, #postinfo3 i:hover {
color:{color:italic};
}
/** TAGS **/
.permalink {
width: calc({select:Post Size} + 32px);
height: auto;
margin-left: 40px;
margin-top:-10px;
text-transform:uppercase;
}
.tags {
margin-top: 0px;
text-align: left;
padding: 5px;
margin-left: 0px;
width:100%;
}
.tags a {
font-family:'{select:Body Font}', sans-serif;
text-decoration:none;
font-size: 9px;
padding: 0px 5px 2px 5px;
text-transform:lowercase;
font-weight: 500;
color:{color:text};
}
.tags a:hover {
color:{color:accent};
font-size:{select:font size};
font-weight:800;
}
/** TABS **/
.tabcontent {
position:fixed;
padding:20px;
left:60%;
{block:ifsidebarpositionright}left:30%;{/block:ifsidebarpositionright}
transform: translate(-50%);
height:460px;
top:50%;
margin-top:-240px;
width:460px;
background:{color:sidebar};
border: 1px solid {color:borders};
z-index:999;
display:none;
overflow:hidden;
}
.tabclose {
position:absolute;
cursor: pointer;
z-index:999999999999999999999999999999;
top:470px;
left:10px;
width: 70px;
height: 19px;
text-align:center;
text-transform: uppercase;
color: {color:text};
letter-spacing: 1px;
font-family: calibri, helvetica, arial;
font-size:9px;
font-weight:600;
display: inline-block;
border: 1px solid {color:borders};
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
}
.tabclose:hover {
background:{color:palette color one};
border:1px solid {color:palette color one};
border-radius: 40px;
color:{color:background};
}
/** SIDEBAR **/
#sidebar {
position:fixed;
height:440px;
width:350px;
left:50%;
margin-left:calc(({select:post size} / (-1)) - 100px);
{block:ifsidebarpositionright} left:70%;
margin-left:calc(({select:post size} / (-1)) + 350px);{/block:ifsidebarpositionright}
top: 50%;
margin-top:-220px;
z-index:99;
border: 1px solid {color:borders};
padding:10px;
background:{color:sidebar};
display:flex;
}
#sidebar svg {
position:absolute;
margin-left:-30px;
margin-top:15px;
z-index:-1;
opacity:.4;
}
.sideline3, .sideline4 {
position:absolute;
margin-left:15px;
width:1px;
margin-top:230px;
height:220px;
background: {color:borders};
}
.sideline4 {
margin-top:-10px;
margin-left:335px;
height:195px;
}
.sidepic {
position:absolute;
height:350px;
width:250px;
margin-top:-35px;
margin-left:40px;
border:1px solid {color:borders};
background:{color:sidebar};
padding:10px;
border-radius: 200px 200px 0px 0px;
-moz-border-radius: 200px 200px 0px 0px;
-webkit-border-radius: 200px 200px 0px 0px;
overflow:hidden;
animation: scalein 3s ease 0s 1 normal forwards;
}
{block:ifcoloroverlay}
.sidepic::after {
content: '';
position: absolute;
mix-blend-mode: {select:overlay blend mode};
left: 10px;
top: 10px;
width: 250px;
height: 350px;
background-image: linear-gradient(to left, {color:overlay color one}, {color:overlay color two});
opacity:{select:overlay opacity};
border-radius: 200px 200px 0px 0px;
-moz-border-radius: 200px 200px 0px 0px;
-webkit-border-radius: 200px 200px 0px 0px;
}
{/block:ifcoloroverlay}
.sidepic img {
height:350px;
width:250px;
object-fit:cover;
border-radius: 200px 200px 0px 0px;
-moz-border-radius: 200px 200px 0px 0px;
-webkit-border-radius: 200px 200px 0px 0px;
{block:ifgrayscale}
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
{/block:ifgrayscale}
{block:ifcoloroverlay}
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
{/block:ifcoloroverlay}
}
.palette {
position:absolute;
margin-top:343px;
width:272px;
margin-left:41px;
height:15px;
}
.palette span {
display:flex;
display:inline-block;
width:86px;
height:15px;
margin-top:0px;
margin-right:6px;
background:{color:palette color two};
}
.palette span:first-of-type {
background:{color:palette color one};
}
.palette span:last-of-type {
margin-right:0px;
background: {color:palette color three};
}
.sidenavigation {
position:absolute;
margin-left:15px;
width:345px;
height:50px;
margin-top:395px;
border-top:1px solid {color:borders};
display:flex;
justify-content:center;
}
.sidenavigation a, #topbar a {
margin-top:15px;
display:inline-block;
margin-left:8px;
line-height:25px;
border: 1px solid {color:borders};
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
width: 70px;
height: 25px;
text-align:center;
text-transform: uppercase;
color: {color:text};
letter-spacing: 1px;
font-family: calibri, helvetica, arial;
font-size:9px;
font-weight:600;
animation: slideinbottom 2s ease 0s 1 normal forwards;
}
.sidenavigation a:first-of-type, #topbar a:first-of-type {
margin-left:0px;
}
.sidenavigation a:hover, #topbar a:hover {
background:{color:palette color two};
border:1px solid {color:palette color two};
border-radius: 40px;
color:{color:sidebar};
}
.sidedescription {
position:absolute;
width:150px;
height:100px;
margin-top:200px;
margin-left:100px;
padding:5px;
background:{color:sidebar};
border:1px solid {color:borders};
overflow:auto;
font-size:9px;
text-align:{select:text align};
opacity:.7;
animation: scalein 3s ease 0s 1 normal forwards;
}
.sidetitle {
position:absolute;
margin-left:15px;
width:325px;
height:47px;
padding:0px 10px;
margin-top:348px;
border-top:1px solid {color:borders};
overflow:hidden;
text-align:center;
}
.sidetitle p {
font-family:{select:accent font};
font-size:30px;
letter-spacing:1px;
text-transform:uppercase;
color:{color:palette color three};
line-height:40px;
animation: fadeleft 2s ease 0s 1 normal forwards;
}
/** NAVIGATION **/
.navigationpic, .navigationpic2, .navigationpic3, .navigationpic4 {
position:absolute;
width:130px;
height:130px;
margin-top:75px;
margin-left:70px;
padding:10px;
border:1px solid {color:borders};
z-index:99;
}
{block:ifcoloroverlay}
.navigationpic::after, .navigationpic2::after, .navigationpic3::after {
content: '';
position: absolute;
mix-blend-mode: {select:overlay blend mode};
left: 10px;
top: 10px;
width: 130px;
height: 130px;
background-image: linear-gradient(to left, {color:overlay color one}, {color:overlay color two});
opacity:{select:overlay opacity};
}
{/block:ifcoloroverlay}
.navigationpic2 {
margin-left:240px;
transform: scale(0.8) ;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
}
.navigationpic3 {
margin-top:245px;
transform: scale(0.8) ;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
image-rendering: pixelated;
}
.navigationpic4 {
margin-top:245px;
margin-left:240px;
overflow:auto;
font-size:9px;
text-align:{select:text align};
background:{color:posts};
}
.navigationpic img, .navigationpic2 img, .navigationpic3 img {
width:130px;
height:130px;
object-fit:cover;
{block:ifgrayscale}
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
{/block:ifgrayscale}
{block:ifcoloroverlay}
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
{/block:ifcoloroverlay}
}
.navigationlinks {
position:absolute;
width:500px;
height:50px;
margin-top:-20px;
margin-left:-20px;
border-bottom:1px solid {color:borders};
background:{color:background};
display:flex;
justify-content:center;
}
.navigationlinks a {
margin-top:11px;
display:inline-block;
margin-left:10px;
line-height:25px;
border: 1px solid {color:borders};
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
width: 70px;
height: 25px;
text-align:center;
text-transform: uppercase;
color: {color:text};
letter-spacing: 1px;
font-family: calibri, helvetica, arial;
font-size:9px;
font-weight:600;
}
.navigationlinks a:first-of-type {
margin-left:0px;
}
.navigationlinks a:hover {
background:{color:palette color one};
border:1px solid {color:palette color one};
border-radius: 40px;
color:{color:background};
}
/** Screen extra **/
#topbar {
position:fixed;
top:0;
left:0;
width:100%;
height:50px;
background:{color:sidebar};
border-bottom:1px solid {color:borders};
display:none;
justify-content:center;
z-index:999999999999999999999999;
}
#topbar img {
position:absolute;
left:5%;
margin-top:7.5px;
width:35px;
height:35px;
border:1px solid {color:borders};
object-fit:cover;
{block:ifgrayscale}
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
{/block:ifgrayscale}
{block:ifcoloroverlay}
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
{/block:ifcoloroverlay}
}
/*--- for small desktop/tablet screens. converts sidebar to header ---*/
@media only screen and (max-width: 900px) {
section { left:50%;}
#sidebar {display:none;}
article:first-of-type, #postinfo2:first-of-type {
margin-top:70px;}
#topbar {display:flex;}
.tabcontent { left:50%;}
#postinfo3 { margin-top:150px;}
}
/*---- END OF MEDIA QUERIES -----*/
{CustomCSS}
</style>
<!---BLUE POLLS by @glenthemes --->
<link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet">
<style> .poll-post { --Poll-Question-Font-Size: 16px; --Poll-Question-Font-Family:'{select:Body Font}'; --Poll-Option-Background-Color: {color:sidebar}; --Poll-Option-Corner-Rounding: 18px; --Poll-Option-Border-Size: 2px; --Poll-Option-Border-Color: {color:borders}; --Poll-Option-Padding: 15px; --Poll-Option-Font-Size: 13px; --Poll-Option-Spacing: 10px; --Poll-Option-Text-Color: {color:text}; --Poll-Option-HOVER-Border-Color: {color:accent}; --Poll-Option-HOVER-Background-Color: {color:accent}; --Poll-Option-HOVER-Text-Color: {color:text}; --Poll-Option-HOVER-Speed: 0.4s;}</style>
<!--✻✻✻✻✻✻ npf audio player by @glenthemes ✻✻✻✻✻✻-->
<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: "",
emptyArtistText: "",
emptyAlbumText: "",
titleLabel: "Track:",
artistLabel: "Artist:",
albumLabel: "Album:"
});
</script>
<style edit-npf-audio-player>
.npf-audio-wrapper {
--NPF-Audio-Buttons-Size: 1.4rem;
--NPF-Audio-Buttons-Color: {color:Audio Player Button}; /* color of play & pause buttons */
--NPF-Audio-Buttons-Spacing: 1.3rem; /* space between buttons and song info */
--NPF-Audio-Image-Size: 85px;
--NPF-Audio-Image-Spacing: 0px; /* gap between player info and cover image */
}
.npf-audio-background {
background-color: {color:Audio Player Background}; /* background color of player (optional) */
padding: 1.5rem;
}
.npf-audio-title-label,
.npf-audio-artist-label,
.npf-audio-album-label {
font-weight: bold;
}
.npf-audio-title,
.npf-audio-artist,
.npf-audio-album {
color: {color:Audio Player Text}; /* color of audio text (optional) */
}
</style>
</head>
<!----- HTML ----->
<body>
<div class="background"></div>
<div id="topbar">
<img src="{image:sidebar}">
<a href="/">Home</a>
<a href="/ask">Ask</a>
<a href="{text:link1}">{text:Link1 Title}</a>
<a href="{text:link2}" {block:ifnavigation}style="display:none"{/block:ifnavigation}>{text:Link2 Title}</a>
{block:ifnavigation}<a href="#" class="tablinks" onclick="openCity(event, 'tabnavi')">Navigation</a>{/block:ifnavigation}
{Block:PreviousPage}<a href="{PreviousPage}" style="width:30px"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>{/Block:PreviousPage}
{block:NextPage}<a href="{NextPage}" style="width:30px"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>{/block:NextPage}
</div>
<main>
<!-- NAVIGATION TAB -->
{block:ifnavigation}
<div id="tabnavi" class="tabcontent">
<span onclick="this.parentElement.style.display='none'" class="tabclose">close tab</span>
<div class="navigationlinks">
<a href="{text:Navigation Link1}">{text:Navigation Link1 Title}</a>
<a href="{text:Navigation Link2}">{text:Navigation Link2 Title}</a>
<a href="{text:Navigation Link3}">{text:Navigation Link3 Title}</a>
<a href="{text:Navigation Link4}">{text:Navigation Link4 Title}</a>
<a href="{text:Navigation Link5}">{text:Navigation Link5 Title}</a>
</div>
<div class="navigationpic"><img src="{image:navigation pic 1}"></div>
<div class="navigationpic2"><img src="{image:navigation pic 2}"></div>
<div class="navigationpic3"><img src="{image:navigation pic 3}"></div>
<div class="navigationpic4">{text:navigation text box}</div>
</div>
{/block:ifnavigation}
<!-- NAVIGATION TAB END -->
<!-- SIDEBAR START -->
<div id="sidebar">
{block:ifsidebarscribble}<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 800 800"><g fill="none" stroke-width="1.25" stroke="{color:text}" stroke-linecap="round"><path d="M663.29 321.58C590.33 340.91 535.05 366.84 506.69 398.94 509.41 431.49 538.5 470.78 584.83 515.98 642.64 560.98 697.01 610.01 739.06 659.64 767.8 703.37 776.25 740.83 766.13 766.13 740.83 776.25 703.37 767.8 659.64 739.06 610.01 697.01 560.98 642.64 515.98 584.83 470.78 538.5 431.49 509.41 398.94 506.69 366.84 535.05 340.91 590.33 321.58 663.29 296.34 770.11 284.24 824.9 298 759.68 309.5 692.2 326.71 619.98 346.54 553.12 360.48 496.1 370.19 454.92 370.15 429.78 354.93 419.83 323.57 421.31 274.7 429.12 212.52 444.21 140.82 458.65 68.84 468.9 -11.69 482.55 4.65 472.38 103.29 447.42 179.72 428.1 244.42 401.61 285.77 368.67 297.43 335.52 281.04 295.82 243.69 250.94 190.38 207.2 135.48 160.92 88.76 116.03 42.74 63.81 63.8 42.73 116.02 88.74 160.9 135.47 207.18 190.36 250.92 243.67 295.8 281.03 335.5 297.43 368.65 285.78 401.6 244.44 428.08 179.75 447.41 103.33 472.37 4.67 482.54 -11.7 468.89 68.83 458.65 140.81 444.21 212.51 429.12 274.69 421.31 323.57 419.82 354.93 429.78 370.15 454.92 370.19 496.1 360.48 553.12 346.54 619.98 326.71 692.2 309.5 759.68 298 824.9 284.24 770.11 296.34 663.29 321.58Q663.29 321.58 663.29 321.58" opacity="0.85"></path><path d="M635.32 430.97C569.04 448.37 516.03 472.3 483.67 501.73 475.89 530.84 490.62 564.63 522.37 601.14 621.21 666.62 704.19 721.88 735.68 735.68 721.88 704.19 666.62 621.21 601.14 522.37 564.63 490.62 530.84 475.89 501.73 483.67 472.3 516.03 448.37 569.04 430.97 635.32 413.57 704.41 403.53 761.63 400.16 798.27 396.45 812.1 398.6 799.66 404.96 765.09 410.14 650.87 411.11 526.06 379.3 435.77 302.21 386.43 182.32 373.48 57.98 370.72 1.16 373.97 40.3 359.62 131.32 336.99 200.41 319.59 261.16 296.08 304.51 267.6 325.05 239.64 322.52 207.88 300.69 174.54 211.99 117 124.07 75.65 79.39 79.39 75.65 124.07 117 211.99 174.54 300.69 207.88 322.52 239.64 325.05 267.6 304.51 296.08 261.16 319.59 200.41 336.99 131.32 359.62 40.3 373.97 1.16 370.72 57.98 373.48 182.32 386.43 302.21 435.77 379.3 526.06 411.11 650.87 410.14 765.09 404.96 799.66 398.6 812.1 396.45 798.27 400.16 761.63 403.53 704.41 413.57 635.32 430.97Q635.32 430.97 635.32 430.97" opacity="0.42"></path><path d="M607.33 527.04C498.69 557.97 448.82 602.59 467.3 648.59 540.51 682.9 619.8 696.31 670.9 670.91 696.3 619.82 682.9 540.52 648.6 467.3 602.62 448.81 558.01 498.66 527.08 607.28 496.15 724.56 481.83 782.2 474.22 761.63 454.92 679.97 420.05 570.52 354.11 472.84 262.48 394.71 150.38 347.33 54.5 319.07 13.36 302.98 50.69 284.41 159.33 253.48 281.58 160.64 118.89 251.5 144.69 348.83 182.21 346.74 222.58 276.58 253.5 159.32 284.43 50.68 303 13.35 319.08 54.5 347.33 150.38 394.7 262.49 472.83 354.12 570.5 420.05 679.96 454.91 761.63 474.2 782.21 481.81 724.59 496.12 607.33 527.04Q607.33 527.04 607.33 527.04" opacity="0.10"></path><path d="M579.29 568.75C453.49 608.57 497.28 635.44 581.57 581.57 635.44 497.28 608.57 453.49 568.75 579.29 541.69 683.65 515.65 745.39 484.47 747.78 444.36 699.39 385.33 616.33 304.39 528.58 215.9 442.59 124.65 375.8 60.33 328.91 44.32 290.2 89.63 259.82 187.29 232.76 328.01 195.11 330.85 188.6 251.4 251.39 188.6 330.85 195.1 328.02 232.75 187.33 259.81 89.65 290.19 44.33 328.91 60.33 375.8 124.64 442.59 215.89 528.58 304.39 616.33 385.33 699.39 444.36 747.78 484.47 745.39 515.65 683.65 541.69 579.29 568.75Q579.29 568.75 579.29 568.75" opacity="0.44"></path><path d="M551.29 538.19C436.37 566.57 422.68 543.02 482.87 482.87 543.02 422.68 566.57 436.37 538.19 551.29 514.99 642 481.16 703.6 435.94 722.72 386.59 704.11 321.28 652.13 245.28 586.48 173.93 512.07 110.85 444.88 76.81 392.63 80.6 343.35 129.54 306.84 215.29 283.64 306 260.45 377 252.76 413.12 261.84 411.52 273.89 384.14 304.88 348.89 348.89 304.88 384.13 273.89 411.51 261.84 413.12 252.76 377.01 260.44 306.03 283.63 215.33 306.82 129.57 343.34 80.61 392.61 76.8 444.86 110.84 512.05 173.92 586.46 245.27 652.11 321.27 704.1 386.58 722.72 435.94 703.61 481.16 642.03 514.98 551.33 538.18Q551.29 538.19 551.29 538.19" opacity="0.74"></path><path d="M523.29 448.45C450.34 467.77 394.08 470.89 362.55 459.35 357.14 447.67 370.62 423 391.98 391.98 423 370.62 447.67 357.14 459.35 362.55 470.89 394.08 467.77 450.34 448.45 523.29 429.12 599.72 395.41 657.27 350.37 686.41 305.18 690.85 250.35 668.25 194 629.63 147.3 579.22 113.32 527.26 104.56 482.95 121.92 437.83 170.34 403.68 243.29 384.35 319.72 365.02 385.11 362.35 428.42 373.97 445.97 395.67 395.67 445.97 373.97 428.42 362.35 385.11 365.02 319.72 384.35 243.29 403.68 170.34 437.83 121.92 482.95 104.56 527.26 113.32 579.21 147.3 629.62 194 668.24 250.35 690.85 305.18 686.42 350.36 657.29 395.4 599.75 429.11 523.33 448.44Q523.29 448.45 523.29 448.45" opacity="0.45"></path><path d="M495.53 337.89C386.83 368.82 330.87 353.34 324.36 324.4 353.21 330.8 368.65 386.62 337.73 495.23 271.08 637.47 147.39 555.46 271.53 491.7 388.76 460.77 463.62 470.44 485.82 485.82 470.34 463.49 460.62 388.51 491.55 271.23 555.34 147.24 637.65 271.22 495.53 337.89Q495.53 337.89 495.53 337.89" opacity="0.19"></path><path d="M467.29 254.03C381.54 277.23 320.25 282.96 290.67 290.67 282.96 320.25 277.23 381.54 254.03 467.29 230.83 558.01 194.56 612.39 171.87 622.9 171.05 612.23 213.54 583.06 299.29 559.87 390.01 536.67 463.19 523.84 504.11 504.11 523.84 463.19 536.67 390.01 559.87 299.29 583.06 213.54 612.23 171.05 622.9 171.87 612.39 194.56 558.01 230.83 467.29 254.03Q467.29 254.03 467.29 254.03" opacity="0.47"></path><path d="M439.32 232.61C330.68 263.54 263.54 330.68 232.61 439.32 201.69 556.56 218.68 590.45 327.32 559.52 444.56 528.6 528.6 444.56 559.52 327.32 590.45 218.68 556.56 201.69 439.32 232.61Q439.32 232.61 439.32 232.61" opacity="0.33"></path></g></svg>{/block:ifsidebarscribble}
<div class="sideline3"></div>
<div class="sideline4"></div>
<div class="sidetitle"><p>{text:blogtitle}</p></div>
{block:Pagination}
<div class="sideprev">{Block:PreviousPage}<a href="{PreviousPage}"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>{/Block:PreviousPage}</div>
<div class="sidenext">{block:NextPage}<a href="{NextPage}"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>{/block:NextPage}</div>
{/block:Pagination}
<div class="sidepic"><img src="{image:sidebar}"></div>
<div class="palette"><span></span><span></span><span></span></div>
<div class="sidenavigation">
<a href="/">Home</a>
<a href="/ask">Ask</a>
<a href="{text:link1}">{text:Link1 Title}</a>
<a href="{text:link2}" {block:ifnavigation}style="display:none"{/block:ifnavigation}>{text:Link2 Title}</a>
{block:ifnavigation}<a href="#" class="tablinks" onclick="openCity(event, 'tabnavi')">Navigation</a>{/block:ifnavigation}
</div>
{block:ifdescriptionbox}
<div class="sidedescription">{Description}</div>
{/block:ifdescriptionbox}
</div>
<!-- END SIDEBAR -->
<!-- section = post container -->
<section>
{block:TagPage}
<article>
Viewing posts filed under #{Tag}
</article>
{/block:TagPage}
{block:DayPage}
<article>
Viewing posts made on {Month} {DayOfMonth}, {Year}
</article>
{/block:DayPage}
<!----- POSTS ----->
{block:Posts}
{block:Date}
<div id="postinfo2"> <a href="{Permalink}"><p style="font-size:30px; color:{color:accent}; font-weight:900; font-family:'Work Sans';">{DayOfMonth}</p> <p style="text-align:center; font-family:'Work Sans';">{ShortMonth} {ShortYear}</p></a></div>
{block:ContentSource}<div id="postinfo3">
<a href="{SourceURL}" title="source" style="font-weight:bolder;"> <i style=" font-size:20px;" class="fa fa-external-link" aria-hidden="true"></i> <p style="margin-top:-22px; font-family:'Work Sans';">Source</p></a></div>{/block:contentsource}
{/block:Date}
<article class="posts" id="{PostID}">
{block:PinnedPostLabel}<div class="pinned"><div title="Pinned Post!" style="line-height:50px; display:inline-block; transform: rotate(-21deg); -webkit-transform: rotate(-21deg); -moz-transform: rotate(-21deg); font-size:30px;"><i class="fa fa-thumb-tack" aria-hidden="true"></i></div></div>{/block:PinnedPostLabel}
{block:Text}
{block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
{block:NotReblog}
<li class="caption">
{Body}
</li>
{/block:NotReblog}
{block:RebloggedFrom}
{block:Reblogs}
<li class="caption text-caption">
<div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><span style="font-size:10px;font-family:'Tinos';"><span class="iconify" data-icon="gridicons:reblog" data-inline="false" style="font-size:15px; vertical-align:-2px; margin-right:5px "></span> by</span> <a href="{Permalink}">{Username}</a></div>
<img src="{PortraitURL-64}" class="user-icon">
<div class="textquote">{Body}</div>
</li>
{/block:Reblogs}
{/block:RebloggedFrom}
{/block:Text}
{block:Link}
<a href="{URL}" class="link-wrap">
{block:Thumbnail}<img src="{Thumbnail-HighRes}">{/block:Thumbnail}
<div class="link">
<div class="title">{Name}</div>
{block:Excerpt}<div class="link-txt">{Excerpt}</div>{/block:Excerpt}
{block:Host}<div class="link-host">{Host}</div>{/block:Host}
</div>
</a>
{block:Description}
{block:NotReblog}
<li class="caption">
{Description}
</li>
{/block:NotReblog}
{/block:Description}
{block:RebloggedFrom}
{block:Reblogs}
<li class="caption">
<div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><span style="font-size:10px;font-family:'Tinos';"><span class="iconify" data-icon="gridicons:reblog" data-inline="false" style="font-size:15px; vertical-align:-2px; margin-right:5px "></span> by</span> <a href="{Permalink}">{Username}</a></div>
<img src="{PortraitURL-64}" class="user-icon">
{Body}
</li>
{/block:Reblogs}
{/block:RebloggedFrom}
{/block:Link}
{block:Photo}
<div class="photo">
{LinkOpenTag}<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>{LinkCloseTag}
</div>
{block:Caption}
{block:NotReblog}
<li class="caption">
{Caption}
</li>
{/block:NotReblog}
{block:RebloggedFrom}
{block:Reblogs}
<li class="caption">
<div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><span style="font-size:10px;font-family:'Tinos';"><span class="iconify" data-icon="gridicons:reblog" data-inline="false" style="font-size:15px; vertical-align:-2px; margin-right:5px "></span> by</span> <a href="{Permalink}">{Username}</a></div>
<img src="{PortraitURL-64}" class="user-icon">
{Body}
</li>
{/block:Reblogs}
{/block:RebloggedFrom}
{/block:Caption}
{/block:Photo}
{block:Photoset}
<div class="photo">{Photoset-700}</div>
{block:Caption}
{block:NotReblog}
<li class="caption">
{Caption}
</li>
{/block:NotReblog}
{block:RebloggedFrom}
{block:Reblogs}
<li class="caption">
<div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><span style="font-size:10px;font-family:'Tinos';"><span class="iconify" data-icon="gridicons:reblog" data-inline="false" style="font-size:15px; vertical-align:-2px; margin-right:5px "></span> by</span> <a href="{Permalink}">{Username}</a></div>
<img src="{PortraitURL-64}" class="user-icon">
{Body}
</li>
{/block:Reblogs}
{/block:RebloggedFrom}
{/block:Caption}
{/block:Photoset}
{block:Video}
<div class="video">{Video-500}</div>
{block:Caption}
{block:NotReblog}
<li class="caption">
{Caption}
</li>
{/block:NotReblog}
{block:RebloggedFrom}
{block:Reblogs}
<li class="caption">
<div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><span style="font-size:10px;font-family:'Tinos';"><span class="iconify" data-icon="gridicons:reblog" data-inline="false" style="font-size:15px; vertical-align:-2px; margin-right:5px "></span> by</span> <a href="{Permalink}">{Username}</a></div>
<img src="{PortraitURL-64}" class="user-icon">
{Body}
</li>
{/block:Reblogs}
{/block:RebloggedFrom}
{/block:Caption}
{/block:Video}
{block:Quote}
<div class="quote">{Quote}</div>
{block:Source}<div class="source">{Source}</div>{/block:Source}
{/block:Quote}
{block:Chat}
{block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
<ul class="chat">{block:Lines}
<li>
{block:Label}<div class="chatter">{Label}</div>{/block:Label}
{Line}
</li>
{/block:Lines}</ul>
{/block:Chat}
{block:Answer}
<div class="ask-wrap">
<div class="ask-icon"><img src="{AskerPortraitURL-64}"></div>
<div class="asking"><b>{Asker}</b> sent a message:</div>
<div class="question">{Question}</div>
</div>
{block:Answerer}
<li class="caption">
<img src="{AnswererPortraitURL-64}" class="user-icon">
<div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Answerer}</a></div>
{Answer}
</li>
{/block:Answerer}
{block:NotReblog}
<li class="caption">
{Replies}
</li>
{/block:NotReblog}
{block:RebloggedFrom}
{block:Reblogs}
<li class="caption">
<div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><span style="font-size:10px;font-family:'Tinos';"><span class="iconify" data-icon="gridicons:reblog" data-inline="false" style="font-size:15px; vertical-align:-2px; margin-right:5px "></span> by</span> <a href="{Permalink}">{Username}</a></div>
<img src="{PortraitURL-64}" class="user-icon">
{Body}
</li>
{/block:Reblogs}
{/block:RebloggedFrom}
{/block:Answer}
{block:Audio}
<div class="audiopost">
<div class="audiobox">
<div class="button">
{block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
</div>
</div>
{block:AlbumArt}
<img src="{AlbumArtURL}" class="album-art">
{/block:AlbumArt}
<div class="audioinfo">
{block:TrackName}<li class="track">{TrackName}</li>{/block:TrackName}
{block:Artist}<li>{Artist}</li>{/block:Artist}
{block:Album}<li>{Album}</li>{/block:Album}
</div>
</div>
{block:Caption}
{block:NotReblog}
<li class="caption">
{Caption}
</li>
{/block:NotReblog}
{block:RebloggedFrom}
{block:Reblogs}
<li class="caption">
<div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><span style="font-size:10px;font-family:'Tinos';"><span class="iconify" data-icon="gridicons:reblog" data-inline="false" style="font-size:15px; vertical-align:-2px; margin-right:5px "></span> by</span> <a href="{Permalink}">{Username}</a></div>
<img src="{PortraitURL-64}" class="user-icon">
{Body}
</li>
{/block:Reblogs}
{/block:RebloggedFrom}
{/block:Caption}
{/block:Audio}
<!----- INFO ----->
{block:Date}
<div id="postinfo">
<span style="padding-left:10px">{block:NoteCount}<a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}</span>
<span style="gap:5px; display:flex">{block:RebloggedFrom} <a href="{ReblogParentURL}" title="reblogged from"><img src="{ReblogParentPortraitURL-16}"></a> <a href="{ReblogRootURL}" title="original post"><img src="{ReblogRootPortraitURL-16}"></a> {/block:RebloggedFrom}</span>
<div style="padding-right:10px"><a class="likeb" href="#">{LikeButton}<i class="fa fa-heart"></i></a>
<a href="{ReblogURL}" target="_blank" title="reblog"><span class="iconify" data-icon="gridicons:reblog" data-inline="false" style="font-size:15px; vertical-align:-2px; "></span></a></div>
</div> <!-- end post info -->
{/block:date}
<!----- POST NOTES ----->
{block:PermalinkPage}{block:Date}
{block:NoteCount}{block:PostNotes}
<div class="notes">
{PostNotes-64}
</div>
{/block:PostNotes}{/block:NoteCount}
{/block:Date}{/block:PermalinkPage}
</article>
<div class="permalink">{block:HasTags}<div class="tags"><span style="font-size:8px; color:{color:italic}; font-weight:800; font-style:italic;">keywords:</span> {block:Tags}<a href="{TagUrl}"> #{Tag} </a>{/block:Tags}</div>{/block:HasTags}</div>
{/block:Posts}
<!-- end of posts container -->
</section>
<!-- end of main container -->
</main>
<!----- CREDIT - DO NOR DELETE ----->
<div id="credit"><div style="width:115px;margin-right:15px;margin-bottom:15"><a href="https://retrcmoon.tumblr.com/" target="blank"><span>E.</span>MADE BY ELLIE.</a></div></div>
</body>
<!--- Scripts --->
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:90,
tip_fade_speed:600,
attribute:"title"
});
});
})(jQuery);
</script>
<script>
(function($){
$(document).ready(function(){
$("div[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:90,
tip_fade_speed:600,
attribute:"title"
});
});
})(jQuery);
</script>
<!-- NPF images fix v3.0 by @glenthemes [2021] 💌 git.io/JRBt7--->
<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:4px;}
</style>
<!-- TAB SCRIPT -->
<script>
$(document).ready(function(){
$(".tabclose").click(function(){
$(".tabcontent") .delay ( 200 ) .fadeOut( 2000 );
$('section').css({"display": "block"}) .delay ( 2000 );
});
});
</script>
<script>
$(document).ready(function(){
$(".tablinks").click(function(){
$(".tabcontent") .delay ( 200 ) .fadeIn( 1000 );
$('section').css({"display": "none"}) .fadeOut( 1000 );
});
});
</script>
</html>
[/html]