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 #10: Aether
- 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:
- -->
- <script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script>
- <link href='https://cdn.boxicons.com/fonts/basic/boxicons.min.css' rel='stylesheet'>
- <script src="https://unpkg.com/@popperjs/core@2"></script>
- <script src="https://unpkg.com/tippy.js@6"></script>
- <link
- href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css"
- rel="stylesheet"
- />
- <script src="https://cdn.jsdelivr.net/gh/annasthms/customaudio@latest/customaudio.min.js"></script>
- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
- <link href='https://static.tumblr.com/r7bx1qs/aTCsh60pk/note-reblog.css' rel='stylesheet'>
- <!-------MUSIC 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>
- .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 */
- }
- .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>
- <!--variables-->
- <meta name="image:icon" content=""/>
- <meta name="color:background" content="#fbfbfb"/>
- <meta name="color:body" content="#140000"/>
- <meta name="color:border" content="#eee"/>
- <meta name="color:post bg" content="#fff"/>
- <meta name="color:accent" content="#70CDFF"/>
- <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=""/>
- <meta name="text:link 4 title" content=""/>
- <meta name="text:link 4 url" content=""/>
- <!--
- NPF images fix v4.0 by @glenthemes [2023]
- 💌 gitlab.com/glen-npf/v4-beta
- --->
- <link href="//glen-npf.gitlab.io/v4-beta/main.css" rel="stylesheet">
- <script src="//glen-npf.gitlab.io/v4-beta/use.js"></script>
- <style>
- :root {
- --NPF-Images-Spacing:{text:photoset gutter}px;
- --NPF-Caption-Spacing:1em;
- --NPF-Move-1st-Photoset:"no";
- --Text-Container-Selector:".caption";
- --Text-Reblogs-Selector:".reblog-header";
- }
- </style>
- <style type="text/css">
- @import url(https://fonts.bunny.net/css?family=lato:400,400i,700,700i|lora:400,400i,700,700i);
- 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.65);
- transform-origin:100% 0;
- -webkit-transform:scale(0.65);
- -webkit-transform-origin:100% 0;
- -o-transform:scale(0.65);
- -o-transform-origin:100% 0;
- -moz-transform:scale(0.65);
- -moz-transform-origin:100% 0;
- -ms-transform:scale(0.65);
- -ms-transform-origin:100% 0;
- }
- iframe[src*='open.spotify.com'][src*='track'], figure[data-npf*='open.spotify.com'][data-npf*='track']{
- height:80px!important;
- width:calc({text:post size}px - 30px) !important;
- }
- .caption:has(iframe[src*='open.spotify.com'][src*='track'], figure[data-npf*='open.spotify.com'][data-npf*='track']) > p:first-child{
- display:none !important;
- }
- body{
- margin:0;
- padding:0;
- font-family:'Lato';
- font-size:{text:font size}px;
- color:{color:body};
- background:{color:background};
- }
- a{
- text-decoration:none;
- color:{color:body};
- }
- .tippy-box{
- text-transform:lowercase;
- font-size:calc({text:font size}px - 2px);
- background:{color:accent};
- color:{color:body};
- }
- #main-container{
- display:flex;
- align-items:center;
- justify-content:center;
- width:{text:post size}px;
- margin:0 auto;
- margin-top:50px;
- flex-wrap:wrap;
- }
- header{
- width:100%;
- }
- #blogtitle{
- display:flex;
- width:calc(100% - 30px);
- padding:15px;
- align-items:center;
- justify-content:space-evenly;
- font-family:'Lora';
- font-weight:700;
- font-size:calc({text:font size}px + 8px);
- }
- line{
- background:{color:accent};
- padding:1px;
- width:65%;
- }
- #icon img{
- width:36px;
- height:36px;
- object-fit:cover;
- border-radius:100%;
- }
- #description{
- width:calc(100% - 30px);
- text-align:center;
- margin-top:25px;
- padding:15px;
- margin-bottom:25px;
- }
- #description a{
- box-shadow: 0 -2px inset {color:accent};
- }
- #links-bar{
- width:calc(100% - 30px);
- background:{color:post bg};
- padding:15px;
- position:sticky;
- top:0;
- z-index:999;
- }
- .navigation-links{
- display:flex;
- align-items:center;
- justify-content:space-evenly;
- font-family:'Lora';
- font-weight:700;
- }
- .navigation-links i{
- font-size:calc({text:font size}px - 8px);
- color:{color:accent};
- }
- #blogposts{
- margin-top:50px;
- }
- .post-info{
- padding:15px;
- width:calc(100% - 30px);
- display:flex;
- align-items:center;
- justify-content:space-between;
- }
- #pinned-post{
- padding:10px;
- font-size:calc({text:font size}px + 5px);
- background:{color:accent};
- display:flex;
- align-items:center;
- justify-content:center;
- }
- .timestamp, .clock, .notecount{
- background:{color:accent};
- text-transform:uppercase;
- font-weight:700;
- font-family:'Lora';
- padding:5px;
- }
- .timestamp{
- margin-right:15px;
- }
- .controls-container{
- display:flex;
- align-items:center;
- justify-content:space-evenly;
- }
- .controls a{
- margin-right:5px;
- }
- .controls a:last-of-type{
- margin-right:0;
- }
- .controls i{
- font-size:calc({text:font size}px + 2px);
- background:{color:accent};
- padding:5px;
- }
- .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;
- }
- article{
- width:{text:post size}px;
- margin-bottom:50px;
- background:{color:post bg};
- border:1px solid {color:border};
- }
- article img{
- width:100%;
- max-width:100%;
- }
- [photoset-layout] {
- grid-gap:{text:photoset gutter}px;
- }
- p.npf_quote{
- font-family:'Lora' !important;
- text-align:center;
- font-style:italic;
- }
- p.npf_quote + p{
- padding-top:15px;
- text-align:center;
- padding-left:15px;
- padding-right:15px;
- position:relative;
- border-top:1px solid {color:border};
- }
- p.npf_quote + p:before{
- position:absolute;
- content:'';
- width:25%;
- padding:2px;
- left:38%;
- top:-2px;
- background:{color:accent};
- }
- .reblog-header{
- display:flex;
- align-items:center;
- justify-content:space-between;
- border-top:1px solid {color:border};
- padding:15px;
- border-bottom:1px solid {color:border};
- }
- .reblog-header .user-avatar img{
- width:24px;
- height:24px;
- border-radius:100%;
- margin-right:15px;
- padding:3px;
- border:2px solid {color:accent};
- }
- .reblog-header-info-blog{
- display:flex;
- align-items:center;
- justify-content:center;
- }
- .reblog-header-info-blog .username a{
- font-weight:700;
- text-transform:uppercase;
- box-shadow: 0 -2px inset {color:accent};
- font-family:'Lora';
- }
- .deactivated{
- font-family:'Lora';
- color:#ccc;
- font-weight:700;
- text-transform:uppercase;
- }
- .username.deactivated a{
- box-shadow:none !important;
- }
- [post-type]:not([post-type="text"]) .caption, [post-type]:not([post-type="text"]) .reblog-content{
- padding-left:15px;
- padding-right:15px;
- }
- [post-type="text"] .title{
- font-family:'Lora';
- font-weight:700;
- padding:15px;
- border-top:1px solid {color:border};
- text-align:center;
- font-size:calc({text:font size}px + 3px);
- border-bottom:1px solid {color:border};
- }
- [post-type="text"] .caption.original-post{
- padding-left:15px;
- padding-right:15px;
- {block:AskPage}
- padding-top:15px;
- padding-bottom:15px;
- {/block:AskPage}
- }
- .poll-post{
- padding-left:15px;
- padding-right:15px;
- }
- iframe.embed_iframe{
- width:{text:post size}px !important;
- }
- .caption code{
- font-size:calc({text:font size}px - 2px);
- background:#eee;
- }
- .caption a, .reblog-content a{
- box-shadow:0 -2px inset {color:accent};
- }
- .text-post .reblog-content p{
- padding-left:15px;
- padding-right:15px;
- }
- blockquote.npf_indented, .caption blockquote, .caption blockquote blockquote, .reblog-content blockquote, .reblog-content blockquote blockquote{
- border-left:1px solid {color:border};
- padding-left:15px;
- }
- .question-box, .answerer-box{
- display:flex;
- align-items:center;
- padding:15px;
- border-top:1px solid {color:border};
- }
- .asker-portrait-container{
- display:flex;
- align-items:center;
- position:relative;
- justify-content:center;
- margin-right:15px;
- }
- .asker-portrait, .answerer-portrait{
- width:64px;
- height:64px;
- border-radius:100%;
- padding:3px;
- border:2px solid {color:accent};
- }
- .question-text, .answerer-answer{
- width:100%;
- margin-left:15px;
- background:#eee;
- border-radius:25px;
- display:flex;
- align-items:center;
- position:relative;
- flex-wrap:wrap;
- }
- .answerer-text{
- width:100%;
- }
- .answerer-answer{
- margin-left:0;
- }
- .question-text #trig{
- position:absolute;
- font-size:calc({text:font size}px + 20px);
- left:-20px;
- color:#eee;
- }
- .answerer-box #trig-2{
- color:#eee;
- margin-left:-15px;
- font-size:calc({text:font size}px + 20px);
- }
- .question-text .username, .answerer-text .username{
- font-weight:700;
- font-family:'Lora';
- text-align:right;
- padding:15px;
- }
- .answerer-text .username{
- padding-left:0 !important;
- }
- .question-body, .answerer-body{
- width:calc(100% - 30px);
- padding:15px;
- }
- .audio-container{
- display:flex;
- align-items:center;
- justify-content:space-evenly;
- flex-wrap:wrap;
- }
- .rotating-disc {
- font-size:calc({text:font size}px + 20px);
- display: inline-block;
- animation: spin 2s linear infinite;
- animation-play-state: paused; /* stopped by default */
- }
- .rotating-disc.playing {
- animation-play-state: running;
- }
- @keyframes spin {
- to {
- transform: rotate(360deg);
- }
- }
- .audio-details{
- display:flex;
- flex-wrap:wrap;
- align-items:center;
- width:75%;
- justify-content:flex-start;
- margin-left:20px;
- margin-right:20px;
- }
- #artist, #trackname, #album{
- width:100%;
- }
- #trackname{
- font-family:'Lora';
- font-size:calc({text:font size}px + 4px);
- font-weight:700;
- }
- #artist{
- font-style:italic;
- }
- #album{
- font-weight:700;
- font-family:'Lora';
- }
- .audio_info{
- width:100%;
- display:flex;
- padding:15px;
- align-items:center;
- justify-content:flex-start;
- border-top:1px solid {color:border};
- }
- .audio_player_container{
- width:100%;
- display:flex;
- align-items:center;
- justify-content:space-evenly;
- }
- .custom_audio_buttons{
- display:flex;
- margin-left:20px;
- align-items:center;
- justify-content:center;
- }
- .custom_audio_buttons i{
- background:{color:accent};
- font-size:calc({text:font size}px + 5px);
- padding:15px;
- border-radius:100%;
- }
- .custom_audio_buttons svg {
- width : 1.25em;
- height : 1.25em;
- }
- .custom_audio_error_icon svg {
- stroke : red;
- }
- .quote-post > .caption{
- display:none;
- }
- .post-info-notes{
- border-top:1px solid {color:border};
- padding:15px;
- display:flex;
- align-items:center;
- justify-content:space-between;
- }
- .reblog-parent-info a{
- margin-right:5px;
- }
- .reblog-parent-info a:last-of-type{
- margin-right:0 !important;
- }
- .reblog-info-avatar{
- width:24px;
- height:24px;
- padding:3px;
- border-radius:100%;
- border:2px solid {color:accent};
- }
- .tagcont{
- padding:15px;
- font-size:calc({text:font size}px - 2px);
- border-top:1px solid {color:border};
- }
- .tags a{
- margin-right:2px;
- }
- .post-info-permalink{
- {block:PermalinkPage}
- border-top:1px solid {color:border};
- border-bottom:1px solid {color:border};
- {/block:PermalinkPage}
- {block:AskPage}display:none{/block:AskPage};
- }
- #tags{
- display:flex;
- align-items:center;
- padding:15px;
- border-top:1px solid {color:border};
- }
- #tags i{
- background:{color:accent};
- padding:5px;
- font-size:calc({text:font size}px + 3px);
- margin-right:10px;
- }
- #tags .tags{
- font-size:calc({text:font size}px - 2px);
- }
- #blog-end{
- width:100%;
- display:flex;
- padding:15px;
- margin-bottom:50px;
- align-items:center;
- justify-content:center;
- flex-wrap:wrap;
- }
- #pagination{
- width:calc(100% - 30px);
- padding:15px;
- display:flex;
- align-items:center;
- justify-content:space-between;
- background:{color:post bg};
- }
- #current-page{
- display:flex;
- align-items:center;
- justify-content:space-between;
- width:20%;
- }
- #prev-page, #next-page, .current_page, a.jump_page{
- background:{color:accent};
- }
- #prev-page i, #next-page i{
- padding:5px;
- font-size:calc({text:font size}px + 3px);
- }
- .current_page{
- font-weight:700;
- }
- .current_page, a.jump_page{
- width:{text:font size}px;
- padding:5px;
- text-align:center;
- }
- #date-info{
- display:flex;
- align-items:center;
- justify-content:space-between;
- flex-wrap:wrap;
- padding:15px;
- }
- #date-info #date, #date-info #time{
- display:flex;
- align-items:center;
- justify-content:space-between;
- }
- #date i, #time i{
- padding:5px;
- margin-right:10px;
- background:{color:accent};
- font-size:calc({text:font size}px + 3px);
- }
- #reblog-info{
- width:calc(100% - 30px);
- padding:15px;
- display:flex;
- border-top:1px solid {color:border};
- align-items:center;
- justify-content:space-between;
- }
- #reblog-info div span{
- background:{color:accent};
- padding:5px;
- text-transform:uppercase;
- font-weight:700;
- }
- #notes{
- display:flex;
- flex-wrap:wrap;
- }
- #notes ol{
- list-style:none;
- }
- #notes ol li{
- width:100%;
- display:flex;
- align-items:center;
- margin-bottom:10px;
- }
- #notes ol li a .avatar{
- display:none;
- }
- #notes a{
- font-weight:700;
- box-shadow:0 -2px inset {color:accent};
- text-transform:uppercase;
- }
- .note.more_notes_link_container{
- width:calc({text:post size}px - 100px) !important;
- display:flex;
- align-items:center;
- justify-content:center;
- margin-top:10px;
- text-align:center;
- padding:15px;
- }
- #ft{
- padding:15px;
- }
- </style>
- </head>
- <body>
- <div id="main-container">
- <header>
- <div id="blogtitle">
- <div>{Title}</div>
- <line></line>
- <div id="icon"><img src="{image:icon}"/></div>
- </div>
- <div id="description">
- {Description}
- </div>
- </header>
- <div id="links-bar">
- <div class="navigation-links">
- <a href="/">home</a>
- <i class='bx bxs-circle'></i>
- <a href="/ask">ask</a>
- <i class='bx bxs-circle'></i>
- <a href="/archive">archive</a>
- <i class='bx bxs-circle'></i>
- <a href="//pneuma-themes.tumblr.com" title="aether by pneuma-themes">theme</a>
- {block:IfLink1Title}
- <i class='bx bxs-circle'></i> <a href="{text:link 1 url}">{text:link 1 title}</a><i class='bx bxs-circle'></i>
- {/block:IfLink1Title}
- {block:IfLink2Title}
- <a href="{text:link 2 url}">{text:link 2 title}</a><i class='bx bxs-circle'></i>
- {/block:IfLink2Title}
- {block:IfLink3Title}
- <a href="{text:link 3 url}">{text:link 3 title}</a><i class='bx bxs-circle'></i>
- {/block:IfLink3Title}
- {block:IfLink4Title}
- <a href="{text:link 4 url}">{text:link 4 title}</a>
- {/block:IfLink4Title}
- </div>
- </div>
- <section id="blogposts">
- {block:Posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
- <article id="post-{PostID}" class="{PostType}-post posts" post-type="{PostType}">
- {block:IndexPage}
- <header class="post-info">
- {block:PinnedPostLabel}
- <div id="pinned-post">
- <i class="bx bxs-pin-alt" title="pinned post"></i>
- </div>
- {/block:PinnedPostLabel}
- <div class="date">
- <span class="timestamp">{DayOfMonth} {Month} '{ShortYear}</span>
- <span class="clock">{24Hour}:{Minutes}</span>
- </div>
- <div class="controls-container">
- <div class="controls">
- <a href="{ReblogURL}" target="_blank" title="reblog" class="reblog"><i class="bx bxs-repeat-alt"></i></a>
- <a href="#" class="like" title="like"
- >{LikeButton}<i class="bx bx-heart"></i></a>
- <a href="{Permalink}" title="permalink page"><i class="bx bx-bookmark"></i></a>
- </div>
- </div>
- </header>
- {/block:IndexPage}
- {block:Text} {block:Title}
- <div class="title">{Title}</div>
- {/block:Title}
- {/block:Text}
- {block:Photo}
- {LinkOpenTag}
- <img
- src="{PhotoURL-HighRes}"
- alt="{PhotoAlt}"
- class="photos"
- />{LinkCloseTag}
- {/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:Quote}
- <div id="quote">
- <i class="bx bxs-quote-left-alt" id="quote-icon"></i>
- {Quote}</div>
- {block:Source}
- <div id="source"><span class="source">{Source}</span>
- </div>
- {/block:Source}
- {/block:Quote}
- {block:Link}
- <div id="link-post">
- <a href="{URL}">{Name}</a><i class='bx bx-chevron-right' ></i>
- </div>
- {/block:Link}
- {block:Chat}
- {block:Title}
- <div class="title">{Title}</div>
- {/block:Title} {block:Lines}
- <p class="chat-lines">
- {block:Label} <span class="chat-label">{Label}</span>{/block:Label} {Line}
- </p>
- {/block:Lines}
- {/block:Chat}
- {block:Audio}
- {block:AudioPlayer}
- {AudioPlayer}
- <div class="audio-container">
- <div class="audio_info">
- <i class='bx bx-disc rotating-disc'></i>
- <div class="audio-details">
- {block:TrackName}
- <p id="trackname">{TrackName}</p>
- {/block:TrackName}
- {block:Artist}
- <p id="artist">{Artist}</p>
- {/block:Artist}
- {block:Album}
- <p id="album">{Album}</p>
- {/block:Album}
- </div>
- <span class="custom_audio_buttons"></span>
- </div>
- <div class="audio_player_container">
- <div class="custom_audio_seekbar"></div>
- </div>
- </div>
- {/block:AudioPlayer}
- {/block:Audio}
- {block:Video}
- <div class="video">{Video-500}</div>
- {/block:Video}
- {block:Answer}
- <div class="question-box">
- <div class="question-asker">
- <div class="asker-portrait-container">
- <img src="{AskerPortraitURL-64}" class="asker-portrait"/>
- </div>
- </div>
- <div class="question-text"><i class='bx bx-caret-left' id="trig"></i> <div class="question-body">{Question}</div>
- <div class="username">{Asker}</div>
- </div>
- </div>
- {block:Answerer}
- <div class="answerer-box">
- <div class="answerer-answer">
- <div class="answerer-text">
- <div class="answerer-body">{Answer}</div>
- <div class="username">{Answerer}</div>
- </div>
- </div>
- <i class='bx bx-caret-right' id="trig-2"></i>
- <img src="{AnswererPortraitURL-64}" class="answerer-portrait"/>
- </div>
- {/block:Answerer}
- {/block:Answer}
- {block:NotReblog}
- {block:Text}
- <div class="caption original-post">{Body}</div>
- {/block:Text}
- {block:Photo} {block:Caption}
- <div class="caption original-post">{Caption}</div>
- {/block:Caption}
- {/block:Photo}
- {block:Photoset} {block:Caption}
- <div class="caption original-post">{Caption}</div>
- {/block:Caption}
- {/block:Photoset}
- {block:Link}
- {block:Description}
- <div class="caption original-post">{Description}</div>
- {/block:Description}
- {/block:Link}
- {block:Audio} {block:Caption}
- <div class="caption original-post">{Caption}</div>
- {/block:Caption} {/block:Audio}
- {block:Video} {block:Caption}
- <div class="caption original-post">{Caption}</div>
- {/block:Caption}
- {/block:Video}
- {block:Answer}
- <div class="caption original-post">{Replies}</div>
- {/block:Answer}
- {/block:NotReblog}
- {block:RebloggedFrom}
- {block:Reblogs}
- <div class="reblog-header source-head">
- <div class="reblog-header-info-blog">
- <div class="user-avatar">
- <img src="{PortraitURL-64}" alt="{username}'s avatar"/>
- </div>
- <div
- class="username{block:IsDeactivated} deactivated{/block:IsDeactivated}"
- >
- <a href="{Permalink}">{Username}</a>
- </div>
- </div>
- {block:IsDeactivated}
- <span class="deactivated">deactivated</span>{/block:IsDeactivated}
- </div>
- <div class="reblog-content">{Body}</div>
- {/block:Reblogs}
- {/block:RebloggedFrom}
- {block:IndexPage}
- <div class="post-info-notes">
- <span class="notecount">{NoteCountWithLabel}</span>
- {block:RebloggedFrom}
- <div class="reblog-parent-info">
- <a href="{ReblogParentURL}" title="via {ReblogParentName}"><img src="{ReblogParentPortraitURL-64}" class="reblog-info-avatar"></a>
- <a href="{ReblogRootURL}" title="from {ReblogRootName}"><img src="{ReblogRootPortraitURL-64}" class="reblog-info-avatar"></a>
- </div>
- {/block:RebloggedFrom}
- </div>
- {/block:IndexPage}
- {block:PermalinkPage}
- <div class="post-info-permalink">
- <div id="date-info">
- <div id="date"><i class="bx bx-calendar-alt"/></i>{DayOfWeek}, {DayOfMonth} {Month} {Year}</div>
- <div id="time"><i class="bx bx-clock-5"></i>{24HourWithZero}:{Minutes}</div>
- </div>
- {block:RebloggedFrom}
- <div id="reblog-info">
- <div><span>Reblogged from</span> <a href="{ReblogParentURL}">{ReblogParentName}</a></div>
- <div><span>originally by</span> <a href="{ReblogRootURL}">{ReblogRootName}</a></div>
- </div>
- {/block:RebloggedFrom}
- {block:HasTags}
- <div id="tags">
- <i class="bx bx-hashtag"></i>
- <div class="tags">{block:Tags}<a href="{TagUrl}">#{Tag}</a>{/block:Tags}</div>
- </div>
- {/block:HasTags}
- </div>
- {block:PostNotes}
- <section id="notes">{PostNotes}</section>
- {/block:PostNotes}
- {/block:PermalinkPage}
- {block:IndexPage}
- {block:HasTags}
- <div class="tagcont {PostID}">
- <div class="tags">
- {block:Tags}<a href="{TagURL}" class="tag">#{Tag}</a
- >{/block:Tags}
- </div>
- </div>
- {/block:HasTags}
- {/block:IndexPage}
- </article>
- {/block:Posts}
- </section>
- {block:IndexPage}
- <footer id="blog-end">
- {block:Pagination}
- <div id="pagination">
- <div id="prev-page">
- {block:previouspage}
- <a href="{previouspage}" title="previous page"><i class="bx bx-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}" title="next page"><i class="bx bx-arrow-right"></i></a>
- {/block:nextpage}
- </div>
- </div>
- {/block:Pagination}
- <div id="ft">
- © {CopyrightYears}. Powered by <a href="//tumblr.com"><b>Tumblr</b></a>
- </div>
- </footer>
- {/block:IndexPage}
- </div><!--end main 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()
- }
- }
- }
- }
- $(document).ready(function () {
- // $(".scrollup").click(function () {
- // $("html, body").animate({ scrollTop: 0 }, 700);
- // return false;
- // });
- tippy("[title]", {
- // change these to your liking
- arrow: false,
- placement: "bottom", // top, right, bottom, left
- delay: 0, //ms
- offset: [0, 10], //px or string
- maxWidth: 300, //px or string
- // leave these as they are
- followCursor: true,
- allowHTML: true,
- theme: "custom",
- ignoreAttributes: true,
- content(reference) {
- const title = reference.getAttribute("title");
- reference.removeAttribute("title");
- return title;
- },
- });
- });
- const customAudioSettings = {
- 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: false,
- playButton: "<i class='bx bx-play'></i>",
- pauseButton: "<i class='bx bx-pause'></i>",
- errorIcon: "<i class='bx bx-x'></i>",
- hideInfoIfError: true,
- callAfterLoad: () => {
- document.querySelectorAll("article").forEach(article => {
- const disc = article.querySelector(".rotating-disc");
- if (!disc) return;
- const observer = new MutationObserver(mutations => {
- for (const m of mutations) {
- if (m.attributeName !== "class") continue;
- if (article.classList.contains("audio_playing")) {
- disc.classList.add("playing");
- } else {
- disc.classList.remove("playing");
- }
- }
- });
- observer.observe(article, {
- attributes: true,
- attributeFilter: ["class"]
- });
- });
- }
- };
- const ca = new CustomAudio(customAudioSettings);
- ca.create();
- 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);
- }
- </script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment