nautica

<!--

                                 nautica
                                    05
                                 by @02px

                       please do not remove credit
                             enjoy (─ ‿‿ ─) <3

-->

<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="image:icon" content="" />
         <meta name="image:header" content="" />
         <meta name="image:sidebar" content="" />
         <meta name="image:background" content="" />
         <meta name="color:background" content="#f8f8f8" />
         <meta name="color:header background" content="#f8f8f8" />
         <meta name="color:caption background" content="#f8f8f8" />
         <meta name="color:title" content=“#131313” />
         <meta name="color:text" content=“#131313” />
         <meta name="color:top links" content="#00000" />
         <meta name="color:links" content="#00000" />
         <meta name="color:links hover" content="#00000" />
         <meta name="color:accent" content=“#131313” />
         <meta name="color:scrollbar" content="#ffd189" />
         <meta name="select:font size" content="10" title="10px" />
         <meta name="select:font size" content="11" title="11px" />
         <meta name="select:font size" content="12" title="12px" />
         <meta name="select:font size" content="13" title="13px" />
         <meta name="if:top bar" content="" />
         <meta name="if:header" content="" />
         <meta name="if:header links" content="" />
         <meta name="if:sidebar" content="" />
         <meta name="if:description only sidebar" content="" />
         <meta name="if:bottom sidebar" content="" />
         <meta name="text:description" content="here is your custom description. please keep it short." />
         <meta name="text:link 1 url" content="" />
         <meta name="text:link 1" content="" />
         <meta name="text:link 2 url" content="" />
         <meta name="text:link 2" content="" />
         <meta name="text:link 3 url" content="" />
         <meta name="text:link 3" content="" />
         <meta name="text:link 4 url" content="" />
         <meta name="text:link 4" content="" />
         <meta name="text:link 5 url" content="" />
         <meta name="text:link 5" content="" />
         <meta name="text:link 6 url" content="" />
         <meta name="text:link 6" content="" />
    </head>

<script src="https://use.fontawesome.com/6ac3a8bdbf.js"></script>

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">

<link href='http://static.tumblr.com/8pnyeus/sXxofi7lt/outicons.css' rel='stylesheet' type='text/css'>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


<script>
// scroll to top © html-tuts.com
var amountScrolled = 500;
$(window).scroll(function() {
    if ($(window).scrollTop() > amountScrolled) {
            $('a.ttop').fadeIn('slow');
    } else {
            $('a.ttop').fadeOut('slow');
    }
});
$('a.top').click(function() {
    $('body, html').animate({
            scrollTop: 0
    }, 'slow');
return false;
});
</script>

{block:IndexPage}

<script>
$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 300) {
    $('#sidebar').fadeIn();
  } else {
    $('#sidebar').fadeOut();
  }
});
</script>

{/block:IndexPage}

<style type="text/css">

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

::-webkit-scrollbar{
    width:7px;
    height:7px;
}

::-webkit-scrollbar{
    background-color:{color:Background};
    border-radius:10px;
}

::-webkit-scrollbar-track{
    border:2px solid {color:Background};
}

::-webkit-scrollbar-thumb{
    border:2px solid {color:Background};
    background-color:{color:scrollbar};
}

::-webkit-scrollbar:horizontal{
    display:none;
}

::-moz-selection{
       background:{color:links};
}

::selection{
       background:{color:links};
}

.controls {
    font-size:10px;color:{color:links};position:fixed;top:15px;right:5px;cursor:pointer;background:white;padding:1px 6px;border-radius:3px;z-index:99;}
#tumblr_controls,.tmblr-iframe{
    -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);opacity:0;
top:3px!important;right:0!important;z-index:9999999; padding:10px 50px 0px 10px;-moz-transition:.2s ease;-webkit-transition:.2s ease;transition:.2s ease;
}
#tumblr_controls:hover,.tmblr-iframe:hover{opacity:0.5;}


body {
    background-color:{color:background};
    background-image:url('{image:background}');
    background-repeat:repeat;
    background-size:cover;
    background-attachment: fixed;
    font-size:{select:font size}px;
    color:{color:text};
    font-family: 'Source Sans Pro', sans-serif;
    line-height:20px;
    letter-spacing:1px;
}

a {
    text-decoration:none;
    color:{color:links};
    transition:.4s ease;
}

a:hover {
    text-decoration:none;
    color:{color:links hover};
}

/*------POST SETTINGS------*/

img {
    max-width:100%;
}

blockquote {
    margin-left:0px;
    padding:0px;
    border-left:1px solid transparent;
}

ol.notes {
    padding: 0px;
    margin: 25px 0px;
    list-style-type: none;
}

ol.notes li.note {
    padding: 10px;
}

ol.notes li.note img.avatar {
    vertical-align: -4px;
    margin-right: 10px;
    width: 0px;
    height: 0px;
}

ol.notes li.note span.action {
    font-weight: normal;
}

ol.notes li.note .answer_content {
    font-weight: normal;
}

ol.notes li.note blockquote {
    padding: 4px 10px;
    margin: 10px 0px 0px 25px;
}

ol.notes li.note blockquote a {
    text-decoration: none;
}

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

#headbar {
    width:100%;
    background:{color:header background};
    height:40px;
    top:0;
    position:fixed;
    display:block;
    z-index:9;
}

#linksbox {
    display:inline-block;
    margin-top:10px;
    text-transform:uppercase;
    font-size:9px;
    letter-spacing:2.5px;
}

.links {
    display:inline-block;
    width:auto;
    text-align:left;
    padding-left:30px;
}

.links a {
    color:{color:top links};
    padding-bottom:13px;
    border-bottom:2px solid transparent;
}

.links a:hover {
    border-bottom:2px solid {color:links};
}

/*-------TOP--------*/

.top {
    width:450px;
    min-height:150px;
    padding-top:150px;
    padding-bottom:100px;
    margin:auto;
    display:block;
}

img.header {
    position:absolute;
    margin-top:10px;
    height:170px;
    width:200px;
    vertical-align:top;
    object-fit:cover;
    overflow:hidden;
}

#title {
    vertical-align:top;
    margin-left:200px;
    padding:10px 20px;
    color:{color:title};
    font-size:{select:font size};
    text-transform:uppercase;
    letter-spacing:3px;
}

#title a {
    padding-bottom:3px;
    color:{color:title};
    border-bottom:1px solid #eee;
}

#title a:hover {
    color:{color:links hover};
}

#desc {
    vertical-align:top;
    margin-left:200px;
    padding:20px;
    height:70px;
}

.links2 {
    position:absolute;
    width:230px;
    margin-left:200px;
    padding:10px 20px 20px 20px;
    letter-spacing:2px;
    text-transform:uppercase;
    font-size:calc({select:font size}px - 1px);
}

.links2 a {
    color:{color:top links};
}

.links2 a:hover {
    color:{color:links hover};
}

l {
    padding-right:5px;
}

/*-------SIDEBAR--------*/

#sidebar {
    top:100px;
    width:160px;
    height:auto;
    margin-left:70px;
    position:fixed;
    vertical-align:top;
    {block:IndexPage}
    display:none;
    {/block:IndexPage}
    {block:ifBottomSidebar}
    top:450px;
    {/block:ifBottomSidebar}
}

#sidebar2 {
    top:100px;
    width:160px;
    height:auto;
    margin-left:70px;
    position:fixed;
    vertical-align:top;
    {block:ifBottomSidebar}
    top:450px;
    {/block:ifBottomSidebar}
}

.subtitle {
    color:{color:title};
    font-size:calc({select:font size}px - 1px);
    text-transform:uppercase;
    letter-spacing:3px;
    margin-bottom:10px;
}

.subtitle a {
    padding-bottom:3px;
    color:{color:title};
    border-bottom:1px solid #eee;
}

.subtitle a:hover {
    color:{color:links hover};
}

img.sidebar {
    width:160px;
    height:auto;
}

.desc {
    width:140px;
    background:{color:caption background};
    padding:10px;
    margin-top:10px;
    font-size:calc({select:font size}px - 1px);
}

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

.container {
    margin-top:80px;
    width:100%;
    display:block;
}

.posts {
    max-width:100%;
    margin-left: auto;
    margin-right: auto;
    width:450px;
    margin-bottom:100px;
    margin-top:30px;
    transition: .5s ease;
}

.caption {
    padding:1px 15px;
    margin:10px 0px 0px 0px;
    background:{color:caption background};
}

.caption a {
    color:{color:links};
    border-bottom:1px solid {color:accent};
}

.caption a:hover {
    color:{color:accent};
}

.caption img {
   max-width:300px;
   height:auto;
   overflow:hidden;
}

.title {
    text-transform:uppercase;
    color:{color:title};
}

.text {
    margin:10px 10px -10px 10px;
}

.text a {
    color:{color:links};
    border-bottom:1px solid {color:accent};
}

