nude

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>{title}</title>

  <link rel="shortcut icon" href="{Favicon}">
  <link rel="alternate" type="application/rss+xml" href="{RSS}">

  <!--meta stuff-->


  <meta name="color:background" content="#fff">
  <meta name="color:post" content="#eee">
  <meta name="color:text" content="#7c7c7c">
  <meta name="color:link" content="#111111">
  <meta name="color:accent" content="#bca58d">

  <meta name="text:link1" content="link 1"/>
  <meta name="text:link1url" content="/"/>
  <meta name="text:link2" content="link 2"/>
  <meta name="text:link2url" content="/"/>

  <meta name="text:asktitle" content="ask me anything">
  <meta name="text:descriptiontitle" content="about">

   <meta name="image:Header" content="{HeaderImage}">


  <!--jquery-->

  <script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>


  <!--pxu photoset--->

  <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css" />
  <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>


  <!--icons-->

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">

  <!--fonts-->

  <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300|Roboto+Mono:300,700" rel="stylesheet">

  <!--modals-->

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />



  <style type="text/css">

.iframe-controls--desktop {
  display: none;
}

/*general styles*/

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  font-size: 12px;
  color: {color:text};
  font-family: 'Roboto Mono', monospace;
  margin: 0;
}

body {
  margin: 0;
  padding: 0;
  word-wrap: break-word;
  line-height: 180%;
  background-color: {color:background};
  animation: load 2s;
}

@keyframes load {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}



p{
    margin-bottom: 8px;
}

b, strong {
  color: {color:accent};
  font-weight: 400;
}

small {
  font-size: 1em;
}

h1{
    color: {color:link};
    margin-bottom: 10px;
    font-weight: 400;
    letter-spacing: 1px;
}

h2{
    color: {color:link};
}

img {
  max-width: 100%;
}

a {
  text-decoration: none;
  color: {color:link};
  transition: all .2s ease-in-out;
}

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

li {
  list-style: none;
  padding: 0;
  margin: 0;
}

blockquote {
  border-left: 1px solid {color:link};
  padding-left:10px;
  margin: 5px 0;
}

hr {
  margin: 0 auto;
  margin-top: 5px;
  margin-bottom: 5px;
  width: 50%;
  background: {color:link};
}

.fas, .fa {
    color: {color:accent};
}

.line{
    display: block;
    width: 100%;
    margin: 0 10px;
    height: 0;
    border-bottom: 1px solid {color:text};
    transition: all .2s ease;
}


.line-vert {
    display: block;
    width:0;
    height: 100%;
    border-left: 1px solid {color:link};
}



/*selections*/

::selection {
  background: {color:accent};
  color:{color:background};
}

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

/*scrollbars*/

::-webkit-scrollbar {
  width:9px;
  height:9px;
  background-color: {color:background};
}

::-webkit-scrollbar-track {
  border:4px solid {color:background};
  border-bottom: 0;
  border-top: 0;
  background-color: {color:text};
}

::-webkit-scrollbar-thumb {
  border:2px solid {color:background};
  width:5px;
  border-bottom: 9px solid {color:background};
  border-top: 9px solid {color:background};
  background-color:{color:accent};
}

::-webkit-scrollbar:horizontal {
  width:9px;
  height:9px;
  background-color: {color:background};
}

::-webkit-scrollbar-track:horizontal {
  border:4px solid {color:background};
  border-left: 0;
  border-right: 0;
  background-color: {color:text};
}

::-webkit-scrollbar-thumb:horizontal {
  border:2px solid {color:background};
  border-left: 0;
  border-right: 0;
  background-color:{color:accent};
}

/*lightbox*/

.vignette, #vignette {
  opacity:0;
}

.lightbox-image, #tumblr_lightbox img {
  box-shadow:none !important;
  border-radius:0 !important;
  max-width:none;
}


.tmblr-lightbox, #tumblr_lightbox {
  background-color:rgba(255,255,255,.5) !important;
}

/*modal*/

.modal {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: {color:text};
  line-height:180%;
  padding:30px 10px;
  border-radius: 5px;
  box-shadow: 0 0 0px transparent;
  background-color: {color:background};
  width: 500px;
  margin: 0 auto;
  overflow: auto;
  z-index: 1000;
}

.blocker {
  background: rgba(255,255,255,.5);
  z-index: 500;
}

.modal iframe {
  margin-top: 10px;
}

/*sitebox*/

#sitecontainer{
  position: inline;
  margin-top: 25px;
  width:100%;
  display: flex;
  z-index: 100;
}

/*navigation*/

#menu {
  position: fixed;
  margin-right: 0px;
  margin-top: 70px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  height: 100%;
  width: 25%;
  padding-left: 100px;
  text-align: center;
  transition: all 500ms ease;
  animation: menu 2s;
  z-index: 30;
}

@keyframes menu {
  0% {
    margin-left: -200px;
  }

  100% {
    margin-left: 0;
  }
}

#menu ul {
  display: flex;
}

#menu ul li {
  padding: 10px 0;
}

#menu img{
    margin-top:30%;
    transform: rotate(-5deg);
    z-index: -1;
}


#title {
  font-size: 5em;
  line-height: 100%;
  text-align: left;
  color:{color:link};
  font-family: 'Roboto Slab', serif;
}

.title-line {
   position: relative;
   width: 100%;
   height: 1px;
   background: {color:link};
   transition: all .5s ease;
}

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

#title a:hover .title-line,
#title a:focus .title-line{
	background: {color:accent};
	transform-origin:0;
	transform: rotate(25deg) translateY(50%);
	animation: swing 1s;
}

@keyframes swing {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(25deg) translateY(50%);
  }
}



#desc{
    display: flex;
    justify-content: center;
    text-align: left;
    margin: 0 auto;
    margin-top: -50%;
    margin-left: 60%;
    width: 80%;
    max-height: 300px;
    min-width: 200px;
    padding: 10px;
    background: {color:background};
    overflow: auto;
}

#desc h1{
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    text-align: center;
    float:left;
    margin-right: 10px;
}

#desc h1 .far{
    transform:rotate(90deg);
}


#pagi{
    width: 100%;
    display: flex;
    margin-top: 50%;
    justify-content: space-evenly;
    align-items: center;
}

#pagi a{
    color: {color:link};
}

#pagi .fas {
    color: {color:link};
}

#pagi a .fas {
    transition: all .2s ease;
}

#pagi a:hover .fas{
   color: {color:accent};
}

#search {
    width: 100%;
    margin-top: -25px;
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 500;
    padding: 5px 10px;
    background: {color:background};
}


.sform input {
    color: {color:link};
    border: none;
    border-bottom: 1px solid {color:link};
    margin: 0 auto;
    padding: 8px;
    width: 400px;
    letter-spacing: 1px;
}

.sform input::placeholder {
  color: {color:link};
  letter-spacing: 2px;
  font-size: 1.1em;
}

.navlinks{
    display: flex;
}

.navlinks a{
    text-align: left;
    font-size: 1.2em;
    padding: 0 5px;
    margin-top: 1em;
    margin-right: 15px;
    letter-spacing: 1.5px;
    height: 1.5em;
    overflow: hidden;
}

.navlinks .fas:hover {
    color: {color:text};
}

.navlinks a span {
    position: relative;
    display: inline-block;
    transition: transform .3s;
}

.navlinks a span::before {
    position: absolute;
    top: 100%;
    content: attr(data-hover);
    transform: translate3d(0,0,0);
}

.navlinks a:hover span {
    transform: translateY(-100%);
}



/*posts, containers*/

#postcontainer{
  display: flex;
  position: absolute;
  right: 0;
  {block:indexpage}padding-top: 200px;{/block:indexpage}
  {block:permalinkpage}padding-top: 50px;{/block:permalinkpage}
  flex-direction: column;
  width: 75%;
  transition: all .2s ease;
}

.post{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 400px;
  min-height: 195px;
  margin: 0 auto;
  transition: all 2s ease .1s;
}

/*caption & reblogs*/

.caption{
  width: 100%;
  flex-direction: column;
  display: flex;
  align-items: flex-start;
  padding:10px;
  margin: 0 auto;
  margin-top: 3px;
}

.caption ul{
   margin: 10px 0;
   margin-left:-25px;
}

.caption li{
   list-style-type:square;
}

.avatar{
    max-width:30px;
    margin-top: -10px;
    padding-bottom: 5px;
    padding-top: 5px;
    border-radius: 100%;
}

blockquote.reblog {
    border:0;
    margin:0;
    padding-top:15px;
}

a.tumblr_blog{
  bottom:16px;
  position: relative;
  margin-left: 5px;
  letter-spacing: 1px;
  text-transform: lowercase;
  padding:7px;
}

.quote .tumblr_blog {
    bottom:0px;
}

/*postinfo*/

#postinfo{
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  left: 425px;
  color:{color:link};
  text-align: center;
  letter-spacing: 1px;
  transition: all .2s ease;
}

#postinfo a {
   margin-top: 15px;
}

#postinfo .rblink {
    margin-top: 0;
    margin-bottom: 15px;
    transition: .2s ease;

}

#postinfo .rblink:hover{
    color: {color:accent};
}

