Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <head>
- <!--
- Chihiro Theme by Mangolias
- Credits: pxu photosets by pixel union
- icons by feathericons.com
- responsive videos by nouvae.tumblr.com
- -->
- <title>{Title}</title>
- <link rel="shortcut icon" href="{Favicon}">
- {block:Description}
- <meta name="description" content="{MetaDescription}">
- {/block:Description}
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="if:Show Avatar" content="">
- <meta name="if:Show Tags" content="">
- <meta name="if:Full Photosets" content="">
- <meta name="if:Show Captions" content="">
- <meta name="select:Post Width" content="400px">
- <meta name="select:Post Width" content="500px">
- <meta name="color:Background" content="#f2f2f2">
- <meta name="color:Posts" content="#ffffff">
- <meta name="color:Title" content="#bdaea0">
- <meta name="color:Text" content="#c8b49e">
- <meta name="color:Question Color" content="#ece6e0">
- <meta name="color:Accent Color" content="#9f7f5b">
- <meta name="color:Navigation" content="#ffffff">
- <meta name="text:Title Font Size" content="20px">
- <meta name="text:Home" content="Home">
- <meta name="text:Ask" content="Ask">
- <meta name="text:Archive" content="Archive">
- <meta name="text:Link One" content="">
- <meta name="text:Link One URL" content="">
- <meta name="text:Link Two" content="">
- <meta name="text:Link Two URL" content="">
- <meta name="text:Link Three" content="">
- <meta name="text:Link Three URL" content="">
- <meta name="text:Tag One" content="">
- <meta name="text:Tag Two" content="">
- <meta name="text:Tag Three" content="">
- <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i&display=swap" rel="stylesheet">
- <style type="text/css">
- body {
- margin: 0;
- background-color: {color:Background};
- color: {color:Text};
- font-size: 11px;
- font-family: 'Karla', sans-serif;
- word-spacing: 1px;
- word-wrap: break-word;
- -webkit-font-smoothing: antialiased;
- font-smoothing: antialiased
- }
- a {
- text-decoration: none;
- color: {color:Text};
- -webkit-transition: 0.4s ease;
- transition: 0.4s ease;
- }
- a:hover {
- opacity: .5;
- }
- h1, h2, h3, h4 {
- font-size: 13px;
- font-weight: 600;
- font-family: 'Karla', sans-serif;
- }
- hr {
- border: none;
- box-shadow: 0;
- margin: 1em auto;
- border-top: 1px solid {color:Accent Color};
- }
- img {
- border: 0;
- max-width: 100%;
- }
- b, strong {
- font-weight: 600;
- }
- ul {
- list-style: none;
- margin: 0;
- padding: 0;
- }
- .up {
- text-transform: uppercase;
- }
- .accent {
- font-style: italic;
- }
- blockquote {
- margin: 0;
- }
- blockquote img {
- width: 100%;
- height: auto;
- }
- p img {
- width: 100%;
- height: auto;
- }
- /* active */
- .active {
- color: #ffffff;
- background-color: {color:Accent Color};
- }
- .active:hover,
- .active:focus {
- cursor: pointer;
- }
- .vl {
- border-left: 1px solid {color:Accent Color};
- height: 100%;
- opacity: .5;
- }
- /* aside nav */
- nav {
- background-color: {color:Navigation};
- width: 100%;
- margin-bottom: 40px;
- z-index: 1;
- position: fixed;
- }
- .sticky {
- position: fixed;
- top: 0;
- width: 100%;
- }
- .sticky + .content {
- padding-top: 102px;
- }
- nav li {
- list-style-type: none;
- display: inline-block;
- }
- nav a {
- display: inline-block;
- color: {color:Text};
- }
- .icons {
- padding: 20px;
- opacity: .8;
- }
- .icon {
- position: relative;
- text-transform: lowercase;
- }
- .icon .tooltip {
- visibility: hidden;
- background-color: {color:Accent Color};
- color: #ffffff;
- text-align: center;
- padding: 5px 10px;
- position: absolute;
- z-index: 11;
- bottom: -25%;
- left: 70%;
- opacity: 0;
- transition: opacity 0.3s;
- border-radius: 3px;
- }
- .icon:hover .tooltip {
- visibility: visible;
- opacity: 1;
- }
- /* aside modal */
- aside section {
- margin: 0 auto;
- right: 10%;
- top: 10%;
- }
- aside .avatar {
- width: 40px;
- border-radius: 5px;
- }
- aside .avatar.circle {
- border-radius: 50%;
- }
- aside h1.blogtitle a {
- color: {color:Title};
- font-size: {text:Title Font Size};
- font-weight: 400;
- font-style: italic;
- font-family: 'Karla', sans-serif;
- }
- aside .description {
- margin-bottom: 10px;
- color: {color:Title};
- }
- .modal {
- display: flex;
- flex-direction: column;
- width: 0;
- height: 100vh;
- position: fixed;
- top: 53px;
- background-color: rgba(255, 255, 255, .9);
- overflow: hidden;
- z-index: 10;
- -webkit-transition: 0.6s ease;
- transition: 0.6s ease;
- }
- .header {
- padding: 200px 100px;
- width: 200px;
- text-align: center;
- }
- .header a {
- color: {color:Title};
- }
- .close {
- position: absolute;
- top: 0;
- right: 0;
- padding: 20px 22px;
- opacity: .8;
- }
- /* content */
- .content {
- background-color: {color:Background};
- overflow: hidden;
- }
- .entry {
- position: relative;
- width: 100%;
- padding: 40px;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- overflow: hidden;
- }
- .entry:last-child {
- margin-bottom: 0;
- }
- .entry:first-child {
- margin-top: 100px;
- }
- .post {
- max-width: {select:Post Width};
- background-color: {color:Posts};
- margin: 0 auto;
- min-width: 200px;
- }
- .controls {
- position: absolute;
- margin-left: {select:Post Width};
- text-transform: lowercase;
- top: 40px;
- }
- .post .media {
- position: relative;
- }
- /* posts */
- .text {
- padding: 20px;
- }
- .title {
- font-weight: 600;
- font-size: 13px;
- }
- .quote {
- padding: 30px 20px 10px 20px;
- font-size: 13px;
- font-family: 'Karla', sans-serif;
- }
- .quotetext {
- padding: 0 0 30px 30px;
- font-weight: 600;
- }
- .chat {
- padding: 30px 30px;
- line-height: 17px;
- }
- .chattitle {
- font-weight: 600;
- padding-bottom: 10px;
- font-size: 13px;
- }
- .message {
- padding: 30px;
- }
- .asker {
- padding: 0 30px 5px 0;
- }
- .question {
- padding: 15px;
- margin-bottom: 5px;
- border-radius: 0 10px 10px 10px;
- background-color: {color:Question Color};
- }
- .link {
- position: relative;
- background-color: {color:Post};
- padding: 30px 20px;
- }
- .linkname {
- vertical-align: middle;
- font-family: 'Karla', sans-serif;
- font-size: 13px;
- padding-left: 60px;
- }
- .linkicon {
- overflow: hidden;
- position: absolute;
- padding-left: 15px;
- }
- .linkdesc {
- padding-top: 10px;
- font-weight: normal;
- font-size: 11px;
- }
- .video {
- max-width: 100% !important;
- height: auto;
- }
- /* audio */
- .audio {
- position: relative;
- background-color: {color:Posts};
- }
- .player {
- clip: rect(0, 29px, 28px, 4px);
- overflow: hidden;
- opacity: .8;
- position: absolute;
- top: 45px;
- left: 45px;
- }
- .track {
- vertical-align: middle;
- font-family: 'Karla', sans-serif;
- font-size: 13px;
- line-height: 16px;
- position: absolute;
- top: 10%;
- left: 120px;
- padding: 30px;
- }
- .artist {
- font-size: 11px;
- }
- .album {
- width: 120px;
- height: 120px;
- opacity: .9;
- }
- /* controls */
- .button {
- color: #ffffff;
- background-color: {color:Accent Color};
- padding: 4px 10px;
- margin: 2px;
- border-radius: 3px;
- opacity: .6;
- }
- .when {
- text-transform: uppercase;
- border-bottom: 1px solid {color:Text};
- margin: 0 10px 0 0;
- }
- .pagination {
- position: relative;
- width: 85%;
- max-width: {select:Post Width};
- text-align: center;
- margin: 0 auto;
- left: 0;
- bottom: 20px;
- }
- /* info */
- .info {
- margin-top: 5px;
- background-color: {color:Background};
- }
- .info li {
- display: inline-block;
- }
- .comma:last-child {
- display: none;
- }
- .tags {
- padding: 12px 0 5px;
- }
- .caption {
- margin-left: 20px;
- padding-top: 5px;
- }
- .caption img {
- max-width: 100%;
- height: auto;
- }
- .permalink {
- padding: 5px 20px 5px;
- }
- /* notecontainer */
- .notestitle {
- padding: 20px 20px 0 20px;
- font-weight: 700;
- }
- .notecontainer ol.notes {
- list-style-type: none;
- padding: 0 20px 0 20px;
- }
- .notecontainer img.avatar {
- display: none;
- }
- .notecontainer ol.notes li.note {
- padding-bottom: 5px;
- }
- .notecontainer ol.notes li.note:last-child {
- display: block;
- width: calc({select:Post Width} - 65px);
- padding: 20px;
- }
- /* other */
- .theme {
- position: fixed;
- font-size: 13px;
- right: 15px;
- bottom: 25px;
- width: 16px;
- height: 15px;
- padding: 2px 2px 3px;
- text-align: center;
- color: #ffffff;
- background-color: #ebebeb;
- border-radius: 50%;
- }
- ::-webkit-scrollbar {
- width: 15px;
- height: 15px;
- }
- ::-webkit-scrollbar {
- background-color: {color:Background};
- }
- ::-webkit-scrollbar-track {
- background-color: {color:Background};
- border: 5px solid {color:Background};
- }
- ::-webkit-scrollbar-thumb {
- background-color: {color:Text};
- border: 5px solid {color:Background};
- border-radius: 10px;
- min-height: 24px;
- min-width: 24px;
- }
- ::-webkit-scrollbar-corner {
- background-color:{color:Background};
- }
- </style>
- <!-- jquery library-->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <!-- pixel union photoset for margins -->
- <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
- <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
- <!-- feathericons.com -->
- <link href="https://static.tumblr.com/kmw8hta/oSwpvpnik/feather.css" rel="stylesheet">
- <!-- nouvae responsive videos -->
- <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
- <script>
- $(document).ready(function() {
- flexibleFrames($(".video"));
- });
- </script>
- </head>
- <body>
- <aside>
- <nav id="myNav"><ul>
- <li><span class="icon icons active" onclick="openNav()">
- <span class="fx fx-menu"></span></span></li>
- <li><a href="/" class="icon icons"><span class="fx fx-home"></span>
- <span class="tooltip">{text:Home}</span>
- </a></li>
- {block:AskEnabled}
- <span class="vl"></span>
- <li><a href="/ask" class="icon icons"><span class="fx fx-mail"></span>
- <span class="tooltip">{text:Ask}</span>
- </a></li>
- {/block:AskEnabled}
- {block:IfArchive}
- <span class="vl"></span>
- <li><a href="/archive" class="icon icons"><span class="fx fx-calendar"></span>
- <span class="tooltip">{text:Archive}</span>
- </a></li>
- {/block:IfArchive}
- </ul></nav>
- <!-- The Modal -->
- <div id="myModal" class="modal">
- <!-- Modal content -->
- <a href="#" onclick="closeNav()">
- <span class="close active"><span class="fx fx-x"></span></span></a>
- <section class="header">
- {block:IfShowAvatar}
- <a href="/"><img src="{PortraitURL-128}" class="avatar {AvatarShape}"></a>
- {/block:IfShowAvatar}
- <h1 class="blogtitle"><a href="/">{Title}</a></h1>
- <div class="description">{Description}</div>
- <ul>
- {block:HasPages}{block:Pages}
- <li><a href="{URL}">{Label}</a></li>
- {/block:Pages}{/block:HasPages}
- {block:IfLinkOne}<li><a href="{text:Link One URL}">{text:Link One}</a></li>{/block:IfLinkOne}
- {block:IfLinkTwo}<li><a href="{text:Link Two URL}">{text:Link Two}</a></li>{/block:IfLinkTwo}
- {block:IfLinkThree}<li><a href="{text:Link Three URL}">{text:Link Three}</a></li>{/block:IfLinkThree}
- </ul>
- <br>
- <ul>
- {block:IfTagOne}<li><a href="/tagged/{text:Tag One}">#{text:Tag One} </a></li>{/block:IfTagOne}
- {block:IfTagTwo}<li><a href="/tagged/{text:Tag Two}">#{text:Tag Two} </a></li>{/block:IfTagTwo}
- {block:IfTagThree}<li><a href="/tagged/{text:Tag Three}">#{text:Tag Three} </a></li>{/block:IfTagThree}
- </ul>
- </section>
- </div>
- </aside>
- <div class="content">{block:Posts}
- <article class="entry" id="{PostID}">
- <section class="post">
- <section class="controls">
- {block:Date}
- <!-- controls -->
- <ul>
- {block:RebloggedFrom}
- <li><a href="{ReblogParentURL}" class="icon">
- <img src="{ReblogParentPortraitURL-24}">
- <span class="tooltip">via {ReblogParentName}</span>
- </a></li>
- {/block:RebloggedFrom}
- {block:NotReblog}
- <li><a href="/" class ="icon">
- <img src="{PortraitURL-24}">
- <span class="tooltip">{Title}</span>
- </a></li>
- {/block:NotReblog}
- </ul>
- {/block:Date}
- </section>
- <!-- audio -->
- {block:Audio}
- <div class="audio">
- {block:AlbumArt}
- <div class="album">
- <img src="{AlbumArtURL}">
- </div>
- {/block:AlbumArt}
- {block:AudioPlayer}
- <div class="player">{AudioPlayer}</div>
- {/block:AudioPlayer}
- {block:TrackName}
- <div class="track">{TrackName}
- {/block:TrackName}
- <br>
- {block:Artist}
- <span class="artist accent">by {Artist}</span></div>
- {/block:Artist}
- </div>
- {/block:Audio}
- <!-- photo -->
- {block:Photo}
- <div class="media">
- {LinkOpenTag}
- <a href="{Permalink}">
- <img src="{PhotoURL-HighRes}"/></a>
- {LinkCloseTag}
- </div>
- {/block:Photo}
- <!-- photoset -->
- {block:Photoset}
- <div class="media photoset">
- {block:PermalinkPage}
- <!-- pixel union photosets -->
- <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>
- <!-- pxel union photoset ends -->
- {/block:PermalinkPage}
- {block:ifFullPhotosets}
- {block:IndexPage}
- <!-- pixel union photosets -->
- <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>
- <!-- pxel union photoset ends -->
- {/block:IndexPage}
- {/block:ifFullPhotosets}
- {block:ifNotFullPhotosets}
- {block:IndexPage}
- {block:Photos}<img src="{PhotoURL-HighRes}">
- <!--{/block:Photos}-->
- {/block:IndexPage}
- {/block:ifNotFullPhotosets}
- </div>
- {/block:Photoset}
- <!-- text -->
- {block:Text}<div class="text">
- {block:Title}<h1>{Title}</h1>{/block:Title}
- {Body}</div>
- {/block:Text}
- <!-- quote -->
- {block:Quote}
- <div class="quote">{Quote}</div>
- {block:Source}<div class="quotetext">— {Source}</div>{/block:Source}
- {/block:Quote}
- <!-- video -->
- {block:Video}
- <div class="video">
- {Video-400}
- </div>
- {/block:Video}
- <!-- questions and answers -->
- {block:Answer}
- <div class="message">
- <div class="asker"><strong>{Asker}</strong> said<br/></div>
- <div class="question">{Question}<br/></div>
- {Answer}
- </div>
- {/block:Answer}
- <!-- chat posts -->
- {block:Chat}
- <div class="chat">{block:Title}<div class="chattitle">{Title}<br/></div>{/block:Title}{block:Lines}
- {block:Label}<strong>{Label}</strong>{/block:Label} {Line}<br/>
- {/block:Lines}</div>
- {/block:Chat}
- <!-- link posts -->
- {block:Link}<div class="link">
- <div class="linkicon"><span class="fx fx-external-link"></span></div>
- <div class="linkname"><a href="{URL}">{Name}</a>
- <div class="linkdesc accent">{block:Host}{Host}{/block:Host}<br>{block:Excerpt}{Excerpt}{/block:Excerpt}</div></div>
- </div>{/block:Link}
- </section>
- <!-- info -->
- {block:Date}
- <section class="info post">
- <ul>
- <li><a href="{Permalink}" class="when">
- {month} {dayofmonth}{dayofmonthsuffix}</span>
- </a></li>
- <li><a href="{permalink}" class="when">
- +{NoteCount}
- </a></li>
- <li><a href="{ReblogURL}" target="_blank" class="when">
- reblog
- </a></li>
- </ul>
- <!-- caption -->
- {block:ifShowCaptions}
- {block:Caption}
- <div class="captionwrap">
- <div class="caption">{Caption}</div></div>
- {/block:Caption}
- {/block:ifShowCaptions}
- <!-- source permalink page -->
- {block:PermalinkPage}
- <div class="permalink">
- {block:RebloggedFrom}
- Via: <a href="{ReblogParentURL}">{ReblogParentName}</a><br>
- {block:ContentSource}
- Source: <a href="{ReblogRootURL}">{ReblogRootName}</a>
- {/block:ContentSource}
- {/block:RebloggedFrom}
- </div>
- {/block:PermalinkPage}
- <!-- tags -->
- {block:IfShowTags}
- {block:HasTags}
- <div class="tags accent"><span class="fx fx-tag"></span>
- {block:Tags}
- <a href="{TagURL}"><span class="button">{Tag}</span></a>
- {/block:Tags}
- </div>
- {/block:HasTags}
- {/block:IfShowTags}
- </section> {/block:Date}
- </article> {/block:Posts}
- <!-- {block:ContentSource}{SourceURL}{/block:ContentSource}{block:RebloggedFrom}{ReblogRootURL}{ReblogParentURL}{/block:RebloggedFrom} -->
- <!-- post notes -->
- {block:PostNotes}
- <article class="entry">
- <section class="post notecontainer">
- <a class="notecount" href="{permalink}">{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</a>
- <div class="notestitle">Notes</div>
- {PostNotes}
- </section>
- </article>
- {/block:PostNotes}
- <!-- pagination -->
- <div class="pagination">
- {/block:Pagination}
- {block:PreviousPage}
- <a class="previous_page" href="{PreviousPage}">Previous</a>
- {/block:PreviousPage}
- {block:NextPage}
- <a class="next_page" href="{NextPage}">Next page</a>
- {/block:NextPage}
- </div>
- {/block:Pagination}
- </div> <!-- div class content end -->
- <a class="theme" href="https://mangolias.tumblr.com/" target="_blank">+</a>
- </div>
- <!-- modal -->
- <script>
- function openNav() {
- document.getElementById("myModal").style.width = "100%";
- document.getElementById("myModal").style.left = "0";
- }
- function closeNav() {
- document.getElementById("myModal").style.width = "0";
- document.getElementById("myModal").style.left = "0";
- }
- </script>
- <!-- pixel union photosets -->
- <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>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment