telegram

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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="#000">
  <meta name="color:menu" content="#111">
  <meta name="color:text" content="#fff">
  <meta name="color:link" content="#fff">
  <meta name="color:accent" content="#FF6347">

  <meta name="text:link1" content="link 1">
  <meta name="text:link2" content="link 2">
  <meta name="text:asktitle" content="">
  <meta name="text:faqtitle" content="">
  <meta name="text:faq" content="">
  <meta name="text:descriptiontitle" content="about">


  <!--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=Inconsolata|Open+Sans|Teko: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" />

  <!--animate.css-->

  <link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

  <!--WOW!-->

  <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

<script>
    new WOW().init();
</script>



  <style type="text/css">

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

/***************GENERAL PAGE STYLE***************/

* {
  margin: 0;
  box-sizing: border-box;
  word-wrap: break-word;
}

html {
  font-size: 15px;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
}

body {

  line-height: 180%;
  color: {color:text};
  background-color: {color:background};
}


p{
    margin-bottom: 8px;
}

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

small {
  font-size: 1em;
}

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

img {
  max-width: 100%;
}

a {
  text-decoration: none;
  font-family: 'Inconsolata', sans-serif;
  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;
}

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

/*fontswesome styles*/

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

.fa-tags {
    color: {color:text};
}


/*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: 0;
  border-top: 0;
  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(0,0,0,.5) !important;
}

/***************GENERAL PAGE ELEMENTS***************/

/*modal*/

.blocker {
  background: {color:background};
  z-index: 500;
}

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

.modal h1,
.modal h2 {
    color: {color:accent};
    font-family: 'Teko', serif;
}


/*site container*/

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

/*slide out menu*/

#menu {
    position: fixed;
    margin-top: 50px;
    border-radius: 0 5px 5px 0;
    display: flex;
    margin-left: -250px;
    background: {color:menu};
    z-index: 2;
    animation-delay: .3s;
}

#menu.open {
    margin-left: 0px;
}


/*description*/

#title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    writing-mode: vertical-lr;
    text-transform: lowercase;
    font-size: 1.5em;
    padding: 25px 20px;
}


#title a {
    margin-bottom: 50px;
    line-height: 100%;
    color: {color:text};
    font-family: 'Teko', serif;
    transition: .2s ease;
}

#title a:after {
    content: '.';
}

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

/*button*/

#btn {
    display: flex;
    position: relative;
    align-items: center;
    background: {color:accent};
    padding: .85em 1em;
    border-radius: 3px;
    cursor: pointer;
}

.line{
    position: absolute;
    top: 50%;
    border-bottom: 1px solid {color:text};
    width: 1.3em;
    transition: .5s;
}

.line:before,
.line:after {
    position: absolute;
    content :'';
    width: 1.3em;
    border-bottom: 1px solid {color:text};
    transition: .5s;
}

.line:before {
    top: -8px;
}

.line:after {
    top: 8px;
}

#btn.active .line:before {
    top: 0;
    transform: rotate(45deg);
}

#btn.active .line:after {
    top: 0;
    transform: rotate(135deg);
}

#btn.active .line {
    border-bottom: 0px solid {color:text};
}

/*description*/

#desc{
    width: 250px;
    max-height: calc(100vh - 100px);
    overflow: auto;
    padding: 25px;
    color: {color:text};
    font-family: 'Inconsolata', sans-serif;
    font-size: 1.1em;
}

#desc h1 {
    color: {color:accent};
    font-family: 'Teko', serif;
}

/*search*/

#search {
    margin-top: 25px;
}

.sform input {
    color: {color:text};
    border: none;
    border-left: 1px solid {color:accent};
    margin: 0 auto;
    padding: 8px;;
    letter-spacing: 1px;
    font-family: 'Inconsolata', sans-serif;
    background: transparent;
}

.sform input:focus {
    outline: none;
}

.sform input::placeholder {
  color: {color:link};
  letter-spacing: 2px;
  font-size: 1.1em;
  font-family: 'Inconsolata', sans-serif;
}


/*pagination*/

#pagi{
    position: relative;
    width: 400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items:center;
    padding: 25px 0;
}

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

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

/*navigation links*/

#navwrapper {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 5;
    animation-delay: .3s;
}

.navlinks{
   display: flex;
   justify-content: center;
   padding: 25px;
   background: {color:menu};
}

.navlinks a {
    padding: 3px 10px;
    color: {color:text};
    background: {color:background};
    border-radius: 3px;
    margin: 0 7px;
    height: 2.25em;
    overflow: hidden;
}

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

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

