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">
- <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">
- <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=Montserrat:400,600,900|Roboto+Mono:400,700|Archivo+Black" 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" />
- <!--waypoints-->
- <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
- <style type="text/css">
- .iframe-controls--desktop {
- display: none;
- }
- /*general styles*/
- * {
- box-sizing: border-box;
- margin: 0;
- }
- html {
- font-size: 13px;
- 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};
- }
- p{
- margin-bottom: 8px;
- }
- b {
- color: {color:accent};
- font-weight: 600;
- }
- small {
- font-size: 1em;
- }
- h1{
- color: {color:link};
- margin-bottom: 10px;
- font-weight: 600;
- letter-spacing: 1px;
- }
- h2{
- font-weight: 600;
- 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};
- 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: 0 auto;
- margin-top: 5px;
- margin-bottom: 5px;
- width: 50%;
- background: {color:link};
- }
- .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: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:4px solid {color:background};
- 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:4px 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:{color:accent} !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: 500;
- }
- .modal iframe {
- margin-top: 10px;
- }
- #nav {
- position: relative;
- display: none;
- width: 50%;
- height: 100%;
- margin:0;
- text-align: center;
- background: {color:background};
- overflow: auto;
- }
- #nav img {
- margin-bottom: 0px;
- }
- #desc{
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- text-align: left;
- height: 30%;
- max-height: 30%;
- width: 90%;
- overflow: auto;
- padding: 25px;
- padding-top: 25px;
- margin: 0 auto;
- margin-top: -45px;
- background: {color:post};
- }
- #desc h1{
- text-align: left;
- }
- #desc h1::after{
- content:'.';
- color: {color:accent};
- }
- .sform input, .sform button {
- background-color: {color:post};
- color: {color:link};
- font-size: 1.1em;
- font-family: 'Roboto Mono', monospace;
- border: 0px;
- max-width: 90%;
- height: 10%;
- margin-top: 3px;
- padding: 20px 10px;
- letter-spacing: 1px;
- }
- .sform input {
- width: 80%;
- }
- .sform button {
- width: 10%;
- }
- .navlinks{
- display: flex;
- flex-direction: column;
- align-items: center;
- height: 60%;
- max-height: 50%;
- width: 90%;
- margin: 0 auto;
- margin-top: 3px;
- overflow: auto;
- }
- .navlinks a{
- font-family: 'Roboto Mono', monospace;
- text-align: left;
- margin: 0 auto;
- padding: 20px 10px;
- margin-bottom: 3px;
- width: 100%;
- background: {color:post};
- font-size: 1.1em;
- letter-spacing: 1px;
- }
- .navlinks a::before{
- font-family: "Font Awesome 5 Free";
- font-weight: 900;
- margin-right: 10px;
- transition: all .2s ease;
- content: "\f0da";
- }
- .navlinks a:hover{
- color: {color:link};
- padding-left: 15px;
- }
- .navlinks a:hover::before{
- color: {color:accent};
- }
- #btn{
- color: {color:background};
- position: absolute;
- top: 25px;
- right: 45px;
- transition: .5s ease-out .1s;
- }
- #btn.rotate{
- transform: rotate(90deg);
- }
- #btn:hover{
- transform: rotate(25deg);
- cursor: crosshair;
- }
- #btn.rotate:hover{
- transform: rotate(50deg);
- }
- #btn .fas{
- color: {color:background};
- font-size: 3em;
- }
- /*navigation*/
- #menu {
- position: fixed;
- display: flex;
- justify-content: space-around;
- align-items: center;
- width: 50%;
- height: 100%;
- text-align: center;
- background: {color:accent};
- transition: all 500ms ease;
- z-index: 30;
- }
- #menu.wide {
- width: 100%;
- justify-content: space-between;
- padding-right: 65px;
- z-index: 50;
- }
- #menu ul {
- font-family: 'Roboto Mono', monospace;
- display: flex;
- }
- #menu ul li {
- padding: 10px 0;
- }
- #title {
- font-size: 7em;
- font-weight: 900;
- margin: 0;
- writing-mode: vertical-rl;
- transition: .2s ease;
- letter-spacing: 3px;
- line-height: 100%;
- color: {color:background};
- }
- #title:hover {
- color: {color:link};
- }
- #title::after {
- content: '.';
- color: {color:link};
- font-size: .7em;
- }
- #pagi{
- height: 100px;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-around;
- }
- #pagi a{
- padding: 5px;
- background: {color:background};
- border-radius: 3px;
- transition: all .2s ease;
- }
- #pagi a:hover .fas{
- color: {color:link};
- }
- /*posts, containers*/
- #sitecontainer{
- width:100%;
- height: 100vh;
- display:flex;
- align-items: flex-start;
- justify-content: space-between;
- }
- #postcontainer{
- display: flex;
- position: absolute;
- right: 0;
- padding-top: 25px;
- flex-direction: column;
- width: 50%;
- transition: all .2s ease;
- }
- #postcontainer.wide {
- transition: all .2s ease;
- }
- .post{
- position: relative;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- width: 100%;
- min-height: 195px;
- margin: 0 auto;
- transition: all 2s ease .1s;
- }
- /*caption & reblogs*/
- .caption{
- width: 80%;
- flex-direction: column;
- display: flex;
- align-items: flex-start;
- font-size: 1.1em;
- padding: 35px 10px;
- padding-top:20px;
- margin: 0 auto;
- margin-top: -20px;
- z-index: 5;
- background: {color:post};
- }
- .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{
- 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;
- }
- .quote .tumblr_blog {
- bottom:0px;
- }
- /*postinfo*/
- #postinfo{
- display: flex;
- position: absolute;
- left: -35px;
- top: auto;
- justify-content: center;
- padding: 15px 8px;
- height: 100%;
- writing-mode: vertical-lr;
- color:{color:link};
- font-family: 'Roboto Mono', monospace;
- text-transform: uppercase;
- transform: rotate(180deg);
- z-index: 40;
- transition: all .2s ease;
- }
- #postinfo a{
- color: {color:link};
- padding: 10px 0;
- }
- #postinfo a:hover{
- color:{color:background};
- }
- #postinfo .fas{
- font-size: 1.2em;
- color:{color:link};
- transition: all .2s ease;
- }
- #postinfo .fas:hover{
- transform: rotate(140deg);
- color: {color:background};
- }
- /*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;
- }
- /*ask & answer*/
- .ask{
- width: 100%;
- }
- .quest{
- font-family: 'Roboto Mono', monospace;
- display: flex;
- flex-direction: column;
- text-align: right;
- width: 90%;
- margin: 0 auto;
- padding: 25px;
- background: {color:post};
- }
- .quest:after{
- content: "";
- position: absolute;
- top: 35px;
- right: 4%;
- 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: 90%;
- padding: 20px;
- margin-top: 3px;
- letter-spacing: 1px;
- background: {color:post};
- }
- /*audio*/
- .audio{
- background: {color:post};
- width:100%;
- }
- .songart img{
- width: 195px;
- 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;
- filter: invert(100%);
- }
- /*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;
- }
- /*video*/
- .video{
- text-align: center;
- margin: 0 auto;
- }
- .video .caption{
- width: 100%;
- margin-top: 3px;
- }
- /*tags*/
- .tags{
- font-family: 'Roboto Mono', monospace;
- text-transform: lowercase;
- margin-bottom: 50%;
- 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};
- }
- footer {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 5px 0;
- width: 100%;
- background: {color:post};
- color: {color:background};
- }
- @media only screen and (max-width: 869px) {
- #menu {
- width: 100%;
- height: 60px;
- padding: 0;
- justify-content: space-around;
- }
- #title {
- display: inline;
- writing-mode: horizontal-tb;
- font-size: 2em;
- letter-spacing: 0px;
- }
- #btn {
- display: none;
- }
- #nav{
- width: 70%;
- height: 100%;
- display: block;
- justify-content: center;
- background: transparent;
- }
- .sform input, .sform button {
- padding: 5px;
- margin: 0;
- margin-top: 15px;
- }
- #nav img{
- display: none;
- }
- .navlinks{
- display:none;
- }
- #desc{
- display: none;
- }
- #postcontainer{
- position: relative;
- width: 100%;
- padding-top: 100px;
- margin: 0 auto;
- }
- #postinfo {
- position: relative;
- left: 0;
- top: 0;
- width: 100%;
- margin: 0 auto;
- margin-bottom: 3px;
- padding: 0 20px;
- justify-content: space-between;
- writing-mode: horizontal-tb;
- transform: rotate(0deg);
- z-index: 0;
- background: {color:post};
- }
- #postinfo a:hover {
- color: {color:accent};
- }
- #pagi {
- flex-direction: row;
- }
- #pagi a{
- padding: 5px;
- margin: 0 8px;
- font-size: .9em;
- }
- .quest:after{
- content:'';
- display: none;
- }
- .quest, .ans {
- width: 100%
- }
- footer {
- margin-left: -5%;
- width: 105%;
- }
- }
- </style>
- </head>
- <body>
- <!--posts-->
- <div id="sitecontainer">
- <div id="menu">
- <div id="nav">
- <img src="{image:Header}"><div id="desc"> <h1>{text:descriptiontitle}</h1> {description}</div></img>
- <form action="/search" method="get" class="sform">
- <input type="text" name="q" placeholder="search..."/>
- <button type="submit"><i class="fas fa-search"></i></button>
- </form>
- <div class="navlinks">
- <a href="#msg" rel="modal:open" class="open-modal">message</a>
- <a href="#tagbox" rel="modal:open" class="open-modal">tags</a>
- <a href="#" rel="modal:open" class="open-modal">link</a>
- <a href="https://www.tumblr.com/follow/vocitates" title="">follow</a>
- </div>
- </div>
- <a href="/"><h1 id="title">{title}</h1></a>
- {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 id="btn"><i class="fas fa-bars fa-fw"></i></div>
- </div>
- <div id="postcontainer">
- {block:posts}
- <div class="post">
- <!--post info-->
- {block:Date}
- <div id="postinfo">
- <a href="{permalink}"><h3>{MonthNumberWithZero}|{dayofmonthwithzero} {12HourWithZero}:{Minutes}</h3></a>
- <a class="reblog" href="{reblogURL}"><i class="fas fa-sync-alt"></i></a>
- </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"><i class="fas fa-pen fa-fw"></i> {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">{block:indexpage}<a class="vidlink" href="{permalink}"><h1><i class="fas fa-video"></i> video</h1></a>{/block:indexpage}{block:permalinkpage}{Video-500}{/block:permalinkpage}</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">{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-star"></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}
- <!-- <footer>
- <p>lemons theme</p>
- <p>created by: <a href="hoechlin.tumblr.com">hoechlin</a></p>
- <p>powered by tumblr</p>
- </footer> -->
- </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="tagbox" class="modal"></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>
- <!--slideout menu-->
- <script>
- $("#btn").click(function () {
- var effect = 'slide';
- var duration = 500;
- $('#nav').toggle(effect, duration);
- });
- </script>
- <script>
- $( "#btn" ).click(function() {
- $( this ).toggleClass( "rotate", 500 );
- $( "#menu").toggleClass( "wide", 500 );
- $( "#postcontainer").toggleClass( "wide", 500 );
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment