THEME 01 - NASA

<!--

                ♡ NASA / THEME 01 by DHYA @ARIANAGRANDRE ♡
                     [EDITED AS OF 17 OCT 2021]
                      arianagrandre.tumblr.com

    base code by @sorrism,  no.js photosets by @annasthms & @eggdesign, resizing videos by @shythemes, icon fonts by fontawesome

    Please DO NOT remove any credits. DO NOT claim or redistribute, take parts as your own or use this theme as a base code. Feel free to edit it as much you like. Enjoy!


-->

<!DOCTYPE html>
<head>

<title>{block:PostSummary}{PostSummary} : {/block:PostSummary}{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}

<!--Default Variables-->

<meta name="color:Background" content="#ffffff"/>
<meta name="color:Text" content="#5d5d5d"/>
<meta name="color:Link" content="#6b6b6b"/>
<meta name="color:Link Hover" content="#aaaaaa"/>
<meta name="color:Title"content="#282828"/>
<meta name="color:Scrollbar" content="#d5d5d5" />
 <meta name="if:Show Title" content="0" />

<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:Home Title" content="index"/>
<meta name="text:Ask Title" content="message"/>
<meta name="text:Archive Title" content="history"/>

<meta name="image:Sidebar" content=""/>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Maven+Pro" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
<link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">

<!--CSS customization here. -->

<style type="text/css">


/*tumblr controls and lightbox*/

.tmblr-lightbox {background:rgba({RGBcolor:background}, .95)!important;}

.tmblr-lightbox img {opacity:0;}

.lightbox-caption {
    color:{color:title}!important;
    font-family:inherit!important;
    font-size:1em!important;
    font-weight:normal!important;
    text-shadow:none!important;
}

.lightbox-image {
    -moz-box-shadow:none!important;
    -webkit-box-shadow:none!important;
    box-shadow:none!important;
    -moz-border-radius:0px!important;
    -webkit-border-radius:0px!important;
    border-radius:0px!important;
    padding:0px!important;
    border:0!important;
    opacity:1!important;
}

.vignette {opacity:0!Important;}

.iframe-controls--desktop {
    white-space:nowrap!important;
    top:5px!important;
    right:5px!important;
    opacity:1!important;
    position:fixed!important;
}

/*tooltip*/

.ui-tooltip {
    position:Absolute;
    z-index:9999;
    padding-top:10px;
}

.ui-tooltip-content {
    background:{color:background};
    padding:0 4px;
    font-style:italic;
    color:{color:link};
    text-transform:lowercase;
    border:1px solid {color:borders};
}

/*scrollbar*/

::-webkit-scrollbar{
    height:11px;
    width:11px;
    background:inherit;
}

::-webkit-scrollbar-thumb {background:{color:scrollbar};}

::-webkit-scrollbar-track {background:{color:borders};}

::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track {border:5px solid {color:background};}


/*main structure*/

body {
    background:{color:background};
    color:{color:text};
    font:11.5px 'maven pro', serif;
    line-height:1.5em;
    word-wrap:break-word;
    text-align:justify;
    text-transform:none;
}

a {
    color:{color:link};
    text-decoration:none;
    transition:all .3s linear;
    -webkit-transition:all .3s linear;
    -o-transition:all .3s linear;
    -moz-transition:all .3s linear;
}

a, a img {cursor:pointer;}

a:hover {
    color:{color:link hover}!important;
    text-decoration:none;
}

img {
    opacity:1;
    border:0;
    text-decoration:none;
    max-width:100%;
    height:auto;
    display:block;
}

blockquote {
    padding:.25em 0 .25em 15px;
    margin:.5em 0;

}

pre {
    padding:0;
    margin:0;
    line-height:inherit!important;
    background:transparent;
    font-family:inherit!Important;
    font-size:inherit!important;
    white-space:pre-wrap;
    white-space:-moz-pre-wrap;
    white-space:-pre-wrap;
    white-space:-o-pre-wrap;
    word-wrap:break-word;
}

p {margin:1em 0;}

p:first-of-type {margin-top:0;}

p:last-of-type {margin-bottom:0;}

b, strong, b a, strong a {
    font-weight:bold!important;
    color:{color:title};
}

small, big, sub, pre {
    font-size:1em!important;
    line-height:1.4em!important;
    vertical-align:baseline!important;
}

