Theme: Melancholy
<!---------------------------------
___ ___ _ ___ ___ ___ ___ ___ ___
/ __|/ _ \| | / _ \ / __/ _ \| \| __/ __|
\__ \ (_) | |_| (_) | | (_| (_) | |) | _|\__ \r
|___/\___/|____\___/ \___\___/|___/|___|___/
**** Tʜᴇᴍᴇ: Mᴇʟᴀɴᴄʜᴏʟʏ ****
Theme Code updated in November 2020
.Dᴇsɪɢɴᴇᴅ & Cᴏᴅᴇᴅ ʙʏ Sᴏʟᴏ Cᴏᴅᴇs > sᴏʟᴏᴄᴏᴅᴇs.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ | solocodes.net
.Hᴀᴠᴇ Aɴʏ Qᴜᴇsᴛɪᴏɴs? Sᴇɴᴅ Mᴇ ᴀɴ Asᴋ
.Dᴏ ɴᴏᴛ ʀᴇᴍᴏᴠᴇ ᴄʀᴇᴅɪᴛ
.Dᴏ ɴᴏᴛ ʀᴇᴅɪsᴛɪʙᴜᴛᴇ
.Dᴏ ɴᴏᴛ ᴄʟᴀɪᴍ ᴀs ʏᴏᴜʀ ᴏᴡɴ
.Dᴏ ɴᴏᴛ ᴜsᴇ ᴀs ᴀ ʙᴀsᴇ ᴄᴏᴅᴇ
.Dᴏ ɴᴏᴛ sᴛᴇᴀʟ
.Nᴏ ʜᴇᴀᴠʏ ᴛᴡᴇᴀᴋɪɴɢ
.Eᴅɪᴛ ᴍɪɴᴏʀ ᴛʜɪɴɢs ᴛᴏ ʏᴏᴜʀ ʟɪᴋɪɴɢ
------------------------------------>
<!DOCTYPE html>
<head>
<title>{Title}</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 name="color:Background" content="#f5f5f5"/>
<meta name="color:Accent One" content="#be40e5"/>
<meta name="color:Accent Two" content="#e53057"/>
<meta name="color:Blog Title" content="000"/>
<meta name="color:Desc Box" content="#fff"/>
<meta name="color:Desc Text" content="#000"/>
<meta name="color:Search Text" content="#000"/>
<meta name="color:Navigation Icon" content="#fff"/>
<meta name="color:Navigation Icon Background" content="#000"/>
<meta name="color:Navigation Text" content="#e53057"/>
<meta name="color:Text" content="#fff"/>
<meta name="color:Links" content="#e53057"/>
<meta name="color:Hover" content="#000"/>
<meta name="color:Bold" content="#000"/>
<meta name="color:Italic" content="#ddd"/>
<meta name="color:Border" content="#111"/>
<meta name="color:Posts" content="#fff"/>
<meta name="color:Post Info" content="#fff"/>
<meta name="color:Post Info Background" content="#fff"/>
<meta name="color:Pagination" content="#ff"/>
<meta name="text:Blog Title" content="melancholy"/>
<meta name="text:Quote" content="My dear, melancholy. Call out my name."/>
<meta name="if:Hover Tags" content="0"/>
<meta name="if:Blog Title Strike" content=""/>
<meta name="text:Tags Font Size" content="11"/>
<meta name="text:Posts Margin" content="280"/>
<meta name="select:Title Font" content="Poppins"/>
<meta name="select:Title Font" content="Muli"/>
<meta name="select:Title Font" content="Open Sans"/>
<meta name="select:Title Font" content="Ubuntu"/>
<meta name="select:Title Font" content="Lato"/>
<meta name="select:Title Font" content="Muli"/>
<meta name="select:Body Font" content="Poppins"/>
<meta name="select:Body Font" content="Lato"/>
<meta name="select:Body Font" content="Open Sans"/>
<meta name="select:Body Font" content="Ubuntu"/>
<meta name="select:Title Font Weight" content="400"/>
<meta name="select:Title Font Weight" content="600"/>
<meta name="select:Title Font Weight" content="700"/>
<meta name="select:Post Width" content="400px"/>
<meta name="select:Post Width" content="450px"/>
<meta name="select:Post Width" content="500px"/>
<meta name="select:Post Width" content="540px"/>
<meta name="text:Link 1" content="http://"/>
<meta name="text:Link 1 Title" content="Link 1"/>
<meta name="text:Link 2" content="http://"/>
<meta name="text:Link 2 Title" content="Link 2"/>
<meta name="text:Link 3" content="http://"/>
<meta name="text:Link 3 Title" content="Link 3"/>
<meta name="text:Link 4" content="http://"/>
<meta name="text:Link 4 Title" content="Link 4"/>
<meta name="text:Link 5" content="http://"/>
<meta name="text:Link 5 Title" content="Link 5"/>
<meta name="text:Link 6" content="http://"/>
<meta name="text:Link 6 Title" content="Link 6"/>
<meta name="image:Background" content=""/>
<meta name="image:Sidebar" content =""/>
<meta name="image:Icon" content=""/>
<!--- HONEYBEE, GOOGLE MATERIAL & LINEAR ICONS FONT ICONS --->
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css"><link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><script defer src="https://use.fontawesome.com/releases/v5.10.1/js/all.js"></script><script defer src="https://use.fontawesome.com/releases/v5.10.1/js/v4-shims.js"></script>
<!----- GOOGLE FONTS ----->
<link href="https://fonts.googleapis.com/css?family=Lato:400,700|Muli:400,600,700|Poppins:400,500,600,700|Open+Sans:400,600,700|Ubuntu:400,700&display=swap" rel="stylesheet">
<!----- COLOR AUDIO ----->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
// audio player
var $audio = $('iframe.tumblr_audio_player');
$audio.load(function() {
$(this).contents().find('head').append('<style type="text/css">' +
'.audio-player { background:{color:Accent One}; color:{color:Text} !important; }' + '.audio-player .audio-info .track-artist { {color:Text} !important; }' + '</style>');
});
});
</script>
<!--- SOUNDCLOUD PLAYER--->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
// minimal soundcloud player © shythemes.tumblr
$(document).ready(function(){
var color = '{color:Accent One}'; // color of play button (hex)
$('.soundcloud_audio_player').each(function(){
$(this).attr({ src: $(this).attr('src').split('&')[0] + '&liking=false&sharing=false&auto_play=false&show_comments=false&continuous_play=false&buying=false&show_playcount=false&show_artwork=true&origin=tumblr&color=' + color.split('#')[1], height: 116, width: '100%' });
});
});
</script>
<!--- TOOLTIPS --->
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips();
});
})(jQuery);
</script>
<style>
* {box-sizing: border-box}
/* SCROLLBAR */
::-webkit-scrollbar-thumb {
height:122px;
border:1.7px solid transparent;
background: {color:Accent One};}
::-webkit-scrollbar {
width:6px;
height:7px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:2px solid transparent;
border-bottom:2px solid transparent;}
/* TOOLTIPS */
#s-m-t-tooltip {
display: block;
margin: 15px;
color:{color:Text};
background:{color:Posts};
border:1px solid {color:Border};
font-family:{select:Body Font};
font-size:0.75em;
font-weight:700;
text-align:center;
border-radius:3px;
padding:4px;
margin-left:25px;
letter-spacing:1px;
text-transform: uppercase;
line-height:130%;
min-width:40px;
max-width:150px;
z-index: 9999999999;}
iframe.tmblr-iframe {
z-index:99999999!important;
top:8px!important;
right:50px!important;
opacity:0;
transition: all 0.3s ease 0s;
/* delete invert(1) from here */
filter:invert(1) contrast(150%);
-webkit-filter:invert(1) contrast(150%);
-o-filter:invert(1) contrast(150%);
-moz-filter:invert(1) contrast(150%);
-ms-filter:invert(1) contrast(150%);
/* to here if your blog has a dark background */
transform:scale(0.65);
transform-origin:100% 0;
-webkit-transform:scale(0.65);
-webkit-transform-origin:100% 0;
-o-transform:scale(0.65);
-o-transform-origin:100% 0;
-moz-transform:scale(0.65);
-moz-transform-origin:100% 0;
-ms-transform:scale(0.65);
-ms-transform-origin:100% 0;}
iframe.tmblr-iframe:hover {
opacity:0.8!important;}
.hcontrols {
position:fixed;
top:13px;
right:25px;
z-index:999;
color:{color:Text};}
.hcontrols svg {
z-index:9999;
width:20px;
height:20px;
font-size:1.1em;
text-align:center;
line-height:23px;
padding:4px;
color:{color:Text};
background-color:{color:Posts};
border:1px solid {color:Border};}
.hcontrols svg path {
color:{color:Text};}
.plus path, {
stroke-width:0.7px;
color:{color:Text};}
/* LIGHTBOX */
.vignette, #vignette {
opacity:0; }
.lightbox-image, #tumblr_lightbox img {
box-shadow:none !important;
border-radius:0 !important;
max-width:none;
border:5px solid #fff !important;
-moz-box-sizing:border-box;
box-sizing:border-box;
z-index:999999999999999999999 !important;}
.tmblr-lightbox, #tumblr_lightbox {
background-color:rgba(245,245,245,.84) !important;
z-index:999999999999999999999 !important;}
.lightbox-caption, #tumblr_lightbox_caption {
visibility:hidden; }
/* Set height of body and the document to 100% */
body, html {
height: 100%;
margin: 0;
font-size:12px;
font-family:{select:Body Font};
overflow-x:hidden;
background-image:url('{image:Background}');
background-repeat:repeat;
background-attachment:fixed;
background-color:{color:Background};}
/* FIXED IMAGES + VIDEOS + DO NOT TOUCH */vg
img, embed, object, video {
margin:auto;
max-width: 100%;
border: none;
outline: none;}
select, textarea, input, a {
outline: none; }
small{
font-size: 90%;}
big{
font-size: 110%;}
/* CHAT LINES */
.lines {
line-height:14px;
padding:3px;
font-family:{select:Body Font};
color:{color:Text};}
/* ENTRY TITLES */
h1 {
padding-top:0px;
padding-left:5px;
width:{select:Post Width} - 10px;
letter-spacing:1.5px;
font-size:1em;
text-transform:uppercase;
font-weight:600;
text-align:left;
background:{color:Posts};
color:{color:Text};
line-height:22px;}
/* ENTRY BODY TEXT */
h2 {
width:100%;
padding-bottom:10px;
line-height:16px;
letter-spacing: 1px;
font-weight:400;
font-size:1em;
font-family:{select:Body Font};
color:{color:Text};}
p { padding:5px;background:{color:Posts};}
/* ENTRY LINKS / BODY LINKS */
a:link, a:active, a:visited {
clear:both;
z-index:2!Important;
color: {color:Link};
text-decoration:none;}
a:hover {
clear:both;
z-index:99999999!Important;
color: {color:Hover};
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;}
/* BOLD TEXT / DESIGN & COLOR */
b, strong {
color:{color:Bold};
font-style:bold;}
/* ITALIC TEXT / DESIGN & COLOR */
i, em, italic {
color:{color:Italic};
font-style:italic;}
/* BLOCKQUOTE , PARAGRAPHS / BLOCKQUOTE IMAGES */
p { padding:5px; background:{color:Posts};}
.caption li {font:0.90em, {select:Body Font}, sans-serif; line-height:22px;}
p,blockquote{line-height:150%;}
p,blockquote,ul,ol{margin:10px;}
blockquote p{margin:10px 0;}
blockquote p:first-child{margin:0 0 10px;}
blockquote p:last-child{margin:10px 0 0;}
blockquote p:only-child{margin:0;}
blockquote {
width:{select:Post Width} - 10px;
font:1em {select:Body Font}, sans-serif;
line-height:14px;
border-left:1px solid {color:Border};
background:{color:Posts};}
blockquote p{
margin:auto;
padding:auto;}
blockquote img, blockquote a img {
width:500px;
height:auto;}
blockquote a {color:{color:Text};}
img a {border:none; max-width:500px;}
/* LINK BLOG POST */
.linktitle h1 {
width:auto;
margin-top:-3px;
padding:none;
height:80px;
line-height:80px;
text-align:center;
background:{color:Accent Two};}
/* ENTIRE POSTS/SIDEBAR CONTAINER */
section {
display:block;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
clear: both;
margin: 0 auto;
width:calc(450px + {select:Post Width});}
/* SLIDEOUT NAVIATION MENU CONTAINER */
.sidenav {
height:100%;
width:0px;
position: fixed;
z-index: 1000000000000;
top: 0;
left: 0;
background-color:{color:Background};
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;}
/* NAVIGATION GRADIENT BACKGROUND */
.navback {
position:absolute;
left:calc(49% - 200px);
top:calc(52% - 150px);
width:400px;
height:300px;
background-image: linear-gradient(to bottom right, {color:Accent One}, {color:Accent Two});}
/* NAVIGATION MENU CONTAINER */
.nav {
position:absolute;
z-index:9999999999;
left:calc(50% - 200px);
top:calc(50% - 150px);
width:400px;
height:300px;
background:{color:Posts};}
/* NAVIGATION TOP CONTAINER */
.navtop {
position:absolute;
width:400px;
height:70px;
margin-top:0px;
margin-left:0px;
border-bottom:1px solid {color:Border};}
/* NAVIGATION ICON IMAGE */
.navtop img {
margin-top:13px;
margin-left:340px;
width:45px;
height:45px;
border-radius:100px;
background-image: linear-gradient(to bottom right, {color:Accent One}, {color:Accent Two});}
/* NAVIGATION BLOG TITLE */
.navtitle {
position:absolute;
margin-left:10px;
margin-top:21px;
width:300px;
font-family:{select:Title Font}, sans-serif;
font-size:1.7em;
text-align:left;
font-weight:{select:Title Font Weight};
letter-spacing:1px;
text-transform:uppercase;
color:{color:Blog Title};}
/* NAVIGATION QUOTE */
.navquote {
position:absolute;
width:400px;
height:50px;
margin-top:80px;
margin-left:0px;
line-height:40px;
letter-spacing:1px;
font-family:{select:Body Font}, sans-serif;
border-bottom:1px solid {color:Border};}
/* NAVIGATION MENU LINKS CONTAINER*/
.links {
position:absolute;
margin-left:45px;
margin-top:150px;}
.links a {
display:inline-block;
width:100px;
padding:15px;
margin-bottom:20px;
transition: 0.3s;
text-decoration: none;
font-size:1em;
text-align:left;
letter-spacing:1px;
font-family:{select:Title Font}, sans-serif;
font-weight:400;
color:{color:Navigation Text};}
.links span {font-weight:700;}
/* NAVIGATION MENU LINKS HOVER */
.links a:hover {
color:{color:Hover};}
/* SLIDEOUT NAVIATION MENU CLOSE BUTTON */
.sidenav .closebtn {
position: absolute;
top: 0;
right:21px;
font-size:3em;
margin-left: 50px;
color:{color:Text};}
/* NAVIATION MENU ICON */
.material-icons {
position:fixed;
z-index:9999999999999;
margin-left:10px;
margin-top:10px;
width:30px;
height:30px;
font-size:1.5em;
text-align:center;
line-height:30px;
cursor:pointer;
color:{color:Navigation Icon};
background:{color:Navigation Icon Background};}
/* SIDEBAR CONTAINER */
.sidebar {
position:fixed;
clear:both;
margin-left:0px;
top:40px;
width:300px;
height:600px;}
/* SIDEBAR ICON IMAGE */
.sidebar img {
position:fixed;
margin-left:0px;
margin-top:0px;
width:300px;
height:300px;}
/* SIDEBAR TITLE */
.blogtitle {
position:fixed;
margin-top:230px;
width:297px;
font-family:{select:Title Font}, sans-serif;
font-size:3em;
text-align:center;
font-weight:{select:Title Font Weight};
letter-spacing:1px;
text-transform:uppercase;
color:{color:Blog Title};
{block:IfBlogTitleStrike}
text-decoration:line-through;
text-decoration-color:{color:Accent One};
{/block:IfBlogTitleStrike}}
.descbox {
position:fixed;
margin-top:320px;
margin-left:0px;
background:#000;
width:300px;
height:250px;
background:{color:Desc Box};}
.main {
position:fixed;
margin-top:22px;
text-align:center;
width:300px;}
.main a {
width:auto;
letter-spacing:1px;
text-align:center;
text-transform:uppercase;
font-size:0.85em;
font-weight:700;
font-family:{select:Title Font}, sans-serif;
color:{color:Navigation Text};}
.descback {
position:fixed;
z-index:9;
margin-top:70px;
margin-left:35px;
width:210px;
height:100px;
background:{color:Accent Two};}
/* SIDEBAR ABOUT BOX DESCRIPTION */
.desc {
position:fixed;
z-index:9999999999999999999;
margin-top:60px;
margin-left:45px;
width:210px;
height:100px;
letter-spacing:1.2px;
font-weight:400;
text-align:center;
font-size:0.90em;
font-family:{select:Body Font}, sans-serif;
text-transform:normal;
padding:10px;
line-height:16px;
color:{color:Desc Text};
background:{color:Accent One};}
/* SEARCH BAR */
.search .query {
position:fixed;
z-index:9;
margin-left:35px;
margin-top:200px;
border:0;
outline:0;
width:225px;
overflow:hidden;
padding-bottom:7px;
padding-left:1px;
font:bold 0.85em {select:Body Font}, sans-serif;
font-weight:600;
font-style:bold;
letter-spacing:1px;
text-align:left;
text-transform:uppercase;
color:{color:Search Text};
background:{color:Desc Box};
border-bottom:1px solid {color:Accent Two};}
::-webkit-input-placeholder {color: inherit;}
:-moz-placeholder {color: inherit; opacity:1;}
::-moz-placeholder {color: inherit; opacity:1;}
:-ms-input-placeholder {color: inherit;}
input:focus::-webkit-input-placeholder {color: transparent;}
input:focus:-moz-placeholder {color: transparent;}
input:focus::-moz-placeholder {color: transparent;}
input:focus:-ms-input-placeholder { color: transparent;}
/* SEARCH ICON */
.lnr-magnifier {
position:fixed;
z-index:9999999999999;
overflow:hidden;
margin-top:190px;
margin-left:235px;
width:35px;
height:36px;
padding:10px;
text-align:center;
font-weight:900;
font-size:1.1em;
line-height:18px;
color:{color:Search Text};}
/* POSTS AND ENTRIES */
.posts {
position:relative;
z-index:999;
top:50px;
left:450px;
float:right;}
.posts a {z-index:999;}
.posts a:hover {z-index:999;}
/* ENTRIES */
.entry {
clear:both;
margin-bottom:{text:Posts Margin}px;
width:{select:Post Width};
float:left;
padding:10px;
border:1px solid {color:Border};
background:{color:Posts};}
.entry a {
z-index:99999999;}
/* ENTRY IMAGE */
.entry img {
margin:0px;
height:auto;
width:{select:Post Width} - 5px;}
/* CAPTIONS CONTAINER */
.caption iframe{
display:block;
max-width:100%;
overflow:hidden;}
.caption {
font:1em {select:Body Font}, sans-serif;
font-weight:{select:Body Font Weight};
margin:10px 0;}
.tumblr_parent {
border:0;
margin:4px 0;
padding:20px;}
.tumblr_parent blockquote {margin:5px 0;}
{block:PermalinkPage}
.tumblr_parent {padding:25px;}
{/block:PermalinkPage}
.caption.nospace .tumblr_parent
{border:0;
padding-top:0;}
/* CAPTIONS LINK STYLING */
.caption a {
color:{color:Text};}
/* CAPTIONS TUMBLR USERNAME STYLING */
.caption .tumblr_blog {
color:{color:Text}
font-size:0.90em;
font-family:{select:Body Font}, sans-serif;
font-weight:800;
text-transform:uppercase;
letter-spacing:1px;}
/* CAPTIONS TUMBLR USERNAME CONTAINER */
.tumblr_blog {
display:inline-block;
vertical-align:middle;
text-align:left;}
/* CAPTIONS AVATAR */
.caption .tumblr_avatar {
width:20px;
height:20px;
margin-right:7px;
display:inline-block;
vertical-align:middle;
border-radius:100px;}
/* TOP POST + ENTRY INFO */
.topinfo {
position:absolute;
z-index:9!Important;
margin-left:-45px;
margin-top:0px;
text-align:left;
font:0.75em 'Space Mono', sans-serif;
font-weight:600;
letter-spacing:1.5px;
text-transform:uppercase;}
/* POST INFO ICONS */
.posticon {
position:absolute;
z-index:9;
margin-left:-100px;
margin-top:-10px;
float:left;
width:auto
text-align:center;
font-size:1.2em;
line-height:15px;
text-align:right;
font-family:{select:Title Font}, sans-serif;
font-weight:{select:Title Font Weight};
color:{color:Text};}
.posticon a {text-align:right;color:{color:Text};}
/* POST INFO TIME */
.time {
position:absolute;
margin-left:-95px;
margin-top:10px;
float:left;
width:auto;
height:27px;
padding:6px;
text-align:right;
text-transform:uppercase;
font-size:1em;
line-height:12px;
font-weight:400;
letter-spacing:1px;
outline:none;
font-family:'Poppins', sans-serif;
color:{color:Text};}
/* BOTTOM POST + ENTRY INFO */
.bottominfo {
position:absolute;
z-index:2;
width:calc({select:Post Width} - 2px);
margin-left:0px;
margin:-10px;
margin-top:5px;
margin-left:-10px;
padding-top:10px;
padding-bottom:10px;
text-align:left;
letter-spacing:1.5px;
border-top:1px solid {color:Border};
text-transform:uppercase;
background:{color:Post Info Background};}
/* BOTTOM POST + ENTRY INFO STYING */
.bottominfo a {
z-index:9;
display:inline-block;
width:32%;
padding:7px;
font-family:{select:Body Font}, sans-serif;
font-size:0.85em;
font-weight:600;
text-align:center;
letter-spacing:1px;
text-transform:uppercase;
color:{color:Post Info};}
/* TAGS */
.tags {
position:absolute;
width:{select:Post Width};
margin-left:-9px;
margin-top:53px;
z-index:9;
text-align:center;
line-height:20px;}
/* TAGS STYLING */
.tags a {
width:{select:Post Size};
display:inline;
padding:6px;
text-decoration:none;
font-family:{select:Body Font}, sans-serif;
font-size:{text:Tags Font Size}px;
font-style:normal;
text-align:left;
z-index:9;
line-height:30px;
letter-spacing:1px;
font-weight:700;
color:{color:Text};}
/* TAGS HOVER */
.tags a:hover { color:{color:Hover}; }
{block:IfHoverTags}
.tags {opacity:0;}
.entry:hover .tags {opacity:1;}
{/block:IfHoverTags}
/* ASK POSTS */
.asker {
font:0.90em {select:Title Font}, sans-serif;
letter-spacing:1.5px;
font-weight:600;
font-style:bold;
color:{color:Text};}
/* ASKER URL */
.asker a {
background:{color:Accent One};
color:{color:Text};
padding:4px;
border-radius:3px;
font:1em 'Poppins', sans-serif;
text-transform:uppercase;
letter-spacing:1.5px;
font-weight:600;
font-style:bold;
border:none;}
user{
position:absolute;
margin-top:8px;
padding-bottom:2px;}
/* QUESTION */
.question {
margin-top:-15px;
height: auto;
padding:10px;
font:1em 'Muli';
font-weight:600;
line-height:19px;
text-transform:normal;
letter-spacing:1px;
background:{color:Posts};
color:{color:Text};}
/* ANSWER */
.answer {
padding:10px;
font:0.93em 'Poppins', sans-serif;
font-weight:400;
line-height:14px;
text-transform:normal;
letter-spacing:1.5px;
background:{color:Posts};
color:{color:Text};}
/* ANSWER BLOCKQUOTE */
.answer blockquote {
padding:10px;
font:0.93em 'Poppins', sans-serif;
font-weight:400;
line-height:14px;
text-transform:normal;
letter-spacing:1.5px;
background:{color:Posts};
color:{color:Text};}
/* POST NOTES */
.notes {
position:absolute;
z-index:999999999999;
width:{select:Post Size};
height:100%;
padding:5px;
list-style-type: none;
margin-top:70px;
font-size:0.80em;
font-family:{select:Body Font}, sans-serif;
font-style:normal;
letter-spacing:1.5px;
margin-left:0px;
font-weight:400;
text-transform:uppercase;
line-height:25px;
color:{color:Text};}
.notes a {
border:none;
color:{color:Text}; }
ol.notes li.note img.avatar {
vertical-align: -4px;
margin-right: 10px;
width: 16px;
border: 0;
border-radius:3px;
height: 16px;
color:{color:Text};}
a.avatar_frame {
border: 0;}
/* PAGINATION */
.pagination {
width:{select:Post Width};
z-index:100;
display:block;
text-align:center;
font:1em 'Poppins', sans-serif;
font-weight:700;
text-transform:uppercase;
color:{color:Text};}
.pagination a {
margin: 0 4px;
display: inline-block;
text-align: center;
letter-spacing:1px;
line-height: 20px;
font-weight:700;
font:1em 'Poppins', sans-serif;
color:{color:Text};}
.pagination a:hover {
color:{color:Hover};}
/* AUDIO POSTS */
.tumblr_audio_player {
height:100px;
clear:both;
width:calc({select:Post Width} - 20px);}
.soundcloud_audio_player
{width: 100%;}
{CustomCSS}
</style>
<!--- UNEST CAPTIONS --->
<script src="https://static.tumblr.com/emvnqzg/cK3o6sxeb/jquery.truncate.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
<script> $(function(){ $('.entry').unnest({
yourCaption: '.caption',
originalPostCaptionUsername: true ,
tumblrAvatars: true,
newCaptionUsername:false,
tumblrAvatarClass: ".tumblr_avatar",
usernameColon: false
}); }); </script>
<!--- PXU PHOTOSET --->
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js”></script>
<link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
<script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
<script>
$(document).ready(function(){
$('.photo-slideshow').pxuPhotoset({
lightbox: true,
rounded: false,
gutter: '4px',
borderRadius: '0px',
photoset: '.photo-slideshow',
photoWrap: '.photo-data',
photo: '.pxu-photo'
});
});
</script>
<!--- FULL SCREEN NAVIGATION --->
<script>
/* Open the sidenav */
function openNav() {
document.getElementById("mySidenav").style.width = "100%";
}
/* Close/hide the sidenav */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</style>
</head>
<body>
<div class="hcontrols"><svg viewBox="0 0 24 24" class="plus">
<path d="M 12 2 L 12 22 M 2 12 L 22 12" stroke="{color:Text}" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" />
</svg></div></div>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="navback"></div>
<div class="nav">
<div class="navtop">
<div class="navtitle">{text:Blog Title}</div>
<div class="navtopimage"><img src="{image:Icon}"></div>
</div>
<div class="navquote"><center> <span class="th th-quote-up"></span>
{text:Quote} <span class="th th-quote-down"></span>
</center> </div>
<div class="links">
{block:ifLink1Title}
<a href="{text:Link 1}" title="{text:Link 1 Title}"><span>.01</span> {text:Link 1 Title}</a>
{block:ifLink2Title}
<a href="{text:Link 2}" title="{text:Link 2 Title}"><span>.02</span> {text:Link 2 Title}</a>
{block:ifLink3Title}
<a href="{text:Link 3}" title="{text:Link 3 Title}"><span>.03</span> {text:Link 3 Title}</a>
{/block:ifLink3Title} <br>
{block:ifLink4Title}
<a href="{text:Link 4}" title="{text:Link 4 Title}"><span>.04</span> {text:Link 4 Title}</a>
{/block:ifLink4Title}
{block:ifLink5Title}
<a href="{text:Link 5}" title="{text:Link 5 Title}"><span>.05</span> {text:Link 5 Title}</a>
{/block:ifLink5Title}
{block:ifLink6Title}
<a href="{text:Link 6}" title="{text:Link 6 Title}"><span>.06</span> {text:Link 6 Title}</a>
{/block:ifLink6Title}
</div>
</div>
</div>
<section>
<div class="sidebar">
<div class="sidebarimage"><img src="{image:Sidebar}"></div>
<div class="blogtitle">{text:Blog Title}</div>
<span onclick="openNav()" title="navigation"><i class="material-icons">sort</i></span>
</div>
<div class="descbox">
<div class="main">
<a href="/" title="return home">home</a> ·
<a href="/ask" title="ask">ask</a> ·
<a href="/archive" title="archive">archive</a> ·
<a href="https://solocodes.tumblr.com" title="theme credit">theme</a>
</div>
<div class="descback"></div>
<div class="desc">
<center> <span class="th th-quote-up"></span></center>
<br> {Description}</div>
<span class="lnr lnr-magnifier"></span>
<form action="/search" method="get" class="search">
<input type="text" name="q" value="{SearchQuery}" class="query" placeholder="Search blog...">
</form>
</div>
</div>
<div class="posts">
{block:Posts}
<div class="entry">
<div class="time">{12HourWithZero}:{Minutes} {AmPm}</div>
{block:Text}
<div class="posticon"><a href="{Permalink}" title="Text Post"><span class="th th-information-o"></span> Text</a></div>
{block:Title}<a href="{Permalink}"><h1>{Title}</h1></a>{/block:Title}
<h2>{Body}<h2>{/block:Text}
{block:Photo}
<div class="posticon"><a href="{Permalink}" title="Photo Post"><span class="th th-picture-o"></span> Photo</a></div>
<img src="{PhotoURL-HighRes}" width="100%"></center>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Photo}
{block:Photoset}
<div class="posticon"><a href="{Permalink}" title="Photoset Post"><span class="th th-layers"></span> Picset</a></div>
<div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Photoset}
{block:Chat}
<div class="posticon"><a href="{Permalink}" title="Chat Post"><span class="th th-chat-bubble-o"></span> Chat </a></div>
<div class="chat">{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}
<div class="lines">{block:Label}<b>{Label}</b>{/block:Label} {Line}</div><br>
{/block:Lines}</div>
{/block:Chat}
{block:Quote}
<div class="posticon"><a href="{Permalink}" title="Quote Post"><span class="th th-quote-up"></span> Quote </a></div>
<div class="quote">
"{Quote}"
</div>
<div class="source">
— {Source}
</div>
{/block:Quote}
{block:Link}
<div class="posticon"><a href="{Permalink}" title="Link Post"><span class="th th-link"></span> Link </a></div>
<div class="linktitle">
<a href="{URL}"><h1>{Name}</h1></a>
</div>
{block:Description}
<p>{Description}</p>
{/block:Description}
{/block:Link}
{block:Answer}
<div class="posticon"><a href="{Permalink}" title="Ask Post"><span class="th th-question-o"></span> Ask </a></div>
<div class="asker">
<br><div class="question">
<user> {Asker} </user>
<br><br>
{Question}</div>
</div>
<div class="answer">
<blockquote>{Answer}</blockquote>
</div>
{/block:Answer}
{block:Video}
<div class="posticon"><a href="{Permalink}" title="Video Post"><span class="th th-tv"></span> Video</a></div>
<div class="video" >{Video-500}</div>
{block:IfShowCaption}
{block:Caption}<div id="caption">{Caption}</div>{/block:Caption}
{/block:IfShowCaption}
{/block:Video}
{block:Audio}
<div class="posticon"><a href="{Permalink}" title="Audio Post"><span class="th th-music-o"></span> Tune </a> </div>
<div class="tumblr_audio_player">
{block:AudioEmbed}{AudioEmbed color="white"}{/block:AudioEmbed}
</div>
{/block:Audio}
{block:Date}
<div class="bottominfo">
<a href="{ReblogURL}" target="_blank" title="reblog this post">Reblog</a>
<a href="{Permalink}" title="permalink">{NoteCountWithLabel}</a>
{block:RebloggedFrom}
<a href="{ReblogRootURL}" title=" source: {ReblogRootName}" data-hover="{lang:source}">Source</a>
{/block:RebloggedFrom}
{block:NotReblog}
<a href="{ReblogRootURL}" title="source: {Name}" data-hover="{lang:source}">Source</a>
{/block:NotReblog}
</div>
{/block:Date}
<div class="tags">
{block:Tags}<a href="{TagURL}">#{Tag} </a> {/block:Tags}
</div>
{block:PermalinkPage}{block:PostNotes}<div class="note">{PostNotes}{/block:PostNotes}</div>{/block:PermalinkPage}</div>
{/block:Posts}
<!-- {block:ContentSource}{SourceURL}{/block:ContentSource}{block:RebloggedFrom}{ReblogRootURL}{ReblogParentURL}{/block:RebloggedFrom} -->
{block:Pagination}
<div class="pagination">{block:PreviousPage}
<a href="{PreviousPage}"><</a>
{/block:PreviousPage}
{block:JumpPagination length="5"}
{block:CurrentPage}
<span class="current_page" style="color:{color:Text};letter-spacing:1px;">{PageNumber}</span>
{/block:CurrentPage}
{block:JumpPage}
<a class="jump_page" href="{URL}">{PageNumber}</a>
{/block:JumpPage}
{/block:JumpPagination}
{block:NextPage}
<a href="{NextPage}">></a>
{/block:NextPage}
<br><br>
</div>
{/block:Pagination}
</div>
</section>
</body>
</html>
___ ___ _ ___ ___ ___ ___ ___ ___
/ __|/ _ \| | / _ \ / __/ _ \| \| __/ __|
\__ \ (_) | |_| (_) | | (_| (_) | |) | _|\__ \r
|___/\___/|____\___/ \___\___/|___/|___|___/
**** Tʜᴇᴍᴇ: Mᴇʟᴀɴᴄʜᴏʟʏ ****
Theme Code updated in November 2020
.Dᴇsɪɢɴᴇᴅ & Cᴏᴅᴇᴅ ʙʏ Sᴏʟᴏ Cᴏᴅᴇs > sᴏʟᴏᴄᴏᴅᴇs.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ | solocodes.net
.Hᴀᴠᴇ Aɴʏ Qᴜᴇsᴛɪᴏɴs? Sᴇɴᴅ Mᴇ ᴀɴ Asᴋ
.Dᴏ ɴᴏᴛ ʀᴇᴍᴏᴠᴇ ᴄʀᴇᴅɪᴛ
.Dᴏ ɴᴏᴛ ʀᴇᴅɪsᴛɪʙᴜᴛᴇ
.Dᴏ ɴᴏᴛ ᴄʟᴀɪᴍ ᴀs ʏᴏᴜʀ ᴏᴡɴ
.Dᴏ ɴᴏᴛ ᴜsᴇ ᴀs ᴀ ʙᴀsᴇ ᴄᴏᴅᴇ
.Dᴏ ɴᴏᴛ sᴛᴇᴀʟ
.Nᴏ ʜᴇᴀᴠʏ ᴛᴡᴇᴀᴋɪɴɢ
.Eᴅɪᴛ ᴍɪɴᴏʀ ᴛʜɪɴɢs ᴛᴏ ʏᴏᴜʀ ʟɪᴋɪɴɢ
------------------------------------>
<!DOCTYPE html>
<head>
<title>{Title}</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 name="color:Background" content="#f5f5f5"/>
<meta name="color:Accent One" content="#be40e5"/>
<meta name="color:Accent Two" content="#e53057"/>
<meta name="color:Blog Title" content="000"/>
<meta name="color:Desc Box" content="#fff"/>
<meta name="color:Desc Text" content="#000"/>
<meta name="color:Search Text" content="#000"/>
<meta name="color:Navigation Icon" content="#fff"/>
<meta name="color:Navigation Icon Background" content="#000"/>
<meta name="color:Navigation Text" content="#e53057"/>
<meta name="color:Text" content="#fff"/>
<meta name="color:Links" content="#e53057"/>
<meta name="color:Hover" content="#000"/>
<meta name="color:Bold" content="#000"/>
<meta name="color:Italic" content="#ddd"/>
<meta name="color:Border" content="#111"/>
<meta name="color:Posts" content="#fff"/>
<meta name="color:Post Info" content="#fff"/>
<meta name="color:Post Info Background" content="#fff"/>
<meta name="color:Pagination" content="#ff"/>
<meta name="text:Blog Title" content="melancholy"/>
<meta name="text:Quote" content="My dear, melancholy. Call out my name."/>
<meta name="if:Hover Tags" content="0"/>
<meta name="if:Blog Title Strike" content=""/>
<meta name="text:Tags Font Size" content="11"/>
<meta name="text:Posts Margin" content="280"/>
<meta name="select:Title Font" content="Poppins"/>
<meta name="select:Title Font" content="Muli"/>
<meta name="select:Title Font" content="Open Sans"/>
<meta name="select:Title Font" content="Ubuntu"/>
<meta name="select:Title Font" content="Lato"/>
<meta name="select:Title Font" content="Muli"/>
<meta name="select:Body Font" content="Poppins"/>
<meta name="select:Body Font" content="Lato"/>
<meta name="select:Body Font" content="Open Sans"/>
<meta name="select:Body Font" content="Ubuntu"/>
<meta name="select:Title Font Weight" content="400"/>
<meta name="select:Title Font Weight" content="600"/>
<meta name="select:Title Font Weight" content="700"/>
<meta name="select:Post Width" content="400px"/>
<meta name="select:Post Width" content="450px"/>
<meta name="select:Post Width" content="500px"/>
<meta name="select:Post Width" content="540px"/>
<meta name="text:Link 1" content="http://"/>
<meta name="text:Link 1 Title" content="Link 1"/>
<meta name="text:Link 2" content="http://"/>
<meta name="text:Link 2 Title" content="Link 2"/>
<meta name="text:Link 3" content="http://"/>
<meta name="text:Link 3 Title" content="Link 3"/>
<meta name="text:Link 4" content="http://"/>
<meta name="text:Link 4 Title" content="Link 4"/>
<meta name="text:Link 5" content="http://"/>
<meta name="text:Link 5 Title" content="Link 5"/>
<meta name="text:Link 6" content="http://"/>
<meta name="text:Link 6 Title" content="Link 6"/>
<meta name="image:Background" content=""/>
<meta name="image:Sidebar" content =""/>
<meta name="image:Icon" content=""/>
<!--- HONEYBEE, GOOGLE MATERIAL & LINEAR ICONS FONT ICONS --->
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css"><link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><script defer src="https://use.fontawesome.com/releases/v5.10.1/js/all.js"></script><script defer src="https://use.fontawesome.com/releases/v5.10.1/js/v4-shims.js"></script>
<!----- GOOGLE FONTS ----->
<link href="https://fonts.googleapis.com/css?family=Lato:400,700|Muli:400,600,700|Poppins:400,500,600,700|Open+Sans:400,600,700|Ubuntu:400,700&display=swap" rel="stylesheet">
<!----- COLOR AUDIO ----->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
// audio player
var $audio = $('iframe.tumblr_audio_player');
$audio.load(function() {
$(this).contents().find('head').append('<style type="text/css">' +
'.audio-player { background:{color:Accent One}; color:{color:Text} !important; }' + '.audio-player .audio-info .track-artist { {color:Text} !important; }' + '</style>');
});
});
</script>
<!--- SOUNDCLOUD PLAYER--->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
// minimal soundcloud player © shythemes.tumblr
$(document).ready(function(){
var color = '{color:Accent One}'; // color of play button (hex)
$('.soundcloud_audio_player').each(function(){
$(this).attr({ src: $(this).attr('src').split('&')[0] + '&liking=false&sharing=false&auto_play=false&show_comments=false&continuous_play=false&buying=false&show_playcount=false&show_artwork=true&origin=tumblr&color=' + color.split('#')[1], height: 116, width: '100%' });
});
});
</script>
<!--- TOOLTIPS --->
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips();
});
})(jQuery);
</script>
<style>
* {box-sizing: border-box}
/* SCROLLBAR */
::-webkit-scrollbar-thumb {
height:122px;
border:1.7px solid transparent;
background: {color:Accent One};}
::-webkit-scrollbar {
width:6px;
height:7px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:2px solid transparent;
border-bottom:2px solid transparent;}
/* TOOLTIPS */
#s-m-t-tooltip {
display: block;
margin: 15px;
color:{color:Text};
background:{color:Posts};
border:1px solid {color:Border};
font-family:{select:Body Font};
font-size:0.75em;
font-weight:700;
text-align:center;
border-radius:3px;
padding:4px;
margin-left:25px;
letter-spacing:1px;
text-transform: uppercase;
line-height:130%;
min-width:40px;
max-width:150px;
z-index: 9999999999;}
iframe.tmblr-iframe {
z-index:99999999!important;
top:8px!important;
right:50px!important;
opacity:0;
transition: all 0.3s ease 0s;
/* delete invert(1) from here */
filter:invert(1) contrast(150%);
-webkit-filter:invert(1) contrast(150%);
-o-filter:invert(1) contrast(150%);
-moz-filter:invert(1) contrast(150%);
-ms-filter:invert(1) contrast(150%);
/* to here if your blog has a dark background */
transform:scale(0.65);
transform-origin:100% 0;
-webkit-transform:scale(0.65);
-webkit-transform-origin:100% 0;
-o-transform:scale(0.65);
-o-transform-origin:100% 0;
-moz-transform:scale(0.65);
-moz-transform-origin:100% 0;
-ms-transform:scale(0.65);
-ms-transform-origin:100% 0;}
iframe.tmblr-iframe:hover {
opacity:0.8!important;}
.hcontrols {
position:fixed;
top:13px;
right:25px;
z-index:999;
color:{color:Text};}
.hcontrols svg {
z-index:9999;
width:20px;
height:20px;
font-size:1.1em;
text-align:center;
line-height:23px;
padding:4px;
color:{color:Text};
background-color:{color:Posts};
border:1px solid {color:Border};}
.hcontrols svg path {
color:{color:Text};}
.plus path, {
stroke-width:0.7px;
color:{color:Text};}
/* LIGHTBOX */
.vignette, #vignette {
opacity:0; }
.lightbox-image, #tumblr_lightbox img {
box-shadow:none !important;
border-radius:0 !important;
max-width:none;
border:5px solid #fff !important;
-moz-box-sizing:border-box;
box-sizing:border-box;
z-index:999999999999999999999 !important;}
.tmblr-lightbox, #tumblr_lightbox {
background-color:rgba(245,245,245,.84) !important;
z-index:999999999999999999999 !important;}
.lightbox-caption, #tumblr_lightbox_caption {
visibility:hidden; }
/* Set height of body and the document to 100% */
body, html {
height: 100%;
margin: 0;
font-size:12px;
font-family:{select:Body Font};
overflow-x:hidden;
background-image:url('{image:Background}');
background-repeat:repeat;
background-attachment:fixed;
background-color:{color:Background};}
/* FIXED IMAGES + VIDEOS + DO NOT TOUCH */vg
img, embed, object, video {
margin:auto;
max-width: 100%;
border: none;
outline: none;}
select, textarea, input, a {
outline: none; }
small{
font-size: 90%;}
big{
font-size: 110%;}
/* CHAT LINES */
.lines {
line-height:14px;
padding:3px;
font-family:{select:Body Font};
color:{color:Text};}
/* ENTRY TITLES */
h1 {
padding-top:0px;
padding-left:5px;
width:{select:Post Width} - 10px;
letter-spacing:1.5px;
font-size:1em;
text-transform:uppercase;
font-weight:600;
text-align:left;
background:{color:Posts};
color:{color:Text};
line-height:22px;}
/* ENTRY BODY TEXT */
h2 {
width:100%;
padding-bottom:10px;
line-height:16px;
letter-spacing: 1px;
font-weight:400;
font-size:1em;
font-family:{select:Body Font};
color:{color:Text};}
p { padding:5px;background:{color:Posts};}
/* ENTRY LINKS / BODY LINKS */
a:link, a:active, a:visited {
clear:both;
z-index:2!Important;
color: {color:Link};
text-decoration:none;}
a:hover {
clear:both;
z-index:99999999!Important;
color: {color:Hover};
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s;}
/* BOLD TEXT / DESIGN & COLOR */
b, strong {
color:{color:Bold};
font-style:bold;}
/* ITALIC TEXT / DESIGN & COLOR */
i, em, italic {
color:{color:Italic};
font-style:italic;}
/* BLOCKQUOTE , PARAGRAPHS / BLOCKQUOTE IMAGES */
p { padding:5px; background:{color:Posts};}
.caption li {font:0.90em, {select:Body Font}, sans-serif; line-height:22px;}
p,blockquote{line-height:150%;}
p,blockquote,ul,ol{margin:10px;}
blockquote p{margin:10px 0;}
blockquote p:first-child{margin:0 0 10px;}
blockquote p:last-child{margin:10px 0 0;}
blockquote p:only-child{margin:0;}
blockquote {
width:{select:Post Width} - 10px;
font:1em {select:Body Font}, sans-serif;
line-height:14px;
border-left:1px solid {color:Border};
background:{color:Posts};}
blockquote p{
margin:auto;
padding:auto;}
blockquote img, blockquote a img {
width:500px;
height:auto;}
blockquote a {color:{color:Text};}
img a {border:none; max-width:500px;}
/* LINK BLOG POST */
.linktitle h1 {
width:auto;
margin-top:-3px;
padding:none;
height:80px;
line-height:80px;
text-align:center;
background:{color:Accent Two};}
/* ENTIRE POSTS/SIDEBAR CONTAINER */
section {
display:block;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
clear: both;
margin: 0 auto;
width:calc(450px + {select:Post Width});}
/* SLIDEOUT NAVIATION MENU CONTAINER */
.sidenav {
height:100%;
width:0px;
position: fixed;
z-index: 1000000000000;
top: 0;
left: 0;
background-color:{color:Background};
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;}
/* NAVIGATION GRADIENT BACKGROUND */
.navback {
position:absolute;
left:calc(49% - 200px);
top:calc(52% - 150px);
width:400px;
height:300px;
background-image: linear-gradient(to bottom right, {color:Accent One}, {color:Accent Two});}
/* NAVIGATION MENU CONTAINER */
.nav {
position:absolute;
z-index:9999999999;
left:calc(50% - 200px);
top:calc(50% - 150px);
width:400px;
height:300px;
background:{color:Posts};}
/* NAVIGATION TOP CONTAINER */
.navtop {
position:absolute;
width:400px;
height:70px;
margin-top:0px;
margin-left:0px;
border-bottom:1px solid {color:Border};}
/* NAVIGATION ICON IMAGE */
.navtop img {
margin-top:13px;
margin-left:340px;
width:45px;
height:45px;
border-radius:100px;
background-image: linear-gradient(to bottom right, {color:Accent One}, {color:Accent Two});}
/* NAVIGATION BLOG TITLE */
.navtitle {
position:absolute;
margin-left:10px;
margin-top:21px;
width:300px;
font-family:{select:Title Font}, sans-serif;
font-size:1.7em;
text-align:left;
font-weight:{select:Title Font Weight};
letter-spacing:1px;
text-transform:uppercase;
color:{color:Blog Title};}
/* NAVIGATION QUOTE */
.navquote {
position:absolute;
width:400px;
height:50px;
margin-top:80px;
margin-left:0px;
line-height:40px;
letter-spacing:1px;
font-family:{select:Body Font}, sans-serif;
border-bottom:1px solid {color:Border};}
/* NAVIGATION MENU LINKS CONTAINER*/
.links {
position:absolute;
margin-left:45px;
margin-top:150px;}
.links a {
display:inline-block;
width:100px;
padding:15px;
margin-bottom:20px;
transition: 0.3s;
text-decoration: none;
font-size:1em;
text-align:left;
letter-spacing:1px;
font-family:{select:Title Font}, sans-serif;
font-weight:400;
color:{color:Navigation Text};}
.links span {font-weight:700;}
/* NAVIGATION MENU LINKS HOVER */
.links a:hover {
color:{color:Hover};}
/* SLIDEOUT NAVIATION MENU CLOSE BUTTON */
.sidenav .closebtn {
position: absolute;
top: 0;
right:21px;
font-size:3em;
margin-left: 50px;
color:{color:Text};}
/* NAVIATION MENU ICON */
.material-icons {
position:fixed;
z-index:9999999999999;
margin-left:10px;
margin-top:10px;
width:30px;
height:30px;
font-size:1.5em;
text-align:center;
line-height:30px;
cursor:pointer;
color:{color:Navigation Icon};
background:{color:Navigation Icon Background};}
/* SIDEBAR CONTAINER */
.sidebar {
position:fixed;
clear:both;
margin-left:0px;
top:40px;
width:300px;
height:600px;}
/* SIDEBAR ICON IMAGE */
.sidebar img {
position:fixed;
margin-left:0px;
margin-top:0px;
width:300px;
height:300px;}
/* SIDEBAR TITLE */
.blogtitle {
position:fixed;
margin-top:230px;
width:297px;
font-family:{select:Title Font}, sans-serif;
font-size:3em;
text-align:center;
font-weight:{select:Title Font Weight};
letter-spacing:1px;
text-transform:uppercase;
color:{color:Blog Title};
{block:IfBlogTitleStrike}
text-decoration:line-through;
text-decoration-color:{color:Accent One};
{/block:IfBlogTitleStrike}}
.descbox {
position:fixed;
margin-top:320px;
margin-left:0px;
background:#000;
width:300px;
height:250px;
background:{color:Desc Box};}
.main {
position:fixed;
margin-top:22px;
text-align:center;
width:300px;}
.main a {
width:auto;
letter-spacing:1px;
text-align:center;
text-transform:uppercase;
font-size:0.85em;
font-weight:700;
font-family:{select:Title Font}, sans-serif;
color:{color:Navigation Text};}
.descback {
position:fixed;
z-index:9;
margin-top:70px;
margin-left:35px;
width:210px;
height:100px;
background:{color:Accent Two};}
/* SIDEBAR ABOUT BOX DESCRIPTION */
.desc {
position:fixed;
z-index:9999999999999999999;
margin-top:60px;
margin-left:45px;
width:210px;
height:100px;
letter-spacing:1.2px;
font-weight:400;
text-align:center;
font-size:0.90em;
font-family:{select:Body Font}, sans-serif;
text-transform:normal;
padding:10px;
line-height:16px;
color:{color:Desc Text};
background:{color:Accent One};}
/* SEARCH BAR */
.search .query {
position:fixed;
z-index:9;
margin-left:35px;
margin-top:200px;
border:0;
outline:0;
width:225px;
overflow:hidden;
padding-bottom:7px;
padding-left:1px;
font:bold 0.85em {select:Body Font}, sans-serif;
font-weight:600;
font-style:bold;
letter-spacing:1px;
text-align:left;
text-transform:uppercase;
color:{color:Search Text};
background:{color:Desc Box};
border-bottom:1px solid {color:Accent Two};}
::-webkit-input-placeholder {color: inherit;}
:-moz-placeholder {color: inherit; opacity:1;}
::-moz-placeholder {color: inherit; opacity:1;}
:-ms-input-placeholder {color: inherit;}
input:focus::-webkit-input-placeholder {color: transparent;}
input:focus:-moz-placeholder {color: transparent;}
input:focus::-moz-placeholder {color: transparent;}
input:focus:-ms-input-placeholder { color: transparent;}
/* SEARCH ICON */
.lnr-magnifier {
position:fixed;
z-index:9999999999999;
overflow:hidden;
margin-top:190px;
margin-left:235px;
width:35px;
height:36px;
padding:10px;
text-align:center;
font-weight:900;
font-size:1.1em;
line-height:18px;
color:{color:Search Text};}
/* POSTS AND ENTRIES */
.posts {
position:relative;
z-index:999;
top:50px;
left:450px;
float:right;}
.posts a {z-index:999;}
.posts a:hover {z-index:999;}
/* ENTRIES */
.entry {
clear:both;
margin-bottom:{text:Posts Margin}px;
width:{select:Post Width};
float:left;
padding:10px;
border:1px solid {color:Border};
background:{color:Posts};}
.entry a {
z-index:99999999;}
/* ENTRY IMAGE */
.entry img {
margin:0px;
height:auto;
width:{select:Post Width} - 5px;}
/* CAPTIONS CONTAINER */
.caption iframe{
display:block;
max-width:100%;
overflow:hidden;}
.caption {
font:1em {select:Body Font}, sans-serif;
font-weight:{select:Body Font Weight};
margin:10px 0;}
.tumblr_parent {
border:0;
margin:4px 0;
padding:20px;}
.tumblr_parent blockquote {margin:5px 0;}
{block:PermalinkPage}
.tumblr_parent {padding:25px;}
{/block:PermalinkPage}
.caption.nospace .tumblr_parent
{border:0;
padding-top:0;}
/* CAPTIONS LINK STYLING */
.caption a {
color:{color:Text};}
/* CAPTIONS TUMBLR USERNAME STYLING */
.caption .tumblr_blog {
color:{color:Text}
font-size:0.90em;
font-family:{select:Body Font}, sans-serif;
font-weight:800;
text-transform:uppercase;
letter-spacing:1px;}
/* CAPTIONS TUMBLR USERNAME CONTAINER */
.tumblr_blog {
display:inline-block;
vertical-align:middle;
text-align:left;}
/* CAPTIONS AVATAR */
.caption .tumblr_avatar {
width:20px;
height:20px;
margin-right:7px;
display:inline-block;
vertical-align:middle;
border-radius:100px;}
/* TOP POST + ENTRY INFO */
.topinfo {
position:absolute;
z-index:9!Important;
margin-left:-45px;
margin-top:0px;
text-align:left;
font:0.75em 'Space Mono', sans-serif;
font-weight:600;
letter-spacing:1.5px;
text-transform:uppercase;}
/* POST INFO ICONS */
.posticon {
position:absolute;
z-index:9;
margin-left:-100px;
margin-top:-10px;
float:left;
width:auto
text-align:center;
font-size:1.2em;
line-height:15px;
text-align:right;
font-family:{select:Title Font}, sans-serif;
font-weight:{select:Title Font Weight};
color:{color:Text};}
.posticon a {text-align:right;color:{color:Text};}
/* POST INFO TIME */
.time {
position:absolute;
margin-left:-95px;
margin-top:10px;
float:left;
width:auto;
height:27px;
padding:6px;
text-align:right;
text-transform:uppercase;
font-size:1em;
line-height:12px;
font-weight:400;
letter-spacing:1px;
outline:none;
font-family:'Poppins', sans-serif;
color:{color:Text};}
/* BOTTOM POST + ENTRY INFO */
.bottominfo {
position:absolute;
z-index:2;
width:calc({select:Post Width} - 2px);
margin-left:0px;
margin:-10px;
margin-top:5px;
margin-left:-10px;
padding-top:10px;
padding-bottom:10px;
text-align:left;
letter-spacing:1.5px;
border-top:1px solid {color:Border};
text-transform:uppercase;
background:{color:Post Info Background};}
/* BOTTOM POST + ENTRY INFO STYING */
.bottominfo a {
z-index:9;
display:inline-block;
width:32%;
padding:7px;
font-family:{select:Body Font}, sans-serif;
font-size:0.85em;
font-weight:600;
text-align:center;
letter-spacing:1px;
text-transform:uppercase;
color:{color:Post Info};}
/* TAGS */
.tags {
position:absolute;
width:{select:Post Width};
margin-left:-9px;
margin-top:53px;
z-index:9;
text-align:center;
line-height:20px;}
/* TAGS STYLING */
.tags a {
width:{select:Post Size};
display:inline;
padding:6px;
text-decoration:none;
font-family:{select:Body Font}, sans-serif;
font-size:{text:Tags Font Size}px;
font-style:normal;
text-align:left;
z-index:9;
line-height:30px;
letter-spacing:1px;
font-weight:700;
color:{color:Text};}
/* TAGS HOVER */
.tags a:hover { color:{color:Hover}; }
{block:IfHoverTags}
.tags {opacity:0;}
.entry:hover .tags {opacity:1;}
{/block:IfHoverTags}
/* ASK POSTS */
.asker {
font:0.90em {select:Title Font}, sans-serif;
letter-spacing:1.5px;
font-weight:600;
font-style:bold;
color:{color:Text};}
/* ASKER URL */
.asker a {
background:{color:Accent One};
color:{color:Text};
padding:4px;
border-radius:3px;
font:1em 'Poppins', sans-serif;
text-transform:uppercase;
letter-spacing:1.5px;
font-weight:600;
font-style:bold;
border:none;}
user{
position:absolute;
margin-top:8px;
padding-bottom:2px;}
/* QUESTION */
.question {
margin-top:-15px;
height: auto;
padding:10px;
font:1em 'Muli';
font-weight:600;
line-height:19px;
text-transform:normal;
letter-spacing:1px;
background:{color:Posts};
color:{color:Text};}
/* ANSWER */
.answer {
padding:10px;
font:0.93em 'Poppins', sans-serif;
font-weight:400;
line-height:14px;
text-transform:normal;
letter-spacing:1.5px;
background:{color:Posts};
color:{color:Text};}
/* ANSWER BLOCKQUOTE */
.answer blockquote {
padding:10px;
font:0.93em 'Poppins', sans-serif;
font-weight:400;
line-height:14px;
text-transform:normal;
letter-spacing:1.5px;
background:{color:Posts};
color:{color:Text};}
/* POST NOTES */
.notes {
position:absolute;
z-index:999999999999;
width:{select:Post Size};
height:100%;
padding:5px;
list-style-type: none;
margin-top:70px;
font-size:0.80em;
font-family:{select:Body Font}, sans-serif;
font-style:normal;
letter-spacing:1.5px;
margin-left:0px;
font-weight:400;
text-transform:uppercase;
line-height:25px;
color:{color:Text};}
.notes a {
border:none;
color:{color:Text}; }
ol.notes li.note img.avatar {
vertical-align: -4px;
margin-right: 10px;
width: 16px;
border: 0;
border-radius:3px;
height: 16px;
color:{color:Text};}
a.avatar_frame {
border: 0;}
/* PAGINATION */
.pagination {
width:{select:Post Width};
z-index:100;
display:block;
text-align:center;
font:1em 'Poppins', sans-serif;
font-weight:700;
text-transform:uppercase;
color:{color:Text};}
.pagination a {
margin: 0 4px;
display: inline-block;
text-align: center;
letter-spacing:1px;
line-height: 20px;
font-weight:700;
font:1em 'Poppins', sans-serif;
color:{color:Text};}
.pagination a:hover {
color:{color:Hover};}
/* AUDIO POSTS */
.tumblr_audio_player {
height:100px;
clear:both;
width:calc({select:Post Width} - 20px);}
.soundcloud_audio_player
{width: 100%;}
{CustomCSS}
</style>
<!--- UNEST CAPTIONS --->
<script src="https://static.tumblr.com/emvnqzg/cK3o6sxeb/jquery.truncate.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
<script> $(function(){ $('.entry').unnest({
yourCaption: '.caption',
originalPostCaptionUsername: true ,
tumblrAvatars: true,
newCaptionUsername:false,
tumblrAvatarClass: ".tumblr_avatar",
usernameColon: false
}); }); </script>
<!--- PXU PHOTOSET --->
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js”></script>
<link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
<script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
<script>
$(document).ready(function(){
$('.photo-slideshow').pxuPhotoset({
lightbox: true,
rounded: false,
gutter: '4px',
borderRadius: '0px',
photoset: '.photo-slideshow',
photoWrap: '.photo-data',
photo: '.pxu-photo'
});
});
</script>
<!--- FULL SCREEN NAVIGATION --->
<script>
/* Open the sidenav */
function openNav() {
document.getElementById("mySidenav").style.width = "100%";
}
/* Close/hide the sidenav */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</style>
</head>
<body>
<div class="hcontrols"><svg viewBox="0 0 24 24" class="plus">
<path d="M 12 2 L 12 22 M 2 12 L 22 12" stroke="{color:Text}" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" />
</svg></div></div>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="navback"></div>
<div class="nav">
<div class="navtop">
<div class="navtitle">{text:Blog Title}</div>
<div class="navtopimage"><img src="{image:Icon}"></div>
</div>
<div class="navquote"><center> <span class="th th-quote-up"></span>
{text:Quote} <span class="th th-quote-down"></span>
</center> </div>
<div class="links">
{block:ifLink1Title}
<a href="{text:Link 1}" title="{text:Link 1 Title}"><span>.01</span> {text:Link 1 Title}</a>
{block:ifLink2Title}
<a href="{text:Link 2}" title="{text:Link 2 Title}"><span>.02</span> {text:Link 2 Title}</a>
{block:ifLink3Title}
<a href="{text:Link 3}" title="{text:Link 3 Title}"><span>.03</span> {text:Link 3 Title}</a>
{/block:ifLink3Title} <br>
{block:ifLink4Title}
<a href="{text:Link 4}" title="{text:Link 4 Title}"><span>.04</span> {text:Link 4 Title}</a>
{/block:ifLink4Title}
{block:ifLink5Title}
<a href="{text:Link 5}" title="{text:Link 5 Title}"><span>.05</span> {text:Link 5 Title}</a>
{/block:ifLink5Title}
{block:ifLink6Title}
<a href="{text:Link 6}" title="{text:Link 6 Title}"><span>.06</span> {text:Link 6 Title}</a>
{/block:ifLink6Title}
</div>
</div>
</div>
<section>
<div class="sidebar">
<div class="sidebarimage"><img src="{image:Sidebar}"></div>
<div class="blogtitle">{text:Blog Title}</div>
<span onclick="openNav()" title="navigation"><i class="material-icons">sort</i></span>
</div>
<div class="descbox">
<div class="main">
<a href="/" title="return home">home</a> ·
<a href="/ask" title="ask">ask</a> ·
<a href="/archive" title="archive">archive</a> ·
<a href="https://solocodes.tumblr.com" title="theme credit">theme</a>
</div>
<div class="descback"></div>
<div class="desc">
<center> <span class="th th-quote-up"></span></center>
<br> {Description}</div>
<span class="lnr lnr-magnifier"></span>
<form action="/search" method="get" class="search">
<input type="text" name="q" value="{SearchQuery}" class="query" placeholder="Search blog...">
</form>
</div>
</div>
<div class="posts">
{block:Posts}
<div class="entry">
<div class="time">{12HourWithZero}:{Minutes} {AmPm}</div>
{block:Text}
<div class="posticon"><a href="{Permalink}" title="Text Post"><span class="th th-information-o"></span> Text</a></div>
{block:Title}<a href="{Permalink}"><h1>{Title}</h1></a>{/block:Title}
<h2>{Body}<h2>{/block:Text}
{block:Photo}
<div class="posticon"><a href="{Permalink}" title="Photo Post"><span class="th th-picture-o"></span> Photo</a></div>
<img src="{PhotoURL-HighRes}" width="100%"></center>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Photo}
{block:Photoset}
<div class="posticon"><a href="{Permalink}" title="Photoset Post"><span class="th th-layers"></span> Picset</a></div>
<div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Photoset}
{block:Chat}
<div class="posticon"><a href="{Permalink}" title="Chat Post"><span class="th th-chat-bubble-o"></span> Chat </a></div>
<div class="chat">{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}
<div class="lines">{block:Label}<b>{Label}</b>{/block:Label} {Line}</div><br>
{/block:Lines}</div>
{/block:Chat}
{block:Quote}
<div class="posticon"><a href="{Permalink}" title="Quote Post"><span class="th th-quote-up"></span> Quote </a></div>
<div class="quote">
"{Quote}"
</div>
<div class="source">
— {Source}
</div>
{/block:Quote}
{block:Link}
<div class="posticon"><a href="{Permalink}" title="Link Post"><span class="th th-link"></span> Link </a></div>
<div class="linktitle">
<a href="{URL}"><h1>{Name}</h1></a>
</div>
{block:Description}
<p>{Description}</p>
{/block:Description}
{/block:Link}
{block:Answer}
<div class="posticon"><a href="{Permalink}" title="Ask Post"><span class="th th-question-o"></span> Ask </a></div>
<div class="asker">
<br><div class="question">
<user> {Asker} </user>
<br><br>
{Question}</div>
</div>
<div class="answer">
<blockquote>{Answer}</blockquote>
</div>
{/block:Answer}
{block:Video}
<div class="posticon"><a href="{Permalink}" title="Video Post"><span class="th th-tv"></span> Video</a></div>
<div class="video" >{Video-500}</div>
{block:IfShowCaption}
{block:Caption}<div id="caption">{Caption}</div>{/block:Caption}
{/block:IfShowCaption}
{/block:Video}
{block:Audio}
<div class="posticon"><a href="{Permalink}" title="Audio Post"><span class="th th-music-o"></span> Tune </a> </div>
<div class="tumblr_audio_player">
{block:AudioEmbed}{AudioEmbed color="white"}{/block:AudioEmbed}
</div>
{/block:Audio}
{block:Date}
<div class="bottominfo">
<a href="{ReblogURL}" target="_blank" title="reblog this post">Reblog</a>
<a href="{Permalink}" title="permalink">{NoteCountWithLabel}</a>
{block:RebloggedFrom}
<a href="{ReblogRootURL}" title=" source: {ReblogRootName}" data-hover="{lang:source}">Source</a>
{/block:RebloggedFrom}
{block:NotReblog}
<a href="{ReblogRootURL}" title="source: {Name}" data-hover="{lang:source}">Source</a>
{/block:NotReblog}
</div>
{/block:Date}
<div class="tags">
{block:Tags}<a href="{TagURL}">#{Tag} </a> {/block:Tags}
</div>
{block:PermalinkPage}{block:PostNotes}<div class="note">{PostNotes}{/block:PostNotes}</div>{/block:PermalinkPage}</div>
{/block:Posts}
<!-- {block:ContentSource}{SourceURL}{/block:ContentSource}{block:RebloggedFrom}{ReblogRootURL}{ReblogParentURL}{/block:RebloggedFrom} -->
{block:Pagination}
<div class="pagination">{block:PreviousPage}
<a href="{PreviousPage}"><</a>
{/block:PreviousPage}
{block:JumpPagination length="5"}
{block:CurrentPage}
<span class="current_page" style="color:{color:Text};letter-spacing:1px;">{PageNumber}</span>
{/block:CurrentPage}
{block:JumpPage}
<a class="jump_page" href="{URL}">{PageNumber}</a>
{/block:JumpPage}
{/block:JumpPagination}
{block:NextPage}
<a href="{NextPage}">></a>
{/block:NextPage}
<br><br>
</div>
{/block:Pagination}
</div>
</section>
</body>
</html>