deux

<!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="#000000">
  <meta name="color:post" content="#111111">
  <meta name="color:text" content="#7c7c7c">
  <meta name="color:link" content="#ffffff">
  <meta name="color:accent" content="#fc7045">

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


  <!--jquery-->

  <script src="//code.jquery.com/jquery-2.2.4.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=Montserrat:400,600|Roboto+Mono:400,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;
  transition: all .2s ease-in-out;
}

html {
  font-size: 12px;
  color: {color:text};
  font-family: 'Montserrat', sans-serif;
  margin: 0;
}

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

b {
  color: {color:accent};
}

small {
  font-size: 1em;
}

img {
  max-width: 100%;
}

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

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

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

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

hr {
  margin: 5px 0;
}

.fa, .far, .fas {
  color: {color:accent};
}
/*selections*/

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

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

/*scrollbars*/

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

::-webkit-scrollbar {
  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:4px solid {color:background};
  border-bottom: 0;
  border-top: 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:{color:background} !important;
}

/*modal*/

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

.blocker {
  background: {color:accent};
  z-index: 200;
}

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

.modal h1{
    color: {color:link};
}

/*credit*/

#credit a {
  font-size: 1.1em;
  color: {color:text};
  z-index: 200;
}

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

/*navigation*/

#menu {
  position: fixed;
  display: flex;
  right: 0px;
  justify-content: space-around;
  align-items: center;
  height: 100vh;
  width: 100px;
  z-index: 100;
  writing-mode: vertical-rl;
  border-left: 1px solid {color:post};
  background: {color:background};
  text-align: center;
}

#menu ul {
  font-family: 'Roboto Mono', monospace;
  letter-spacing: .1em;
  display: flex;
}

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

#title {
  background: {color:post};
  padding: 10px 38px;
  border-left: 4px solid transparent;
}

#title:hover {
  border-left: 4px solid {color:accent};
}

#title::first-letter {
  color: {color:accent};
}

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

#title::after {
  content: '.';
  color: {color:link};
}

.links a {
  padding: 10px 40px;
  border-left: 2px solid transparent;
}

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

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

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



/*posts, containers*/

#sitecontainer{
  width:100%;
  display:flex;
}

#postcontainer{
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  margin-top: 30px;
  margin-right:99px;
}

.post{
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-height: 195px;
  margin: 0 auto;
}

/*caption & reblogs*/

.caption{
  width: 60%;
  flex-direction: column;
  display: flex;
  align-items: flex-start;
  font-size: 1.1em;
  padding: 35px;
  padding-top:20px;
  margin-right: 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;
}

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

.reblog{
}

a.tumblr_blog{
  font-family: 'Roboto Mono', monospace;
  bottom:16px;
  position: relative;
  margin-left: 5px;
  font-size: .95em;
  text-transform: lowercase;
  border-bottom: 1px solid {color:accent};
  padding:7px;
}


/*photo*/

.photos{
    width: 40%;
    margin: 0 auto;
    margin-right: 3px;
}

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

/*text*/

.text{
    width:50%;
    padding: 35px;
    background: {color:post};
}

h1.text{
    color:{color:link};
    line-height: 120%;
    background: transparent;
}

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

.quest{
    font-family: 'Roboto Mono', monospace;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    padding: 0 25px;
    padding-bottom: 25px;
    margin-bottom: 5px;
    background: {color:post};
}

.asker{
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    text-transform: lowercase;
    font-weight: bold;
    padding-top: 25px;
}

.asker img{
    margin-right: 10px;
}

.ans{
    text-align: left;
    width: 100%;
    padding: 25px;
    margin-left: 0;
}

.audio{
    background: {color:post};
    width:100%;
    margin-right: 3px;
}

.songart img{
    width: 195px;
    float:left;
}

.songtitle, .songauthor{
    position: relative;
    width: 100%;
    left: 10px;
}

.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;
    left: 10px;
    opacity: .8;
    filter: invert(100%);
}

.link{
    padding:35px 25px;
}

.link a{
  line-height: 100%;
}

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

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

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

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

/*tags*/

.tags{
  font-family: 'Roboto Mono', monospace;
  margin-bottom: 100px;
  padding: 10px;
  text-align: right;
  {block:permalinkpage}
  padding:10px 0;
  text-align: left;
  padding-bottom: 100px;
  margin-left: 20px;
  {/block:permalinkpage}
}

.tags a{
    padding: 0 5px;
}


.via{
  font-family: 'Roboto Mono', monospace;
  text-align: left;
  margin-top: 10px;
  margin-left: 20px;
  color: {color:link};
}


/*postinfo*/

#postinfo{
  display: flex;
  justify-content: flex-end;
  background: {color:link};
  padding: 15px 8px;
  writing-mode: vertical-lr;
  color:{color:post};
  font-family: 'Roboto Mono', monospace;
  border-bottom: 0px solid {color:accent};
  text-transform: uppercase;
}

#postinfo:hover{
   border-bottom: 8px solid {color:accent};
}

#postinfo a{
    color: {color:background};
    padding: 10px 0;
}

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

#postinfo .fas{
    color:{color:background};
}

#postinfo .fas:hover{
    transform: rotate(180deg);
    color: {color:accent};
}


</style>

</head>

<body>




<!--posts-->

<div id="sitecontainer">

  <div id="menu">
    <a href="/"><h1 id="title">{title}</h1></a>
    <ul class="links">
      <li><a href="#about" rel="modal:open" class="open-modal">about</a></li>
      <li><a href="#msg" rel="modal:open" class="open-modal">message</a></li>
      <li><a href="https://www.tumblr.com/follow/vocitates" title="">follow</a></li>
    </ul>

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

    <!--credit-->

<div id="credit"> <a href="vocitates.tumblr.com" title="theme credit"><i class="fas fa-code"></i></a> </div>
  </div>

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

      <!--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}
      <div class="caption text">
        {Body}
      </div>
      {block:Title}
      <h1 class="text"><i class="fas fa-pen fa-fw"></i> {Title}</h1>{/block:Title} {/block:Text}


      <!--ask&answer post-->

      {block:Answer}
      <div class="ask">
        <div class="quest"><span class="asker"><img src="{AskerPortraitURL-30}">{asker} said:</span> {Question}</div>
        <div class="caption ans">{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}{Video-500}{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}


      <!--post info-->

      {block:Date}
      <div id="postinfo">
        <a class= href="{permalink}"><h3>{MonthNumberWithZero}{dayofmonth} {12HourWithZero}:{Minutes}</h3></a>
        <a class="reblog" href="{reblogURL}"><i class="fas fa-sync-alt"></i></a>
      </div>

      {/block:Date}

    </div>

    {block:PermalinkPage}
    <div class="via">{block:RebloggedFrom}<i class="fas fa-sync-alt"></i> <a href="{ReblogParentURL}"> {ReblogParentName}</a>{/block:RebloggedFrom}</div>
    <div class="via">{block:ContentSource} <i class="fas fa-map-marker-alt"></i> <a href="{SourceURL}">{SourceTitle}</a>{/block:ContentSource} </div>
    <div class="via">{block:NoteCount}<i class="fas fa-sticky-note"></i> {NoteCount}{/block:NoteCount}</div>
    {/block:PermalinkPage}

    <div class="tags">
      {block:HasTags}
      <i class="fas fa-times"></i> {block:Tags}
      <a href="{TagURL}">{Tag} </a> {/block:Tags} {/block:HasTags}
    </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>

<div id="about" class="modal"><h1>about.</h1>{description}</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>