Chronox Theme

<!DOCTYPE html>
<!--
* PLEASE DO NOT DELETE THIS PART OF THE CODE *
—————————————————————————————————————————————————————————————
╔═╗╦ ╦╦═╗╔═╗╔╗╔╔═╗═╗ ╦
║  ╠═╣╠╦╝║ ║║║║║ ║╔╩╦╝
╚═╝╩ ╩╩╚═╚═╝╝╚╝╚═╝╩ ╚═
      THEME : CHRONOX
      BY    : SORA KHAN
      BLOG  : LYRICIST.TUMBLR.COM
      ON    : 10TH DEC, 2016 — SATURDAY

              MORE THEMES AT : VISIONARYTHEMES.TUMBLR.COM
—————————————————————————————————————————————————————————————
-->
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<link href='https://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet' type='text/css'>

<link href='http://static.tumblr.com/lvdwday/EXMohyhaz/reset.css' rel='stylesheet' type='text/css'>
<link href='http://static.tumblr.com/lvdwday/vieohyh0w/chronoxcompressed.css' rel='stylesheet' type='text/css'>

<!--SCROLL TO TOP-->
{block:ifScrollToTopButton}
<script type="text/javascript">
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="{image:Scroll To Top Image}" style="filter:alpha(opacity=80); -moz-opacity:0.8; width:30px; height:30px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:10, offsety:0}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

state: {isvisible:false, shouldvisible:false},

scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},

keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},

togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},

init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll To Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}

scrolltotop.init()
{/block:ifScrollToTopButton}

