API tools faq
paste
Advertisement
pneumathemes

theme #08: empyreum

pneumathemes
Mar 5th, 2024 (edited)
1,257
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 38.72 KB | None | 0 0
raw download clone embed print report
  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 #08: Empyreum
  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.         <!--Variables-->
  31.         <meta name="color:background" content="#fefefe"/>
  32.        
  33.         <meta name="color:accent" content="#4760DA"/>
  34.         <meta name="color:body" content="#141414"/>
  35.         <meta name="color:border" content="#eee"/>
  36.         <meta name="color:sidebar background" content="#fff"/>
  37.         <meta name="color:post background" content="#fff"/>
  38.         <meta name="color:footer background" content="#1e1e1e"/>
  39.         <meta name="color:footer text" content="#ddd"/>
  40.        
  41.         <meta name="image:icon" content=""/>
  42.        
  43.         <meta name="text:post size" content=""/>
  44.         <meta name="text:font size" content=""/>
  45.         <meta name="text:photoset gutter" content=""/>
  46.         <meta name="text:link 1 title" content="" />
  47.         <meta name="text:link 1 url" content="" />
  48.         <meta name="text:link 2 title" content="" />
  49.         <meta name="text:link 2 url" content="" />
  50.         <meta name="text:link 3 title" content="" />
  51.         <meta name="text:link 3 url" content="" />
  52.        
  53.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  54.         <script src="https://unpkg.com/@popperjs/core@2"></script>
  55.         <script src="https://unpkg.com/tippy.js@6"></script>
  56.         <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  57.        
  58.         <script src="https://cdn.jsdelivr.net/gh/annasthms/customaudio@latest/customaudio.min.js"></script>
  59.             <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet"/>
  60.  
  61.         <script src="https://unpkg.com/akar-icons-fonts"></script>
  62.         <link href='https://static.tumblr.com/r7bx1qs/83Cs9varx/note-reblog.css' rel="stylesheet"/>
  63.        
  64.         <!--✻✻✻✻✻✻  npf audio player by @glenthemes  ✻✻✻✻✻✻-->
  65.         <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  66.         <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  67.         <script>
  68.         tumblr_npf_audio({
  69.             emptyTitleText: "Untitled track",
  70.             emptyArtistText: "Untitled artist",
  71.             emptyAlbumText: "Untitled album",
  72.            
  73.             titleLabel: "Track:",
  74.             artistLabel: "Artist:",
  75.             albumLabel: "Album:"
  76.         });
  77.         </script>
  78.         <style edit-npf-audio-player>
  79.             figcaption.audio-caption, figcaption.audio-caption + audio[controls]{
  80.             display:none!important;
  81.         }
  82.  
  83.         .npf-audio-wrapper {
  84.             --NPF-Audio-Buttons-Size: 1.4rem;
  85.             --NPF-Audio-Buttons-Color: #555555; /* color of play & pause buttons */
  86.            --NPF-Audio-Buttons-Spacing: 1.3rem; /* space between buttons and song info */
  87.            
  88.             --NPF-Audio-Image-Size: 85px;
  89.             --NPF-Audio-Image-Spacing: 0px; /* gap between player info and cover image */
  90.             margin-bottom:20px !important;
  91.         }
  92.        
  93.         .npf-audio-background {
  94.             background-color: #f2f2f2; /* background color of player (optional) */
  95.             padding: 1.5rem;
  96.         }
  97.        
  98.         .npf-audio-title-label,
  99.         .npf-audio-artist-label,
  100.         .npf-audio-album-label {
  101.             font-weight: bold;
  102.         }
  103.        
  104.         .npf-audio-title,
  105.         .npf-audio-artist,
  106.         .npf-audio-album {
  107.             color: #333333; /* color of audio text (optional) */
  108.         }
  109.         </style>
  110.        
  111.         <!--✻✻✻✻✻✻  UN-BLUE POLLS by @glenthemes  ✻✻✻✻✻✻-->
  112.         <link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet">
  113.         <style>
  114.         .poll-post {    
  115.             --Poll-Question-Font-Size: 16px;          
  116.             --Poll-Option-Background-Color: #fcfcfc;    
  117.             --Poll-Option-Corner-Rounding: 18px;    
  118.             --Poll-Option-Border-Size: 2px;    
  119.             --Poll-Option-Border-Color: #efefef;    
  120.             --Poll-Option-Padding: 15px;    
  121.             --Poll-Option-Font-Size: 13px;    
  122.             --Poll-Option-Spacing: 10px;    
  123.             --Poll-Option-Text-Color: #666666;        
  124.             --Poll-Option-HOVER-Border-Color: #cfdae4;    
  125.             --Poll-Option-HOVER-Background-Color: #ebf0f4;    
  126.             --Poll-Option-HOVER-Text-Color: #1a1b1d;    
  127.             --Poll-Option-HOVER-Speed: 0.4s;
  128.         }
  129.        
  130.         .poll-see-results{
  131.             width:calc(100% - var(--Poll-Option-Padding * 2));
  132.             padding-top:var(--Poll-Option-Padding);
  133.             padding-bottom:var(--Poll-Option-Padding);
  134.             box-shadow:none !important;
  135.             border:2px solid var(--Poll-Option-Border-Color);
  136.             border-radius:var(--Poll-Option-Corner-Rounding);
  137.             background:var(--Poll-Option-Background-Color);
  138.         }
  139.         </style>
  140.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  141.     <script>
  142.       // minimal soundcloud player © shythemes.tumblr
  143.       $(document).ready(function () {
  144.         var color = "#acd7bb"; // color of play button (hex)
  145.         $(".soundcloud_audio_player").each(function () {
  146.           $(this).attr({
  147.             src:
  148.               $(this).attr("src").split("&")[0] +
  149.              "&amp;liking=false&amp;sharing=false&amp;auto_play=false&amp;show_comments=false&amp;continuous_play=false&amp;buying=false&amp;show_playcount=false&amp;show_artwork=true&amp;origin=tumblr&amp;color=" +
  150.               color.split("#")[1],
  151.             height: 20,
  152.             width: "100%",
  153.           });
  154.         });
  155.       });
  156.     </script>
  157.  
  158.         <style type="text/css">
  159.             @import url('https://fonts.bunny.net/css?family=public-sans:400,400i,700,800i');
  160.            
  161.             iframe.tmblr-iframe {
  162.             z-index:99999999999999!important;
  163.             top:10px!important;
  164.             right:10px!important;
  165.             opacity:1;
  166.             /* delete invert(1) from here */
  167.                 filter:invert(1) contrast(150%);
  168.                 -webkit-filter:invert(1) contrast(150%);
  169.                 -o-filter:invert(1) contrast(150%);
  170.                 -moz-filter:invert(1) contrast(150%);
  171.                 -ms-filter:invert(1) contrast(150%);
  172.             /* to here if your blog has a dark background */
  173.             transform:scale(0.75);
  174.             transform-origin:100% 0;
  175.             -webkit-transform:scale(0.75);
  176.             -webkit-transform-origin:100% 0;
  177.             -o-transform:scale(0.75);
  178.             -o-transform-origin:100% 0;
  179.             -moz-transform:scale(0.75);
  180.             -moz-transform-origin:100% 0;
  181.             -ms-transform:scale(0.75);
  182.             -ms-transform-origin:100% 0;
  183.         }
  184.        
  185.             iframe[src*='open.spotify.com'][src*='track'], figure[data-npf*='open.spotify.com'][data-npf*='track']{     height:80px!important; }
  186.  
  187.            
  188.             body{
  189.                 margin:0;
  190.                 padding:0;
  191.                 background:{color:background};
  192.                 color:{color:body};
  193.                 font-family:'Public Sans';
  194.                 font-size:{text:font size}px;
  195.             }
  196.            
  197.             .tippy-box{
  198.                 background:{color:accent};
  199.                 color:{color:body};
  200.                 text-transform:lowercase;
  201.                 font-size:calc({text:font size}px - 2px);
  202.             }
  203.            
  204.             ::-webkit-scrollbar{
  205.                 width:4px;
  206.             }
  207.            
  208.             ::-webkit-scrollbar-thumb:vertical{
  209.                 background:{color:accent};
  210.             }
  211.            
  212.             a{
  213.                 text-decoration:none;
  214.                 color:{color:body};
  215.             }
  216.            
  217.             #container{
  218.                 width:calc({text:post size}px + 600px);
  219.                 display:flex;
  220.                 flex-wrap:wrap;
  221.                 position:relative;
  222.                 margin:0 auto !important;
  223.                 margin-top:60px !important;
  224.                
  225.             }
  226.            
  227.             #sidebar{
  228.                 width:450px;
  229.                 position:sticky;
  230.                 top:60px;
  231.                 height:200px;
  232.                 box-shadow: -15px -15px 0px 2px {color:accent};
  233.                 border-radius:5px;
  234.                 border:1px solid {color:border};
  235.                 background:{color:sidebar background};
  236.             }
  237.            
  238.             #sidebar-container{
  239.                 margin:20px;
  240.                 display:flex;
  241.                 flex-wrap:wrap;
  242.                 align-items:center;
  243.             }
  244.            
  245.             #icon{
  246.                 width:64px;
  247.                 height:64px;
  248.                 margin-right:30px;
  249.             }
  250.            
  251.             #icon img{
  252.                 max-width:64px;
  253.                 width:64px;
  254.                 height:64px;
  255.                 border-radius:5px;
  256.                 max-height:64px;
  257.             }
  258.            
  259.             #blogtitle{
  260.                 font-size:calc({text:font size}px + 5px);
  261.                 text-transform:lowercase;
  262.                 font-weight:700;
  263.                 width:100%;
  264.                 margin-bottom:25px;
  265.             }
  266.            
  267.             #desc{
  268.                 width:100%;
  269.                 margin-top:20px;
  270.             }
  271.            
  272.             #desc a{
  273.                 box-shadow:0 -2px inset {color:accent};
  274.             }
  275.            
  276.             .navigation-links a{
  277.                 text-transform:uppercase;
  278.                 box-shadow:0 -5px inset {color:accent};
  279.                 transition:.5s ease-in;
  280.                 margin-right:10px;
  281.                 font-weight:700;
  282.                 font-size:calc({text:font size}px - 2px);
  283.             }
  284.            
  285.             .navigation-links a:last-of-type{
  286.                 margin-right:0 !important;
  287.             }
  288.            
  289.             .navigation-links a:hover{
  290.                 box-shadow:0 -20px inset {color:accent};
  291.             }
  292.            
  293.             article{
  294.                 width:{text:post size}px;
  295.                 position:relative;
  296.                 margin-bottom:100px;
  297.             }
  298.            
  299.             p.npf_quote{
  300.                 font-family:'Public Sans' !important;
  301.                 font-size:calc({text:font size}px + 3px);
  302.                 font-weight:700;
  303.             }
  304.            
  305.             p.npf_chat{
  306.                 background:#eee;
  307.                 padding:10px;
  308.                 font-family:'Public Sans' !important;
  309.                 font-size:{text:font size}px !important;
  310.             }
  311.            
  312.             .caption, .replies{
  313.                 background:{color:post background};
  314.                 border-bottom:1px solid {color:border};
  315.             }
  316.            
  317.             .caption a{
  318.                 box-shadow: 0 -5px inset {color:accent};
  319.             }
  320.            
  321.             .original-post, .reblog-content{
  322.                 padding-top:20px;
  323.                 padding-bottom:20px;
  324.             }
  325.            
  326.            
  327.             .original-post li, .reblog-content li{
  328.                 margin-bottom:5px;
  329.             }
  330.  
  331.             .original-post li:last-of-type, .reblog-content li:last-of-type{
  332.                 margin-bottom:0;
  333.             }
  334.  
  335.             .original-post a, .reblog-content a{
  336.                 box-shadow:0 -2px inset {color:accent};
  337.             }
  338.  
  339.             blockquote.npf_indented, .caption blockquote, .caption blockquote blockquote{
  340.                 padding-left:15px;
  341.                 border-left:1px solid {color:border};
  342.             }
  343.            
  344.             #post-container{
  345.                 margin-left:50px;
  346.             }
  347.            
  348.             article img{
  349.                 width:100%;
  350.                 max-width:100%;
  351.             }
  352.            
  353.             .photoset-grid{
  354.                 grid-gap:{text:photoset gutter}px;
  355.             }
  356.            
  357.             #quote{
  358.                 font-size:calc({text:font size}px + 3px);
  359.                 font-weight:700;
  360.                 font-style:italic;
  361.                 padding:20px;
  362.                 text-align:center;
  363.             }
  364.            
  365.             #source{
  366.                 text-align:center;
  367.                 padding-top:20px;
  368.                 padding-bottom:20px;
  369.                 font-weight:700;
  370.                 border-bottom:1px solid {color:border};
  371.                 border-top:1px solid {color:border};
  372.             }
  373.  
  374.             .quote-post > .caption{
  375.                 display:none;
  376.             }
  377.  
  378.             .source p{
  379.                 display:none;
  380.             }
  381.            
  382.             .audio-container{
  383.                 display:flex;
  384.                 width:100%;
  385.                 align-items:center;
  386.                 flex-wrap:wrap;
  387.                 justify-content:center;
  388.             }
  389.            
  390.             .audio_info{
  391.                 width:100%;
  392.                 display:flex;
  393.                 align-items:center;
  394.                 border:1px solid {color:border};
  395.                 justify-content:space-between;
  396.                 padding:20px;
  397.                 padding-top:10px !important;
  398.                 border-radius:2px;
  399.             }
  400.            
  401.             .custom_audio_duration {
  402.                 display : inline;
  403.             }
  404.            
  405.             .audio_player{
  406.                 width:100%;
  407.                 padding-top:20px;
  408.                 display:flex;
  409.                 align-items:center;
  410.                 justify-content:space-between;
  411.             }
  412.            
  413.             .audio_player .custom_audio_seekbar {
  414.                 width      : 80%;
  415.                 height     : 0.5em;
  416.                 border-radius:2px;
  417.                 background : #dfdfdf;
  418.             }
  419.             .audio_player .custom_audio_seekbar_progress {
  420.                 width      : 0;
  421.                 height     : 100%;
  422.                 background : {color:accent};
  423.             }
  424.            
  425.             .custom_audio_time_left::before {
  426.                 content : "- ";
  427.             }
  428.            
  429.             #trackname{
  430.                 font-weight:700;
  431.                 font-size:calc({text:font size}px + 3px);
  432.             }
  433.            
  434.             #album-name, #artist{
  435.                 text-transform:uppercase;
  436.             }
  437.            
  438.             .custom_audio_play_button i, .custom_audio_pause_button i{
  439.                 font-size:16px;
  440.                 color:{color:accent};
  441.             }
  442.            
  443.             .question, .answer{
  444.                 display:flex;
  445.                 flex-wrap:wrap;
  446.                 align-items:center;
  447.                 border-bottom:1px solid {color:border};
  448.                 padding-bottom:20px;
  449.             }
  450.            
  451.             .answer{
  452.                 padding-bottom:10px !important;
  453.                 padding-top:20px;
  454.             }
  455.            
  456.             .question-text{
  457.                 width:100%;
  458.                 margin-top:20px;
  459.             }
  460.            
  461.             #ask-decoration{
  462.                 font-size:20px;
  463.                 border:1px solid {color:border};
  464.                 border-radius:2px;
  465.                 color:{color:accent};
  466.                 padding:20px;
  467.                 margin-right:20px;
  468.             }
  469.            
  470.             .asker-user, .answerer-user{
  471.                 text-transform:uppercase;
  472.                 margin-right:10px;
  473.             }
  474.            
  475.             .answerer-user{
  476.                 width:100%;
  477.             }
  478.            
  479.             .asker-user a, .answerer-user a{
  480.                 font-weight:700;
  481.                 box-shadow:0 -10px inset {color:accent};
  482.             }
  483.            
  484.             .answer{
  485.                 display:flex;
  486.                 align-items:center;
  487.                 flex-wrap:wrap;
  488.             }
  489.            
  490.             .answer-post .caption.original-post{
  491.                 display:none !important;
  492.             }
  493.        
  494.             .text-post .title{
  495.                 padding:20px 0px;
  496.                 border-top:1px solid {color:border};
  497.                 border-bottom:1px solid {color:border};
  498.                 font-size:calc({text:font size}px + 6px);
  499.                 font-weight:700;
  500.             }
  501.            
  502.             .reblog-header{
  503.                 display:flex;
  504.                 align-items:center;
  505.                 padding:20px 0px;
  506.                 position:relative;
  507.                 justify-content:space-between;
  508.                 border-bottom:1px solid {color:border};
  509.             }
  510.            
  511.             .reblog-header i{
  512.                 padding:8px;
  513.                 border-radius:2px;
  514.                 margin-right:10px;
  515.                 background:{color:accent};
  516.             }
  517.            
  518.             .reblog-header:before{
  519.                 content:'';
  520.                 position:absolute;
  521.                 left:0;
  522.                 bottom:-2px;
  523.                 width:12%;
  524.                 background-color:{color:accent};
  525.                 padding:2px;
  526.             }
  527.            
  528.             .reblog-username{
  529.                 font-weight:700;
  530.                 box-shadow:0 -5px inset {color:accent};
  531.                 transition:.5s ease-in;
  532.                 text-transform:uppercase;
  533.             }
  534.            
  535.             .reblog-username:hover{
  536.                 box-shadow:0 -20px inset {color:accent};
  537.             }
  538.            
  539.             .reblog-info-users{
  540.                 display:none;
  541.             }
  542.            
  543.             .reblog-info-users a{
  544.                 box-shadow:none !important;
  545.             }
  546.            
  547.             .reblog-header.original > .reblog-info-users{
  548.                 display:flex !important;
  549.             }
  550.            
  551.             .reblog-header.original > .reblog-info-users a img{
  552.                 width:24px;
  553.                 height:24px;
  554.                 border-radius:100%;
  555.                 padding:3px;
  556.                 border:2px solid {color:accent};
  557.             }
  558.            
  559.             .post-info{
  560.                 display:flex;
  561.                 align-items:center;
  562.                 justify-content:space-between;
  563.                 padding:20px 0px;
  564.                 border-bottom:1px solid {color:border};
  565.             }
  566.            
  567.             .post-date, .post-notes, .controls{
  568.                 display:flex;
  569.                 align-items:center;
  570.                 text-transform:uppercase;
  571.                 font-weight:700;
  572.                 justify-content:center;
  573.             }
  574.            
  575.             .perma-info{
  576.                 display:flex;
  577.                 align-items:center;
  578.                 flex-wrap:wrap;
  579.             }
  580.            
  581.             .perma-info span a{
  582.                 text-transform:uppercase;
  583.                 font-weight:700;
  584.                 box-shadow: 0 -5px inset {color:accent};
  585.             }
  586.            
  587.             .perma-info span{
  588.                 margin-right:10px;
  589.             }
  590.            
  591.             .perma-info span:last-of-type{
  592.                 margin-right:0 !important;
  593.             }
  594.            
  595.             .controls i{
  596.                 border:1px solid {color:border};
  597.                 color:{color:accent};
  598.                 padding:6px;
  599.                 border-radius:2px;
  600.             }
  601.            
  602.             .post-date i, .post-notes i{
  603.                 margin-right:10px;
  604.                 color:{color:accent};
  605.             }
  606.            
  607.             .controls a{
  608.                 margin-right:10px;
  609.             }
  610.            
  611.             .controls a:last-of-type{
  612.                 margin-right:0 !important;
  613.             }
  614.            
  615.             .controls .like .like_button iframe {
  616.                 position:absolute;
  617.                 top:0;
  618.                 left:0;
  619.                 bottom:0;
  620.                 right:0;
  621.                 z-index:2;
  622.                 opacity:0;
  623.             }
  624.  
  625.             .controls .like{
  626.                 display:inline-block;
  627.             }
  628.  
  629.             .controls .like .liked + svg {
  630.                 opacity:1;
  631.             }
  632.  
  633.             .controls .like .liked + svg path {
  634.                 fill:#ec5a5a;
  635.             }
  636.            
  637.             .tags{
  638.                 display:flex;
  639.                 align-items:center;
  640.                 flex-wrap:wrap;
  641.                 padding:20px 0;
  642.                 border-bottom:1px solid {color:border};
  643.             }
  644.            
  645.             .tags i{
  646.                 padding:10px;
  647.                 color:{color:accent};
  648.                 border:1px solid {color:border};
  649.                 border-radius:5px;
  650.             }
  651.            
  652.             .tag{
  653.                 margin-left:10px;
  654.                 display:flex;
  655.                 align-items:center;
  656.                 width:calc(100% - 60px);
  657.                 flex-wrap:wrap;
  658.             }
  659.            
  660.             .tag a{
  661.                 font-size:calc({text:font size}px - 3px);
  662.                 text-transform:uppercase;
  663.                 margin-right:5px;
  664.             }
  665.            
  666.             .pagination{
  667.                 padding:20px;
  668.                 border-top:1px solid {color:border};
  669.                 display:flex;
  670.                 align-items:center;
  671.                 justify-content:space-between;
  672.                 border-bottom:1px solid {color:border};
  673.             }
  674.            
  675.             .current_page {
  676.                 font-weight:700;
  677.             }
  678.            
  679.             #post-container footer{
  680.                 width:calc(100% - 40px);
  681.                 padding:20px;
  682.                 height:40px;
  683.                 background:{color:footer background};
  684.                 color:{color:footer text};
  685.                 display:flex;
  686.                 align-items:center;
  687.                 text-transform:uppercase;
  688.                 justify-content:space-between;
  689.                 margin-top:100px;
  690.                 font-weight:700;
  691.                
  692.                 {block:permalinkpage}
  693.                 bottom:0 !important;
  694.                 {/block:permalinkpage}
  695.             }
  696.            
  697.             #credit a{
  698.                 color:{color:footer text};
  699.                 box-shadow:0 -5px inset {color:accent};
  700.             }
  701.            
  702.             #post-notes{
  703.                 display:flex;
  704.                 align-items:center;
  705.                 justify-content:center;
  706.                 padding:20px;
  707.                 padding-top:0 !important;
  708.                 border-top:1px solid {color:border};
  709.                 width:calc({text:post size}px - 40px);
  710.                 background:{color:post bg};
  711.                 margin-top:20px;
  712.             }
  713.  
  714.             #post-notes ol, #post-notes li{
  715.                     list-style-type:none;
  716.                 }
  717.  
  718.                 #post-notes ol{
  719.                     width:{text:post size}px;
  720.                 }
  721.  
  722.                 #post-notes li img.avatar{
  723.                     display:none;
  724.                 }
  725.  
  726.                 #post-notes li{
  727.                     margin-bottom:10px;
  728.                     margin-left:-40px;
  729.                     display:flex;
  730.                     flex-wrap:wrap;
  731.                     align-items:center;
  732.                 }
  733.  
  734.                 #post-notes li a{
  735.                     font-weight:700;
  736.                     box-shadow:0 -5px inset {color:accent};
  737.                 }
  738.  
  739.                 .note.with_commentary blockquote{
  740.                     width:100%;
  741.                     padding:10px;
  742.                     border:1px solid {color:border};
  743.                 }
  744.  
  745.                 .tag-permalink a{
  746.                     margin-right:2px;
  747.                     margin-bottom:2px;
  748.                 }
  749.                
  750.                 .scrollup{
  751.                   position:fixed;
  752.                   bottom:20px;
  753.                   right:10px;
  754.                   text-align:center;
  755.               }
  756.  
  757.               .scrollup i{
  758.                   background:{color:accent};
  759.                   border-radius:2px;
  760.                   padding:10px;
  761.                   color:{color:body};
  762.               }
  763.         </style>
  764.  
  765.     </head>
  766.     <body>
  767.         <div id="container">
  768.             <div id="sidebar">
  769.                 <div id="sidebar-container">
  770.                     <div id="icon">
  771.                         <img src="{image:icon}"/>
  772.                     </div>
  773.                     <div style="display:flex;align-items:center;flex-wrap:wrap;width:calc(100% - 94px)">
  774.                     <div id="blogtitle">{Title}</div>
  775.                     <div id="navigation-link-container">
  776.                         <div class="navigation-links">
  777.                             <a href="/">home</a>
  778.                         <a href="/ask">ask</a>
  779.                         <a href="/archive">past</a>
  780.                         <a href="{text:link 1 URL}">{text:link 1 title}</a>
  781.                         <a href="{text:link 2 URL}">{text:link 2 title}</a>
  782.                         <a href="{text:link 3 url}">{text:link 3 title}</a>
  783.                         </div>
  784.                        
  785.                     </div>
  786.                     </div>
  787.                     <div id="desc">{Description}</div>
  788.                 </div>
  789.             </div><!--end sidebar-->
  790.             <div id="post-container">
  791.                 {block:Posts}
  792.         <article id="post-{PostID}" class="{posttype}-post posts">
  793.         {block:Photo}
  794.         <div class="legacy-photo">
  795.           <img src="{PhotoURL-HighRes}" alt="{photoalt}" class="photos" />
  796.         </div>
  797.         {/block:Photo}
  798.        
  799.         {block:Photoset}
  800.         <div class="photoset-grid" photoset-layout="{PhotosetLayout}">
  801.           {block:Photos}
  802.           <div
  803.            data-width="{PhotoWidth-HighRes}"
  804.            data-height="{PhotoHeight-HighRes}"
  805.            data-lowres="{PhotoURL-500}"
  806.            data-highres="{PhotoURL-HighRes}"
  807.            onclick="lightbox(this)"
  808.          >
  809.             <img src="{PhotoURL-HighRes}" />
  810.           </div>
  811.           {/block:Photos}
  812.         </div>
  813.         {/block:Photoset}
  814.            
  815.         {block:Panorama}
  816.             <div class="legacy-photo"><img src="{photourl-panorama}" alt="{photoalt}"></div>
  817.         {/block:Panorama}
  818.        
  819. <!-- quote posts -->            
  820.         {block:Quote}
  821.             <div id="quote">
  822.                 {Quote}
  823.             </div>
  824.             <div id="source">
  825.                 {Source}
  826.             </div>
  827.         {/block:Quote}
  828.        
  829. <!-- chat posts -->            
  830.         {block:Chat}
  831.             <ul class="chat">
  832.                 {block:Lines}
  833.                     <li>
  834.                         {block:Label}{Label}{/block:Label}
  835.                         {Line}
  836.                     </li>
  837.                 {/block:Lines}
  838.             </ul>
  839.         {/block:Chat}
  840.        
  841.         {block:link}
  842.             <div class="npf-link-block">
  843.                 <a href="{URL}">
  844.                     {Name}
  845.                 </a>
  846.             </div>
  847.         {/block:link}
  848.        
  849.         {block:Video}
  850.         <div class="video">{Video-500}</div>
  851.         {/block:Video}
  852.        
  853.          {block:Audio}
  854.             {block:AudioPlayer}
  855.                 {AudioPlayer}
  856.                     <div class="audio-container">
  857.                             <div class="audio_info">
  858.                                 <div class="audio-details">
  859.                                     {block:TrackName}
  860.                                     <p id="trackname">{TrackName}</p>
  861.                                     {/block:TrackName}
  862.                                     {block:Album}
  863.                                     <span id="album-name">from <b>{Album}</b>, </span>
  864.                                     {/block:Album}
  865.                                     {block:Artist}
  866.                                     <span id="artist">by <b>{Artist}</b></span>
  867.                                     {/block:Artist}
  868.                                 </div>
  869.                                
  870.                                 <div class="audio_player_container">
  871.                                     <span class="custom_audio_buttons"></span>
  872.                                 </div>
  873.                             </div>
  874.  
  875.                     <div class="audio_player">     
  876.                         <span class="custom_audio_current_time"></span>
  877.                         <div class="custom_audio_seekbar"></div>
  878.                         <span class="custom_audio_time_left"></span>
  879.                     </div>
  880.                         </div>
  881.  
  882.                         {/block:AudioPlayer}
  883.                         {/block:Audio}        
  884.         {block:Answer}
  885.             <div class="question">
  886.                 <i class="ai-chat-question" id="ask-decoration"></i>
  887.                     <span class="asker-user">{Asker} asked:</span>
  888.                 <div class="question-text">{Question}</div>
  889.             </div>
  890.             {block:Answerer}
  891.             <div class="answer">
  892.             <span class="answerer-user">
  893.                 {Answerer} answered:</span>
  894.             <div class="answer-text">{Answer}</div>
  895.             </div>
  896.             {/block:Answerer}
  897.            {block:NotReblog}
  898.             <div class="replies">
  899.                 {Replies}
  900.             </div>
  901.            {/block:NotReblog}
  902.         {/block:Answer}
  903.         <div class="caption {block:notreblog} original-post {/block:notreblog}">
  904.             {block:Text}
  905.                 {block:Title}<div class="title">{Title}</div>{/block:Title}
  906.             {/block:Text}
  907.             {block:notreblog}
  908.             {block:caption}{Caption}{/block:caption}
  909.             {block:Text}{body}{/block:Text}
  910.             {/block:notreblog}
  911.             {block:Rebloggedfrom}
  912.                 {block:Reblogs}
  913.                 <div class="reblogs">
  914.                     <div class="reblog-header {block:IsOriginalEntry}original{/block:IsOriginalEntry}">
  915.                     <div>
  916.                         <i class="ai-person"></i>
  917.                         <a href="{permalink}" target="_blank" class="reblog-username {block:isdeactivated}inactive{/block:isdeactivated}">
  918.                             {username}
  919.                         </a>
  920.                     </div>
  921.  
  922.                        
  923.                         <div class="reblog-info-users">
  924.                             <a href="{ReblogParentURL}" title="via: {ReblogParentName}">
  925.                                 <img src="{ReblogParentPortraitURL-96}" style="margin-right:20px;"/>
  926.                             </a>
  927.                             <a href="{ReblogRootURL}" title="origin: {ReblogRootName}"><img src="{ReblogRootPortraitURL-96}"/></a>
  928.                         </div>
  929.                     </div>
  930.                     <div class="reblog-content">
  931.                         {Body}
  932.                     </div>
  933.                 </div>
  934.                 {/block:Reblogs}
  935.             {/block:RebloggedFrom}
  936.         </div>
  937.         {block:Date}
  938.             <div class="post-info">
  939.             {block:indexpage}
  940.                     <div class="post-date"><i class="ai-calendar"></i><a href="/day/{Year}/{MonthNumberWithZero}/{dayofmonthwithzero}">{DayofMonth} {ShortMonth} {Year}</a></div>
  941.                  
  942.                     <div class="post-notes"><i class="ai-align-bottom"></i>{NoteCountWithLabel}</div>
  943.                    
  944.                <div class="controls">    
  945.                 <a
  946.                  href="{ReblogURL}"
  947.                  target="_blank"
  948.                  title="reblog this post"
  949.                  class="reblog"
  950.                  ><i class="ai-arrow-repeat"></i></a>
  951.                 <a href="#" class="like" title="like">{LikeButton}<i class="ai-heart"></i></a>
  952.                 <a href="{Permalink}" title="permalink page"><i class="ai-ribbon"></i></a>
  953.             </div>
  954.                     {/block:indexpage}
  955.                 {block:permalinkpage}
  956.                 <div class="perma-info">
  957.                 Timestamp: {DayOfMonth} {Month} {Year} @ {24Hour}:{Minutes}, {TimeAgo}
  958.                 {block:RebloggedFrom}
  959.                 <div>
  960.                     <span>reblogged from <a href="{reblogparenturl}">
  961.                        {reblogparentname}
  962.                     </a>
  963.                     </span>
  964.                    <span>
  965.                         originally by <a href="{reblogrooturl}">{reblogrootname} </a></span>
  966.                 </div>
  967.                    
  968.                 {/block:RebloggedFrom}
  969.                
  970.             </div>
  971.                 {/block:permalinkpage}
  972.             </div>
  973.         {/block:Date}
  974.         {block:Hastags}
  975.             <div class="tags">
  976.             <i class="ai-hashtag"></i>
  977.                 <div class="tag">
  978.                     {block:Tags}
  979.                     <a href="{TagURL}">#{Tag}</a>
  980.                     {/block:Tags}
  981.                 </div>
  982.                
  983.             </div>
  984.         {/block:Hastags}
  985.         {block:PermalinkPage}
  986.         <div id="post-notes">{PostNotes}</div>
  987.         {/block:PermalinkPage}
  988.         </article>
  989.       {/block:Posts}
  990.       {block:Pagination}
  991.             <div class="pagination">
  992.                 <div id="prev-page">
  993.                         {block:previouspage}
  994.                         <a href="{previouspage}"><i class="ai-arrow-left"></i></a>
  995.                         {/block:previouspage}
  996.                     </div>
  997.  
  998.                     <div id="current-page">
  999.                         {block:JumpPagination length="5"} {block:CurrentPage}<span
  1000.                             class="current_page"
  1001.                             >{CurrentPage}</span
  1002.                         >{/block:CurrentPage} {block:JumpPage}<a
  1003.                             class="jump_page"
  1004.                             href="{URL}"
  1005.                             >{PageNumber}</a
  1006.                         >{/block:JumpPage} {/block:JumpPagination}
  1007.                     </div>
  1008.  
  1009.                     <div id="next-page">
  1010.                         {block:nextpage}
  1011.                         <a href="{nextpage}"><i class="ai-arrow-right"></i></a>
  1012.                         {/block:nextpage}
  1013.                     </div>
  1014.             </div>
  1015.             {/block:pagination}
  1016.            
  1017.     <footer>
  1018.         <div id="copyright">{CopyrightYears} &#169; {name}</div>
  1019.         <div id="credit">
  1020.             Empyreum by <a href="//pneuma-themes.tumblr.com">Pneuma Themes</a>
  1021.         </div>
  1022.        
  1023.     </footer>
  1024.     </div><!--end post container-->
  1025.  <div class="scrollup">
  1026.       <a href="#" title="scroll to top">
  1027.         <i class="ai-arrow-up"></i>
  1028.       </a>
  1029.     </div>
  1030.     </div><!--end container-->
  1031. </body>
  1032.  
  1033. <script>
  1034. // remove empty p tags
  1035. for (const p of document.querySelectorAll('p')) {
  1036.     if (p.innerHTML.trim() === '') {
  1037.        p.remove()
  1038.     }
  1039. }
  1040. // create posts array
  1041. let posts = []
  1042. {block:Posts}
  1043.     posts.push({ npf: JSON.parse({JSNPF}), id: {JSPostId}})
  1044. {/block:Posts}
  1045.  
  1046. //function for updating post types
  1047. function updateTypes(type, article) {
  1048.     article.classList.remove('text-post')
  1049.     article.classList.add(`${ type }-post`, 'npf-post')
  1050. }
  1051.  
  1052. // loop through array to get each post
  1053. for (const post of posts) {
  1054.    let npf = post.npf
  1055.    let article = document.getElementById(`post-${post.id}`)
  1056.    // select captions that have something in them
  1057.    let caption = article.querySelector('.caption:is(:not(:empty))')
  1058.    if (caption != null && article.classList.contains('text-post')) {
  1059.      // if content exists
  1060.      if (npf.trail.length || npf.content.length) {
  1061.          // assign various post types based on NPF data
  1062.            switch (npf.trail[0]?.content[0]?.type ?? npf.content[0].type) {
  1063.            case 'image':
  1064.               updateTypes('photos', article)
  1065.               if (article.querySelector('.npf_row') == null) {
  1066.                  caption.prepend(article.querySelector('figure'))
  1067.               }
  1068.               break
  1069.            case 'video':
  1070.               updateTypes('video', article)
  1071.               let video = article.querySelector('figure')
  1072.               caption.prepend(video)
  1073.               break
  1074.            case 'link':
  1075.              updateTypes('link', article)
  1076.            case 'audio':
  1077.               updateTypes('audio', article)
  1078.                break
  1079.            case 'quote':
  1080.                updateTypes('quote', article)
  1081.            }
  1082.          
  1083.         // if there are photos
  1084.         if (article.classList.contains('photos-post')) {
  1085.            let photoset = document.createElement('div')
  1086.            photoset.classList.add('npf-photos')
  1087.            caption.prepend(photoset)
  1088.            // find where a photoset would be split up by another content block
  1089.            let photoBreak = article.querySelector('.reblog-content p, .reblog-content h1, .reblog-content h2')
  1090.            let elements = []
  1091.            if (photoBreak) {
  1092.               let prevElement = photoBreak.parentNode.firstElementChild
  1093.               while (prevElement !== photoBreak) {
  1094.                  elements.push(prevElement)
  1095.                  prevElement = prevElement.nextElementSibling
  1096.               }
  1097.            }
  1098.            // if there is nothing that breaks up the photoset, select all rows
  1099.            else {
  1100.               elements = article.querySelectorAll('.npf_row')
  1101.            }
  1102.            // move each row to the top
  1103.            for (const el of elements) {
  1104.               photoset.append(el)
  1105.            }
  1106.            if (article.querySelectorAll('.npf_row').length > 1) {
  1107.                updateTypes('photoset', article)
  1108.            }
  1109.            else {
  1110.                updateTypes('photo', article)
  1111.            }
  1112.         }
  1113.        
  1114.         // clean up any potential stray reblog headers
  1115.         let reblogHeader = article.querySelector('.reblog-header')
  1116.         let reblogContent = article.querySelector('.reblog-content')
  1117.         if (reblogHeader?.nextElementSibling === reblogContent && reblogContent?.childElementCount === 0) {
  1118.            reblogHeader.remove()
  1119.            reblogContent.remove()
  1120.         }
  1121.      }
  1122.   }
  1123. }
  1124.  
  1125.     //photoset.css lightbox
  1126.             function gatherData(images, arr) {
  1127.                   for (let i = 0; i < images.length; i++) {
  1128.                     let currentData = {
  1129.                       width: images[i].getAttribute("data-width"),
  1130.                       height: images[i].getAttribute("data-height"),
  1131.                       low_res: images[i].getAttribute("data-lowres"),
  1132.                       high_res: images[i].getAttribute("data-highres"),
  1133.                     };
  1134.                     arr.push(currentData);
  1135.                   }
  1136.                 }
  1137.                 function getIndex(elem) {
  1138.                   let i = 0;
  1139.                   while ((elem = elem.previousElementSibling) != null) i++;
  1140.                   return i;
  1141.                 }
  1142.                 function lightbox(elem) {
  1143.                   let currentPhotoset = elem.parentNode;
  1144.                   let photosetPhotos = currentPhotoset.getElementsByTagName("div");
  1145.                   let data = [];
  1146.                   gatherData(photosetPhotos, data);
  1147.                   Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  1148.                 }
  1149.  
  1150.             $(document).ready(function(){
  1151.                              
  1152.               $(".scrollup").hide();
  1153.                  $(window).scroll(function () {
  1154.                    if ($(this).scrollTop() > 100) {
  1155.                       $(".scrollup").fadeIn();
  1156.                     } else {
  1157.                       $(".scrollup").fadeOut();
  1158.                     }
  1159.             });
  1160.            
  1161.             $(".scrollup").click(function () {
  1162.                 $("html, body").animate({ scrollTop: 0 }, 700);
  1163.                 return false;
  1164.               });
  1165.              
  1166.               function flexFrame() {
  1167.                 $(".caption").each(function () {
  1168.                   $(this).find("iframe").wrap("<div class='capframe'></div>"); // wrap iframe
  1169.                   flexibleFrames($(".capframe"));
  1170.                 });
  1171.                 flexibleFrames($(".video"));
  1172.               }
  1173.              
  1174.           $(document).ready(flexFrame);
  1175.            
  1176.                   tippy("[title]", {
  1177.                     // change these to your liking
  1178.                     arrow: false,
  1179.                     placement: "bottom", // top, right, bottom, left
  1180.                     delay: 5, //ms
  1181.                     offset: [0, 10], //px or string
  1182.                     maxWidth: 300, //px or string
  1183.  
  1184.                     // leave these as they are
  1185.                     followCursor: false,
  1186.                     allowHTML: true,
  1187.                     theme: "custom",
  1188.                     ignoreAttributes: true,
  1189.                     content(reference) {
  1190.                       const title = reference.getAttribute("title");
  1191.                       reference.removeAttribute("title");
  1192.                       return title;
  1193.                     }
  1194.                   });
  1195.                  
  1196.                   customAudio({
  1197.                     post: "article",
  1198.                     wrappers: {
  1199.                       audio: ".custom_audio_wrapper",
  1200.                       buttons: ".custom_audio_buttons",
  1201.                         duration: ".custom_audio_duration",
  1202.                         timeCurrent: ".custom_audio_current_time",
  1203.                         timeLeft: ".custom_audio_time_left",
  1204.                         seekbar: ".custom_audio_seekbar"
  1205.                     },
  1206.                     default: false,
  1207.                     pauseAll: true,
  1208.                     playButton: "<i class='ai-play'></i>",
  1209.                     pauseButton: "<i class='ai-pause'></i>",
  1210.                     errorIcon: "<i class='ai-cross'></i>",
  1211.                     hideInfoIfError: true,
  1212.                     callAfterLoad:null,
  1213.               });
  1214.  
  1215.            });
  1216.  
  1217. </script>
  1218. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!