API tools faq
paste
Advertisement
pneumathemes

theme #09: astral

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