</script>

    <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="select:Spacing" content="ten" title="10px">
    <meta name="select:Spacing" content="twenty" title="20px">
    <meta name="select:Spacing" content="thirty" title="30px">
    <meta name="select:Spacing" content="forty" title="40px">

    <meta name="image:Sidebar Image" content="" />
    <meta name="image:Background Image" content="" />
    <meta name="image:Scroll To Top Image" content="" />

    <meta name="color:Background Color" content="#fff" />
    <meta name="color:Text Color" content="#000" />
    <meta name="color:Links Color" content="#888" />
    <meta name="color:Sidebar Background Color" content="#fff" />
    <meta name="color:Sidebar Links Color" content="#000" />
    <meta name="color:Sidebar Links Hover Color" content="#fff" />
    <meta name="color:Sidebar Links Background" content="#131313" />
    <meta name="color:Description Text Color" content="#000" />
    <meta name="color:Posts Background Color" content="#fff" />
    <meta name="color:Photo Notes Color" content="#fff" />
    <meta name="color:Photo Notes Background" content="#000" />
    <meta name="color:Posts Notes Color" content="#000" />
    <meta name="color:Post Links Color" content="eeeeee" />
    <meta name="color:Posts Shadow" content="#000" />
    <meta name="color:Question Background Color" content="#cccccc" />
    <meta name="color:Question Text Color" content="#ffffff" />
    <meta name="color:Asker Text Color" content="#427ea3" />
    <meta name="color:Lines Color" content="131313" />
    <meta name="color:SoundCloud Button Color" content="#ffa500" />

    <meta name="if:Two Columns" content="0" />
    <meta name="if:Sidebar Right" content="1" />
    <meta name="if:Faded Sidebar" content="0" />
    <meta name="if:Transparent Sidebar" content="1" />
    <meta name="if:Animation" content="1" />
    <meta name="if:Fit Background Image" content="0" />
    <meta name="if:Posts Background Color" content="0" />
    <meta name="if:Posts Shadow" content="0" />
    <meta name="if:Photo Caption" content="0" />
    <meta name="if:Scroll To Top Button" content="1" />
    <meta name="if:Theme Credit" content="1" />

    <meta name="text:Link 1 Title" content="" />
    <meta name="text:Link 1" content="" />
    <meta name="text:Link 2 Title" content="" />
    <meta name="text:Link 2" content="" />
    <meta name="text:Link 3 Title" content="" />
    <meta name="text:Link 3" content="" />
    <meta name="text:Link 4 Title" content="" />
    <meta name="text:Link 4" content="" />
    <meta name="text:Link 5 Title" content="" />
    <meta name="text:Link 5" content="" />
    <meta name="text:Link 6 Title" content="" />
    <meta name="text:Link 6" content="" />
    <meta name="text:Link 7 Title" content="" />
    <meta name="text:Link 7" content="" />
    <meta name="text:Link 8 Title" content="" />
    <meta name="text:Link 8" content="" />
    <meta name="text:Link 9 Title" content="" />
    <meta name="text:Link 9" content="" />

    <style type = "text/css">

	body { color:{color:Text Color}; background: {color:Background Color} url('{image:Background Image}'); {block:ifFitBackgroundImage} background-attachment:fixed; background-position: center center; webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; {/block:ifFitBackgroundImage} } a { color: {color:Links Color}; } .posts { {block:ifPostsBackgroundColor} background-color:{color:Posts Background Color}; {/block:ifPostsBackgroundColor} {block:ifPostsShadow} -webkit-box-shadow: 0px 0px 10px 3px rgba({RGBcolor:Posts Shadow},.6); -moz-box-shadow: 0px 0px 10px 3px rgba({RGBcolor:Posts Shadow},.6); box-shadow: 0px 0px 10px 3px rgba({RGBcolor:Posts Shadow},.6); {/block:ifPostsShadow} } #sidebar { {block:ifNotTransparentSidebar} background-color:{color:Sidebar Background Color}; {/block:ifNotTransparentSidebar} } {block:ifFadedSidebar} #sidebar { opacity:0.7; } #sidebar:hover { opacity:1; } {/block:ifFadedSidebar} .other { {block:PermalinkPage} border-bottom:1px solid {color:Lines Color}; {block:PermalinkPage} } .other#link { border:1px solid {color:Post Links Color}; } .other#link:hover a { color:{color:Sidebar Links Hover Color}; } .other#chat li:nth-child(even) { background-color:{color:Lines Color}; } .pn { background-color: rgba({RGBcolor:Photo Notes Background},.6); color:{color:Photo Notes Color}; } .pn a { color:{color:Photo Notes Color}; } {block:ifAnimation} .pn, .ten:hover .pn, .twenty:hover .pn, .thirty:hover .pn, .forty:hover .pn, .navi, .navi:hover, .other#link, .other#link:hover, .other#link:hover a, #sidebar, #sidebar:hover, #thecanine, #thecanine:hover { -moz-transition: all 0.1s linear; -webkit-transition: all 0.1s linear; moz-transition: all 0.1s linear; transition: all 0.1s linear; } {/block:ifAnimation} .on { border-top:1px solid rgba({RGBcolor:Lines Color},.3); border-bottom:1px solid {color:Lines Color}; color:{color:Posts Notes Color}; } .on a { color:{color:Posts Notes Color}; } .on a:hover { color:{color:Links Color}; } .navi { color:{color:Sidebar Links Color}; } .navi:hover { background-color: rgba({RGBcolor:Sidebar Links Background},.5); color:{color:Sidebar Links Hover Color}; } .navi#cred { color:{color:Post Links Color}; } .navi#cred:hover { color:{color:Sidebar Links Hover Color}; } .desc { border-bottom: 1px solid {color:Lines Color}; color: {color:Description Text Color}; }#ask { background-color:{color:Question Background Color}; color:{color:Question Text Color}; } #ask span, #ask span a { color:{color:Asker Text Color}; } #ask.answer { background-color: rgba({RGBcolor:Question Background Color},.5); color:{color:Text Color}; } .permadetails, .permanotes { border-top: 1px solid {color:Lines Color}; } .soundcloud_audio_player { width:100%; height:300px; } .audio {width:100%; display:block;} .audio iframe {width:100%;} .audio iframe.spotify_audio_player {height:80px;} .video {display:block;} .video iframe {width:100%;} #thecanine, #thecanine:hover, .other#link:hover, .navi#cred:hover { background-color:{color:Post Links Color}; } #thecanine { color:{color:Sidebar Links Hover Color}; } {block:ifTwoColumns} #canine { width:54.255319149%; margin-left:31.914893617%; {block:ifSidebarRight} margin-left:15.957446809%; {/block:ifSidebarRight} } .ten, .twenty, .thirty, .forty { width:37.254901961%; } #sidebar { margin-left:13.829787234%; {block:ifSidebarRight} margin-left:69.14893617%; {/block:ifSidebarRight} } {block:PermalinkPage} .ten, .twenty, .thirty, .forty { width:80%; } {/block:PermalinkPage} {/block:ifTwoColumns} {block:ifNotTwoColumns} #canine { width:31.914893617%; margin-left:44.680851064%; {block:ifSidebarRight} margin-left:24.468085106%; {/block:ifSidebarRight} } .ten, .twenty, .thirty, .forty { width:80%; } #sidebar { margin-left:24.468085106%; {block:ifSidebarRight} margin-left:60.638297872%; {block:ifSidebarRight} } {/block:ifNotTwoColumns} blockquote { border-left: 5px solid {color:Lines Color}; }

    {Custom CSS}
    </style>
