C/Fe Tumblr Theme

<!DOCTYPE html>
<html>
<head>

<title>
    {block:TagPage}posts tagged {Tag} / {/block:TagPage}
    {block:SearchPage}results for {SearchQuery} / {/block:SearchPage}
    {block:PostSummary}{PostSummary} / {/block:PostSummary}
    {Title}
</title>
<meta name="description" content="{MetaDescription}" />
<link rel="shortcut icon" href="{Favicon}"/>
<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<meta name="image:Background" content=""/>
<meta name="image:Description Image" content=""/>
<meta name="image:Default Album Art" content="http://static.tumblr.com/puls2hm/cVLofi0lm/default_album_300_g4.png" />

<meta name="color:Background 1" content="#000000"/>
<meta name="color:Background 2" content="#222222"/>
<meta name="color:Text 1" content="#ffffff"/>
<meta name="color:Text 2" content="#ffffff"/>
<meta name="color:Accent" content="#888888"/>

<meta name="if:White Audio Player" content="1"/>
<meta name="if:Show Captions" content="1"/>
<meta name="if:Show Tags On Click" content="1"/>

<meta name="text:Home Link Letter" content="C"/>
<meta name="text:Home Link Title" content="Index"/>
<meta name="text:Ask Link Letter" content="/ "/>
<meta name="text:Ask Link Title" content="Ask"/>
<meta name="text:Submit Link Letter" content="F"/>
<meta name="text:Submit Link Title" content="Submit"/>
<meta name="text:Navigation Link Letter" content="e"/>
<meta name="text:Navigation Link Title" content="Links"/>

<meta name="text:Ask Action" content="asked"/>
<meta name="text:Answer Action" content="replied"/>

<link href='http://fonts.googleapis.com/css?family=Rajdhani:400,600' rel='stylesheet' type='text/css'>

<script type="text/javascript">
$(document).ready(function(){
    if($(window).height() > 550 && $(window).width() > 450){
        $(window).scroll(function(){
            if ($(window).scrollTop() > 0) {
                $('h2.head').addClass('trans');
                $('#posts, h2.head, #desc, #navwrap').addClass('sticky');
            } else {
                $('#posts, #desc, h2.head, #navwrap').removeClass('sticky');
            };
        });
    } else {
        $(window).scroll(function(){
            if ($(window).scrollTop() > 130) {
                $('h2.head, #navwrap').addClass('sticky');
            } else {
                $('h2.head, #navwrap').removeClass('sticky');
            };
        });
    };
    $('a.tags').click(function(){
        $(this).next().fadeToggle();
    });
    $('a.navopen').click(function(){
        $('#cover, #navwrap').fadeIn('fast');
        $('body').css('overflow','hidden');
    });
    $('#cover, a.close').click(function(){
        $('#cover, #navwrap').fadeOut('fast');
        $('body').css('overflow','initial');
    });
    if ( $('.iframe-controls--phone-mobile').css('bottom') == '44px' ) {
        $('#foot').css('bottom','44px');
    }
});
</script>

<style type="text/css">

/*----GENERAL----*/

*, *:before, *:after {-webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; max-width:100%;}

div.tags, #cover, #navwrap, h2.head, h2.head.sticky {-webkit-transition:none; -moz-transition:none; transition:none;}

body {background:{color:Background 1} url({image:Background}) fixed; font-family:Rajdhani, sans-serif; font-weight:lighter; color:{color:Text 1}; margin:0; padding:0;}

a {color:inherit; text-decoration:none;}

a:hover {color:{color:Accent};}

/*--------*/

/*----HEADER----*/

h2.head {position:absolute; top:50px; left:0; width:100%; text-align:center; color:{color:Text 1}; font-size:4.5em; margin:0; z-index:9; line-height:90px;}

h2.head a {display:inline-block; width:110px; white-space:nowrap; overflow-x:hidden; cursor:pointer;}

h2.head a span {font-size:0.25em; line-height:initial; color:{color:Text 1}; display:block; margin:0; opacity:0.5; padding:10px 0; text-transform:uppercase;}

h2.head a:hover span {opacity:1;}

h2.head.sticky a span {opacity:1;}

h2.head.sticky a:hover span {color:{color:Accent};}

h2.head.sticky {position:fixed; top:-80px; background:{color:Background 2}; height:140px;}

h2.head.sticky a span {color:{color:Text 2};}

h2.head.trans {-webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; max-width:100%;}

/*--------*/

