solar

<!--

                     THEME 03
                      solar

                     by @02px

                    enjoy :-)

-->

<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="color:background" content="#fff" />
         <meta name="color:description background" content="#f5f5f5" />
         <meta name="color:text" content="#131313" />
         <meta name="color:title" content="#131313" />
         <meta name="color:links" content="#00000" />
         <meta name="color:links hover" content="#00000" />
         <meta name="color:scrollbar" content="#00000" />
         <meta name="select:post width" content="350" title="350px" />
         <meta name="select:post width" content="400" title="400px" />
         <meta name="select:post width" content="450" title="450px" />
         <meta name="select:post width" content="500" title="500px" />

         <meta name="if:social media" content="" />

         <meta name="text:font size" content="11px" />
         <meta name="text:more title" content="about" />
         <meta name="text:more" content="here you can write anything you want. no length limit!" />
         <meta name="text:link 1 url" content="" />
         <meta name="text:link 1" content="link 1" />
         <meta name="text:link 2 url" content="" />
         <meta name="text:link 2" content="link 2" />
         <meta name="text:link 3 url" content="" />
         <meta name="text:link 3" content="link 3" />
         <meta name="text:link 4 url" content="" />
         <meta name="text:link 4" content="link 4" />
    </head>

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

<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">

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

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

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

<script>
$(document).ready(function(){
    $("#hover").click(function(){
        $("#pop").fadeIn();
    });
    $("#bg").click(function(){
        $("#pop").fadeOut();
    });
});
</script>

<script>
    $(document).ready(function(){

	$(window).scroll(function(){
		if ($(this).scrollTop() > 100) {
			$('.scrolltotop').fadeIn();
		} else {
			$('.scrolltotop').fadeOut();
		}
	});

	$('.scrollToTop').click(function(){
		$('html, body').animate({scrollTop : 0},800);
		return false;
	});

});
</script>

<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:#eee;
}

::selection{
       background:#eee;
}

.tmblr-iframe{
    -webkit-filter: invert(100%);
        filter: invert(100%);
    opacity:0.2;
    transform:scale(0.7,0.7);
    right:-100px;
    z-index:9999999999!important;
}

body {
    background-color:{color:background};
    font-size:{text:font size};
    color:{color:text};
    font-family: 'Open Sans', sans-serif;
    line-height:15px;
}

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

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

.index-page .photos img {
    {block:IndexPage}
    display: none;
    {/block:IndexPage}
    {block:PermaLinkPage}
    display:block;
    {block:PermaLinkPage}
}

.index-page .photos a {
    {block:IndexPage}
    display: none;
    {/block:IndexPage}
    {block:PermaLinkPage}
    display:block;
    {block:PermaLinkPage}
}

.index-page .photos img:first-child {
    display:block;
    width:{select:post width}px;
}

.index-page .photos a:first-child {
    display:block;
    width:calc({select:post width}px - 20px);
}

.photos img {
    width:{select:post width}px;
}

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

img {
    max-width:100%;
}

blockquote {
    margin:5px 0;
    padding:0px 15px;
    border-left:1px solid #eee;
}

.info1 blockquote {
    border-right:1px solid #eee;
    border-left:none;
}

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;
}

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

.container {
    width:{select:post width}px;
    margin:auto;
    margin-bottom:100px;
}

.posts {
    padding:10px;
    margin:auto;
    margin-top:70px;
    transition: .5s ease;
}

.text {
    margin-left:0px;
}

.info1 {
    float:left;
    width:200px;
    position:absolute;
    display:inline-block;
    margin-left:-235px;
    text-align:right;
    padding:10px;
}

.info2 {
    float:right;
    width:200px;
    position:absolute;
    display:inline-block;
    margin-left:{select:post width}px;
    text-align:left;
    padding:10px;
}

.d {
    font-weight:bold;
    font-size:calc({text:font size} - 1px);
    text-transform:uppercase;
    margin-bottom:5px;
}

.d a {
    color:{color:title};
}

.buttons {
    font-size:13px;
    margin-bottom:3px;
    margin-left:-2px;
    margin-right:-2px;
}

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

.custom-like-button *{cursor:pointer!important;}
.custom-like-button {
    position:relative;
    display:inline-block;
    vertical-align:top;
    width:12px;
    font-size:12px;
    height:15px;
    margin:-1px 2px 0 2px;
    cursor:pointer;
}

.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%;
}

.caption {
    margin-top:-7px;
    overflow:scroll;
}

.caption a {
    word-break:break-all;
}

a.tumblr_blog {
    font-size:calc({text:font size} - 1px);
}

.tags {
    margin-left:-5px;
    margin-right:-5px;
    font-size:calc({text:font size} - 2px);
}

.tags a {
    padding:5px;
}

h1 {
    display:block;
    color:{color:title};
    font-weight:700;
    text-transform:uppercase;
    font-size:calc({text:font size} - 1px);
}

.notes {
    font-size:calc({text:font size} - 1px);
    margin-bottom:5px;
    opacity:.8;
    margin-top:5px;
}

.postnotes {
    font-size:10px;
    padding:20px;
}

v {
    font-size:calc({text:font size} - 1px);
}

/*----top----*/

img.icon {
    margin-top:100px;
    margin-left:calc(50% - 30px);
    height:60px;
    width:60px;
    border-radius:100%;
    object-fit:cover;
    overflow:hidden;
    cursor:pointer;
}

#hover {
    margin-left:calc(50% - 33px);
    height:35px;
    width:50px;
    border-radius:100%;
    z-index:9999;
    background:white;
    opacity:0;
    font-size:20px;
    padding-top:15px;
    color:black;
    position:absolute;
    margin-top:-59px;
    cursor:pointer;
    transition:.2s ease;
    text-align:center;
}

#hover:hover {
    opacity:.7;
}

img.icon:hover + #hover {
    opacity:.7;
}

/*-----POPUP-----*/

#pop {
    display:none;
}

#bg {
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    background:#f8f8f8;
    opacity:.8;
    z-index:99999;
}

#info {
    width:300px;
    background:white;
    padding:10px;
    margin-top:-30px;
    margin-left:calc(50% - 150px);
    position:fixed;
    z-index:999999;
}

#top {
    width:25px;
    height:25px;
    background:white;
    position:fixed;
    transform:rotate(45deg);
    margin-top:-20px;
    display:block;
    margin-left:20px;
    z-index:9999999;
}

h2 {
    font-weight:700;
    text-transform:uppercase;
    font-size:calc({text:font size} - 1px);
    letter-spacing:3px;
    text-align:center;
    color:{color:title};
}

#desc {
    background:{color:description background};
    padding:10px;
    border:1px solid #eee;
    margin:15px 10px;
}

#more {
    margin:5px 20px;
}

#links {
    text-align:center;
    letter-spacing:.8px;
    padding:10px;
    font-size:calc({text:font size} - 1px);
}

#links a {
    padding-left:2px;
    padding-right:2px;
}

.s {
    text-align:center;
    margin:auto;
}

.social, .social1 {
    height:21px;
    width:24px;
    border-radius:7px;
    border:1px solid #eee;
    color:#eee;
    font-size:16px;
    text-align:center;
    padding-top:4px;
    padding-left:1px;
    display:inline-block;
    margin:2px 5px 8px 5px;
}

.social1 {
    font-size:17px;
    padding-left:0;
    width:25px;
}

.footer {
    position:fixed;
    bottom:30px;
    left:30px;
}

.footer a {
    padding-right:10px;
}

.scrolltotop {
    color:{color:links};
    cursor:pointer;
    display:none;
}

#n {position:fixed;right:30px;bottom:30px;font-size:11px;z-index:9999999;}