#postinfo a:hover:not(.rblink) {
    color: {color:link};
    animation: pulse .5s;
}

@keyframes pulse{
  0% {
   transform: scale(1);
  }
  40% {
   transform: scale(1.1);
  }
  100% {
   transform: scale(1);
  }
}

#postinfo h1 {
    font-size: 1.5em;
    transition: all .2s ease;
}

#postinfo a:hover h1 {
    color: {color:accent};
}


/*photo*/

.photos{
    width: 100%;
    margin: 0 auto;
}

.photos img{
    width: 100%;
    margin-bottom: 0px;
}

.photo{
  margin: 0 auto;
  margin-bottom: -5px;
}

/*text*/

.text{
    width:100%;
    padding: 35px;
    background: {color:post};
    letter-spacing: 0;
}

 h1.text {
    margin-bottom: 0px;
    background: transparent;
}


/*ask & answer*/
.ask{
    width: 100%;
}

.quest{
    display: flex;
    flex-direction: column;
    text-align: right;
    width: 100%;
    margin: 0 auto;
    padding: 25px;
    background: {color:post};
}

.quest:after{
  content: "";
  position: absolute;
  top: 35px;
  right: -7px;
  width: 0;
  height: 0;
  border: 7px solid {color:background};
  border-right-color: transparent;
  border-top-color: transparent;
  transform: rotate(45deg);
}

.asker{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 5px;
    letter-spacing: 1px;
    text-transform: lowercase;
    font-weight: bold;
    color: {color:link};
}

.asker img{
    margin-right: 10px;
    border-radius: 100%;
}

.ans{
    text-align: left;
    width: 100%;
    padding: 20px;
    margin-top: 3px;
    letter-spacing: 1px;
}

/*audio*/

.audio{
    background: {color:post};
    width:100%;
}

.songart img{
    width: 120px;
    max-height: 120px;
    float:left;
    margin-right: 10px;
}

.songtitle, .songauthor{
    position: relative;
}

.songtitle{
    padding: 20px 0 0 0;
    font-size: 1.1em;
    color:{color:link};
    margin-bottom: 5px;
    text-transform: uppercase;
}

.play{
    position: relative;
    width: 33px;
    overflow: hidden;
    opacity: .8;
}

/*link post*/

.link{
    padding:35px 25px;
}

.link a{
  line-height: 150%;
  margin-bottom: 10px;
}

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

.link a .fas{
    transition: all .2s ease;
}

.link a:hover .fas{
    transform: rotate(45deg);
}

/*quote*/

.quote{
   padding: 0 35px;
   width: 100%;
   margin: 0 auto;

}

.quote h1{
    color: {color:link};
    line-height: 100%;
    margin-bottom: 15px;
   letter-spacing: 1.5px;
}

/*video*/

.video{
    margin: 0 auto;
}

/*tags*/

.tags{
  display: flex;
  justify-content: space-between;
  text-transform: lowercase;
  margin: 0 auto;
  margin-bottom: 20%;
  margin-top: 10px;
  text-align: center;
  width: 400px;
}

.tags a{
    padding: 0 5px;
    font-size: .95em;
}

.via {
  text-transform: lowercase;
  display:flex;
  align-items: center;
  justify-content: space-between;
  width: 400px;
  height: 2em;
  margin: 0 auto;
  margin-top: 10px;
  color: {color:link};
}


</style>

</head>

<body>

<div id="search">

<form action="/search" method="get" class="sform">
    <input type="text" name="q" placeholder="search"/>
    </form>


    <div class="navlinks">
            <a href="#msg" rel="modal:open" class="open-modal"><span data-hover="message">message</span></a>
            <a href="{text:link1url}" rel="modal:open" class="open-modal"><span data-hover="{text:link1}">{text:link1}</span></a>
            <a href="{text:links2url}" rel="modal:open" class="open-modal"><span data-hover="{text:link2}">{text:link2}</span></a>
            <a href="https://www.tumblr.com/follow/{name}" title=""><span data-hover="follow">follow</span></a>
            <a href ="http://www.vocitates.tumbr.com"><i class ="fas fa-code fa-xs"></i></a>
        </div>

</div>


<!--posts-->