.navlinks a:hover {
    background: {color:accent};
}

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

.credit {
   padding: 3px 10px;
   margin: 0 7px;
   opacity: .5;
   transition: .2s;
}

.credit .fas {
    color: {color:text};
}

.credit:hover {
    opacity: 1;
}

/***************POST GENERAL STYLES & CONTAINER***************/

/*posts*/

#postcontainer{
  padding-top: 50px;
  width: 100%;
}

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

/*caption & reblogs*/

.caption{
  width: 100%;
  padding:10px 0;
}

.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:10px;
  position: relative;
  text-transform: lowercase;
  letter-spacing: 1px;
}

a.tumblr_blog::before {
    content: '\f007';
    font-family: "Font Awesome 5 Free";
    margin-right: 5px;
    color: {color:text};
}

.quote .tumblr_blog {
    bottom:0px;
}

/*postinfo*/

#postinfo{
  display: flex;
  position: absolute;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  padding: 8px;
  padding-top: 15px;
  left: 405px;
  text-align: center;
  letter-spacing: 1px;
  transition: all .2s ease;
  font-size: .7em;
}

#postinfo a {
    color: {color:text};
    font-size: 1.3em;
}

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

#postinfo h1 {
    font-size: 2em;
}

/***************POST TYPES***************/


/*ask & answer*/


.quest{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    padding: 0 25px;
    min-height: 138px;
    background: {color:menu};
}

.asker{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10px;
    letter-spacing: 1px;
    text-transform: lowercase;
    font-family: 'Inconsolata' monospace;
    font-size: .85em;
    color: {color:link};
}

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

.ans{
    text-align: left;
    padding: 20px;
}

/*audio*/

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

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

.songtitle, .songauthor{
    position: relative;
}

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

.play{
    position: relative;
    width: 33px;
    margin-top: 5px;
    overflow: hidden;
    opacity: .8;
    filter: invert(100%);
}

/*link post*/

.link{
    padding: 0 25px;
}

.link a{
  margin-bottom: 10px;
}

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

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

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

/*quote*/

.quote{
   padding: 0 10px;

}

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

/***********TAGS AND SOURCE INFORMATION***********/

/*tags*/

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

.tags a{
    padding: 0 5px;
}

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

.via span {
    font-weight: 700;
}


</style>

</head>

<body>

    <div id="navwrapper" class="animated bounceInDown">
        <div class="navlinks">
            <a href="#msg" rel="modal:open" class="open-modal"><span data-hover="message">message</span></a>
            <a href="#"><span data-hover="{text:link1}">{text:link1}</span></a>
            <a href="#"><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>
        </div>
        <a href="vocitates.tumblr.com" title="" class="credit"><span data-hover=""> <i class="fas fa-code"></i> </span></a>
    </div>


<div id="sitecontainer">

    <!--menu-->

  <div id="menu" class="animated bounceInLeft">

    <div id="desc"> <h1>{text:descriptiontitle}</h1> {description}

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

    <div id="title">
        <h1><a href="/">{title}</a></h1>

        <div id="btn">
            <div class="line"></div>
        </div>
    </div>
  </div>

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

      <!--post info-->

      {block:Date}
      <div id="postinfo">
        <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>
      {/block:Date}


      <!--photo-->

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

      <!--photoset-->

      {block:Photoset}
        <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>
      {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}{Video-400}{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}

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

    </section>

    {/block:posts}

    {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>

<!--ask box-->

<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>
  <h2>{text:faqtitle}</h2>
  {text:faq}
</div>

<!----------SCRIPTS---------->

<!--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: false,
      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: 200,
      fadeDelay: 0,
      showClose: false,
    });
    return false;
  });
</script>

<script>
var effects = 'animated rubberBand faster';
var effectsTwo = 'animated pulse faster';
var effectsEnd = 'animationend oAnimationEnd mozAnimationEnd webkitAnimationEnd';

$( "#btn" ).click(function() {
  $( "#menu" ).toggleClass( "open", 150 );
});

$( "#btn").click(function() {
    $( this ).toggleClass( "active");
});

$("#title h1, #postinfo a, .navlinks a").hover(function(){
   $( this ).addClass(effectsTwo).one(effectsEnd, function() {
      $( this ).removeClass(effectsTwo);
   });
});

$("#btn").hover(function(){
   $( this ).addClass(effects).one(effectsEnd, function() {
      $( this ).removeClass(effects);
   });
});



</script>

</body>

</html>