.text a:hover {
    color:{color:links hover};
}

.text img {
    max-width:300px;
    height:auto;
    overflow:hidden;
}

.src {
    text-align:center;
    padding:10px;
}

.date {
    color:{color:links};
    font-size:10px;
    letter-spacing:1px;
    padding-bottom:5px;
}

.date a:hover {
    color:{color:links hover};
}

.question {
    padding:20px 35px;
    background:{color:caption background};
}

.audio {
    background:white;
    margin-bottom:-70px;
    padding-left:calc(50% - 200px);
}

.permalinks {
    {block:IndexPage}
    margin-top:13px;
    border-top:1px solid #eee;
    {/block:IndexPage}
    padding-top:2px;
    text-transform:uppercase;
    font-size:calc({select:font size}px - 1px);
    text-align:left;
    display:inline-block;
}

.permalinks a {
    color:{color:links};
}

.permalinks a:hover {
    color:{color:links hover};
}

.tags {
    opacity:.8;
    margin-top:-5px;
    margin-bottom:-5px;
    text-align:left;
    display:block;
    font-size:calc({select:font size}px - 1px);
}

.tags a:hover {
    color:{color:links hover};
}

.via {
    margin-bottom:-1px;
    color:{color:links};
    text-transform:uppercase;
    font-size:9px;
    letter-spacing:2px;
}

.via a {
    padding-bottom:2px;
    color:{color:text};
    {block:IndexPage}
    border-bottom:1px solid #eee;
    {/block:IndexPage}
}

.via a:hover {
    color:{color:links hover};
}

.postnotes {
    width:400px;
    font-size:{select:font size}px;
    color:{color:links};
}

.pag {
    padding:10px;
    margin-top:-20px;
    margin-bottom:40px;
    text-align:center;
    font-size:11px;
}

.libutton {
    margin-top:10px;
    float:right;
    color:{color:text};
    font-size:14px;
    display:inline-block;
}

.libutton a {
    color:{color:text};
}


.txt iframe,.cap iframe{display:block;max-width:100%;overflow:hidden;}
.txt .tumblr_parent:first-of-type {border:0;}
.tumblr_parent {border:0;margin:20px;padding:0;}
.tumblr_parent blockquote {margin:5px 0;}
.txt.nospace .tumblr_parent:first-of-type {padding-top:0;}
a.tumblr_blog,.aski {
    font-size:10px;
    font-weight:400;
    letter-spacing:2px;
    text-transform:uppercase;
        border-bottom:1px solid transparent;
}

.custom-like-button *{cursor:pointer!important;}
.custom-like-button {
    position:relative;
    display:inline-block;
    vertical-align:top;
    width:12px;
    height:12px;
    cursor:pointer;
    padding-right:3px;
}

.like_button:hover + .our_button {color:red;}
.like_button.liked + .our_button {color:red;}
.like_button iframe {width:100%!important;height:100%!important;}
.like_button {z-index:10;opacity:0;}
.our_button {z-index:1;}
.our_button,.like_button {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.ttop {
    position:fixed;
    bottom:20px;
    right:50px;
    font-size:10px;
    display:none;
}

.n {position:fixed;bottom:20px;right:20px;display:block;font-family:helvetica;font-weight:200;}
.n a {color:{color:links};font-size:13px;background:white;padding:4px 6px 5px 7px;border-radius:3px;}

</style>

<body>

<div class="controls"><i class="fa fa-bars" aria-hidden="true"></i></div>

<div class="n"><a href="https://02px.tumblr.com" title="theme credit">+</a></div>
<a href="#" class="ttop">scroll to top</a>

{block:ifTopBar}

<div id="headbar">
    <div id="linksbox">
    <div class="links"><a href="/">refresh</a></div>
    <div class="links"><a href="/ask">mail</a></div>
    <div class="links"><a href="{text:link 1 url}">{text:link 1}</a></div>
    <div class="links"><a href="{text:link 2 url}">{text:link 2}</a></div>
    <div class="links"><a href="{text:link 3 url}">{text:link 3}</a></div>
    <div class="links"><a href="{text:link 4 url}">{text:link 4}</a></div>
    <div class="links"><a href="{text:link 5 url}">{text:link 5}</a></div>
    <div class="links"><a href="{text:link 6 url}">{text:link 6}</a></div>
    </div>
</div>

{/block:ifTopBar}

{block:IndexPage}
{block:ifHeader}

<div class="top">
    <img class="header" src="{image:header}">
        <div id="title"><a href="/">{Title}</a></div>
    <div id="desc">{text:description}</div>
    {block:ifHeaderLinks}
    <div class="links2"><a href="/"><l>Refresh</l></a>
        <a href="/ask"><l>mail</l></a>
        <a href="{text:link 1 url}"><l>{text:link 1}</l></a>
        <a href="{text:link 2 url}"><l>{text:link 2}</l></a>
        <a href="{text:link 3 url}"><l>{text:link 3}</l></a>
    </div>
    {/block:ifHeaderLinks}
</div>
{/block:ifHeader}
{/block:IndexPage}

{block:ifSidebar}
{block:ifHeader}

<div id="sidebar">
    <div class="subtitle"><a href="/">{Name}</a></div>
    {block:ifNotDescriptionOnlySidebar}
    <img class="sidebar" src="{image:sidebar}">
    {/block:ifNotDescriptionOnlySidebar}
    <div class="desc">{block:Description}{Description}{/block:Description}</div>
</div>

{/block:ifHeader}
{block:ifNotHeader}

<div id="sidebar2">
    <div class="subtitle"><a href="/">{Name}</a></div>
    {block:ifNotDescriptionOnlySidebar}
    <img class="sidebar" src="{image:sidebar}">
    {/block:ifNotDescriptionOnlySidebar}
    <div class="desc">{block:Description}{Description}{/block:Description}</div>
</div>

{/block:ifNotHeader}
{/block:ifSidebar}

<div class="container">

{block:Posts}

<div class="posts">

{block:RebloggedFrom}<div class="via"><a href="{ReblogRootURL}">{ReblogRootName}</a>
{block:PermaLinkPage}
 + <a href="{ReblogParentURL}">{ReblogParentName}</a>
{/block:PermaLinkPage}
</div>{/block:RebloggedFrom}
{block:IndexPage}
{block:Date}
<div class="date">
<a href="{PermaLink}">{TimeAgo} </a></div>
{/block:Date}
{/block:IndexPage}

{block:Text}{block:Title}<div class="title">{Title}</div>{/block:Title}<div class="txt cap {block:Title}nospace{/block:Title}"><div class="text">{Body}</div></div>{/block:Text}

{block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:Photo}

{block:Panorama}{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:Panorama}

{block:Photoset}{Photoset}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:Photoset}

{block:Quote}"{Quote}"{block:Source}{Source}{/block:Source}{/block:Quote}

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

{block:Chat}{block:Title}<div class="title">{Title}</div></a>{/block:Title}
{block:Lines}<li>{block:Label}{Label}{/block:Label}{Line}</li>{/block:Lines}{/block:Chat}

{block:Video}{Video-400}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:Video}

{block:Audio}{AudioEmbed-400}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:Audio}

{block:Answer}
    <div class="question">{Asker} inqured: {Question}</div>
        <div class="answer">{Answerer}{Answer}</div>
{/block:Answer}

{block:IndexPage}

{block:Date}
<div class="permalinks">
<a href="{PermaLink}">{NoteCountWithLabel}</a>
</div>{/block:Date}

<div class="libutton">

    <div class="custom-like-button">{LikeButton}
    <span class="our_button"><i class="oi oi-heart"></i></span>
    </div>
    <a href="{ReblogURL}"><i class="oi oi-refresh"></i></a>
</div>


{block:HasTags}<div class="tags">
{block:Tags}<a href="{TagUrl}">#{Tag} </a>{/block:Tags}
</div>{/block:HasTags}

{/block:IndexPage}

{block:PermaLinkPage}

{block:Date}
<div class="permalinks">
<a href="{PermaLink}">{TimeAgo}, {DayOfMonth}{DayOfMonthSuffix} of {Month}</a>
</div>{/block:Date}

{block:HasTags}<div class="tags">tagged with:
{block:Tags} <a href="{TagUrl}">#{Tag} </a>{/block:Tags}
</div>{/block:HasTags}
<a href="{PermaLink}">{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</a>
{block:PostNotes}{PostNotes}{/block:PostNotes}

{/block:PermaLinkPage}

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

<!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->

</div>

{/block:Posts}

 {block:Pagination}
 <div class="pag">{block:PreviousPage}
                <a href="{PreviousPage}">backward</a>
            {/block:PreviousPage}{block:NextPage}
                <a href="{NextPage}">forward</a>
            {/block:NextPage}</div>{/block:Pagination}

</div>

</body>
</html>