/*----NAVIGATION----*/

#navwrap {position:fixed; top:50%; left:50%; margin-left:-250px; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%); width:500px; max-height:250px; margin-top:50px; display:none;}

#navwrap a.close {display:block; cursor:pointer; font-size:25px; line-height:16px; height:16px; width:16px; position:absolute; bottom:-25px; right:50%; margin-right:-8px; color:{color:Text 1}; opacity:0.6;}

#navwrap a.close:hover {opacity:1;}

#nav {width:470px; padding:15px 15px 5px 15px; background:{color:Background 2}; text-transform:uppercase; font-size:0.9em; letter-spacing:0.1em; max-height:250px; overflow-x:visible; overflow-y:auto;}

#navwrap.sticky {margin-top:-30px;}

#nav a {background:{color:Background 1}; display:inline-block; width:190px; padding:10px 15px 10px 25px; margin:0 0 10px 0;}

#nav a:nth-of-type(odd) {margin-right:10px;}

#cover {position:fixed; top:0; left:0; height:100%; width:100%; background:{color:Background 1} url({image:Background}) fixed; opacity:0.9; display:none;}

/*--------*/

/*----DESCRIPTION----*/

#desc {display:none; {block:IndexPage}display:block;{/block:IndexPage} background:{color:Background 2}; color:{color:Text 2}; margin-bottom:350px; padding:25px; font-size:0.85em; height:225px; width:500px; position:relative;}

#desc ::-webkit-scrollbar {height:3px; width:3px; background:{color:Background 1};}

#desc ::-webkit-scrollbar-thumb {background:rgba({RGBcolor:Text 1},0.5)}

#desc ::-webkit-scrollbar-track {background:rgba({RGBcolor:Text 1},0.5);}

#desc img.dsc {display:block; height:175px; width:175px; float:left;}

#desc div.dsc {height:175px; width:240px; overflow:auto; padding-left:25px; padding-right:10px; text-align:justify;}

#desc.sticky {opacity:0; margin-top:-125px;}

#desc p:first-child {margin-top:0;}
#desc p:last-child {margin-bottom:0;}

/*--------*/

/*----POSTS----*/

#posts {position:absolute; top:100%; left:50%; margin-left:-250px; width:500px; max-width:90%; font-size:0.85em; padding-bottom:66px; font-weight:lighter; {block:PermalinkPage}top:0;{/block:PermalinkPage} min-height:100%;}

#posts.sticky {top:-65px;}