</style>

<body class="{block:IndexPage}index-page{/block:IndexPage}">

<img class="icon" src="{image:icon}"><div id="hover"><span class="lnr lnr-pointer-up"></span></div>

<div id="pop">
    <div id="bg"></div>

        <div id="info"><div id="top"></div>
            <h2>{Title}</h2>
            {block:Description}<div id="desc">{Description}</div>{/block:Description}
            <h2>{text:more title}</h2>
            <div id="more">{text:more}</div>
            <div id="links">
                <a href="/">home</a>
                <a href="/ask">message</a>
                <a href="{text:link 1 url}">{text:link 1}</a>
                <a href="{text:link 2 url}">{text:link 2}</a>
                <a href="{text:link 3 url}">{text:link 3}</a>
                <a href="{text:link 4 url}">{text:link 4}</a>
            </div>

            {block:ifSocialMedia}
            <div class="s">
            <a href="PUT YOUR SOCIAL MEDIA LINKS HERE"><div class="social1"><i class="fa fa-instagram" aria-hidden="true"></i></div></a>

            <a href="PUT YOUR SOCIAL MEDIA LINKS HERE"><div class="social"><i class="fa fa-twitter" aria-hidden="true"></i></div></a>

            <a href="PUT YOUR SOCIAL MEDIA LINKS HERE"><div class="social"><i class="fa fa-facebook" aria-hidden="true"></i></div></a>
            {/block:ifSocialMedia}
            </div>
        </div>
</div>

<div class="container">

{block:Posts}

<div class="posts">

{block:Odd}
<div class="info1">
{/block:Odd}
{block:Even}
<div class="info2">
{/block:Even}

{block:Date}<div class="d"><a href="{PermaLink}">{Month} {DayOfMonth}, {Year}</a></div>{/block:Date}
{block:NoteCount}<div class="notes">{NoteCountWithLabel}</div>{/block:NoteCount}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{block:IndexPage}
    <div class="buttons">
    <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:IndexPage}
<div class="tags">{block:HasTags}{block:Tags}<a href="{TagUrl}">{Tag}</a>{/block:Tags}{/block:HasTags}</div>
{block:PermaLinkPage}
<v>
{block:RebloggedFrom}via <a href="{ReblogParentURL}">{ReblogParentName}</a>, originally from <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom}</v>
{/block:PermaLinkPage}

</div>



{block:Text}
<div class="text">{block:Title}<h1>{Title}</h1>{/block:Title}{Body}</div>{/block:Text}

{block:Photo}<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false">
    <img src="{PhotoURL-HighRes}">
</a>{/block:Photo}

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

{block:Photoset}
    {block:IndexPage}
        <div class="photos">
        {block:Photos}
            <a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false">
    <img alt="" src="{PhotoURL-500}">
    </a>
        {/block:Photos}
        </div>
    {/block:IndexPage}

    {block:PermalinkPage}
        {Photoset-500}
    {/block:PermalinkPage}
{/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="text">{block:Title}<h1>{Title}</h1></a>{/block:Title}
{block:Lines}<li>{block:Label}{Label}{/block:Label}{Line}</li>{/block:Lines}{/block:Chat}

{block:Video}{Video-500}{/block:Video}

{block:Audio}{AudioEmbed}{/block:Audio}

{block:PermaLinkPage}
{block:PostNotes}<div class="postnotes">{PostNotes}</div>{/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}

<div class="footer">
    <div class="scrolltotop">scroll to top</div>
    <a href="/">home</a><br>
    {block:Pagination}
    {block:PreviousPage}<a href="{PreviousPage}">back</a>
    {/block:PreviousPage}
    {block:NextPage}
    <a href="{NextPage}">forward</a>
    {/block:NextPage}
    {/block:Pagination}
</div>
<div id="n"><a href="https://02px.tumblr.com">02</a></div>

</div>

</body>
</html>