i {
    font-style:italic;
}

h1, h2, h3, h4 {
    margin:1.5em 0;
    font-size:13px;
    letter-spacing:0.5px;
    font-weight:500;
    color:{color:title};
    font-weight:bold;
}

.posts h1:first-child, .posts h2:first-child, .posts h3:first-child, .posts h4:first-child {margin-top:0;}

hr {
    border:none;
    box-shadow:0;
    margin:2em auto;
    width:75px;
}

/*header*/

sidebar {
    width:260px;
    margin-left: 120px;
    margin-top: 10px;
    position:fixed;
    padding:10px;
}

.sidebarimg img {
    display:block;
   max-width:260px;
   margin-bottom:20px;
}


.nav {
    margin-top:19px;
    text-align: left;
    display:block;
    }


    .nav a {
    line-height:30px;
    font-size:12px;
    font-weight:700;
    font-family: 'nunito', sans-serif;
    text-transform:lowercase;
	color: {color:link};
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
    }

    .nav a:hover {
	color:{color:Link Hover};
    text-decoration:none;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
    }

.blogtitle {
    text-align:left;
    margin-bottom:20px;
     font-family: 'nunito', sans-serif;
    letter-spacing:0.5px;
    font-weight:700;
    font-size:15px;
    color:{color:title};
    text-transform:lowercase;
}


#description {
    margin-top:15px;
    text-align:left;
}

/*pagination*/

    .pagination {
    width:540px;
    padding-bottom:50px;
    margin-top:100px;
    text-align:center;
    font-size:10px;
    font-family:'maven pro', sans-serif;
    text-transform:lowercase;
    }


    .pagination a {
    color:{color:Text};
    padding:10px;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
    }

    .pagination a:hover {
	color:{color:Link Hover};
    text-decoration:none;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
    }


/*posts*/

section {
    width:540px;
    margin-left:490px;
    margin-top: 100px;
    margin-bottom:100px;
}
.posts {
    width:540px;
    margin-bottom:100px;
    padding:20px;
     text-align:justify;
}

.ph {
    position:relative;
    overflow:hidden;
}

.ph img {
    width:100%;
    display:block;
}

.posts ul li {
    list-style:none;
    line-height:100%;
    margin-left:0px;
}

.posts ul li:before {
    content:"›";
    color:{color:accent};
    padding-right:5px;
}


/*titles*/

.title {
    font-family:'nunito', sans-serif;
    line-height:150%;
    margin-bottom:10px;
    font-size:13px;
    color:{color:text};
    text-transform:uppercase;
    letter-spacing:0.5px;
    font-weight: 500;
}

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

.title a:hover {color:{color:link};}

/*captions*/

.user {

    line-height:20px;
    font-family:'nunito',sans-serif;
    font-style:bold;
    font-weight:700;

}

 .user img {
    border-radius: 50px;
    width: 18px;
    height: 18px;
    margin-right:10px;
    margin-top:1px;
    display:inline-block;
    float:left;
    }



.comment {


    padding:1em 0;
    list-style:none;

}

.comment:last-of-type {padding-bottom:0!important;}


.captioned .comment:first-of-type {margin-top:1em;}

.tex {margin-top:1.5em; font-weight:normal;font-family:'maven pro', sans-serif;}

.tex li, .tex blockquote {
    text-align:left;
    margin-top:10px;
}



/*photoset*/

[photoset-layout] {
    grid-gap:4px;
}

[photoset-layout] div {
    cursor:pointer;
}

/*quote*/

.source {margin-top:5px;}

/*audio*/

.player {
    width:25px;
    height:30px;
    position:absolute;
    left:5px;
    top:calc(50% - 15px);
    display:block;
    overflow:hidden;
}

.trname{

    font-family:'nunito', sans-serif;
    font-weight:bold;
    font-style:italic;}

.hold {
    text-align:left;
    background: #f2f2f2;
    position:relative;
    display:block;
    min-height:24px;
    padding:20px;
}

.audio_info {
    vertical-align:middle;
    line-height:1.5em;
    margin-left:25px;
    max-width:calc(100% - 35px);
}

.audio_info span {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    display:block;
}


/*asks*/

.q {
    text-align:left;
    padding:30px;
    margin-bottom:-1em;
    background-color:#f2f2f2;
}

.ansr {margin-top:2em;}

.as {text-transform:lowercase;}

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

