pneumathemes

theme #10: aether

Feb 4th, 2026
289
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 44.56 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.     {NewPostStyles}
  5.         <title>
  6.           {Title}{block:TagPage}: posts tagged as #{Tag}{/block:TagPage}
  7.           {block:PostSummary}: {PostSummary}{/block:PostSummary}
  8.         </title>
  9.  
  10.     <link rel="shortcut icon" href="{Favicon}" />
  11.     <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  12.     {block:Description}
  13.     <meta name="description" content="{MetaDescription}" />
  14.     {/block:Description}
  15.     <meta charset="utf-8" />
  16.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  17.    
  18.     <!--
  19.  
  20.    Theme #10: Aether
  21.    coded by pneuma-themes
  22.    
  23.    1. Don't remove the credit.
  24.    2. Don't move the credit. Just leave it there.
  25.    3. Don't use as a base code.
  26.    4. Please enjoy! If you find any bugs, please contact me! c:
  27.    
  28.    -->
  29.    
  30.     <script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script>
  31.     <link href='https://cdn.boxicons.com/fonts/basic/boxicons.min.css' rel='stylesheet'>
  32.  
  33.     <script src="https://unpkg.com/@popperjs/core@2"></script>
  34.     <script src="https://unpkg.com/tippy.js@6"></script>
  35.  
  36.     <link
  37.      href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css"
  38.      rel="stylesheet"
  39.    />
  40.     <script src="https://cdn.jsdelivr.net/gh/annasthms/customaudio@latest/customaudio.min.js"></script>
  41.    
  42.     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  43.     <link href='https://static.tumblr.com/r7bx1qs/aTCsh60pk/note-reblog.css' rel='stylesheet'>
  44.  
  45.     <!-------MUSIC PLAYER BY GLENTHEMES------->
  46.     <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  47.     <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  48.     <script>
  49.     tumblr_npf_audio({
  50.         emptyTitleText: "Untitled track",
  51.         emptyArtistText: "Untitled artist",
  52.         emptyAlbumText: "Untitled album",
  53.        
  54.         titleLabel: "Track:",
  55.         artistLabel: "Artist:",
  56.         albumLabel: "Album:"
  57.     });
  58.     </script>
  59.     <style edit-npf-audio-player>
  60.     .npf-audio-wrapper {
  61.         --NPF-Audio-Buttons-Size: 1.4rem;
  62.         --NPF-Audio-Buttons-Color: #555555; /* color of play & pause buttons */
  63.        --NPF-Audio-Buttons-Spacing: 1.3rem; /* space between buttons and song info */
  64.        
  65.         --NPF-Audio-Image-Size: 85px;
  66.         --NPF-Audio-Image-Spacing: 0px; /* gap between player info and cover image */
  67.     }
  68.    
  69.         .npf-audio-background {
  70.             background-color: #f2f2f2; /* background color of player (optional) */
  71.             padding: 1.5rem;
  72.         }
  73.        
  74.         .npf-audio-title-label,
  75.         .npf-audio-artist-label,
  76.         .npf-audio-album-label {
  77.             font-weight: bold;
  78.         }
  79.        
  80.         .npf-audio-title,
  81.         .npf-audio-artist,
  82.         .npf-audio-album {
  83.             color: #333333; /* color of audio text (optional) */
  84.         }
  85.     </style>
  86.    
  87.     <!--✻✻✻✻✻✻  UN-BLUE POLLS by @glenthemes  ✻✻✻✻✻✻-->
  88.         <link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet">
  89.         <style>
  90.         .poll-post {    
  91.             --Poll-Question-Font-Size: 16px;          
  92.             --Poll-Option-Background-Color: #fcfcfc;    
  93.             --Poll-Option-Corner-Rounding: 18px;    
  94.             --Poll-Option-Border-Size: 2px;    
  95.             --Poll-Option-Border-Color: #efefef;    
  96.             --Poll-Option-Padding: 15px;    
  97.             --Poll-Option-Font-Size: 13px;    
  98.             --Poll-Option-Spacing: 10px;    
  99.             --Poll-Option-Text-Color: #666666;        
  100.             --Poll-Option-HOVER-Border-Color: #cfdae4;    
  101.             --Poll-Option-HOVER-Background-Color: #ebf0f4;    
  102.             --Poll-Option-HOVER-Text-Color: #1a1b1d;    
  103.             --Poll-Option-HOVER-Speed: 0.4s;
  104.         }
  105.        
  106.         .poll-see-results{
  107.             width:calc(100% - var(--Poll-Option-Padding * 2));
  108.             padding-top:var(--Poll-Option-Padding);
  109.             padding-bottom:var(--Poll-Option-Padding);
  110.             box-shadow:none !important;
  111.             border:2px solid var(--Poll-Option-Border-Color);
  112.             border-radius:var(--Poll-Option-Corner-Rounding);
  113.             background:var(--Poll-Option-Background-Color);
  114.         }
  115.         </style>
  116.  
  117.         <!--variables-->
  118.         <meta name="image:icon" content=""/>
  119.        
  120.         <meta name="color:background" content="#fbfbfb"/>
  121.         <meta name="color:body" content="#140000"/>
  122.         <meta name="color:border" content="#eee"/>
  123.         <meta name="color:post bg" content="#fff"/>
  124.         <meta name="color:accent" content="#70CDFF"/>
  125.        
  126.         <meta name="text:post size" content=""/>
  127.         <meta name="text:font size" content=""/>
  128.         <meta name="text:photoset gutter" content=""/>
  129.        
  130.         <meta name="text:link 1 title" content=""/>
  131.         <meta name="text:link 1 url" content=""/>
  132.         <meta name="text:link 2 title" content=""/>
  133.         <meta name="text:link 2 url" content=""/>
  134.         <meta name="text:link 3 title" content=""/>
  135.         <meta name="text:link 3 url" content=""/>
  136.         <meta name="text:link 4 title" content=""/>
  137.         <meta name="text:link 4 url" content=""/>
  138.        
  139.          <!--
  140.        NPF images fix v4.0 by @glenthemes [2023]
  141.        💌 gitlab.com/glen-npf/v4-beta
  142.    --->
  143.     <link href="//glen-npf.gitlab.io/v4-beta/main.css" rel="stylesheet">
  144.     <script src="//glen-npf.gitlab.io/v4-beta/use.js"></script>
  145.     <style>
  146.     :root {
  147.         --NPF-Images-Spacing:{text:photoset gutter}px;
  148.         --NPF-Caption-Spacing:1em;
  149.         --NPF-Move-1st-Photoset:"no";
  150.         --Text-Container-Selector:".caption";
  151.         --Text-Reblogs-Selector:".reblog-header";
  152.     }
  153.     </style>
  154.        
  155.         <style type="text/css">
  156.             @import url(https://fonts.bunny.net/css?family=lato:400,400i,700,700i|lora:400,400i,700,700i);
  157.             iframe.tmblr-iframe {
  158.         z-index:99999999999999!important;
  159.         top:10px!important;
  160.         right:10px!important;
  161.         opacity:1;
  162.         /* delete invert(1) from here */
  163.             filter:invert(1) contrast(150%);
  164.             -webkit-filter:invert(1) contrast(150%);
  165.             -o-filter:invert(1) contrast(150%);
  166.             -moz-filter:invert(1) contrast(150%);
  167.             -ms-filter:invert(1) contrast(150%);
  168.         /* to here if your blog has a dark background */
  169.         transform:scale(0.65);
  170.         transform-origin:100% 0;
  171.         -webkit-transform:scale(0.65);
  172.         -webkit-transform-origin:100% 0;
  173.         -o-transform:scale(0.65);
  174.         -o-transform-origin:100% 0;
  175.         -moz-transform:scale(0.65);
  176.         -moz-transform-origin:100% 0;
  177.         -ms-transform:scale(0.65);
  178.         -ms-transform-origin:100% 0;
  179.  
  180.         }
  181.        
  182.         iframe[src*='open.spotify.com'][src*='track'], figure[data-npf*='open.spotify.com'][data-npf*='track']{
  183.            height:80px!important;
  184.            width:calc({text:post size}px - 30px) !important;
  185.        }
  186.  
  187.         .caption:has(iframe[src*='open.spotify.com'][src*='track'], figure[data-npf*='open.spotify.com'][data-npf*='track']) > p:first-child{
  188.                display:none !important;
  189.        }
  190.            
  191.             body{
  192.                 margin:0;
  193.                 padding:0;
  194.                 font-family:'Lato';
  195.                 font-size:{text:font size}px;
  196.                 color:{color:body};
  197.                 background:{color:background};
  198.             }
  199.            
  200.             a{
  201.                 text-decoration:none;
  202.                 color:{color:body};
  203.             }
  204.            
  205.             .tippy-box{
  206.                 text-transform:lowercase;
  207.                 font-size:calc({text:font size}px - 2px);
  208.                 background:{color:accent};
  209.                 color:{color:body};
  210.             }
  211.            
  212.             #main-container{
  213.                 display:flex;
  214.                 align-items:center;
  215.                 justify-content:center;
  216.                 width:{text:post size}px;
  217.                 margin:0 auto;
  218.                 margin-top:50px;
  219.                 flex-wrap:wrap;
  220.             }
  221.            
  222.             header{
  223.                 width:100%;
  224.             }
  225.            
  226.             #blogtitle{
  227.                 display:flex;
  228.                 width:calc(100% - 30px);
  229.                 padding:15px;
  230.                 align-items:center;
  231.                 justify-content:space-evenly;
  232.                 font-family:'Lora';
  233.                 font-weight:700;
  234.                 font-size:calc({text:font size}px + 8px);
  235.             }
  236.            
  237.             line{
  238.                 background:{color:accent};
  239.                 padding:1px;
  240.                 width:65%;
  241.             }
  242.            
  243.             #icon img{
  244.                 width:36px;
  245.                 height:36px;
  246.                 object-fit:cover;
  247.                 border-radius:100%;
  248.             }
  249.            
  250.             #description{
  251.                 width:calc(100% - 30px);
  252.                 text-align:center;
  253.                 margin-top:25px;
  254.                 padding:15px;
  255.                 margin-bottom:25px;
  256.             }
  257.            
  258.             #description a{
  259.                 box-shadow: 0 -2px inset {color:accent};
  260.             }
  261.            
  262.             #links-bar{
  263.                 width:calc(100% - 30px);
  264.                 background:{color:post bg};
  265.                 padding:15px;
  266.                 position:sticky;
  267.                 top:0;
  268.                 z-index:999;
  269.             }
  270.            
  271.             .navigation-links{
  272.                 display:flex;
  273.                 align-items:center;
  274.                 justify-content:space-evenly;
  275.                 font-family:'Lora';
  276.                 font-weight:700;
  277.             }
  278.            
  279.             .navigation-links i{
  280.                 font-size:calc({text:font size}px - 8px);
  281.                 color:{color:accent};
  282.             }
  283.            
  284.             #blogposts{
  285.                 margin-top:50px;
  286.             }
  287.            
  288.             .post-info{
  289.                 padding:15px;
  290.                 width:calc(100% - 30px);
  291.                 display:flex;
  292.                 align-items:center;
  293.                 justify-content:space-between;
  294.             }
  295.            
  296.             #pinned-post{
  297.                 padding:10px;
  298.                 font-size:calc({text:font size}px + 5px);
  299.                 background:{color:accent};
  300.                 display:flex;
  301.                 align-items:center;
  302.                 justify-content:center;
  303.             }
  304.            
  305.             .timestamp, .clock, .notecount{
  306.                 background:{color:accent};
  307.                 text-transform:uppercase;
  308.                 font-weight:700;
  309.                 font-family:'Lora';
  310.                 padding:5px;
  311.             }
  312.            
  313.             .timestamp{
  314.                 margin-right:15px;
  315.             }
  316.            
  317.             .controls-container{
  318.                 display:flex;
  319.                 align-items:center;
  320.                 justify-content:space-evenly;
  321.             }
  322.            
  323.             .controls a{
  324.                 margin-right:5px;
  325.             }
  326.            
  327.             .controls a:last-of-type{
  328.                 margin-right:0;
  329.             }
  330.            
  331.             .controls i{
  332.                 font-size:calc({text:font size}px + 2px);
  333.                 background:{color:accent};
  334.                 padding:5px;
  335.             }
  336.            
  337.             .controls .like .like_button iframe {
  338.                   position:absolute;
  339.                   top:0;
  340.                   left:0;
  341.                   bottom:0;
  342.                   right:0;
  343.                   z-index:2;
  344.                   opacity:0;
  345.             }
  346.        
  347.             .controls .like{
  348.                   display:inline-block;
  349.             }
  350.        
  351.             .controls .like .liked + svg {
  352.                   opacity:1;
  353.             }
  354.            
  355.             article{
  356.                 width:{text:post size}px;
  357.                 margin-bottom:50px;
  358.                 background:{color:post bg};
  359.                 border:1px solid {color:border};
  360.             }
  361.            
  362.             article img{
  363.                 width:100%;
  364.                 max-width:100%;
  365.             }
  366.            
  367.             [photoset-layout] {
  368.               grid-gap:{text:photoset gutter}px;
  369.             }
  370.  
  371.             p.npf_quote{
  372.                 font-family:'Lora' !important;
  373.                 text-align:center;
  374.                 font-style:italic;
  375.             }
  376.            
  377.             p.npf_quote + p{
  378.                 padding-top:15px;
  379.                 text-align:center;
  380.                 padding-left:15px;
  381.                 padding-right:15px;
  382.                 position:relative;
  383.                 border-top:1px solid {color:border};
  384.             }
  385.            
  386.             p.npf_quote + p:before{
  387.                 position:absolute;
  388.                 content:'';
  389.                 width:25%;
  390.                 padding:2px;
  391.                 left:38%;
  392.                 top:-2px;
  393.                 background:{color:accent};
  394.             }
  395.            
  396.             .reblog-header{
  397.                 display:flex;
  398.                 align-items:center;
  399.                 justify-content:space-between;
  400.                 border-top:1px solid {color:border};
  401.                 padding:15px;
  402.                 border-bottom:1px solid {color:border};
  403.             }
  404.            
  405.             .reblog-header .user-avatar img{
  406.                 width:24px;
  407.                 height:24px;
  408.                 border-radius:100%;
  409.                 margin-right:15px;
  410.                 padding:3px;
  411.                 border:2px solid {color:accent};
  412.             }
  413.            
  414.             .reblog-header-info-blog{
  415.                 display:flex;
  416.                 align-items:center;
  417.                 justify-content:center;
  418.             }
  419.            
  420.             .reblog-header-info-blog .username a{
  421.                 font-weight:700;
  422.                 text-transform:uppercase;
  423.                 box-shadow: 0 -2px inset {color:accent};
  424.                 font-family:'Lora';
  425.             }
  426.            
  427.             .deactivated{
  428.                 font-family:'Lora';
  429.                 color:#ccc;
  430.                 font-weight:700;
  431.                 text-transform:uppercase;
  432.             }
  433.            
  434.             .username.deactivated a{
  435.                 box-shadow:none !important;
  436.             }
  437.            
  438.             [post-type]:not([post-type="text"]) .caption, [post-type]:not([post-type="text"]) .reblog-content{
  439.                 padding-left:15px;
  440.                 padding-right:15px;
  441.             }
  442.            
  443.             [post-type="text"] .title{
  444.                 font-family:'Lora';
  445.                 font-weight:700;
  446.                 padding:15px;
  447.                 border-top:1px solid {color:border};
  448.                 text-align:center;
  449.                 font-size:calc({text:font size}px + 3px);
  450.                 border-bottom:1px solid {color:border};
  451.             }
  452.            
  453.             [post-type="text"] .caption.original-post{
  454.                 padding-left:15px;
  455.                 padding-right:15px;
  456.                
  457.                 {block:AskPage}
  458.                 padding-top:15px;
  459.                 padding-bottom:15px;
  460.                 {/block:AskPage}
  461.             }
  462.            
  463.             .poll-post{
  464.                 padding-left:15px;
  465.                 padding-right:15px;
  466.             }
  467.            
  468.             iframe.embed_iframe{
  469.                 width:{text:post size}px !important;
  470.             }
  471.            
  472.             .caption code{
  473.                 font-size:calc({text:font size}px - 2px);
  474.                 background:#eee;
  475.             }
  476.            
  477.             .caption a, .reblog-content a{
  478.                 box-shadow:0 -2px inset {color:accent};
  479.             }
  480.            
  481.             .text-post .reblog-content p{
  482.                 padding-left:15px;
  483.                 padding-right:15px;
  484.             }
  485.            
  486.             blockquote.npf_indented, .caption blockquote, .caption blockquote blockquote, .reblog-content blockquote, .reblog-content blockquote blockquote{
  487.                 border-left:1px solid {color:border};
  488.                 padding-left:15px;
  489.             }
  490.            
  491.             .question-box, .answerer-box{
  492.                 display:flex;
  493.                 align-items:center;
  494.                 padding:15px;
  495.                 border-top:1px solid {color:border};
  496.             }
  497.            
  498.             .asker-portrait-container{
  499.                 display:flex;
  500.                 align-items:center;
  501.                 position:relative;
  502.                 justify-content:center;
  503.                 margin-right:15px;
  504.             }
  505.            
  506.             .asker-portrait, .answerer-portrait{
  507.                 width:64px;
  508.                 height:64px;
  509.                 border-radius:100%;
  510.                 padding:3px;
  511.                 border:2px solid {color:accent};
  512.             }
  513.            
  514.             .question-text, .answerer-answer{
  515.                 width:100%;
  516.                 margin-left:15px;
  517.                 background:#eee;
  518.                 border-radius:25px;
  519.                 display:flex;
  520.                 align-items:center;
  521.                 position:relative;
  522.                 flex-wrap:wrap;
  523.             }
  524.            
  525.             .answerer-text{
  526.                 width:100%;
  527.             }
  528.            
  529.             .answerer-answer{
  530.                 margin-left:0;
  531.             }
  532.            
  533.             .question-text #trig{
  534.                 position:absolute;
  535.                 font-size:calc({text:font size}px + 20px);
  536.                 left:-20px;
  537.                 color:#eee;
  538.             }
  539.            
  540.             .answerer-box #trig-2{
  541.                 color:#eee;
  542.                 margin-left:-15px;
  543.                 font-size:calc({text:font size}px + 20px);
  544.             }
  545.            
  546.             .question-text .username, .answerer-text .username{
  547.                 font-weight:700;
  548.                 font-family:'Lora';
  549.                 text-align:right;
  550.                 padding:15px;
  551.             }
  552.            
  553.             .answerer-text .username{
  554.                 padding-left:0 !important;
  555.             }
  556.    
  557.             .question-body, .answerer-body{
  558.                 width:calc(100% - 30px);
  559.                 padding:15px;
  560.             }
  561.            
  562.             .audio-container{
  563.                 display:flex;
  564.                 align-items:center;
  565.                 justify-content:space-evenly;
  566.                 flex-wrap:wrap;
  567.             }
  568.            
  569.             .rotating-disc {
  570.                 font-size:calc({text:font size}px + 20px);
  571.                 display: inline-block;
  572.                 animation: spin 2s linear infinite;
  573.                 animation-play-state: paused; /* stopped by default */
  574.             }
  575.            
  576.             .rotating-disc.playing {
  577.                 animation-play-state: running;
  578.             }
  579.            
  580.             @keyframes spin {
  581.                 to {
  582.                     transform: rotate(360deg);
  583.                 }
  584.             }
  585.            
  586.             .audio-details{
  587.                 display:flex;
  588.                 flex-wrap:wrap;
  589.                 align-items:center;
  590.                 width:75%;
  591.                 justify-content:flex-start;
  592.                 margin-left:20px;
  593.                 margin-right:20px;
  594.             }
  595.            
  596.             #artist, #trackname, #album{
  597.                 width:100%;
  598.             }
  599.            
  600.             #trackname{
  601.                 font-family:'Lora';
  602.                 font-size:calc({text:font size}px + 4px);
  603.                 font-weight:700;
  604.             }
  605.            
  606.             #artist{
  607.                 font-style:italic;
  608.             }
  609.            
  610.             #album{
  611.                 font-weight:700;
  612.                 font-family:'Lora';
  613.             }
  614.             .audio_info{
  615.                 width:100%;
  616.                 display:flex;
  617.                 padding:15px;
  618.                 align-items:center;
  619.                 justify-content:flex-start;
  620.                 border-top:1px solid {color:border};
  621.             }
  622.            
  623.             .audio_player_container{
  624.                 width:100%;
  625.                 display:flex;
  626.                 align-items:center;
  627.                 justify-content:space-evenly;
  628.             }
  629.            
  630.             .custom_audio_buttons{
  631.                 display:flex;
  632.                 margin-left:20px;
  633.                 align-items:center;
  634.                 justify-content:center;
  635.             }
  636.            
  637.             .custom_audio_buttons i{
  638.                 background:{color:accent};
  639.                 font-size:calc({text:font size}px + 5px);
  640.                 padding:15px;
  641.                 border-radius:100%;
  642.             }
  643.            
  644.             .custom_audio_buttons svg {
  645.                 width  : 1.25em;
  646.                 height : 1.25em;
  647.             }
  648.            
  649.             .custom_audio_error_icon svg {
  650.                 stroke : red;
  651.             }
  652.            
  653.             .quote-post > .caption{
  654.                 display:none;
  655.             }
  656.            
  657.             .post-info-notes{
  658.                 border-top:1px solid {color:border};
  659.                 padding:15px;
  660.                 display:flex;
  661.                 align-items:center;
  662.                 justify-content:space-between;
  663.             }
  664.            
  665.             .reblog-parent-info a{
  666.                 margin-right:5px;
  667.             }
  668.            
  669.             .reblog-parent-info a:last-of-type{
  670.                 margin-right:0 !important;
  671.             }
  672.            
  673.             .reblog-info-avatar{
  674.                 width:24px;
  675.                 height:24px;
  676.                 padding:3px;
  677.                 border-radius:100%;
  678.                 border:2px solid {color:accent};
  679.             }
  680.            
  681.             .tagcont{
  682.                 padding:15px;
  683.                 font-size:calc({text:font size}px - 2px);
  684.                 border-top:1px solid {color:border};
  685.             }
  686.            
  687.             .tags a{
  688.                 margin-right:2px;
  689.             }
  690.            
  691.             .post-info-permalink{
  692.                 {block:PermalinkPage}
  693.                 border-top:1px solid {color:border};
  694.                 border-bottom:1px solid {color:border};
  695.                 {/block:PermalinkPage}
  696.                 {block:AskPage}display:none{/block:AskPage};
  697.             }
  698.            
  699.             #tags{
  700.                 display:flex;
  701.                 align-items:center;
  702.                 padding:15px;
  703.                 border-top:1px solid {color:border};
  704.             }
  705.            
  706.             #tags i{
  707.                 background:{color:accent};
  708.                 padding:5px;
  709.                 font-size:calc({text:font size}px + 3px);
  710.                 margin-right:10px;
  711.             }
  712.            
  713.             #tags .tags{
  714.                 font-size:calc({text:font size}px - 2px);
  715.             }
  716.            
  717.             #blog-end{
  718.                 width:100%;
  719.                 display:flex;
  720.                 padding:15px;
  721.                 margin-bottom:50px;
  722.                 align-items:center;
  723.                 justify-content:center;
  724.                 flex-wrap:wrap;
  725.             }
  726.            
  727.             #pagination{
  728.                 width:calc(100% - 30px);
  729.                 padding:15px;
  730.                 display:flex;
  731.                 align-items:center;
  732.                 justify-content:space-between;
  733.                 background:{color:post bg};
  734.             }
  735.            
  736.             #current-page{
  737.                 display:flex;
  738.                 align-items:center;
  739.                 justify-content:space-between;
  740.                 width:20%;
  741.             }
  742.            
  743.             #prev-page, #next-page, .current_page, a.jump_page{
  744.                 background:{color:accent};
  745.             }
  746.            
  747.             #prev-page i, #next-page i{
  748.                 padding:5px;
  749.                 font-size:calc({text:font size}px + 3px);
  750.             }
  751.            
  752.             .current_page{
  753.                 font-weight:700;
  754.             }
  755.            
  756.             .current_page, a.jump_page{
  757.                 width:{text:font size}px;
  758.                 padding:5px;
  759.                 text-align:center;
  760.             }
  761.            
  762.             #date-info{
  763.                 display:flex;
  764.                 align-items:center;
  765.                 justify-content:space-between;
  766.                 flex-wrap:wrap;
  767.                 padding:15px;
  768.             }
  769.            
  770.             #date-info #date, #date-info #time{
  771.                 display:flex;
  772.                 align-items:center;
  773.                 justify-content:space-between;
  774.             }
  775.            
  776.             #date i, #time i{
  777.                 padding:5px;
  778.                 margin-right:10px;
  779.                 background:{color:accent};
  780.                 font-size:calc({text:font size}px + 3px);
  781.             }
  782.            
  783.             #reblog-info{
  784.                 width:calc(100% - 30px);
  785.                 padding:15px;
  786.                 display:flex;
  787.                 border-top:1px solid {color:border};
  788.                 align-items:center;
  789.                 justify-content:space-between;
  790.             }
  791.            
  792.             #reblog-info div span{
  793.                 background:{color:accent};
  794.                 padding:5px;
  795.                 text-transform:uppercase;
  796.                 font-weight:700;
  797.             }
  798.            
  799.             #notes{
  800.                 display:flex;
  801.                 flex-wrap:wrap;
  802.             }
  803.            
  804.             #notes ol{
  805.                 list-style:none;
  806.             }
  807.            
  808.             #notes ol li{
  809.                 width:100%;
  810.                 display:flex;
  811.                 align-items:center;
  812.                 margin-bottom:10px;
  813.             }
  814.            
  815.             #notes ol li a .avatar{
  816.                 display:none;
  817.             }
  818.            
  819.             #notes a{
  820.                 font-weight:700;
  821.                 box-shadow:0 -2px inset {color:accent};
  822.                 text-transform:uppercase;
  823.             }
  824.            
  825.             .note.more_notes_link_container{
  826.                 width:calc({text:post size}px - 100px) !important;
  827.                 display:flex;
  828.                 align-items:center;
  829.                 justify-content:center;
  830.                 margin-top:10px;
  831.                 text-align:center;
  832.                 padding:15px;
  833.             }
  834.            
  835.             #ft{
  836.                 padding:15px;
  837.             }
  838.        
  839.         </style>
  840.     </head>
  841.     <body>
  842.         <div id="main-container">
  843.             <header>
  844.                 <div id="blogtitle">
  845.                     <div>{Title}</div>
  846.                     <line></line>
  847.                     <div id="icon"><img src="{image:icon}"/></div>
  848.                 </div>
  849.                 <div id="description">
  850.                     {Description}
  851.                 </div>
  852.             </header>
  853.                 <div id="links-bar">
  854.                     <div class="navigation-links">
  855.                         <a href="/">home</a>
  856.                         <i class='bx bxs-circle'></i>
  857.                         <a href="/ask">ask</a>
  858.                         <i class='bx bxs-circle'></i>
  859.                         <a href="/archive">archive</a>
  860.                         <i class='bx bxs-circle'></i>
  861.                         <a href="//pneuma-themes.tumblr.com" title="aether by pneuma-themes">theme</a>
  862.                         {block:IfLink1Title}
  863.                         <i class='bx bxs-circle'></i> <a href="{text:link 1 url}">{text:link 1 title}</a><i class='bx bxs-circle'></i>
  864.                         {/block:IfLink1Title}
  865.                         {block:IfLink2Title}
  866.                         <a href="{text:link 2 url}">{text:link 2 title}</a><i class='bx bxs-circle'></i>
  867.                         {/block:IfLink2Title}
  868.                         {block:IfLink3Title}
  869.                         <a href="{text:link 3 url}">{text:link 3 title}</a><i class='bx bxs-circle'></i>
  870.                         {/block:IfLink3Title}
  871.                         {block:IfLink4Title}
  872.                         <a href="{text:link 4 url}">{text:link 4 title}</a>
  873.                         {/block:IfLink4Title}
  874.                     </div>
  875.                 </div>
  876.             <section id="blogposts">
  877.                  {block:Posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  878.            <article id="post-{PostID}" class="{PostType}-post posts" post-type="{PostType}">
  879.            {block:IndexPage}
  880.            <header class="post-info">
  881.             {block:PinnedPostLabel}
  882.             <div id="pinned-post">
  883.               <i class="bx bxs-pin-alt" title="pinned post"></i>
  884.             </div>
  885.             {/block:PinnedPostLabel}
  886.               <div class="date">
  887.               <span class="timestamp">{DayOfMonth} {Month} '{ShortYear}</span>
  888.               <span class="clock">{24Hour}:{Minutes}</span>
  889.               </div>
  890.              
  891.               <div class="controls-container">
  892.                 <div class="controls">
  893.                   <a href="{ReblogURL}" target="_blank" title="reblog" class="reblog"><i class="bx bxs-repeat-alt"></i></a>
  894.                   <a href="#" class="like" title="like"
  895.                    >{LikeButton}<i class="bx bx-heart"></i></a>
  896.                   <a href="{Permalink}" title="permalink page"><i class="bx bx-bookmark"></i></a>
  897.                 </div>
  898.             </div>
  899.           </header>
  900.           {/block:IndexPage}
  901.          
  902.           {block:Text} {block:Title}
  903.           <div class="title">{Title}</div>
  904.           {/block:Title}
  905.           {/block:Text}
  906.          
  907.           {block:Photo}
  908.           {LinkOpenTag}
  909.           <img
  910.            src="{PhotoURL-HighRes}"
  911.            alt="{PhotoAlt}"
  912.            class="photos"
  913.          />{LinkCloseTag}
  914.           {/block:Photo}
  915.          
  916.           {block:Photoset}
  917.           <div class="photoset-grid" photoset-layout="{PhotosetLayout}">
  918.             {block:Photos}
  919.             <div
  920.              data-width="{PhotoWidth-HighRes}"
  921.              data-height="{PhotoHeight-HighRes}"
  922.              data-lowres="{PhotoURL-500}"
  923.              data-highres="{PhotoURL-HighRes}"
  924.              onclick="lightbox(this)"
  925.            >
  926.               <img src="{PhotoURL-HighRes}" />
  927.             </div>
  928.             {/block:Photos}
  929.           </div>
  930.           {/block:Photoset}
  931.          
  932.           {block:Quote}
  933.             <div id="quote">
  934.             <i class="bx bxs-quote-left-alt" id="quote-icon"></i>
  935.             {Quote}</div>
  936.             {block:Source}
  937.             <div id="source"><span class="source">{Source}</span>
  938.             </div>
  939.             {/block:Source}
  940.           {/block:Quote}
  941.          
  942.           {block:Link}
  943.           <div id="link-post">
  944.             <a href="{URL}">{Name}</a><i class='bx bx-chevron-right' ></i>
  945.           </div>
  946.           {/block:Link}
  947.          
  948.           {block:Chat}
  949.          
  950.           {block:Title}
  951.           <div class="title">{Title}</div>
  952.           {/block:Title} {block:Lines}
  953.           <p class="chat-lines">
  954.             {block:Label} <span class="chat-label">{Label}</span>{/block:Label} {Line}
  955.           </p>
  956.           {/block:Lines}
  957.           {/block:Chat}
  958.          
  959.             {block:Audio}
  960.                 {block:AudioPlayer}
  961.                     {AudioPlayer}
  962.                         <div class="audio-container">
  963.                             <div class="audio_info">
  964.                             <i class='bx bx-disc rotating-disc'></i>
  965.                                 <div class="audio-details">
  966.                                     {block:TrackName}
  967.                                     <p id="trackname">{TrackName}</p>
  968.                                     {/block:TrackName}
  969.                                     {block:Artist}
  970.                                     <p id="artist">{Artist}</p>
  971.                                     {/block:Artist}
  972.                                     {block:Album}
  973.                                     <p id="album">{Album}</p>
  974.                                     {/block:Album}
  975.                                 </div>
  976.                             <span class="custom_audio_buttons"></span>
  977.                             </div>
  978.                            
  979.                             <div class="audio_player_container">
  980.                                
  981.                                 <div class="custom_audio_seekbar"></div>
  982.                            
  983.                             </div>
  984. </div>
  985.                         {/block:AudioPlayer}
  986.                         {/block:Audio}
  987.          
  988.           {block:Video}
  989.           <div class="video">{Video-500}</div>
  990.           {/block:Video}
  991.          
  992.           {block:Answer}
  993.           <div class="question-box">
  994.             <div class="question-asker">
  995.               <div class="asker-portrait-container">
  996.                 <img src="{AskerPortraitURL-64}" class="asker-portrait"/>
  997.               </div>
  998.             </div>
  999.             <div class="question-text"><i class='bx bx-caret-left' id="trig"></i> <div class="question-body">{Question}</div>
  1000.                  <div class="username">{Asker}</div>
  1001.             </div>
  1002.           </div>
  1003.           {block:Answerer}
  1004.           <div class="answerer-box">
  1005.             <div class="answerer-answer">
  1006.              <div class="answerer-text">
  1007.              <div class="answerer-body">{Answer}</div>
  1008.               <div class="username">{Answerer}</div>
  1009.              </div>
  1010.             </div>
  1011.               <i class='bx bx-caret-right' id="trig-2"></i>
  1012.             <img src="{AnswererPortraitURL-64}" class="answerer-portrait"/>
  1013.           </div>
  1014.           {/block:Answerer}
  1015.           {/block:Answer}
  1016.          
  1017.           {block:NotReblog}
  1018.           {block:Text}
  1019.           <div class="caption original-post">{Body}</div>
  1020.           {/block:Text}
  1021.           {block:Photo} {block:Caption}
  1022.           <div class="caption original-post">{Caption}</div>
  1023.           {/block:Caption}
  1024.           {/block:Photo}
  1025.           {block:Photoset} {block:Caption}
  1026.           <div class="caption original-post">{Caption}</div>
  1027.           {/block:Caption}
  1028.           {/block:Photoset}
  1029.           {block:Link}
  1030.           {block:Description}
  1031.           <div class="caption original-post">{Description}</div>
  1032.           {/block:Description}
  1033.           {/block:Link}
  1034.           {block:Audio} {block:Caption}
  1035.           <div class="caption original-post">{Caption}</div>
  1036.           {/block:Caption} {/block:Audio}
  1037.           {block:Video} {block:Caption}
  1038.           <div class="caption original-post">{Caption}</div>
  1039.           {/block:Caption}
  1040.           {/block:Video}
  1041.           {block:Answer}
  1042.           <div class="caption original-post">{Replies}</div>
  1043.           {/block:Answer}
  1044.           {/block:NotReblog}
  1045.          
  1046.           {block:RebloggedFrom}
  1047.           {block:Reblogs}
  1048.           <div class="reblog-header source-head">
  1049.             <div class="reblog-header-info-blog">            
  1050.                 <div class="user-avatar">
  1051.                     <img src="{PortraitURL-64}" alt="{username}'s avatar"/>
  1052.                 </div>
  1053.               <div
  1054.                class="username{block:IsDeactivated} deactivated{/block:IsDeactivated}"
  1055.              >
  1056.                 <a href="{Permalink}">{Username}</a>
  1057.               </div>
  1058.               </div>
  1059.               {block:IsDeactivated}
  1060.                 <span class="deactivated">deactivated</span>{/block:IsDeactivated}
  1061.             </div>
  1062.           <div class="reblog-content">{Body}</div>
  1063.           {/block:Reblogs}
  1064.           {/block:RebloggedFrom}
  1065.          
  1066.           {block:IndexPage}
  1067.             <div class="post-info-notes">
  1068.                 <span class="notecount">{NoteCountWithLabel}</span>
  1069.                 {block:RebloggedFrom}
  1070.                 <div class="reblog-parent-info">
  1071.                     <a href="{ReblogParentURL}" title="via {ReblogParentName}"><img src="{ReblogParentPortraitURL-64}" class="reblog-info-avatar"></a>
  1072.                     <a href="{ReblogRootURL}" title="from {ReblogRootName}"><img src="{ReblogRootPortraitURL-64}" class="reblog-info-avatar"></a>
  1073.                 </div>
  1074.                 {/block:RebloggedFrom}
  1075.             </div>
  1076.           {/block:IndexPage}
  1077.  
  1078.           {block:PermalinkPage}
  1079.           <div class="post-info-permalink">
  1080.           <div id="date-info">
  1081.               <div id="date"><i class="bx bx-calendar-alt"/></i>{DayOfWeek}, {DayOfMonth} {Month} {Year}</div>
  1082.               <div id="time"><i class="bx bx-clock-5"></i>{24HourWithZero}:{Minutes}</div>
  1083.               </div>
  1084.               {block:RebloggedFrom}
  1085.               <div id="reblog-info">
  1086.                 <div><span>Reblogged from</span> <a href="{ReblogParentURL}">{ReblogParentName}</a></div>
  1087.                 <div><span>originally by</span> <a href="{ReblogRootURL}">{ReblogRootName}</a></div>
  1088.               </div>
  1089.               {/block:RebloggedFrom}
  1090.              
  1091.               {block:HasTags}
  1092.               <div id="tags">
  1093.                   <i class="bx bx-hashtag"></i>
  1094.                   <div class="tags">{block:Tags}<a href="{TagUrl}">#{Tag}</a>{/block:Tags}</div>
  1095.               </div>
  1096.               {/block:HasTags}
  1097.              
  1098.           </div>
  1099.  
  1100.           {block:PostNotes}
  1101.           <section id="notes">{PostNotes}</section>
  1102.           {/block:PostNotes}
  1103.          
  1104.           {/block:PermalinkPage}
  1105.          
  1106.           {block:IndexPage}
  1107.        
  1108.           {block:HasTags}
  1109.             <div class="tagcont {PostID}">
  1110.                 <div class="tags">
  1111.                   {block:Tags}<a href="{TagURL}" class="tag">#{Tag}</a
  1112.                  >{/block:Tags}
  1113.                 </div>
  1114.             </div>
  1115.             {/block:HasTags}
  1116.             {/block:IndexPage}
  1117.           </article>
  1118.         {/block:Posts}
  1119.             </section>
  1120.             {block:IndexPage}
  1121.             <footer id="blog-end">
  1122.                 {block:Pagination}
  1123.                 <div id="pagination">
  1124.                     <div id="prev-page">
  1125.                         {block:previouspage}
  1126.                         <a href="{previouspage}" title="previous page"><i class="bx bx-arrow-left"></i></a>
  1127.                         {/block:previouspage}
  1128.                     </div>
  1129.  
  1130.                     <div id="current-page">
  1131.                         {block:JumpPagination length="5"}
  1132.                         {block:CurrentPage}
  1133.                         <span class="current_page">{CurrentPage}</span>{/block:CurrentPage}
  1134.                         {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}
  1135.                         {/block:JumpPagination}
  1136.                     </div>
  1137.  
  1138.                     <div id="next-page">
  1139.                         {block:nextpage}
  1140.                         <a href="{nextpage}" title="next page"><i class="bx bx-arrow-right"></i></a>
  1141.                         {/block:nextpage}
  1142.                     </div>
  1143.                 </div>
  1144.                 {/block:Pagination}
  1145.                
  1146.                 <div id="ft">
  1147.                    &copy; {CopyrightYears}. Powered by <a href="//tumblr.com"><b>Tumblr</b></a>
  1148.                 </div>
  1149.             </footer>
  1150.             {/block:IndexPage}
  1151.         </div><!--end main container-->
  1152.     </body>
  1153.     <script>
  1154. // remove empty p tags
  1155.         for (const p of document.querySelectorAll('p')) {
  1156.             if (p.innerHTML.trim() === '') {
  1157.                p.remove()
  1158.             }
  1159.         }
  1160.         // create posts array
  1161.         let posts = []
  1162.         {block:Posts}
  1163.             posts.push({ npf: JSON.parse({JSNPF}), id: {JSPostId}})
  1164.         {/block:Posts}
  1165.  
  1166.         //function for updating post types
  1167.         function updateTypes(type, article) {
  1168.             article.classList.remove('text-post')
  1169.             article.classList.add(`${ type }-post`, 'npf-post')
  1170.         }
  1171.  
  1172.         // loop through array to get each post
  1173.         for (const post of posts) {
  1174.            let npf = post.npf
  1175.            let article = document.getElementById(`post-${post.id}`)
  1176.            // select captions that have something in them
  1177.            let caption = article.querySelector('.caption:is(:not(:empty))')
  1178.            if (caption != null && article.classList.contains('text-post')) {
  1179.               // if content exists
  1180.               if (npf.trail.length || npf.content.length) {
  1181.                   // assign various post types based on NPF data
  1182.                     switch (npf.trail[0]?.content[0]?.type ?? npf.content[0].type) {
  1183.                     case 'image':
  1184.                        updateTypes('photos', article)
  1185.                        if (article.querySelector('.npf_row') == null) {
  1186.                           caption.prepend(article.querySelector('figure'))
  1187.                        }
  1188.                        break
  1189.                     case 'video':
  1190.                        updateTypes('video', article)
  1191.                        let video = article.querySelector('figure')
  1192.                        caption.prepend(video)
  1193.                        break
  1194.                     case 'link':
  1195.                       updateTypes('link', article)
  1196.                     case 'audio':
  1197.                        updateTypes('audio', article)
  1198.                         break
  1199.                     case 'quote':
  1200.                         updateTypes('quote', article)
  1201.                     }
  1202.  
  1203.                  // if there are photos
  1204.                  if (article.classList.contains('photos-post')) {
  1205.                     let photoset = document.createElement('div')
  1206.                     photoset.classList.add('npf-photos')
  1207.                     caption.prepend(photoset)
  1208.                     // find where a photoset would be split up by another content block
  1209.                     let photoBreak = article.querySelector('.reblog-content p, .reblog-content h1, .reblog-content h2')
  1210.                     let elements = []
  1211.                     if (photoBreak) {
  1212.                        let prevElement = photoBreak.parentNode.firstElementChild
  1213.                        while (prevElement !== photoBreak) {
  1214.                           elements.push(prevElement)
  1215.                           prevElement = prevElement.nextElementSibling
  1216.                        }
  1217.                     }
  1218.                     // if there is nothing that breaks up the photoset, select all rows
  1219.                     else {
  1220.                        elements = article.querySelectorAll('.npf_row')
  1221.                     }
  1222.                     // move each row to the top
  1223.                     for (const el of elements) {
  1224.                        photoset.append(el)
  1225.                     }
  1226.                     if (article.querySelectorAll('.npf_row').length > 1) {
  1227.                         updateTypes('photoset', article)
  1228.                     }
  1229.                     else {
  1230.                         updateTypes('photo', article)
  1231.                     }
  1232.                  }
  1233.  
  1234.                  // clean up any potential stray reblog headers
  1235.                  let reblogHeader = article.querySelector('.reblog-header')
  1236.                  let reblogContent = article.querySelector('.reblog-content')
  1237.                  if (reblogHeader?.nextElementSibling === reblogContent && reblogContent?.childElementCount === 0) {
  1238.                     reblogHeader.remove()
  1239.                     reblogContent.remove()
  1240.                  }
  1241.               }
  1242.            }
  1243.         }
  1244. $(document).ready(function () {
  1245.    //   $(".scrollup").click(function () {
  1246.    //     $("html, body").animate({ scrollTop: 0 }, 700);
  1247.     //     return false;
  1248.     //   });
  1249.  
  1250.       tippy("[title]", {
  1251.         // change these to your liking
  1252.         arrow: false,
  1253.         placement: "bottom", // top, right, bottom, left
  1254.         delay: 0, //ms
  1255.         offset: [0, 10], //px or string
  1256.         maxWidth: 300, //px or string
  1257.  
  1258.         // leave these as they are
  1259.         followCursor: true,
  1260.         allowHTML: true,
  1261.         theme: "custom",
  1262.         ignoreAttributes: true,
  1263.         content(reference) {
  1264.           const title = reference.getAttribute("title");
  1265.           reference.removeAttribute("title");
  1266.           return title;
  1267.         },
  1268.       });
  1269.     });
  1270.    
  1271.   const customAudioSettings = {
  1272.     post: "article",
  1273.     wrappers: {
  1274.         audio: ".custom_audio_wrapper",
  1275.         buttons: ".custom_audio_buttons",
  1276.         duration: ".custom_audio_duration",
  1277.         timeCurrent: ".custom_audio_current_time",
  1278.         timeLeft: ".custom_audio_time_left",
  1279.         seekbar: ".custom_audio_seekbar"
  1280.     },
  1281.     default: false,
  1282.     pauseAll: false,
  1283.     playButton: "<i class='bx bx-play'></i>",
  1284.     pauseButton: "<i class='bx bx-pause'></i>",
  1285.     errorIcon: "<i class='bx bx-x'></i>",
  1286.     hideInfoIfError: true,
  1287.  
  1288.     callAfterLoad: () => {
  1289.         document.querySelectorAll("article").forEach(article => {
  1290.             const disc = article.querySelector(".rotating-disc");
  1291.             if (!disc) return;
  1292.  
  1293.             const observer = new MutationObserver(mutations => {
  1294.                 for (const m of mutations) {
  1295.                     if (m.attributeName !== "class") continue;
  1296.  
  1297.                     if (article.classList.contains("audio_playing")) {
  1298.                         disc.classList.add("playing");
  1299.                     } else {
  1300.                         disc.classList.remove("playing");
  1301.                     }
  1302.                 }
  1303.             });
  1304.  
  1305.             observer.observe(article, {
  1306.                 attributes: true,
  1307.                 attributeFilter: ["class"]
  1308.             });
  1309.         });
  1310.     }
  1311. };
  1312.  
  1313.     const ca = new CustomAudio(customAudioSettings);
  1314.     ca.create();
  1315.  
  1316.     function gatherData(images, arr) {
  1317.       for (let i = 0; i < images.length; i++) {
  1318.        let currentData = {
  1319.          width: images[i].getAttribute("data-width"),
  1320.          height: images[i].getAttribute("data-height"),
  1321.          low_res: images[i].getAttribute("data-lowres"),
  1322.          high_res: images[i].getAttribute("data-highres"),
  1323.        };
  1324.        arr.push(currentData);
  1325.      }
  1326.    }
  1327.    function getIndex(elem) {
  1328.      let i = 0;
  1329.      while ((elem = elem.previousElementSibling) != null) i++;
  1330.      return i;
  1331.    }
  1332.    function lightbox(elem) {
  1333.      let currentPhotoset = elem.parentNode;
  1334.      let photosetPhotos = currentPhotoset.getElementsByTagName("div");
  1335.      let data = [];
  1336.      gatherData(photosetPhotos, data);
  1337.      Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  1338.    }
  1339. </script>
  1340. </html>
Advertisement
Add Comment
Please, Sign In to add comment