<script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script>
<script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>

<script src ="http://static.tumblr.com/lvdwday/H8uohygyv/masonryforposts.js"></script>
<script src ="http://static.tumblr.com/lvdwday/QlOohygz6/minimalsoundcloudplayer.js"></script>
<script src ="http://static.tumblr.com/lvdwday/RQNohygzf/video.js"></script>
<script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>

</head>

<body>

<div id="sidebar">
    <img src="{image:Sidebar Image}" alt="{PhotoAlt}" />
    {block:Description}<div class="desc">{Description}</div>{/block:Description}
    <nav>
        <a href="/"><div class="navi">Home</div></a>
        <a href="/ask" {Target}><div class="navi">Message</div></a>
{block:ifLink1Title}<a href="{text:Link 1}" {Target}><div class="navi">{text:Link 1 Title}</div></a>{/block:ifLink1Title}
{block:ifLink2Title}<a href="{text:Link 2}" {Target}><div class="navi">{text:Link 2 Title}</div></a>{/block:ifLink2Title}
{block:ifLink3Title}<a href="{text:Link 3}" {Target}><div class="navi">{text:Link 3 Title}</div></a>{/block:ifLink3Title}
{block:ifLink4Title}<a href="{text:Link 4}" {Target}><div class="navi">{text:Link 4 Title}</div></a>{/block:ifLink4Title}
{block:ifLink5Title}<a href="{text:Link 5}" {Target}><div class="navi">{text:Link 5 Title}</div></a>{/block:ifLink5Title}
{block:ifLink6Title}<a href="{text:Link 6}" {Target}><div class="navi">{text:Link 6 Title}</div></a>{/block:ifLink6Title}
{block:ifLink7Title}<a href="{text:Link 7}" {Target}><div class="navi">{text:Link 7 Title}</div></a>{/block:ifLink7Title}
{block:ifLink8Title}<a href="{text:Link 8}" {Target}><div class="navi">{text:Link 8 Title}</div></a>{/block:ifLink8Title}
{block:ifLink9Title}<a href="{text:Link 9}" {Target}><div class="navi">{text:Link 9 Title}</div></a>{/block:ifLink9Title}
        {block:ifNotThemeCredit}
        <a href="http://lyricist.tumblr.com" {Target}><div class="navi" id="cred">Theme</div></a>
        {/block:ifNotThemeCredit}
    </nav>
</div>

<div id="canine">

    {block:Posts}
        <div class="posts {select:Spacing}"> {block:Text} <div class="other"> {block:Title}<span>{Title}</span>{/block:Title} <div class="caption"> {Body} </div> </div> {block:IndexPage} <div class="on"> <a href="{Permalink}" {Target}>{NoteCountWithLabel}</a> / <a href="{ReblogURL}" {Target}>Reblog</a> / {TimeAgo} </div> {/block:IndexPage} {/block:Text} {block:Photo} {block:ifNotPhotoCaption} {block:IndexPage} <div class="pn"> <a href="{Permalink}" {Target}>{NoteCountWithLabel}</a> / <a href="{ReblogURL}" {Target}>Reblog</a> / {TimeAgo} </div> {/block:IndexPage} {/block:ifNotPhotoCaption} <div id="photos"> <img src="{PhotoURL-500}" alt="{PhotoAlt}" /> </div> {block:ifPhotoCaption} {block:IndexPage} {block:Caption} <div class="caption">{Caption}</div>{/block:Caption} <div class="on"> <a href="{Permalink}" {Target}>{NoteCountWithLabel}</a> / <a href="{ReblogURL}" {Target}>Reblog</a> / {TimeAgo} </div> {/block:IndexPage} {/block:ifPhotoCaption} {/block:Photo} {block:Photoset} {block:IndexPage} {block:Photos} <div class="other" id="ps"> <img src="{PhotoURL-500}" width="{PhotoWidth-500}" /> </div> {/block:Photos} {block:ifPhotoCaption} {block:Caption} <div class="caption">{Caption}</div>{/block:Caption} {/block:ifPhotoCaption} <div class="on"> <a href="{Permalink}" {Target}>{NoteCountWithLabel}</a> / <a href="{ReblogURL}" {Target}>Reblog</a> / {TimeAgo} </div> {/block:IndexPage} {block:PermalinkPage} {Photoset} {/block:PermalinkPage} {/block:Photoset} {block:Quote} <div class="other"> <div class="quote">{Quote}</div> <div class="sourceq"> {block:Source} – {Source}{/block:Source} </div> </div> {block:IndexPage} <div class="on"> <a href="{Permalink}" {Target}>{NoteCountWithLabel}</a> / <a href="{ReblogURL}" {Target}>Reblog</a> / {TimeAgo} </div> {/block:IndexPage} {/block:Quote} {block:Link} <div class="other" id="link"> <a href="{URL}" {Target}>{Name}</a> </div> <div class="caption"> {block:Description}{Description}{/block:Description} </div> {block:IndexPage} <div class="on"> <a href="{Permalink}" {Target}>{NoteCountWithLabel}</a> / <a href="{ReblogURL}" {Target}>Reblog</a> / {TimeAgo} </div> {/block:IndexPage} {/block:Link} {block:Chat} <div class="other" id="chat"> {block:Title}{Title}{/block:Title} <ul> {block:Lines} <li>{block:Label}{Label}{/block:Label}{Line}</li>{/block:Lines} </ul> </div> {block:IndexPage} <div class="on"> <a href="{Permalink}" {Target}>{NoteCountWithLabel}</a> / <a href="{ReblogURL}" {Target}>Reblog</a> / {TimeAgo} </div> {/block:IndexPage} {/block:Chat} {block:Audio} <div class="audio"> <!-- fixed audio posts --> {block:AudioEmbed} {AudioEmbed}{/block:AudioEmbed} </div> {block:IndexPage} <div class="on"> <a href="{Permalink}" {Target}>{NoteCountWithLabel}</a> / <a href="{ReblogURL}" {Target}>Reblog</a> / {TimeAgo} </div> {/block:IndexPage} {/block:Audio} {block:Video} <div class="video">{VideoEmbed-500}</div> {block:IndexPage} <div class="on"> <a href="{Permalink}" {Target}>{NoteCountWithLabel}</a> / <a href="{ReblogURL}" {Target}>Reblog</a> / {TimeAgo} </div> {/block:IndexPage} {/block:Video} {block:Answer} <div class="other"> <div id="ask"> <span>{Asker} : </span>{Question} </div> <div id="ask" class="answer"> {Answer} </div> </div> {block:IndexPage} <div class="on"> <a href="{Permalink}" {Target}>{NoteCountWithLabel}</a> / <a href="{ReblogURL}" {Target}>Reblog</a> / {TimeAgo} </div> {/block:IndexPage} {/block:Answer} {block:PermalinkPage} {block:Caption} <div class="caption">{Caption}</div>{/block:Caption} {block:PostNotes} <div class="permadetails"> <!-- permalink details --> <a href="{Permalink}" {Target}>{NoteCountWithLabel}</a> // from: {block:RebloggedFrom} <a href="{ReblogParentURL}" {Target}>{ReblogParentName}</a> {/block:RebloggedFrom} </div> <div class="permanotes"> {PostNotes} </div> {/block:PostNotes} {/block:PermalinkPage} </div>
    {/block:Posts}

<!-- {block:NoRebloggedFrom}
{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
{/block:NoRebloggedFrom} -->
{block:ContentSource}<!-- {SourceURL}
{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}

</div>
{block:ifThemeCredit}
<a href="http://lyricist.tumblr.com/" {Target}><div id="thecanine">Visionary Themes</div></a>
{/block:ifThemeCredit}

<div class="pagination">
{block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">previous</a> &middot;{/block:PreviousPage} {block:NextPage}<a href="{NextPage}" id="next">next</a>{/block:NextPage}{/block:Pagination}
</div>

</body>

</html>