<div id="sitecontainer">

  <div id="menu">

    <div id="title"><a href="/"><div class="title-line"></div>{title}</a></div>
    <img src="{headerimage}">
    <div id="desc"> <h1><i class="far fa-user fa-xs fa-fw"></i> {text:descriptiontitle}</h1> {description}</div>


        {block:Pagination}
    <div id="pagi">{block:PreviousPage}
      <a href="{PreviousPage}"><i class="fas fa-arrow-left fa-lg fa-fw"></i></a> {/block:PreviousPage}
      {block:NextPage}
      <a href="{NextPage}"><i class="fas fa-arrow-right fa-lg fa-fw"></i></a> {/block:NextPage}
    </div>{/block:Pagination}
  </div>

  <div id="postcontainer">
    {block:posts}
    <div class="post">

      <!--post info-->

      {block:Date}
      <div id="postinfo">
        <div class="line-vert"></div>
        <a href="{permalink}" title="{timeago}"><h1>{MonthNumberWithZero}<br>{dayofmonthwithzero}</h1>
        </a>
        {12HourWithZero}:{minutes}
        <span>{block:NoteCount} {NoteCount}{/block:NoteCount}</span>
        <a class="rblink" href="{reblogURL}">reblog</a>
        <div class="line-vert"></div>
      </div>
      {/block:Date}


      <!--photo-->

      {block:Photo}
      <div class="photos 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></div> {block:Caption}
      <div class="caption">{Caption}</div>{/block:Caption} {/block:Photo}

      <!--photoset-->

      {block:Photoset}
      <div class="photos">
        <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}
          <div class="photo-data">
            <div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}
        </div>
      </div>
      {block:Caption}
      <div class="caption">{Caption}</div>{/block:Caption} {/block:Photoset}

      <!--text-->

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


      <!--ask&answer post-->

      {block:Answer}
      <div class="ask">
        <div class="quest"><span class="asker"><img src="{AskerPortraitURL-30}">{asker}</span> {Question}</div>
        <div class="ans caption">{Answer}</div>
      </div>
      {/block:answer}

      <!--audio-->

      {block:Audio}
      <div class="audio">
        {block:AlbumArt}
        <div class="songart">
          <img src="{AlbumArtURL}">
        </div>
        {/block:AlbumArt}
        <div class="songtitle">
          {block:TrackName} <i class="fas fa-headphones-alt fa-fw"></i> {TrackName} {/block:TrackName}
        </div>
        <div class="songauthor">
          {block:Artist} {Artist} {/block:Artist}
        </div>
        <div class="play">{block:AudioPlayer}{AudioPlayerBlack}{/block:AudioPlayer}</div>

      </div>
      {/block:audio}

      <!--video-->

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


      <!--quote-->

      {block:Quote}
      <div class="quote">
        <h1><i class="fas fa-quote-left fa-fw "></i> {Quote}</h1>
        <i class="fas fa-angle-double-right"></i> {Source}</div>{/block:Quote}

      <!--links-->

      {block:Link}
      <h1 class="link"><a href="{URL}"><i class="fas fa-location-arrow fa-fw"></i> {Name}</a>
    </h1> {block:Description}
      <div class="caption text" style="width:100%;">{Description}</div>{/block:Description} {/block:Link}


    </div>

    {block:PermalinkPage}
    <div class="via">

    <p>{block:RebloggedFrom}<span>via</span>: <a href="{ReblogParentURL}">{ReblogParentName} </a>{/block:RebloggedFrom}</p>

    <p>{block:ContentSource} <span>source</span>: <a href="{SourceURL}">{SourceTitle}</a>{/block:ContentSource}</p>
    </div>
    {/block:PermalinkPage}

    <div class="tags">
      <div class="tagholder">{block:HasTags}
     <i class="fas fa-feather"></i> {block:Tags}
      <a href="{TagURL}"> {Tag} </a> {/block:Tags} {/block:HasTags}</div>
    </div>


    {/block:posts}
  </div>
</div>



<div id="msg" class="modal">
  <h1>{text:asktitle}.</h1>
  <iframe id="ask_form" style="background-color: transparent; overflow: hidden;" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" frameborder="0" scrolling="no" width="480px" height="300px"></iframe>
</div>

<!--unnest-->

<script src="https://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>
<script>
  $(function() {
    $('.post').unnest({
      yourCaption: ".caption",
      wrapName: ".reblog",
      newCaptionUsername: false,
      originalPostCaptionUsername: false,
      tumblrAvatars: true,
      tumblrAvatarClass: ".avatar",
      usernameColon: false
    });
  });
</script>


<!--pxu photoset-->

<script>
  $(document).ready(function() {
    $('.photo-slideshow').pxuPhotoset({
      lightbox: true,
      rounded: false,
      gutter: '3px',
      borderRadius: '0px',
      photoset: '.photo-slideshow',
      photoWrap: '.photo-data',
      photo: '.pxu-photo'
    });
  });
</script>

<!--modal-->

<script>
  $('a.open-modal').click(function(event) {
    $(this).modal({
      fadeDuration: 250,
      fadeDelay: 0,
      showClose: false,
    });
    return false;
  });
</script>

</body>

</html>