div.entry {width:100%; height:auto; margin:250px auto; {block:PermalinkPage}margin-top:230px; margin-bottom:100px;{/block:PermalinkPage} color:{color:Text 1}; position:relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

#tagsearch + div.entry {margin-top:-175px;}

div.entry:last-of-type {margin-bottom:150px;}

.entry * {max-width:100%;}

.entry img {height:auto;}

div.entry h2 {text-align:center; margin-top:0; padding:5px;}

div.entry table {max-width:500px;}

div.entry a {opacity:0.7;}
div.entry a:hover {opacity:1;}

a.tumblr_blog {font-size:0.9em; text-transform:uppercase;}

blockquote {border-left:solid 1px {color:Accent}; padding-left:15px; margin-left:15px; margin-top:-5px;}

.caption {display:none; {block:PermalinkPage}display:initial;{/block:PermalinkPage}}

/*----PHOTO POSTS----*/

div.entry a.postimg {opacity:1;}

/*----CHAT POSTS----*/

ul.chat {padding:0; list-style-type:none; color:{color:Text 2};}

ul.chat li {margin:3px 0; padding:7px 10px;}

ul.chat li.odd {background:rgba({RGBcolor:Background 2},0.7);}

ul.chat li.even {background:rgba({RGBcolor:Background 2},0.5);}

/*----LINK POSTS----*/

a.link h2 {word-break:break-all;}

a.link h2:after {content:' ❯'; color:{color:Accent};}

a.link:hover h2 {color:{color:Accent};}

/*----AUDIO POSTS----*/

.audio {width:100%; height:112px; position:relative; display:table; color:black;}

.player span div iframe {width:100% !important; height:112px !important;}

.audio img {height:98px; width:98px; position:absolute; top:7px; right:7px;}

.audin {position:absolute; top:7px; left:50px; text-align:center; font-size:14px; line-height:150%; padding:7px 0; width:345px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

{block:ifWhiteAudioPlayer}
.audio {color:black;}
.audio img {background:white;}
.audin {background:white;}
{/block:ifWhiteAudioPlayer}

{block:ifNotWhiteAudioPlayer}
.audio {color:white;}
.audio img {background:black;}
.audin {background:black;}
{/block:ifNotWhiteAudioPlayer}

/*----QUOTE POSTS----*/

h2.short {font-size:1.25em;}

h2.medium {font-variant:small-caps; text-align:left; text-transform:none;}

h2.long {text-align:left; text-transform:none; font-size:1.15em;}

/*----ASK POSTS----*/

div.ask {padding:12px 15px; background:{color:Background 2}; color:{color:Text 2};}

div.ask .b, div.answer .b {text-transform:uppercase; display:block; margin:5px 0;}

div.answer {padding:12px 15px;}

div.answer.wans {margin-top:10px; background:rgba({RGBcolor:Background 2},0.7); color:{color:Text 2};}

/*--------*/

/*----PERMALINK----*/

div.perm {text-transform:uppercase; text-align:center; padding:10px 0; margin-top:10px; position:relative; background:{color:Background 2}; color:{color:Text 2};}

div.perm a {font-size:0.95em; margin:0 10px; cursor:pointer; opacity:1;}

{block:PermalinkPage}a.tags {display:none;}{/block:PermalinkPage}

div.tags {display:none; position:absolute; top:100%; left:0; width:100%; padding:10px 0; opacity:0.7; {block:PermalinkPage}display:block;{/block:PermalinkPage} {block:ifNotShowTagsOnClick}display:block;{/block:ifNotShowTagsOnClick} color:{color:Text 1};}

div.rbg {background:rgba({RGBcolor:Background 1},0.5); color:{color:Text 1}; margin:10px 0 -10px 0; padding:10px 0;}

div.rbg a {margin:0;}
div.rbg a:first-of-type {margin-right:20px;}

/*--------*/

/*----PERMALINK PAGINATION----*/

div.pg {color:{color:Text 1}; margin-top:-150px; margin-bottom:100px; font-size:1.25em; text-transform:uppercase; width:100%; {block:PermalinkPage}margin:0 0 50px 0; display:inline-block;{/block:PermalinkPage}}

div.pg a {opacity:0.8; background:{color:Background 2}; color:{color:Text 2}; padding:10px 20px 7px 20px;}

div.pg a.p {float:left; margin-left:50px;}

div.pg a.n {float:right; margin-right:50px;}

div.pg a:hover {color:{color:Accent};}

/*--------*/

/*----NOTES----*/

ol.notes {padding:0 50px 15px 50px; width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; list-style-type:none; font-size:0.95em; color:{color:Text 1};}

ol.notes li {margin:15px; opacity:0.75;}

ol.notes li:hover {opacity:1;}

img.avatar {margin-right:15px; vertical-align:middle;}

ol.notes li blockquote {margin-top:15px; margin-left:7px;}

/*----FOOTER----*/

#foot {position:fixed; bottom:0; left:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height:auto; width:100%; padding:10px 25px; background:{color:Background 2}; color:{color:Text 2}; opacity:0.7; text-align:right; z-index:9;}

#foot:hover {opacity:1;}

#foot span.current {margin:0 10px; opacity:0.7;}

#foot a {text-transform:uppercase; margin:0 10px;}

#foot a.nav {float:left;}

/*----TUMBLR CONTROLS----*/

iframe.iframe-controls--phone-mobile {top:initial; bottom:0;}

/*----MEDIA QUERIES----*/

@media only screen and (max-width:550px), only screen and (max-device-width:550px) {
    #navwrap, #posts {margin-left:-200px; width:400px;}
    #nav {width:370px;}
    #nav a, #desc div.dsc {width:140px; text-align:initial;}
    #desc {width:400px;}
    div.entry table {max-width:400px;}
    .audin {width:245px;}
}

@media only screen and (max-width:501px), only screen and (max-device-width:501px) {
    h2.head a {width:20vw; font-size:3.5rem;}
    a.jp {display:none;}
    h2.head a span {font-size:0.3em;}
    #foot a.un {display:none;}
}

@media only screen and (max-width:450px), only screen and (max-device-width:450px) {
    #navwrap, #posts {margin-left:-150px; width:300px; max-width:90%;}
    #nav {width:270px; max-width:90%;}
    #nav a {width:240px; padding:10px 15px; text-align:center;}
    #nav a:nth-of-type(odd) {margin-right:0;}
    #desc img.dsc {height:65px; width:65px; margin:auto; float:none;}
    #desc div.dsc {float:none; width:99%; height:initial; margin:10px 0 0 0; padding-left:0; text-align:justify;}
    #desc {width:300px; height:initial;}
    div.entry table {max-width:300px;}
    .audin {width:145px;}
    div.tags {display:block;}
    a.tags {display:none;}
    #foot a {font-size:0.8em;}
    div.pg a.p {margin-left:0;}
    div.pg a.n {margin-right:0;}
}

@media (pointer:coarse), only screen and (max-height:550px;) {
    #posts {position:initial; margin:auto;}
    div.entry {margin:150px auto;}
    #desc {margin-top:200px; margin-bottom:initial;}
    #navwrap {max-height:80%; overflow:auto;}
    #foot {opacity:1;}
}

{CustomCSS}
</style>

</head>
<body>
<h2 class="head">
    <a href="/">{text:Home Link Letter}
        <span>{text:Home Link Title}</span>
    </a>
    {block:AskEnabled}<a href="/ask">{text:Ask Link Letter}
        <span>{text:Ask Link Title}</span>
    </a>{/block:AskEnabled}
    {block:SubmissionsEnabled}<a href="/submit">{text:Submit Link Letter}
        <span>{text:Submit Link Title}</span>
    </a>{/block:SubmissionsEnabled}
    {block:HasPages}<a class="navopen">{text:Navigation Link Letter}
        <span>{text:Navigation Link Title}</span>
    </a>{/block:HasPages}
</h2>

<!----------------------------------POSTS---------------------------------->

<div id="desc" class="entry">
    <img class="dsc" src="{image:Description Image}"/>
    <div class="dsc">{Description}</div>
</div>


<div id="posts">

{block:TagPage}<div id="tagsearch" class="entry">
    <h2>Viewing posts tagged "<a href="{TagURL}">{Tag}</a>"</h2>
</div>{/block:TagPage}

{block:SearchPage}<div id="tagsearch" class="entry">
    <h2 {block:NoSearchResults}style="display:none"{/block:NoSearchResults}>
        Viewing {SearchResultCount} results for
        "<a href="/search/{URLSafeSearchQuery}">{SearchQuery}</a>"
    </h2>
    {block:NoSearchResults}<h2 class="noresults">
        No results found for "
        <a href="/search/{URLSafeSearchQuery}">{SearchQuery}</a>"
    </h2>{/block:NoSearchResults}
</div>{/block:SearchPage}

{block:Posts}

<div class="entry">

{block:Text}
{block:Title}<h2>{Title}</h2>{/block:Title}
{Body}
{/block:Text}

{block:Audio}
<div class="audio">
<div class="player">
        {block:ifWhiteAudioPlayer}{AudioPlayerWhite}{/block:ifWhiteAudioPlayer}
        {block:ifNotWhiteAudioPlayer}{AudioPlayerBlack}{/block:ifNotWhiteAudioPlayer}
        </div>
<img src="{image:Default Album Art}" {block:AlbumArt}style="display:none"{/block:AlbumArt}/>
{block:AlbumArt}<img src="{AlbumArtURL}"/>{/block:AlbumArt}
<div class="audin">
{block:TrackName}<b>{TrackName}</b><br/>{/block:TrackName}
{block:Artist}{Artist}<br/>{/block:Artist}
{block:Album}<i>{Album}</i><br/>{/block:Album}
{block:PlayCount}{FormattedPlayCount}{/block:PlayCount}
</div>
</div>
{block:ifNotShowCaptions}<span class="caption">{/block:ifNotShowCaptions}
{block:Caption}{Caption}{/block:Caption}
{block:ifNotShowCaptions}</span>{/block:ifNotShowCaptions}
{/block:Audio}

{block:Video}
{Video-500}
{block:ifNotShowCaptions}<span class="caption">{/block:ifNotShowCaptions}
{block:Caption}{Caption}{/block:Caption}
{block:ifNotShowCaptions}</span>{/block:ifNotShowCaptions}
{/block:Video}

{block:Photo}
{block:PermalinkPage}<a class="postimg" href="/image/{PostID}">{/block:PermalinkPage}
{block:IndexPage}<a class="postimg" href="{Permalink}">{/block:IndexPage}
<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
{block:PermalinkPage}</a>{/block:PermalinkPage}
{block:IndexPage}</a>{/block:IndexPage}
{block:ifNotShowCaptions}<span class="caption">{/block:ifNotShowCaptions}
{block:Caption}{Caption}{/block:Caption}
{block:ifNotShowCaptions}</span>{/block:ifNotShowCaptions}
{/block:Photo}

{block:Photoset}
{Photoset-500}
{block:ifNotShowCaptions}<span class="caption">{/block:ifNotShowCaptions}
{block:Caption}{Caption}{/block:Caption}
{block:ifNotShowCaptions}</span>{/block:ifNotShowCaptions}
{/block:Photoset}

{block:Panorama}
{LinkOpenTag}<img src="{PhotoURL-Panorama}"/>{LinkCloseTag}
{block:ifNotShowCaptions}<span class="caption">{/block:ifNotShowCaptions}
{block:Caption}{Caption}{/block:Caption}
{block:ifNotShowCaptions}</span>{/block:ifNotShowCaptions}
{/block:Panorama}

{block:Quote}
<h2 class="{Length} qu">"{Quote}"</h2>
{block:Source}&nbsp;—&nbsp;{Source}{/block:Source}
{/block:Quote}

{block:Link}
<a href="{URL}" class="link"><h2>{Name}</h2></a>
{block:Description}{Description}{/block:Description}
{/block:Link}

{block:Chat}
{block:Title}<h2>{Title}</h2>{/block:Title}
<ul class="chat">
{block:Lines}
<li class="{Alt}">{block:Label}<b>{Label}</b> {/block:Label}{Line}</li>
{/block:Lines}
</ul>
{/block:Chat}

{block:Answer}
<div class="ask">
    <b class="b">{Asker} {text:Ask Action}:</b>
    {Question}
</div>
<div class="answer{block:Answerer} wans{/block:Answerer}">
    {block:Answerer}<b class="b">{Answerer} {text:Answer Action}:</b>{/block:Answerer}
    {Answer}
</div>
{block:Answerer}{Replies}{/block:Answerer}
{/block:Answer}

{block:Date}
<div class="perm">
<a href="{Permalink}">
    {block:IndexPage}{TimeAgo}{/block:IndexPage}
    {block:PermalinkPage}{12HourWithZero}:{Minutes}{CapitalAmPm}, {DayOfMonthWithZero} {ShortMonth} {Year}{/block:PermalinkPage}
</a>
<a href="{Permalink}">{NoteCountWithLabel}</a>
<a href="{ReblogURL}">reblog</a>
{block:HasTags}
{block:ifShowTagsOnClick}<a class="tags">tags</a>{/block:ifShowTagsOnClick}
<div class="tags">{block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}</div>
{/block:HasTags}
{block:PermalinkPage}{block:RebloggedFrom}<div class="rbg">
    via: <a href="{ReblogParentURL}">{ReblogParentName}</a>
    source: <a href="{ReblogRootURL}">{ReblogRootName}</a>
</div>{/block:RebloggedFrom}{/block:PermalinkPage}
</div>
{/block:Date}

</div><!--entry-->

{/block:Posts}

{block:PermalinkPagination}<div class="pg">
{block:PreviousPost}
<a class="p" href="{PreviousPost}">previous post</a>
{/block:PreviousPost}{block:NextPost}
<a class="n" href="{NextPost}">next post</a>
{/block:NextPost}
</div>{/block:PermalinkPagination}

{block:PostNotes}
{PostNotes}
{/block:PostNotes}

</div><!--posts-->

<div id="cover">&nbsp;</div>
<div id="navwrap">
    <a class="close">×</a>
    {block:HasPages}<div id="nav">
        {block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}
    </div>{/block:HasPages}
</div>

<div id="foot">
    <a class="nav" href="/archive">archive</a>
    <a class="nav un" href="/random">random</a>
    <a class="nav un" href="/rss">rss</a>
    <a class="nav" href="http://syntaxthemes.tumblr.com">theme</a>

    {block:Pagination}{block:JumpPagination length="5"}
    {block:JumpPage}<a class="jp" href="{URL}">{PageNumber}</a>{/block:JumpPage}
    {block:CurrentPage}<span class="current">{CurrentPage}</span>{/block:CurrentPage}
    {/block:JumpPagination}{block:PreviousPage}
    <a href="{PreviousPage}">back</a>
    {/block:PreviousPage}{block:NextPage}
    <a href="{NextPage}">next</a>
    {/block:NextPage}{/block:Pagination}
</div>

</body>
</html>