.as a:hover {color:{color:link hover};}

/*chat*/

.chat {
    text-align:left;
    margin:0;
    padding:0;
    list-style:none;
}

.l {
    padding:15px 0;
    border-bottom:1px solid {color:borders};
}

.label {
    font-weight:bold;
    color:{color:title};
    display:inline-block;
}

.l:first-of-type {padding-top:0;}

.l:last-of-type {
    padding-bottom:0;
    border:0;
}
/*permalink and notes*/

.when {margin-top:2em;font-weight:700;font-family:'nunito',sans-serif;color:#656464;display:block;}

.tags {margin-top:0.5em;width:540px;display:block;}

.tags a {
    font-style:normal;
    word-spacing:1,5px;
    font-family:'maven pro',sans-serif;
    color:{color:text};
    display:inline;
    margin:0 5px;
}

.pagenotes {
    padding-top:2em;
    border-top:1px solid ;
    border-color:#f2f2f2;
    color:#656464;
}

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

ol.notes li.note {
    display:block;
    padding:0;
    margin:5px 0;
}

ol.notes li.note img.avatar {display:none!important;}

a.more_notes_link {
    display:block;
    text-align:center;
    color:{color:title};
}

.credit {
    position:fixed;
    right:12px;
    bottom:15px;
}


{CustomCSS}

</style>

</head>

<body>

<sidebar>
    {block:ifSidebarImage}<div class="sidebarimg"><a href="/"><img src="{image:Sidebar}"/></a></div>{/block:ifSidebarImage}
   {block:ifShowTitle}<div class="blogtitle">{Title}</div>
{/block:ifShowTitle}
    <div id="description">{Description}</div>
    <div class=nav>{block:ifHomeTitle}<a href="/">{text:home title}</a></br>{/block:ifHomeTitle}{block:ifAskTitle}<a href="/ask">{text:ask title}</a><br>{/block:ifAskTitle}{block:ifArchiveTitle}<a href="/archive">{text:archive title}</a><br>{/block:ifArchiveTitle}{block:ifLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a><br>{/block:ifLink1}{block:ifLink2}<a href="{text:Link 2 URL}">{text:Link 2}</a><br>{/block:ifLink2}{block:ifLink3}<a href="{text:Link 3 URL}">{text:Link 3}</a><br>{/block:ifLink3}{block:ifLink4}<a href="{text:Link 4 URL}">{text:Link 4}</a><br>{/block:ifLink4}</div>
</sidebar>

<section id="entries">{block:posts}
    <article class="posts {block:caption}captioned{/block:caption}">

{block:Quote}
<div class="title quote">{quote}</div>
{block:Source}<div class="source">{source}</div>{/block:Source}
{/block:Quote}


{block:Text}
{block:Title}<div class="title">{title}</div>{/block:Title}
{block:RebloggedFrom}
    {block:Reblogs}
        <li class="comment {block:Title}ted{/block:Title}">
             <a {block:haspermalink}href="{Permalink}"{/block:haspermalink} class="user" target="_blank"><img src="{PortraitURL-64}"> {username}</a></a>
            <div class="tex">{body}</div>
        </li>
    {/block:Reblogs}
{/block:RebloggedFrom}
{block:NotReblog}
    <li class="comment {block:Title}ted{/block:Title}">
        <div class="tex">{body}</div>
    </li>
{/block:NotReblog}
{/block:Text}

{block:Link}<div class="title"><a href="{URL}">{name}</a></div>
{block:Description}
    {block:NotReblog}
        <li class="comment ted">
            <div class="tex">{description}</div>
        </li>
    {/block:NotReblog}
{/block:Description}
{block:RebloggedFrom}
    {block:Reblogs}
        <li class="comment">
         <a {block:haspermalink}href="{Permalink}"{/block:haspermalink}</a>
            <div class="tex">{body}</div>
        </li>
    {/block:Reblogs}
{/block:RebloggedFrom}
{/block:Link}

{block:Chat}
{block:Title}<div id="title">{title}</div>{/block:Title}
<ol class="chat {block:Title}ted{/block:Title}">
    {block:lines}
        <li class="l {Alt}">
            {block:label}<span class="label">{label}</span>{/block:label}             {line}
        </li>
    {/block:lines}
</ol>
{/block:Chat}

<div class="ph">

{block:Photo}{linkopentag}<img src="{photoURL-HighRes}" alt="{PhotoAlt}"/>{linkclosetag}{/block:Photo}

{block:Photoset}
<div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>
{/block:Photoset}

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

{block:Audio}

        <div class="hold">
            <div class="player">{audioplayerwhite}</div>
            <div class="audio_info">
                {block:trackname}<span class="trname">{trackname}</span>{/block:trackname}
                {block:artist}<span class="artist">{artist}</span>{/block:artist}

            </div>
        </div>

{/block:Audio}


{block:caption}
    {block:Reblogs}
        <li class="comment">
            <a {block:haspermalink}href="{Permalink}"{/block:haspermalink} class="user" target="_blank"> <img src="{PortraitURL-64}"> {username}</a>
            <div class="tex">{body}</div>
        </li>
    {/block:Reblogs}
    {block:NotReblog}
        <li class="comment" style="padding:0">
        <div class="tex">{caption}</div>
        </li>
    {/block:NotReblog}
{/block:caption}
</div>

{block:Answer}
<div class="q">
   <span style="font-style: bold;text-transform:lowercase;color:#656464;font-family:'nunito',sans-serif;">{Asker}</span> : {Question}</div>
{block:Answerer}
    <div class="ansr">
        <div class="user"><img src="{AnswererPortraitURL-64}"> {username}</a> {answerer}</div> <div class="tex">{answer}</div>
    </div>
{/block:Answerer}
{block:NotReblog}
    <li class="comment">
        <div class="tex">{replies}</div>
    </li>
{/block:NotReblog}
{block:RebloggedFrom}
    {block:Reblogs}
        <li class="comment">
            <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank"><img src="{PortraitURL-64}">{username}</a>
            <div class="tex">{body}</div>
        </li>
    {/block:Reblogs}
{/block:RebloggedFrom}
{/block:Answer}


{block:Date}

<div class="when">
    <span><a href="{Permalink}">{TimeAgo} </a>{block:NoteCount} {NoteCount}{/block:NoteCount} {block:Permalink}{block:RebloggedFrom}  <a href="{ReblogParentURL}">{ReblogParentName}</a>{block:ContentSource} <a href="{SourceURL}">{SourceTitle}</a>{/block:ContentSource}{/block:RebloggedFrom}
{/block:Permalink}
<div style="float:right"><a href="{ReblogURL}" target="_blank" class="details"><i class="fas fa-undo"></i></div></a></span>
    {block:hastags}
        <span class="tags">{block:Tags}<a href="{TagUrl}"># {Tag}</a>{/block:Tags}</span>
    {/block:hasTags}
</div>
{/block:Date}

</article>

{block:PostNotes}
<article class="posts pagenotes">
    <div class="title">{NoteCountWithLabel}</div>
    {block:RebloggedFrom}
            <span style="margin-top:5px">via: <a href="{ReblogParentURL}">{ReblogParentName}</a>
                {block:ContentSource} &mdash; source: <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:ContentSource}
            </span>
    {/block:RebloggedFrom}
    <hr>
    {PostNotes}
</article>
{/block:PostNotes}

{/block:Posts}

{block:Pagination}
<div class="pagination">
    <span>
        {block:PreviousPage}<a href="{PreviousPage}">〈</a>{/block:PreviousPage}
        {block:NextPage}<a href="{NextPage}">〉</a>{/block:NextPage}        </span>
</div>
{/block:Pagination}

</section>

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

<div class="credit"><a href="https://arianagrandre.tumblr.com/" title="arianagrandre"><i class="fas fa-cloud-moon"></i></span></a></div>

<script>
function gatherData(images, arr) {
  for (let i = 0; i < images.length; i++) {
    let currentData = {
      "width": images[i].getAttribute('data-width'),
      "height": images[i].getAttribute('data-height'),
      "low_res": images[i].getAttribute('data-lowres'),
      "high_res": images[i].getAttribute('data-highres')
    };
    arr.push(currentData);
  }
}
function getIndex(elem) {
  let i = 0;
  while( (elem = elem.previousElementSibling) != null ) i++;
  return i;
}
function lightbox(elem) {
  let currentPhotoset = elem.parentNode;
  let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  let data = [];
  gatherData(photosetPhotos, data);
  Tumblr.Lightbox.init(data, getIndex(elem) + 1);
}
</script>


</body></html>