Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- {NewPostStyles}
- <title>
- {Title}{block:TagPage}: posts tagged as #{Tag}{/block:TagPage}
- {block:PostSummary}: {PostSummary}{/block:PostSummary}
- </title>
- <link rel="shortcut icon" href="{Favicon}" />
- <link rel="alternate" type="application/rss+xml" href="{RSS}" />
- {block:Description}
- <meta name="description" content="{MetaDescription}" />
- {/block:Description}
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <!--
- Theme #08: Empyreum
- coded by pneuma-themes
- 1. Don't remove the credit.
- 2. Don't move the credit. Just leave it there.
- 3. Don't use as a base code.
- 4. Please enjoy! If you find any bugs, please contact me! c:
- -->
- <!--Variables-->
- <meta name="color:background" content="#fefefe"/>
- <meta name="color:accent" content="#4760DA"/>
- <meta name="color:body" content="#141414"/>
- <meta name="color:border" content="#eee"/>
- <meta name="color:sidebar background" content="#fff"/>
- <meta name="color:post background" content="#fff"/>
- <meta name="color:footer background" content="#1e1e1e"/>
- <meta name="color:footer text" content="#ddd"/>
- <meta name="image:icon" content=""/>
- <meta name="text:post size" content=""/>
- <meta name="text:font size" content=""/>
- <meta name="text:photoset gutter" content=""/>
- <meta name="text:link 1 title" content="" />
- <meta name="text:link 1 url" content="" />
- <meta name="text:link 2 title" content="" />
- <meta name="text:link 2 url" content="" />
- <meta name="text:link 3 title" content="" />
- <meta name="text:link 3 url" content="" />
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
- <script src="https://unpkg.com/@popperjs/core@2"></script>
- <script src="https://unpkg.com/tippy.js@6"></script>
- <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
- <script src="https://cdn.jsdelivr.net/gh/annasthms/customaudio@latest/customaudio.min.js"></script>
- <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet"/>
- <script src="https://unpkg.com/akar-icons-fonts"></script>
- <link href='https://static.tumblr.com/r7bx1qs/83Cs9varx/note-reblog.css' rel="stylesheet"/>
- <!--✻✻✻✻✻✻ npf audio player by @glenthemes ✻✻✻✻✻✻-->
- <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
- <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
- <script>
- tumblr_npf_audio({
- emptyTitleText: "Untitled track",
- emptyArtistText: "Untitled artist",
- emptyAlbumText: "Untitled album",
- titleLabel: "Track:",
- artistLabel: "Artist:",
- albumLabel: "Album:"
- });
- </script>
- <style edit-npf-audio-player>
- figcaption.audio-caption, figcaption.audio-caption + audio[controls]{
- display:none!important;
- }
- .npf-audio-wrapper {
- --NPF-Audio-Buttons-Size: 1.4rem;
- --NPF-Audio-Buttons-Color: #555555; /* color of play & pause buttons */
- --NPF-Audio-Buttons-Spacing: 1.3rem; /* space between buttons and song info */
- --NPF-Audio-Image-Size: 85px;
- --NPF-Audio-Image-Spacing: 0px; /* gap between player info and cover image */
- margin-bottom:20px !important;
- }
- .npf-audio-background {
- background-color: #f2f2f2; /* background color of player (optional) */
- padding: 1.5rem;
- }
- .npf-audio-title-label,
- .npf-audio-artist-label,
- .npf-audio-album-label {
- font-weight: bold;
- }
- .npf-audio-title,
- .npf-audio-artist,
- .npf-audio-album {
- color: #333333; /* color of audio text (optional) */
- }
- </style>
- <!--✻✻✻✻✻✻ UN-BLUE POLLS by @glenthemes ✻✻✻✻✻✻-->
- <link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet">
- <style>
- .poll-post {
- --Poll-Question-Font-Size: 16px;
- --Poll-Option-Background-Color: #fcfcfc;
- --Poll-Option-Corner-Rounding: 18px;
- --Poll-Option-Border-Size: 2px;
- --Poll-Option-Border-Color: #efefef;
- --Poll-Option-Padding: 15px;
- --Poll-Option-Font-Size: 13px;
- --Poll-Option-Spacing: 10px;
- --Poll-Option-Text-Color: #666666;
- --Poll-Option-HOVER-Border-Color: #cfdae4;
- --Poll-Option-HOVER-Background-Color: #ebf0f4;
- --Poll-Option-HOVER-Text-Color: #1a1b1d;
- --Poll-Option-HOVER-Speed: 0.4s;
- }
- .poll-see-results{
- width:calc(100% - var(--Poll-Option-Padding * 2));
- padding-top:var(--Poll-Option-Padding);
- padding-bottom:var(--Poll-Option-Padding);
- box-shadow:none !important;
- border:2px solid var(--Poll-Option-Border-Color);
- border-radius:var(--Poll-Option-Corner-Rounding);
- background:var(--Poll-Option-Background-Color);
- }
- </style>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <script>
- // minimal soundcloud player © shythemes.tumblr
- $(document).ready(function () {
- var color = "#acd7bb"; // color of play button (hex)
- $(".soundcloud_audio_player").each(function () {
- $(this).attr({
- src:
- $(this).attr("src").split("&")[0] +
- "&liking=false&sharing=false&auto_play=false&show_comments=false&continuous_play=false&buying=false&show_playcount=false&show_artwork=true&origin=tumblr&color=" +
- color.split("#")[1],
- height: 20,
- width: "100%",
- });
- });
- });
- </script>
- <style type="text/css">
- @import url('https://fonts.bunny.net/css?family=public-sans:400,400i,700,800i');
- iframe.tmblr-iframe {
- z-index:99999999999999!important;
- top:10px!important;
- right:10px!important;
- opacity:1;
- /* delete invert(1) from here */
- filter:invert(1) contrast(150%);
- -webkit-filter:invert(1) contrast(150%);
- -o-filter:invert(1) contrast(150%);
- -moz-filter:invert(1) contrast(150%);
- -ms-filter:invert(1) contrast(150%);
- /* to here if your blog has a dark background */
- transform:scale(0.75);
- transform-origin:100% 0;
- -webkit-transform:scale(0.75);
- -webkit-transform-origin:100% 0;
- -o-transform:scale(0.75);
- -o-transform-origin:100% 0;
- -moz-transform:scale(0.75);
- -moz-transform-origin:100% 0;
- -ms-transform:scale(0.75);
- -ms-transform-origin:100% 0;
- }
- iframe[src*='open.spotify.com'][src*='track'], figure[data-npf*='open.spotify.com'][data-npf*='track']{ height:80px!important; }
- body{
- margin:0;
- padding:0;
- background:{color:background};
- color:{color:body};
- font-family:'Public Sans';
- font-size:{text:font size}px;
- }
- .tippy-box{
- background:{color:accent};
- color:{color:body};
- text-transform:lowercase;
- font-size:calc({text:font size}px - 2px);
- }
- ::-webkit-scrollbar{
- width:4px;
- }
- ::-webkit-scrollbar-thumb:vertical{
- background:{color:accent};
- }
- a{
- text-decoration:none;
- color:{color:body};
- }
- #container{
- width:calc({text:post size}px + 600px);
- display:flex;
- flex-wrap:wrap;
- position:relative;
- margin:0 auto !important;
- margin-top:60px !important;
- }
- #sidebar{
- width:450px;
- position:sticky;
- top:60px;
- height:200px;
- box-shadow: -15px -15px 0px 2px {color:accent};
- border-radius:5px;
- border:1px solid {color:border};
- background:{color:sidebar background};
- }
- #sidebar-container{
- margin:20px;
- display:flex;
- flex-wrap:wrap;
- align-items:center;
- }
- #icon{
- width:64px;
- height:64px;
- margin-right:30px;
- }
- #icon img{
- max-width:64px;
- width:64px;
- height:64px;
- border-radius:5px;
- max-height:64px;
- }
- #blogtitle{
- font-size:calc({text:font size}px + 5px);
- text-transform:lowercase;
- font-weight:700;
- width:100%;
- margin-bottom:25px;
- }
- #desc{
- width:100%;
- margin-top:20px;
- }
- #desc a{
- box-shadow:0 -2px inset {color:accent};
- }
- .navigation-links a{
- text-transform:uppercase;
- box-shadow:0 -5px inset {color:accent};
- transition:.5s ease-in;
- margin-right:10px;
- font-weight:700;
- font-size:calc({text:font size}px - 2px);
- }
- .navigation-links a:last-of-type{
- margin-right:0 !important;
- }
- .navigation-links a:hover{
- box-shadow:0 -20px inset {color:accent};
- }
- article{
- width:{text:post size}px;
- position:relative;
- margin-bottom:100px;
- }
- p.npf_quote{
- font-family:'Public Sans' !important;
- font-size:calc({text:font size}px + 3px);
- font-weight:700;
- }
- p.npf_chat{
- background:#eee;
- padding:10px;
- font-family:'Public Sans' !important;
- font-size:{text:font size}px !important;
- }
- .caption, .replies{
- background:{color:post background};
- border-bottom:1px solid {color:border};
- }
- .caption a{
- box-shadow: 0 -5px inset {color:accent};
- }
- .original-post, .reblog-content{
- padding-top:20px;
- padding-bottom:20px;
- }
- .original-post li, .reblog-content li{
- margin-bottom:5px;
- }
- .original-post li:last-of-type, .reblog-content li:last-of-type{
- margin-bottom:0;
- }
- .original-post a, .reblog-content a{
- box-shadow:0 -2px inset {color:accent};
- }
- blockquote.npf_indented, .caption blockquote, .caption blockquote blockquote{
- padding-left:15px;
- border-left:1px solid {color:border};
- }
- #post-container{
- margin-left:50px;
- }
- article img{
- width:100%;
- max-width:100%;
- }
- .photoset-grid{
- grid-gap:{text:photoset gutter}px;
- }
- #quote{
- font-size:calc({text:font size}px + 3px);
- font-weight:700;
- font-style:italic;
- padding:20px;
- text-align:center;
- }
- #source{
- text-align:center;
- padding-top:20px;
- padding-bottom:20px;
- font-weight:700;
- border-bottom:1px solid {color:border};
- border-top:1px solid {color:border};
- }
- .quote-post > .caption{
- display:none;
- }
- .source p{
- display:none;
- }
- .audio-container{
- display:flex;
- width:100%;
- align-items:center;
- flex-wrap:wrap;
- justify-content:center;
- }
- .audio_info{
- width:100%;
- display:flex;
- align-items:center;
- border:1px solid {color:border};
- justify-content:space-between;
- padding:20px;
- padding-top:10px !important;
- border-radius:2px;
- }
- .custom_audio_duration {
- display : inline;
- }
- .audio_player{
- width:100%;
- padding-top:20px;
- display:flex;
- align-items:center;
- justify-content:space-between;
- }
- .audio_player .custom_audio_seekbar {
- width : 80%;
- height : 0.5em;
- border-radius:2px;
- background : #dfdfdf;
- }
- .audio_player .custom_audio_seekbar_progress {
- width : 0;
- height : 100%;
- background : {color:accent};
- }
- .custom_audio_time_left::before {
- content : "- ";
- }
- #trackname{
- font-weight:700;
- font-size:calc({text:font size}px + 3px);
- }
- #album-name, #artist{
- text-transform:uppercase;
- }
- .custom_audio_play_button i, .custom_audio_pause_button i{
- font-size:16px;
- color:{color:accent};
- }
- .question, .answer{
- display:flex;
- flex-wrap:wrap;
- align-items:center;
- border-bottom:1px solid {color:border};
- padding-bottom:20px;
- }
- .answer{
- padding-bottom:10px !important;
- padding-top:20px;
- }
- .question-text{
- width:100%;
- margin-top:20px;
- }
- #ask-decoration{
- font-size:20px;
- border:1px solid {color:border};
- border-radius:2px;
- color:{color:accent};
- padding:20px;
- margin-right:20px;
- }
- .asker-user, .answerer-user{
- text-transform:uppercase;
- margin-right:10px;
- }
- .answerer-user{
- width:100%;
- }
- .asker-user a, .answerer-user a{
- font-weight:700;
- box-shadow:0 -10px inset {color:accent};
- }
- .answer{
- display:flex;
- align-items:center;
- flex-wrap:wrap;
- }
- .answer-post .caption.original-post{
- display:none !important;
- }
- .text-post .title{
- padding:20px 0px;
- border-top:1px solid {color:border};
- border-bottom:1px solid {color:border};
- font-size:calc({text:font size}px + 6px);
- font-weight:700;
- }
- .reblog-header{
- display:flex;
- align-items:center;
- padding:20px 0px;
- position:relative;
- justify-content:space-between;
- border-bottom:1px solid {color:border};
- }
- .reblog-header i{
- padding:8px;
- border-radius:2px;
- margin-right:10px;
- background:{color:accent};
- }
- .reblog-header:before{
- content:'';
- position:absolute;
- left:0;
- bottom:-2px;
- width:12%;
- background-color:{color:accent};
- padding:2px;
- }
- .reblog-username{
- font-weight:700;
- box-shadow:0 -5px inset {color:accent};
- transition:.5s ease-in;
- text-transform:uppercase;
- }
- .reblog-username:hover{
- box-shadow:0 -20px inset {color:accent};
- }
- .reblog-info-users{
- display:none;
- }
- .reblog-info-users a{
- box-shadow:none !important;
- }
- .reblog-header.original > .reblog-info-users{
- display:flex !important;
- }
- .reblog-header.original > .reblog-info-users a img{
- width:24px;
- height:24px;
- border-radius:100%;
- padding:3px;
- border:2px solid {color:accent};
- }
- .post-info{
- display:flex;
- align-items:center;
- justify-content:space-between;
- padding:20px 0px;
- border-bottom:1px solid {color:border};
- }
- .post-date, .post-notes, .controls{
- display:flex;
- align-items:center;
- text-transform:uppercase;
- font-weight:700;
- justify-content:center;
- }
- .perma-info{
- display:flex;
- align-items:center;
- flex-wrap:wrap;
- }
- .perma-info span a{
- text-transform:uppercase;
- font-weight:700;
- box-shadow: 0 -5px inset {color:accent};
- }
- .perma-info span{
- margin-right:10px;
- }
- .perma-info span:last-of-type{
- margin-right:0 !important;
- }
- .controls i{
- border:1px solid {color:border};
- color:{color:accent};
- padding:6px;
- border-radius:2px;
- }
- .post-date i, .post-notes i{
- margin-right:10px;
- color:{color:accent};
- }
- .controls a{
- margin-right:10px;
- }
- .controls a:last-of-type{
- margin-right:0 !important;
- }
- .controls .like .like_button iframe {
- position:absolute;
- top:0;
- left:0;
- bottom:0;
- right:0;
- z-index:2;
- opacity:0;
- }
- .controls .like{
- display:inline-block;
- }
- .controls .like .liked + svg {
- opacity:1;
- }
- .controls .like .liked + svg path {
- fill:#ec5a5a;
- }
- .tags{
- display:flex;
- align-items:center;
- flex-wrap:wrap;
- padding:20px 0;
- border-bottom:1px solid {color:border};
- }
- .tags i{
- padding:10px;
- color:{color:accent};
- border:1px solid {color:border};
- border-radius:5px;
- }
- .tag{
- margin-left:10px;
- display:flex;
- align-items:center;
- width:calc(100% - 60px);
- flex-wrap:wrap;
- }
- .tag a{
- font-size:calc({text:font size}px - 3px);
- text-transform:uppercase;
- margin-right:5px;
- }
- .pagination{
- padding:20px;
- border-top:1px solid {color:border};
- display:flex;
- align-items:center;
- justify-content:space-between;
- border-bottom:1px solid {color:border};
- }
- .current_page {
- font-weight:700;
- }
- #post-container footer{
- width:calc(100% - 40px);
- padding:20px;
- height:40px;
- background:{color:footer background};
- color:{color:footer text};
- display:flex;
- align-items:center;
- text-transform:uppercase;
- justify-content:space-between;
- margin-top:100px;
- font-weight:700;
- {block:permalinkpage}
- bottom:0 !important;
- {/block:permalinkpage}
- }
- #credit a{
- color:{color:footer text};
- box-shadow:0 -5px inset {color:accent};
- }
- #post-notes{
- display:flex;
- align-items:center;
- justify-content:center;
- padding:20px;
- padding-top:0 !important;
- border-top:1px solid {color:border};
- width:calc({text:post size}px - 40px);
- background:{color:post bg};
- margin-top:20px;
- }
- #post-notes ol, #post-notes li{
- list-style-type:none;
- }
- #post-notes ol{
- width:{text:post size}px;
- }
- #post-notes li img.avatar{
- display:none;
- }
- #post-notes li{
- margin-bottom:10px;
- margin-left:-40px;
- display:flex;
- flex-wrap:wrap;
- align-items:center;
- }
- #post-notes li a{
- font-weight:700;
- box-shadow:0 -5px inset {color:accent};
- }
- .note.with_commentary blockquote{
- width:100%;
- padding:10px;
- border:1px solid {color:border};
- }
- .tag-permalink a{
- margin-right:2px;
- margin-bottom:2px;
- }
- .scrollup{
- position:fixed;
- bottom:20px;
- right:10px;
- text-align:center;
- }
- .scrollup i{
- background:{color:accent};
- border-radius:2px;
- padding:10px;
- color:{color:body};
- }
- </style>
- </head>
- <body>
- <div id="container">
- <div id="sidebar">
- <div id="sidebar-container">
- <div id="icon">
- <img src="{image:icon}"/>
- </div>
- <div style="display:flex;align-items:center;flex-wrap:wrap;width:calc(100% - 94px)">
- <div id="blogtitle">{Title}</div>
- <div id="navigation-link-container">
- <div class="navigation-links">
- <a href="/">home</a>
- <a href="/ask">ask</a>
- <a href="/archive">past</a>
- <a href="{text:link 1 URL}">{text:link 1 title}</a>
- <a href="{text:link 2 URL}">{text:link 2 title}</a>
- <a href="{text:link 3 url}">{text:link 3 title}</a>
- </div>
- </div>
- </div>
- <div id="desc">{Description}</div>
- </div>
- </div><!--end sidebar-->
- <div id="post-container">
- {block:Posts}
- <article id="post-{PostID}" class="{posttype}-post posts">
- {block:Photo}
- <div class="legacy-photo">
- <img src="{PhotoURL-HighRes}" alt="{photoalt}" class="photos" />
- </div>
- {/block:Photo}
- {block:Photoset}
- <div class="photoset-grid" photoset-layout="{PhotosetLayout}">
- {block:Photos}
- <div
- data-width="{PhotoWidth-HighRes}"
- data-height="{PhotoHeight-HighRes}"
- data-lowres="{PhotoURL-500}"
- data-highres="{PhotoURL-HighRes}"
- onclick="lightbox(this)"
- >
- <img src="{PhotoURL-HighRes}" />
- </div>
- {/block:Photos}
- </div>
- {/block:Photoset}
- {block:Panorama}
- <div class="legacy-photo"><img src="{photourl-panorama}" alt="{photoalt}"></div>
- {/block:Panorama}
- <!-- quote posts -->
- {block:Quote}
- <div id="quote">
- {Quote}
- </div>
- <div id="source">
- {Source}
- </div>
- {/block:Quote}
- <!-- chat posts -->
- {block:Chat}
- <ul class="chat">
- {block:Lines}
- <li>
- {block:Label}{Label}{/block:Label}
- {Line}
- </li>
- {/block:Lines}
- </ul>
- {/block:Chat}
- {block:link}
- <div class="npf-link-block">
- <a href="{URL}">
- {Name}
- </a>
- </div>
- {/block:link}
- {block:Video}
- <div class="video">{Video-500}</div>
- {/block:Video}
- {block:Audio}
- {block:AudioPlayer}
- {AudioPlayer}
- <div class="audio-container">
- <div class="audio_info">
- <div class="audio-details">
- {block:TrackName}
- <p id="trackname">{TrackName}</p>
- {/block:TrackName}
- {block:Album}
- <span id="album-name">from <b>{Album}</b>, </span>
- {/block:Album}
- {block:Artist}
- <span id="artist">by <b>{Artist}</b></span>
- {/block:Artist}
- </div>
- <div class="audio_player_container">
- <span class="custom_audio_buttons"></span>
- </div>
- </div>
- <div class="audio_player">
- <span class="custom_audio_current_time"></span>
- <div class="custom_audio_seekbar"></div>
- <span class="custom_audio_time_left"></span>
- </div>
- </div>
- {/block:AudioPlayer}
- {/block:Audio}
- {block:Answer}
- <div class="question">
- <i class="ai-chat-question" id="ask-decoration"></i>
- <span class="asker-user">{Asker} asked:</span>
- <div class="question-text">{Question}</div>
- </div>
- {block:Answerer}
- <div class="answer">
- <span class="answerer-user">
- {Answerer} answered:</span>
- <div class="answer-text">{Answer}</div>
- </div>
- {/block:Answerer}
- {block:NotReblog}
- <div class="replies">
- {Replies}
- </div>
- {/block:NotReblog}
- {/block:Answer}
- <div class="caption {block:notreblog} original-post {/block:notreblog}">
- {block:Text}
- {block:Title}<div class="title">{Title}</div>{/block:Title}
- {/block:Text}
- {block:notreblog}
- {block:caption}{Caption}{/block:caption}
- {block:Text}{body}{/block:Text}
- {/block:notreblog}
- {block:Rebloggedfrom}
- {block:Reblogs}
- <div class="reblogs">
- <div class="reblog-header {block:IsOriginalEntry}original{/block:IsOriginalEntry}">
- <div>
- <i class="ai-person"></i>
- <a href="{permalink}" target="_blank" class="reblog-username {block:isdeactivated}inactive{/block:isdeactivated}">
- {username}
- </a>
- </div>
- <div class="reblog-info-users">
- <a href="{ReblogParentURL}" title="via: {ReblogParentName}">
- <img src="{ReblogParentPortraitURL-96}" style="margin-right:20px;"/>
- </a>
- <a href="{ReblogRootURL}" title="origin: {ReblogRootName}"><img src="{ReblogRootPortraitURL-96}"/></a>
- </div>
- </div>
- <div class="reblog-content">
- {Body}
- </div>
- </div>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- </div>
- {block:Date}
- <div class="post-info">
- {block:indexpage}
- <div class="post-date"><i class="ai-calendar"></i><a href="/day/{Year}/{MonthNumberWithZero}/{dayofmonthwithzero}">{DayofMonth} {ShortMonth} {Year}</a></div>
- <div class="post-notes"><i class="ai-align-bottom"></i>{NoteCountWithLabel}</div>
- <div class="controls">
- <a
- href="{ReblogURL}"
- target="_blank"
- title="reblog this post"
- class="reblog"
- ><i class="ai-arrow-repeat"></i></a>
- <a href="#" class="like" title="like">{LikeButton}<i class="ai-heart"></i></a>
- <a href="{Permalink}" title="permalink page"><i class="ai-ribbon"></i></a>
- </div>
- {/block:indexpage}
- {block:permalinkpage}
- <div class="perma-info">
- Timestamp: {DayOfMonth} {Month} {Year} @ {24Hour}:{Minutes}, {TimeAgo}
- {block:RebloggedFrom}
- <div>
- <span>reblogged from <a href="{reblogparenturl}">
- {reblogparentname}
- </a>
- </span>
- <span>
- originally by <a href="{reblogrooturl}">{reblogrootname} </a></span>
- </div>
- {/block:RebloggedFrom}
- </div>
- {/block:permalinkpage}
- </div>
- {/block:Date}
- {block:Hastags}
- <div class="tags">
- <i class="ai-hashtag"></i>
- <div class="tag">
- {block:Tags}
- <a href="{TagURL}">#{Tag}</a>
- {/block:Tags}
- </div>
- </div>
- {/block:Hastags}
- {block:PermalinkPage}
- <div id="post-notes">{PostNotes}</div>
- {/block:PermalinkPage}
- </article>
- {/block:Posts}
- {block:Pagination}
- <div class="pagination">
- <div id="prev-page">
- {block:previouspage}
- <a href="{previouspage}"><i class="ai-arrow-left"></i></a>
- {/block:previouspage}
- </div>
- <div id="current-page">
- {block:JumpPagination length="5"} {block:CurrentPage}<span
- class="current_page"
- >{CurrentPage}</span
- >{/block:CurrentPage} {block:JumpPage}<a
- class="jump_page"
- href="{URL}"
- >{PageNumber}</a
- >{/block:JumpPage} {/block:JumpPagination}
- </div>
- <div id="next-page">
- {block:nextpage}
- <a href="{nextpage}"><i class="ai-arrow-right"></i></a>
- {/block:nextpage}
- </div>
- </div>
- {/block:pagination}
- <footer>
- <div id="copyright">{CopyrightYears} © {name}</div>
- <div id="credit">
- Empyreum by <a href="//pneuma-themes.tumblr.com">Pneuma Themes</a>
- </div>
- </footer>
- </div><!--end post container-->
- <div class="scrollup">
- <a href="#" title="scroll to top">
- <i class="ai-arrow-up"></i>
- </a>
- </div>
- </div><!--end container-->
- </body>
- <script>
- // remove empty p tags
- for (const p of document.querySelectorAll('p')) {
- if (p.innerHTML.trim() === '') {
- p.remove()
- }
- }
- // create posts array
- let posts = []
- {block:Posts}
- posts.push({ npf: JSON.parse({JSNPF}), id: {JSPostId}})
- {/block:Posts}
- //function for updating post types
- function updateTypes(type, article) {
- article.classList.remove('text-post')
- article.classList.add(`${ type }-post`, 'npf-post')
- }
- // loop through array to get each post
- for (const post of posts) {
- let npf = post.npf
- let article = document.getElementById(`post-${post.id}`)
- // select captions that have something in them
- let caption = article.querySelector('.caption:is(:not(:empty))')
- if (caption != null && article.classList.contains('text-post')) {
- // if content exists
- if (npf.trail.length || npf.content.length) {
- // assign various post types based on NPF data
- switch (npf.trail[0]?.content[0]?.type ?? npf.content[0].type) {
- case 'image':
- updateTypes('photos', article)
- if (article.querySelector('.npf_row') == null) {
- caption.prepend(article.querySelector('figure'))
- }
- break
- case 'video':
- updateTypes('video', article)
- let video = article.querySelector('figure')
- caption.prepend(video)
- break
- case 'link':
- updateTypes('link', article)
- case 'audio':
- updateTypes('audio', article)
- break
- case 'quote':
- updateTypes('quote', article)
- }
- // if there are photos
- if (article.classList.contains('photos-post')) {
- let photoset = document.createElement('div')
- photoset.classList.add('npf-photos')
- caption.prepend(photoset)
- // find where a photoset would be split up by another content block
- let photoBreak = article.querySelector('.reblog-content p, .reblog-content h1, .reblog-content h2')
- let elements = []
- if (photoBreak) {
- let prevElement = photoBreak.parentNode.firstElementChild
- while (prevElement !== photoBreak) {
- elements.push(prevElement)
- prevElement = prevElement.nextElementSibling
- }
- }
- // if there is nothing that breaks up the photoset, select all rows
- else {
- elements = article.querySelectorAll('.npf_row')
- }
- // move each row to the top
- for (const el of elements) {
- photoset.append(el)
- }
- if (article.querySelectorAll('.npf_row').length > 1) {
- updateTypes('photoset', article)
- }
- else {
- updateTypes('photo', article)
- }
- }
- // clean up any potential stray reblog headers
- let reblogHeader = article.querySelector('.reblog-header')
- let reblogContent = article.querySelector('.reblog-content')
- if (reblogHeader?.nextElementSibling === reblogContent && reblogContent?.childElementCount === 0) {
- reblogHeader.remove()
- reblogContent.remove()
- }
- }
- }
- }
- //photoset.css lightbox
- function gatherData(images, arr) {
- for (let i = 0; i < images.length; i++) {
- let currentData = {
- width: images[i].getAttribute("data-width"),
- height: images[i].getAttribute("data-height"),
- low_res: images[i].getAttribute("data-lowres"),
- high_res: images[i].getAttribute("data-highres"),
- };
- arr.push(currentData);
- }
- }
- function getIndex(elem) {
- let i = 0;
- while ((elem = elem.previousElementSibling) != null) i++;
- return i;
- }
- function lightbox(elem) {
- let currentPhotoset = elem.parentNode;
- let photosetPhotos = currentPhotoset.getElementsByTagName("div");
- let data = [];
- gatherData(photosetPhotos, data);
- Tumblr.Lightbox.init(data, getIndex(elem) + 1);
- }
- $(document).ready(function(){
- $(".scrollup").hide();
- $(window).scroll(function () {
- if ($(this).scrollTop() > 100) {
- $(".scrollup").fadeIn();
- } else {
- $(".scrollup").fadeOut();
- }
- });
- $(".scrollup").click(function () {
- $("html, body").animate({ scrollTop: 0 }, 700);
- return false;
- });
- function flexFrame() {
- $(".caption").each(function () {
- $(this).find("iframe").wrap("<div class='capframe'></div>"); // wrap iframe
- flexibleFrames($(".capframe"));
- });
- flexibleFrames($(".video"));
- }
- $(document).ready(flexFrame);
- tippy("[title]", {
- // change these to your liking
- arrow: false,
- placement: "bottom", // top, right, bottom, left
- delay: 5, //ms
- offset: [0, 10], //px or string
- maxWidth: 300, //px or string
- // leave these as they are
- followCursor: false,
- allowHTML: true,
- theme: "custom",
- ignoreAttributes: true,
- content(reference) {
- const title = reference.getAttribute("title");
- reference.removeAttribute("title");
- return title;
- }
- });
- customAudio({
- post: "article",
- wrappers: {
- audio: ".custom_audio_wrapper",
- buttons: ".custom_audio_buttons",
- duration: ".custom_audio_duration",
- timeCurrent: ".custom_audio_current_time",
- timeLeft: ".custom_audio_time_left",
- seekbar: ".custom_audio_seekbar"
- },
- default: false,
- pauseAll: true,
- playButton: "<i class='ai-play'></i>",
- pauseButton: "<i class='ai-pause'></i>",
- errorIcon: "<i class='ai-cross'></i>",
- hideInfoIfError: true,
- callAfterLoad:null,
- });
- });
- </script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement