Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
- <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:link 1 title" content="link 1">
- <meta name="text:link 2 title" content="link 2">
- <meta name="text:link 1 url" content="your link here">
- <meta name="text:link 2 url" content="your link here">
- <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>
- <!--tooltips-->
- <script src="https://static.tumblr.com/iyog0da/bF1pf6jgv/jquery.style-my-tooltips.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: 14px;
- 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;
- }
- em, i {
- font-style: italic;
- }
- 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};
- }
- ul li{
- list-style-type:circle;
- }
- ol li {
- list-style-type: decimal-leading-zero;
- }
- 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};
- }
- /*tooltips*/
- #s-m-t-tooltip{
- max-width:300px;
- z-index:100;
- margin-top:30px;
- margin-left: -23px;
- padding:3px 6px;
- background:{color:link};
- border-radius:3px;
- font-family:'Inconsolata' , sans-serif;
- font-size:.8em;
- color:{color:background};
- }
- /*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:menu};
- 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: .7em .8em;
- border-radius: 3px;
- cursor: pointer;
- transition: .2s;
- }
- #btn:hover {
- transform: scale(1.1);
- }
- .line{
- position: absolute;
- top: 50%;
- border-bottom: 1px solid {color:text};
- width: .8em;
- transition: .5s;
- }
- .line:before,
- .line:after {
- position: absolute;
- content :'';
- width: .8em;
- border-bottom: 1px solid {color:text};
- transition: .5s;
- }
- .line:before {
- top: -6px;
- }
- .line:after {
- top: 6px;
- }
- #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;
- }
- #desc h1 {
- color: {color:accent};
- font-family: 'Teko', serif;
- font-size: 1.2em;
- }
- /*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: 15px;
- border-radius: 0 0 5px 5px;
- 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: .1;
- transition: .2s;
- }
- .credit .fas {
- color: {color:text};
- }
- .credit:hover {
- opacity: 1;
- }
- /***************POST GENERAL STYLES & CONTAINER***************/
- /*posts*/
- #postcontainer{
- padding-top: 150px;
- 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 , .caption ol{
- margin: 10px 0;
- }
- .caption ol {
- margin-left: 10px;
- }
- .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:1px;
- position: relative;
- text-transform: lowercase;
- letter-spacing: 1px;
- }
- a.tumblr_blog::before {
- content: '\f007';
- font-family: "Font Awesome 5 Free";
- font-size: .7em;
- 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: 0 8px;
- left: 415px;
- text-align: center;
- letter-spacing: 1px;
- transition: all .2s ease;
- font-size: .7em;
- }
- #postinfo a {
- color: {color:text};
- font-size: 1em;
- background: {color:menu};
- border-radius: 5px;
- padding: 5px 10px;
- margin: 5px 0;
- }
- #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 10px;
- margin-bottom: 0px;
- }
- .link a{
- font-size: 1.3em;
- }
- .link a:hover{
- color: {color:text};
- }
- .link a .fas{
- transition: all .2s ease;
- }
- .link a:hover .fas{
- transform: rotate(45deg);
- color: {color:accent};
- }
- /*quote*/
- .quote{
- padding: 0 10px;
- font-size: .8em;
- }
- .quote h1{
- color: {color:text};
- line-height: 100%;
- margin-bottom: 15px;
- letter-spacing: 1.5px;
- line-height: 1.4;
- font-size: 1.3em;
- }
- /***********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;
- font-size: .8em;
- font-family: 'Inconsolata', sans-serif;
- }
- .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};
- font-size: .8em;
- font-family: 'Inconsolata', sans-serif;
- }
- .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="{text:link 1 url}"><span data-hover="{text:link 1 title}">{text:link 1 title}</span></a>
- <a href="{text:link 2 url}"><span data-hover="{text:link 2 title}">{text:link 2 title}</span></a>
- <a href="https://www.tumblr.com/follow/{name}"><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 fadeIn">
- <!--post info-->
- {block:Date}
- <div id="postinfo">
- <a href="{permalink}" title="{timeago}"><i class="far fa-clock"></i>
- </a>
- <a href="{permalink}" title="permalink"><i class="far fa-bookmark fa-fw"></i></a>
- {block:NoteCount} <a href="{permalink}" title="{notecount} notes"><i class="far fa-sticky-note fa-fw"></i></a>{/block:NoteCount}
- <a href="{reblogURL}" title="reblog"><i class="fas fa-sync-alt fa-fw"></i></a>
- {block:permalinkpage}
- <a id="dash" title="view post on dash"><i class="fas fa-street-view"></i></a>
- {/block:permalinkpage}
- </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>
- <!--tooltips-->
- <script>
- (function($){
- $(document).ready(function(){
- $("[title]").style_my_tooltips({
- tip_follows_cursor:true,
- tip_delay_time:90,
- tip_fade_speed:300,
- attribute:"title"
- });
- });
- })(jQuery);
- </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>
Advertisement
Add Comment
Please, Sign In to add comment