API tools faq
paste
pneumathemes

theme #01: mnemosyne

pneumathemes
Apr 16th, 2022 (edited)
1,943
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 44.14 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en" data-theme="light">
  3.   <head>
  4.     <script src="//glenthemes.github.io/iconsax/geticons.js"></script>
  5.     <link href="//glenthemes.github.io/iconsax/style.css" rel="stylesheet" />
  6.     <title>
  7.       {Title}{block:TagPage}: posts tagged as #{Tag}{/block:TagPage}
  8.       {block:PostSummary}: {PostSummary}{/block:PostSummary}
  9.     </title>
  10.  
  11.     <link rel="shortcut icon" href="{Favicon}" />
  12.     <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  13.     {block:Description}
  14.     <meta name="description" content="{MetaDescription}" />
  15.     {/block:Description}
  16.     <meta charset="utf-8" />
  17.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  18.     <script>
  19.       const storedTheme =
  20.         localStorage.getItem("theme") ||
  21.         (window.matchMedia("(prefers-color-scheme: dark)").matches
  22.           ? "dark"
  23.           : "light");
  24.       if (storedTheme)
  25.         document.documentElement.setAttribute("data-theme", storedTheme);
  26.     </script>
  27.  
  28.     <!--
  29.  
  30.    Theme #01: Mnemosyne
  31.    coded by pneuma-themes
  32.    
  33.    1. Don't remove the credit.
  34.    2. Don't move the credit. Just leave it there.
  35.    3. Don't use as a base code.
  36.    4. Please enjoy! If you find any bugs, please contact me! c:
  37.    
  38.    -->
  39.  
  40.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  41.     <!--
  42.            NPF images fix v3.0 by @glenthemes [2021]
  43.            💌 git.io/JRBt7
  44.    --->
  45.     <script src="//npf-images-v3.github.io/script.js"></script>
  46.     <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css" />
  47.     <style tmblr-npf>
  48.       :root {
  49.         --NPF-Caption-Spacing: 1em;
  50.         --NPF-Image-Spacing: 5px;
  51.       }
  52.     </style>
  53.    
  54.     <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  55.     <script src="https://unpkg.com/@popperjs/core@2"></script>
  56.     <script src="https://unpkg.com/tippy.js@6"></script>
  57.     <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet"/>
  58.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
  59.     <script src="https://cdn.jsdelivr.net/gh/annasthms/customaudio@latest/customaudio.min.js"></script>
  60.     <script src="https://unpkg.com/feather-icons"></script>
  61.  
  62.     <script>
  63.       // minimal soundcloud player © shythemes.tumblr
  64.       $(document).ready(function () {
  65.         var color = "#acd7bb"; // color of play button (hex)
  66.         $(".soundcloud_audio_player, .spotify_audio_player").each(function () {
  67.           $(this).attr({
  68.             src:
  69.               $(this).attr("src").split("&")[0] +
  70.              "&liking=false&sharing=false&auto_play=false&show_comments=false&continuous_play=false&buying=false&show_playcount=false&show_artwork=true&origin=tumblr&color=" +
  71.              color.split("#")[1],
  72.            height: 116,
  73.            width: "100%",
  74.          });
  75.         });
  76.       });
  77.     </script>
  78.  
  79.     <meta name="image:header" content="" />
  80.     <meta name="image:icon" content="" />
  81.  
  82.     <meta name="color:bg" content="#F7F7F7" />
  83.     <meta name="color:body" content="#171717" />
  84.     <meta name="color:container bg" content="#fff" />
  85.     <meta name="color:navigation background" content="#fff" />
  86.     <meta name="color:border" content="#F7F7F7" />
  87.     <meta name="color:menu background" content="#fff" />
  88.     <meta name="color:controls bg" content="#fff" />
  89.     <meta name="color:navigation link body" content="#171717" />
  90.  
  91.     <meta name="color:dark bg" content="#292D31" />
  92.     <meta name="color:dark body" content="#E4E4E4" />
  93.     <meta name="color:dark container bg" content="#22272A" />
  94.     <meta name="color:dark navigation background" content="#22272A" />
  95.     <meta name="color:dark menu background" content="#22272A" />
  96.     <meta name="color:dark border" content="#292D31" />
  97.     <meta name="color:dark controls bg" content="#22272A" />
  98.  
  99.     <meta name="color:accent" content="#C1E1C1" />
  100.  
  101.     <meta name="text:post size" content="" />
  102.     <meta name="text:font size" content="" />
  103.     <meta name="text:link 1 title" content="" />
  104.     <meta name="text:link 1 url" content="" />
  105.     <meta name="text:link 2 title" content="" />
  106.     <meta name="text:link 2 url" content="" />
  107.     <meta name="text:link 3 title" content="" />
  108.     <meta name="text:link 3 url" content="" />
  109.     <meta name="text:link 4 title" content="" />
  110.     <meta name="text:link 4 url" content="" />
  111.     <meta name="text:link 5 title" content="" />
  112.     <meta name="text:link 5 url" content="" />
  113.     <meta name="text:link 6 title" content="" />
  114.     <meta name="text:link 6 url" content="" />
  115.     <meta name="text:photoset gutter" content="" />
  116.  
  117.     <style type="text/css">
  118.         @import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;1,400;1,700&family=Noto+Sans:ital,wght@0,400;1,400;1,700&display=swap");
  119.  
  120.         :root, html[data-theme='light'] {
  121.           --LightOn: flex;
  122.           --LightOff: none;
  123.           --Body: {color:body};
  124.           --Background: {color:bg};
  125.           --ContainerBackground:{color:container bg};
  126.           --TControlsFilter:invert(100%) contrast(150%);
  127.           --Border:{color:border};
  128.           --Searchbar:{color:search bar};
  129.           --Navigation:{color:navigation background};
  130.           --Iconsax-Size:20px;
  131.           --Iconsax-Color:{color:accent};
  132.           --MenuBackground:rgba({RGBcolor:menu background}, .65);
  133.           --ControlsBackground:{color:controls bg};
  134.           --MenuBoxBackground:{color:menu background};
  135.           --NavigationLinkColor:{color:navigation link body};
  136.         }
  137.  
  138.         html[data-theme='dark'] {
  139.           --LightOn: none;
  140.           --LightOff: flex;
  141.           --Body: {color:dark body};
  142.           --Background: {color:dark bg};
  143.           --ContainerBackground:{color:dark container bg};
  144.           --TControlsFilter:invert(0);
  145.           --Border:{color:dark border};
  146.           --Searchbar:{color:dark search bar};
  147.           --Navigation:{color:dark navigation background};
  148.           --MenuBackground:rgba({RGBcolor:dark menu background}, .65);
  149.           --ControlsBackground:{color:dark controls bg};
  150.           --MenuBoxBackground:{color:dark menu background};
  151.         }
  152.  
  153.         html.theme-transition, html.theme-transition *, html.theme-transition *:before, html.theme-transition *:after {
  154.           transition: .5s ease-in !important;
  155.           transition-delay: 0 !important;
  156.         }
  157.  
  158.         iframe.tmblr-iframe {
  159.           z-index:99999999999999!important;
  160.           top:70px!important;
  161.           right:20px!important;
  162.           opacity:1;
  163.           /* delete invert(1) from here */
  164.             filter:var(--TControlsFilter);
  165.             -webkit-filter:var(--TControlsFilter);
  166.             -o-filter:var(--TControlsFilter);
  167.             -moz-filter:var(--TControlsFilter);
  168.             -ms-filter:var(--TControlsFilter);
  169.           /* to here if your blog has a dark background */
  170.           transform:scale(0.5);
  171.           transform-origin:100% 0;
  172.           -webkit-transform:scale(0.50);
  173.           -webkit-transform-origin:100% 0;
  174.           -o-transform:scale(0.50);
  175.           -o-transform-origin:100% 0;
  176.           -moz-transform:scale(0.50);
  177.           -moz-transform-origin:100% 0;
  178.           -ms-transform:scale(0.50);
  179.           -ms-transform-origin:100% 0;
  180.           opacity: 0;
  181.           visibility: hidden;
  182.         }
  183.  
  184.         ::selection{
  185.           background:{color:accent};
  186.           color:#fff;
  187.         }
  188.  
  189.         ::-webkit-selection{
  190.           background:{color:accent};
  191.           color:#fff;
  192.         }
  193.  
  194.         ::-moz-selection{
  195.           background:{color:accent};
  196.           color:#fff;
  197.         }
  198.  
  199.         ::-webkit-scrollbar{
  200.           width:5px;
  201.         }
  202.  
  203.         ::-webkit-scrollbar-thumb:vertical{
  204.           background:{color:accent};
  205.           height:auto;
  206.         }
  207.  
  208.         body{
  209.           margin:0;
  210.           padding:0;
  211.           font-family:'Noto Sans';
  212.           font-size:{text:font size}px;
  213.           background:var(--Background);
  214.           color:var(--Body);
  215.         }
  216.  
  217.         a{
  218.           text-decoration:none;
  219.           color:var(--Body);
  220.         }
  221.  
  222.         .tippy-box{
  223.           background:{color:accent};
  224.           color:#171717;
  225.           font-size:12px;
  226.           font-family:'Lato';
  227.         }
  228.  
  229.         #main-container{
  230.           width:calc({text:post size}px + 300px);
  231.           margin:0 auto;
  232.           background:var(--ContainerBackground);
  233.           height:100%;
  234.         }
  235.  
  236.         header{
  237.           width:100%;
  238.           height:300px;
  239.           background-size:cover;
  240.           background-image:url('{image:header}');
  241.         }
  242.  
  243.         nav{
  244.           width:100%;
  245.           height:80px;
  246.           background:var(--Navigation);
  247.           backdrop-filter: blur(6px);
  248.           -webkit-backdrop-filter:blur(6px);
  249.           position:sticky;
  250.           top:0;
  251.           z-index:9;
  252.           display:flex;
  253.           align-items:center;
  254.           border-bottom:5px solid var(--Border);
  255.         }
  256.  
  257.         #icon{
  258.           width:36px;
  259.           height:36px;
  260.           margin:20px;
  261.           border-radius:100%;
  262.           padding:5px;
  263.           border:1px solid {color:accent};
  264.         }
  265.  
  266.         #icon img{
  267.           width:36px;
  268.           height:36px;
  269.           max-width:36px;
  270.           max-height:36px;
  271.           border-radius:100%;
  272.         }
  273.  
  274.         #blogtitle{
  275.           font-family:'Lato';
  276.           font-weight:700;
  277.           font-size:20px;
  278.           background:var(--ContainerBackground);
  279.           font-style:italic;
  280.           z-index:2;
  281.           padding-right:10px;
  282.         }
  283.  
  284.         #decorative-line{
  285.           width:85%;
  286.           height:1px;
  287.           background-color:{color:accent};
  288.           position:absolute;
  289.           left:90px;
  290.         }
  291.  
  292.         #navigation-links{
  293.           background:var(--ContainerBackground);
  294.           position:absolute;
  295.           right:10px;
  296.           display:flex;
  297.           padding-left:10px;
  298.           align-items:center;
  299.         }
  300.  
  301.         .navigation-links a{
  302.           font-family:'Lato';
  303.           font-size:14px;
  304.           text-transform:uppercase;
  305.           margin-right:10px;
  306.           text-align:center;
  307.           color:var(--NavigationLinkColor);
  308.           font-weight:700;
  309.           padding:5px;
  310.           background:{color:accent};
  311.           border-radius:5px;
  312.         }
  313.  
  314.         #credit{
  315.           position:fixed;
  316.           bottom:20px;
  317.           right:20px;
  318.           width:20px;
  319.           height:20px;
  320.           padding:10px;
  321.           font-size:20px;
  322.           background:var(--ContainerBackground);
  323.         }
  324.  
  325.         #credit a{
  326.           display:flex;
  327.           align-items:center;
  328.           justify-content:center;
  329.         }
  330.  
  331.         /**slide down menu**/
  332.         #menu-container{
  333.           margin:0 auto;
  334.           margin-top:100px;
  335.           display:flex;
  336.           align-items:center;
  337.           justify-content:center;
  338.         }
  339.  
  340.         #menu-main-box{
  341.           width:60%;
  342.         }
  343.  
  344.         .menu-box-container{
  345.           display:flex;
  346.         }
  347.  
  348.         .menu-box{
  349.           background:var(--MenuBoxBackground);
  350.           margin:20px;
  351.           padding:20px;
  352.           opacity:1;
  353.           word-wrap:wrap;
  354.         }
  355.  
  356.         .menu-icon{
  357.           width:80px;
  358.           height:80px;
  359.         }
  360.  
  361.         .menu-icon img{
  362.           width:80px;
  363.           height:80px;
  364.           max-width:80px;
  365.           max-height:80px;
  366.         }
  367.  
  368.         #desc{
  369.           display:flex;
  370.           align-items:center;
  371.         }
  372.  
  373.         .menu-box-header{
  374.           font-family:'Lato';
  375.           font-size:16px;
  376.           font-weight:700;
  377.           background:{color:accent};
  378.           text-transform:uppercase;
  379.           padding:10px;
  380.           text-align:center;
  381.           color:#22272A;
  382.           margin-bottom:20px;
  383.         }
  384.  
  385.         #desc .iconsax{
  386.           margin-right:20px;
  387.           --Iconsax-Size:40px;
  388.           --Iconsax-Color:#fff;
  389.           padding:20px;
  390.           background:{color:accent};
  391.         }
  392.  
  393.         #desc a{
  394.           color:var(--NavigationLinkColor);
  395.           box-shadow:0 -12px inset {color:accent};
  396.           font-weight:700;
  397.           display:inline;
  398.         }
  399.  
  400.         #updates{
  401.           width:65%;
  402.         }
  403.  
  404.         .updates-row{
  405.           display:flex;
  406.           align-items:center;
  407.           justify-content:space-between;
  408.           margin-bottom:10px;
  409.         }
  410.  
  411.         .updates-row:last-child{
  412.           margin-bottom:0 !important;
  413.         }
  414.  
  415.         .updates-row-label{
  416.           font-weight:700;
  417.           text-transform:uppercase;
  418.           font-family:'Lato';
  419.           margin-right:10px;
  420.         }
  421.  
  422.         .custom-link a{
  423.           min-width:30px;
  424.           margin-right:10px;
  425.           margin-bottom:10px;
  426.           font-weight:700;
  427.           text-align:center;
  428.           text-transform:uppercase;
  429.           color:var(--NavigationLinkColor);
  430.           box-shadow:0 -12px inset {color:accent};
  431.         }
  432.  
  433.         #close-menu .iconsax{
  434.           --Iconsax-Size:40px;
  435.           font-weight:700;
  436.         }
  437.  
  438.         .search-form{
  439.           margin-left:50px;
  440.           margin-right:50px;
  441.         }
  442.  
  443.         .search-form input{
  444.           font-size:12px;
  445.           font-family:'Lato';
  446.           text-transform:uppercase;
  447.           background:var(--Searchbar);
  448.           padding:4px 8px;
  449.           width:200px;
  450.           border:0 !important;
  451.         }
  452.  
  453.         .search-form input:focus{
  454.           outline:none;
  455.         }
  456.  
  457.         .show-menu{
  458.           display:none;
  459.           width:100%;
  460.           height:100%;
  461.           z-index:999;
  462.           background-color:var(--MenuBackground);
  463.           top:0;
  464.           left:0;
  465.           position:fixed;
  466.           backdrop-filter: blur( 6px );
  467.           -webkit-backdrop-filter: blur( 6px );
  468.         }
  469.  
  470.         /**posts**/
  471.         #post-container{
  472.           margin:0 auto;
  473.           width:{text:post size}px;
  474.           margin-top:100px;
  475.         }
  476.  
  477.         article{
  478.           width:{text:post size}px;
  479.           position:relative;
  480.           min-width:500px;
  481.           max-width:700px;
  482.           margin-bottom:100px;
  483.         }
  484.  
  485.         article img{
  486.           max-width:100%;
  487.         }
  488.  
  489.         .title{
  490.           font-family:'Lato';
  491.           font-size:20px;
  492.           text-transform:uppercase;
  493.           font-weight:700;
  494.           position:relative;
  495.           padding-bottom:20px;
  496.         }
  497.  
  498.         .title:before{
  499.           content:'';
  500.           position:absolute;
  501.           width:20%;
  502.           height:5px;
  503.           background:{color:accent};
  504.           left:0;
  505.           bottom:0;
  506.         }
  507.  
  508.         article blockquote{
  509.           padding-left:10px;
  510.           border-left:1px solid {color:accent};
  511.         }
  512.  
  513.         .photoset-grid{
  514.           grid-gap:{text:photoset gutter}px;
  515.         }
  516.  
  517.         .caption{
  518.           text-align:justify;
  519.         }
  520.  
  521.         .caption a{
  522.           color:var(--Body);
  523.           box-shadow:0 -5px inset {color:accent};
  524.         }
  525.  
  526.         .caption li{
  527.           margin-bottom:10px;
  528.         }
  529.  
  530.         .caption-container{
  531.           padding-top:20px;
  532.         }
  533.  
  534.         .post-reblog-info{
  535.           display:flex;
  536.           align-items:center;
  537.         }
  538.  
  539.         .post-reblog-info .avatar{
  540.           width:20px;
  541.           height:20px;
  542.           padding:5px;
  543.           border-radius:100%;
  544.           margin-right:20px;
  545.           border:1px solid {color:accent};
  546.         }
  547.  
  548.         #quote{
  549.           font-size:16px;
  550.           font-style:italic;
  551.           text-align:center;
  552.           padding:20px;
  553.           font-weight:700;
  554.         }
  555.  
  556.         #source{
  557.           display:flex;
  558.           justify-content:flex-end;
  559.           align-items:center;
  560.         }
  561.  
  562.         .source{
  563.           background:var(--ContainerBackground);
  564.           padding:5px;
  565.           font-size:12px;
  566.           font-style:italic;
  567.           text-transform:uppercase;
  568.           z-index:2;
  569.         }
  570.  
  571.         #source #decorative-line{
  572.           left:0;
  573.           width:100%;
  574.         }
  575.  
  576.         #link-post{
  577.           display:flex;
  578.           align-items:center;
  579.           justify-content:center;
  580.           font-size:20px;
  581.         }
  582.  
  583.         #link-post a{
  584.           background:{color:accent};
  585.           font-weight:700;
  586.           color:#171717;
  587.           margin-left:20px;
  588.           padding:8px;
  589.           transition:.5s ease;
  590.         }
  591.  
  592.         #link-post .iconsax{
  593.           background:{color:accent};
  594.           --Iconsax-Color:#fff;
  595.           padding:10px;
  596.         }
  597.  
  598.         .audio-container{
  599.           display:flex;
  600.           align-items:center;
  601.         }
  602.  
  603.         .audio-album-art img{
  604.           width:120px;
  605.           height:120px;
  606.           max-width:120px;
  607.           max-height:120%;
  608.         }
  609.  
  610.         .audio-info-container{
  611.           margin-left:20px;
  612.           width:calc(100% - 120px);
  613.         }
  614.  
  615.         .audio_player {
  616.           width:100%;
  617.           display:flex;
  618.           justify-content:center;
  619.           align-items:center;
  620.           flex-wrap:wrap;
  621.         }
  622.  
  623.         .audio_info{
  624.           text-align:center;
  625.           padding:10px;
  626.           border:1px solid {color:accent};
  627.           border-radius:5px;
  628.           margin-bottom:20px;
  629.         }
  630.  
  631.         #trackname{
  632.           font-family:'Lato';
  633.           font-weight:700;
  634.           font-size:16px;
  635.         }
  636.  
  637.         .custom_audio_buttons {
  638.           display:flex;
  639.           width:100%;
  640.           justify-content:center;
  641.           align-items:center;
  642.           flex-wrap:wrap;
  643.         }
  644.  
  645.         .custom_audio_buttons svg {
  646.           width  : 15px;
  647.           height : 15px;
  648.           padding:10px;
  649.           border-radius:100%;
  650.           background:{color:accent};
  651.           stroke:#fff;
  652.           text-align:center;
  653.           margin-top:2px;
  654.         }
  655.  
  656.         .custom_audio_error_icon svg {
  657.           stroke : red;
  658.         }
  659.  
  660.         .custom_audio_duration {
  661.           display : inline;
  662.         }
  663.  
  664.         .audio_player .custom_audio_seekbar {
  665.           width      : 80%;
  666.           height     : 0.5em;
  667.           background : #dfdfdf;
  668.           margin:0 auto;
  669.         }
  670.  
  671.         .audio_player .custom_audio_seekbar_progress {
  672.           width      : 0;
  673.           height     : 100%;
  674.           background :#585858;
  675.         }
  676.  
  677.         .custom_audio_time_left::before {
  678.           content : "-";
  679.         }
  680.  
  681.         .audio_info p {
  682.           margin : 0.25em 0;
  683.         }
  684.  
  685.       .reblog-info{
  686.         display:flex;
  687.         align-items:center;
  688.         font-size:12px;
  689.         justify-content:space-between;
  690.         margin-bottom:10px;
  691.         {block:AskPage}display:none;{/block:AskPage}
  692.       }
  693.  
  694.       .reblog-info-blog{
  695.         display:flex;
  696.         align-items:center;
  697.         flex-wrap:wrap;
  698.       }
  699.  
  700.       .reblog-info-blog .avatar{
  701.         width:32px;
  702.         height:32px;
  703.         margin-right:10px;
  704.         border:1px solid {color:accent};
  705.         border-radius:100%;
  706.         padding:5px;
  707.       }
  708.  
  709.       .reblog-info-blog .avatar img{
  710.         border-radius:100%;
  711.         width:32px;
  712.         height:32px;
  713.         max-width:32px;
  714.         max-height:32px;
  715.       }
  716.  
  717.       .post-reblog-info-blog .username a{
  718.           background:{color:accent};
  719.           padding:5px;
  720.           border-radius:5px;
  721.           font-weight:700;
  722.           color:#171717;
  723.           font-size:12px;
  724.           text-transform:uppercase;
  725.       }
  726.  
  727.       .post-reblog-info-blog .deactivated a{
  728.         background:#eee;
  729.         padding:5px;
  730.         border-radius:5px;
  731.         color:#171717;
  732.         box-shadow:none;
  733.         text-decoration:line-through;
  734.       }
  735.  
  736.       .controls .like{
  737.         display:inline-block;
  738.       }
  739.  
  740.       .controls .like .liked + svg {
  741.         opacity:1;
  742.       }
  743.  
  744.       .controls .like .liked + svg path {
  745.         fill:#ec5a5a;
  746.       }
  747.  
  748.       .controls .like .like_button {
  749.         position:relative;
  750.       }
  751.  
  752.       .controls .iconsax{
  753.         text-align:center;
  754.         --Iconsax-Size:20px;
  755.         padding:5px;
  756.         line-height:100%;
  757.         margin-right:10px;
  758.         border:1px solid {color:accent};
  759.         border-radius:100%;
  760.         transition:.5s ease;
  761.       }
  762.  
  763.       .controls a:hover .iconsax{
  764.         background:{color:accent};
  765.         --Iconsax-Color:#fff;
  766.       }
  767.  
  768.       .controls a:last-child .iconsax{
  769.         margin-right:0 !important;
  770.       }
  771.  
  772.       .controls .like .like_button iframe {
  773.         position:absolute;
  774.         top:0;
  775.         left:0;
  776.         bottom:0;
  777.         right:0;
  778.         z-index:2;
  779.         opacity:0;
  780.       }
  781.  
  782.       /**tumblr controls**/
  783.       body.controls-click iframe.tmblr-iframe {
  784.         opacity: 1.0;
  785.         visibility: visible;
  786.         -webkit-transition: all 0.5s;
  787.         -moz-transition: all 0.5s;
  788.         -ms-transition: all 0.5s;
  789.         -o-transition: all 0.5s;
  790.         transition: all 0.5s;
  791.       }
  792.  
  793.       .tumblr-control-container{
  794.         position:fixed;
  795.         display:flex;
  796.         align-items:center;
  797.         right:20px;
  798.         top:20px;
  799.       }
  800.  
  801.       .tumblr-control-container .iconsax{
  802.         --Iconsax-Size:20px;
  803.         padding:10px;
  804.         border-radius:100%;
  805.         border:1px solid {color:accent};
  806.         transition:.5s ease;
  807.         background:var(--ControlsBackground);
  808.       }
  809.  
  810.       .tumblr-control-container .iconsax:hover{
  811.         background:{color:accent};
  812.         --Iconsax-Color:#fff;
  813.       }
  814.  
  815.       .controls-button{
  816.         margin-right:20px;
  817.       }
  818.  
  819.       .light-on {
  820.         display: var(--LightOn);
  821.       }
  822.  
  823.       .light-off {
  824.         display: var(--LightOff);
  825.       }
  826.  
  827.       .chat-lines{
  828.         font-family:'Lato';
  829.         border-bottom:1px solid {color:accent};
  830.         padding-bottom:10px;
  831.       }
  832.  
  833.       .chat-lines:last-child{
  834.         border-bottom:0px !important;
  835.       }
  836.  
  837.       .audio.post .tumblr_audio_player {
  838.         width:100% !important;
  839.       }
  840.  
  841.       .date-info{
  842.         display:flex;
  843.         align-items:center;
  844.         justify-content:space-between;
  845.         margin-top:20px;
  846.         border-top:1px solid #ddd;
  847.         font-family:'Lato';
  848.         padding-bottom:20px;
  849.         padding-top:20px;
  850.           text-transform:uppercase;
  851.       }
  852.  
  853.       .date{
  854.         padding:5px;
  855.         font-family:'Lato';
  856.         font-weight:700;
  857.         border-radius:5px;
  858.         text-align:center;
  859.       }
  860.  
  861.       #tagcont{
  862.         display:flex;
  863.         align-items:center;
  864.         margin-bottom:20px;
  865.       }
  866.  
  867.       .tags{
  868.         font-size:10px;
  869.         text-transform:uppercase;
  870.         margin-right:5px;
  871.         margin-bottom:5px;
  872.       }
  873.  
  874.       .reblogged-info a{
  875.         font-weight:700;
  876.         background:{color:accent};
  877.         padding:5px;
  878.         margin-right:10px;
  879.         border-radius:5px;
  880.         color:#171717;
  881.       }
  882.  
  883.       .reblogged-info a:last-child{
  884.         margin-right:0;
  885.       }
  886.  
  887.       .question-box, .answerer-box{
  888.         padding:20px;
  889.         border-bottom:1px solid {color:accent};
  890.       }
  891.  
  892.       .answerer-box{
  893.         border:1px solid {color:accent};
  894.         border-radius:5px;
  895.       }
  896.  
  897.       .question-asker, .answer-answerer{
  898.         display:flex;
  899.         justify-content:flex-end;
  900.         align-items:center;
  901.         margin-top:10px;
  902.       }
  903.  
  904.       .question-asker{
  905.         margin-bottom:10px;
  906.       }
  907.  
  908.       .answer-answerer{
  909.         justify-content:flex-start;
  910.       }
  911.  
  912.       .question-asker .avatar, .answer-answerer .avatar{
  913.         width:20px;
  914.         height:20px;
  915.         padding:5px;
  916.         border-radius:100%;
  917.         border:1px solid {color:accent};
  918.       }
  919.  
  920.       .question-asker .username, .answer-answerer .username{
  921.         text-transform:uppercase;
  922.         font-size:12px;
  923.         margin-left:10px;
  924.         font-weight:700;
  925.         font-family:'Lato';
  926.       }
  927.  
  928.       #pagination{
  929.         width:calc(100% - 40px);
  930.         display:flex;
  931.         align-items:center;
  932.         justify-content:space-between;
  933.         align-items:center;
  934.         position:relative;
  935.         padding:20px;
  936.         border-top:5px solid var(--Border);
  937.       }
  938.  
  939.       #pagination #decorative-line{
  940.         width:90%;
  941.         left:20px;
  942.       }
  943.       #jump-pagination{
  944.         z-index:2;
  945.         background:var(--ContainerBackground);
  946.         padding:5px;
  947.         text-transform:uppercase;
  948.       }
  949.  
  950.       .prev-page, .next-page{
  951.         background:var(--ContainerBackground);
  952.         z-index:2;
  953.         padding:5px;
  954.         font-weight:700;
  955.         text-transform:uppercase;
  956.         text-align:center;
  957.       }
  958.  
  959.       #notes ol, #notes li{
  960.         list-style-type:none;
  961.         padding:10px;
  962.         border-bottom:1px solid {color:accent};
  963.         margin-bottom:10px;
  964.       }
  965.  
  966.       .more_notes_link_container{
  967.         border-bottom:none !important;
  968.       }
  969.  
  970.       #notes li img.avatar{
  971.         display:none;
  972.       }
  973.  
  974.       #notes li a{
  975.         font-weight:700;
  976.         box-shadow:0 -5px inset {color:accent};
  977.       }
  978.     </style>
  979.   </head>
  980.  
  981.   <body>
  982.     <div class="tumblr-control-container">
  983.       <a class="controls-button" title="tumblr controls"><i class="iconsax" icon-name="menu-hamburger"></i></a>
  984.       <div id="theme-toggle">
  985.         <span class="light-on"><i class="iconsax" icon-name="moon" title="dark mode"></i></span>
  986.         <span class="light-off"><i class="iconsax" icon-name="sun" title="light mode"></i></span>
  987.       </div>
  988.     </div>
  989.    
  990.     <!--slide down menu-->
  991.     <div class="show-menu">
  992.       <div id="menu-container" class="animate__animated animate__fadeInDown">
  993.         <div id="menu-main-box">
  994.           <div class="menu-box-container">
  995.             <div class="menu-box menu-icon">
  996.               <img src="{image:icon}" />
  997.             </div>
  998.  
  999.             <div class="menu-box" id="desc">
  1000.               <i class="iconsax" icon-name="quote-start"></i>
  1001.               <div id="desc-text">{Description}</div>
  1002.             </div>
  1003.           </div>
  1004.           <!--end menu box container-->
  1005.  
  1006.           <div class="menu-box-container">
  1007.             <!--updates box-->
  1008.             <div class="menu-box" id="updates">
  1009.               <div class="menu-box-header">updates</div>
  1010.  
  1011.               <!--to add more rows on this box, paste from here-->
  1012.               <div class="updates-row">
  1013.                 <div class="updates-row-label">april 3</div>
  1014.                 theme in progress
  1015.               </div>
  1016.               <!--to here-->
  1017.  
  1018.               <div class="updates-row">
  1019.                 <div class="updates-row-label">april 22</div>
  1020.                 projected release date
  1021.               </div>
  1022.  
  1023.               <div class="updates-row">
  1024.                 <div class="updates-row-label">may 3</div>
  1025.                 life kicks me in the ass
  1026.               </div>
  1027.  
  1028.               <div class="updates-row">
  1029.                 <div class="updates-row-label">august 23</div>
  1030.                 i want a holiday
  1031.               </div>
  1032.  
  1033.               <!--copy and paste the rows before this line!-->
  1034.             </div>
  1035.             <!--end updates box-->
  1036.  
  1037.             <!--navigation box-->
  1038.             <div class="menu-box">
  1039.               <div class="menu-box-header">navigation</div>
  1040.               <div
  1041.                style="
  1042.                  display: flex;
  1043.                  align-items: center;
  1044.                  flex-wrap: wrap;
  1045.                  justify-content: center;
  1046.                "
  1047.              >
  1048.                 {block:iflink1title}
  1049.                 <div class="custom-link">
  1050.                   <a href="{text:link 1 url}">{text:link 1 title}</a>
  1051.                 </div>
  1052.                 {/block:iflink1title}
  1053.                
  1054.                 {block:iflink2title}
  1055.                 <div class="custom-link">
  1056.                   <a href="{text:link 2 url}">{text:link 2 title}</a>
  1057.                 </div>
  1058.                 {/block:iflink2title}
  1059.                
  1060.                 {block:iflink3title}
  1061.                 <div class="custom-link">
  1062.                   <a href="{text:link 3 url}">{text:link 3 title}</a>
  1063.                 </div>
  1064.                 {/block:iflink3title}
  1065.                
  1066.                 {block:iflink4title}
  1067.                 <div class="custom-link">
  1068.                   <a href="{text:link 4 url}">{text:link 4 title}</a>
  1069.                 </div>
  1070.                 {/block:iflink4title}
  1071.                
  1072.                 {block:iflink5title}
  1073.                 <div class="custom-link">
  1074.                   <a href="{text:link 5 url}">{text:link 5 title}</a>
  1075.                 </div>
  1076.                 {/block:iflink5title}
  1077.                
  1078.                 {block:iflink6title}
  1079.                 <div class="custom-link">
  1080.                   <a href="{text:link 6 url}">{text:link 6 title}</a>
  1081.                 </div>
  1082.                 {/block:iflink6title}
  1083.               </div>
  1084.             </div>
  1085.             <!--end navigation-->
  1086.           </div>
  1087.         </div>
  1088.  
  1089.         <div class="menu-box" id="close-menu">
  1090.           <i class="iconsax" icon-name="close-square" title="close menu"></i>
  1091.         </div>
  1092.       </div>
  1093.     </div>
  1094.     <!--end slide down menu-->
  1095.  
  1096.     <div id="main-container">
  1097.       {block:IndexPage}
  1098.         <header></header>
  1099.       {/block:IndexPage}
  1100.       <nav>
  1101.         <div id="decorative-line"></div>
  1102.         <div id="icon"><img src="{image:icon}" /></div>
  1103.         <div id="blogtitle">{Title}</div>
  1104.  
  1105.         <div id="navigation-links">
  1106.           <div class="navigation-links">
  1107.             <a href="/">index.</a>
  1108.             <a href="/ask">ask.</a>
  1109.             <a href="/archive">archive.</a>
  1110.             <a href="#" id="open-menu">menu.</a>
  1111.           </div>
  1112.         </div>
  1113.       </nav>
  1114.  
  1115.       <div id="post-container">
  1116.         <section id="blogposts">
  1117.           {block:Posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  1118.           <article id="{PostID}" class="{PostType} post" post-type="{PostType}">
  1119.             <div class="reblog-info {PostType}">
  1120.               <div class="reblog-info-blog">
  1121.                 <img class="avatar"
  1122.                {block:RebloggedFrom}src="{ReblogParentPortraitURL-64}"{/block:RebloggedFrom}
  1123.                {block:NotReblog} src="{Favicon}"{/block:NotReblog}/>
  1124.                 <div>
  1125.                   {block:RebloggedFrom}
  1126.                     Reblogged from <a href="{ReblogParentURL}">@{ReblogParentName}</a>
  1127.                   {/block:RebloggedFrom}
  1128.  
  1129.                   {block:NotReblog}Original post{/block:NotReblog}
  1130.                 </div>
  1131.               </div>
  1132.               <!--end reblog info blog-->
  1133.  
  1134.               {block:IndexPage}
  1135.                 <div class="controls">
  1136.                   <a href="{ReblogURL}" target="_blank" title="reblog" class="reblog"><i class="iconsax" icon-name="repeat"></i></a>
  1137.                   <a href="#" class="like" title="like">{LikeButton}<i class="iconsax" icon-name="heart"></i></a>
  1138.                   <a href="{Permalink}" title="permalink page"><i class="iconsax" icon-name="bookmark"></i></a>
  1139.  
  1140.                   {block:PinnedPostLabel}
  1141.                   <i class="iconsax" icon-name="location" title="pinned post"></i>
  1142.                   {/block:PinnedPostLabel}
  1143.                 </div>
  1144.               {/block:IndexPage}
  1145.             </div>
  1146.             <!--end reblog info-->
  1147.  
  1148.             {block:Text}
  1149.               {block:Title}<div class="title">{Title}</div>{/block:Title}
  1150.               {block:RebloggedFrom}
  1151.                 {block:Reblogs}
  1152.                   <div class="post-reblog-info source-head">
  1153.                     <img class="avatar" src="{ReblogRootPortraitURL-64}" />
  1154.                     <div class="post-reblog-info-blog">
  1155.                       <div class="username{block:IsDeactivated} deactivated{/block:IsDeactivated}">
  1156.                         <a href="{Permalink}">{Username}</a>
  1157.                       </div>
  1158.                     </div>
  1159.                   </div>
  1160.                   <div class="caption">{Body}</div>
  1161.                 {/block:Reblogs}
  1162.               {/block:RebloggedFrom}
  1163.             {/block:Text}
  1164.            
  1165.             {block:Photo}
  1166.             {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>{LinkCloseTag}
  1167.             {block:RebloggedFrom}
  1168.               {block:Reblogs}
  1169.                 <div class="caption-container">
  1170.                   <div class="post-reblog-info">
  1171.                     <img class="avatar" src="{ReblogRootPortraitURL-64}" />
  1172.                     <div class="post-reblog-info-blog">
  1173.                       <div class="username{block:IsDeactivated} deactivated{/block:IsDeactivated}">
  1174.                         <a href="{Permalink}">{Username}</a>
  1175.                       </div>
  1176.                     </div>
  1177.                   </div>
  1178.                   <div class="caption">{Body}</div>
  1179.                 </div>
  1180.               {/block:Reblogs}
  1181.             {/block:RebloggedFrom}
  1182.             {/block:Photo}
  1183.            
  1184.             {block:Photoset}
  1185.               <div class="photoset-grid" photoset-layout="{PhotosetLayout}">
  1186.                 {block:Photos}
  1187.                   <div><img src="{PhotoURL-HighRes}" /></div>
  1188.                 {/block:Photos}
  1189.               </div>
  1190.               {block:RebloggedFrom}
  1191.                 {block:Reblogs}
  1192.                   <div class="caption-container">
  1193.                     <div class="post-reblog-info">
  1194.                       <img class="avatar" src="{ReblogRootPortraitURL-64}" />
  1195.                       <div class="post-reblog-info-blog">
  1196.                         <div class="username{block:IsDeactivated} deactivated{/block:IsDeactivated}">
  1197.                           <a href="{Permalink}">{Username}</a>
  1198.                         </div>
  1199.                       </div>
  1200.                     </div>
  1201.                     <div class="caption">{Body}</div>
  1202.                   </div>
  1203.                 {/block:Reblogs}
  1204.               {/block:RebloggedFrom}
  1205.             {/block:Photoset}
  1206.            
  1207.             {block:Quote}
  1208.               <div id="quote">{Quote}</div>
  1209.               {block:Source}
  1210.                 <div id="source">
  1211.                   <div id="decorative-line"></div>
  1212.                   <span class="source">{Source}</span>
  1213.                 </div>
  1214.               {/block:Source}
  1215.             {/block:Quote}
  1216.            
  1217.             {block:Link}
  1218.               <div id="link-post">
  1219.                 <i class="iconsax" icon-name="link-1"></i><a href="{URL}">{Name}</a>
  1220.               </div>
  1221.             {/block:Link}
  1222.            
  1223.             {block:Chat}
  1224.               {block:Title}<div class="title">{Title}</div>{/block:Title}
  1225.               {block:Lines}
  1226.               <p class="chat-lines">
  1227.                 {block:Label} <b>{Label}</b>{/block:Label} {Line}
  1228.               </p>
  1229.               {/block:Lines}
  1230.             {/block:Chat}
  1231.            
  1232.             {block:Audio}
  1233.               {block:AudioPlayer}
  1234.                 {AudioPlayer}
  1235.                 <div class="audio_info">
  1236.                   {block:TrackName}
  1237.                   <p id="trackname">{TrackName}</p>
  1238.                   {/block:TrackName}
  1239.                  
  1240.                   {block:Artist}
  1241.                   <p id="artist">{Artist}</p>
  1242.                   {/block:Artist}
  1243.                  
  1244.                   {block:Album}
  1245.                   <p id="album">{Album}</p>
  1246.                   {/block:Album}
  1247.                   <span class="custom_audio_buttons"></span>
  1248.                 </div>
  1249.                 <div class="audio_player">
  1250.                   <span class="custom_audio_current_time"></span>
  1251.                   <div class="custom_audio_seekbar"></div>
  1252.                   <span class="custom_audio_time_left"></span>
  1253.                 </div>
  1254.               {/block:AudioPlayer}
  1255.            
  1256.             {block:RebloggedFrom}
  1257.               {block:Reblogs}
  1258.                 <div class="post-reblog-info source-head">
  1259.                   <img class="avatar" src="{ReblogRootPortraitURL-64}" />
  1260.                   <div class="post-reblog-info-blog">
  1261.                     <div class="username{block:IsDeactivated} deactivated{/block:IsDeactivated}">
  1262.                       <a href="{Permalink}">{Username}</a>
  1263.                     </div>
  1264.                   </div>
  1265.                 </div>
  1266.                 <div class="caption">{Body}</div>
  1267.               {/block:Reblogs}
  1268.             {/block:RebloggedFrom}
  1269.             {/block:Audio}
  1270.            
  1271.             {block:Video}
  1272.             <div class="video">{Video-500}</div>
  1273.  
  1274.             {block:RebloggedFrom}
  1275.               {block:Reblogs}
  1276.                 <div class="post-reblog-info">
  1277.                   <img class="avatar" src="{ReblogRootPortraitURL-64}" />
  1278.                   <div class="post-reblog-info-blog">
  1279.                     <div class="username{block:IsDeactivated} deactivated{/block:IsDeactivated}">
  1280.                       <a href="{Permalink}">{Username}</a>
  1281.                     </div>
  1282.                   </div>
  1283.                 </div>
  1284.                 <div class="caption">{Body}</div>
  1285.               {/block:Reblogs}
  1286.             {/block:RebloggedFrom}
  1287.             {/block:Video}
  1288.            
  1289.             {block:Answer}
  1290.               <div class="question-box">{Question}</div>
  1291.               <div class="question-asker">
  1292.                 <img class="avatar" src="{AskerPortraitURL-64}" alt="" />
  1293.                 <div class="username">{Asker}</div>
  1294.               </div>
  1295.               {block:Answerer}
  1296.                 <div class="answerer-box">{Answer}</div>
  1297.                 <div class="answer-answerer">
  1298.                   <img class="avatar" src="{AnswererPortraitURL-64}" alt="" />
  1299.                   <div class="username">{Answerer}</div>
  1300.                 </div>
  1301.               {/block:Answerer}
  1302.             {/block:Answer}
  1303.            
  1304.             {block:NotReblog}
  1305.               {block:Text}<div class="caption">{Body}</div>{/block:Text}
  1306.              
  1307.               {block:Photo}
  1308.                 {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1309.               {/block:Photo}
  1310.              
  1311.               {block:Photoset}
  1312.                 {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1313.               {/block:Photoset}
  1314.              
  1315.               {block:Link}
  1316.                 {block:Description}<div class="caption">{Description}</div>{/block:Description}
  1317.               {/block:Link}
  1318.              
  1319.               {block:Audio}
  1320.                 {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1321.               {/block:Audio}
  1322.              
  1323.               {block:Video}
  1324.                 {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  1325.               {/block:Video}
  1326.              
  1327.               {block:Answer}
  1328.                 <div class="caption">{Answer}</div>
  1329.               {/block:Answer}
  1330.             {/block:NotReblog}
  1331.            
  1332.             {block:Date}
  1333.               <div class="date-info">
  1334.                 <div class="date">{DayOfMonth} {Month} {Year}</div>
  1335.  
  1336.                 {block:RebloggedFrom}
  1337.                   <div class="reblogged-info">
  1338.                     <a href="{ReblogParentURL}">via</a>
  1339.                     <a href="{ReblogRootURL}">source</a>
  1340.                   </div>
  1341.                 {/block:RebloggedFrom}
  1342.  
  1343.                 <a class="stats" href="{Permalink}#notes">{NoteCountWithLabel}</a>
  1344.               </div>
  1345.             {/block:Date}
  1346.  
  1347.             <footer>
  1348.               {block:PermalinkPage}
  1349.                 {block:ContentSource}
  1350.                 <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1351.                  width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1352.                  {/block:SourceLogo}
  1353.                  {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1354.                 {/block:ContentSource}
  1355.               {/block:PermalinkPage}
  1356.              
  1357.               {block:IndexPage}
  1358.                 {block:HasTags}
  1359.                   <section id="tagcont {PostID}">
  1360.                     <span
  1361.                      style="
  1362.                        font-weight: 700;
  1363.                        text-transform: uppercase;
  1364.                        background: #eee;
  1365.                        padding: 5px;
  1366.                        border-radius: 5px;
  1367.                        margin-right: 10px;
  1368.                        color: #171717;
  1369.                      "
  1370.                      >Tagged as: </span>
  1371.                       {block:Tags}<a href="{TagURL}" class="tags">#{Tag}</a>{/block:Tags}
  1372.                   </section>
  1373.                 {/block:HasTags}
  1374.               {/block:IndexPage}
  1375.             </footer>
  1376.  
  1377.             {block:PermalinkPage}
  1378.               {block:PostNotes}
  1379.               <section id="notes">{PostNotes}</section>
  1380.               {/block:PostNotes}
  1381.             {/block:PermalinkPage}
  1382.           </article>
  1383.           {/block:Posts}
  1384.         </section>
  1385.         <!--end blogposts-->
  1386.       </div>
  1387.       <!--end post container-->
  1388.  
  1389.       <footer id="pagination">
  1390.         <div id="decorative-line"></div>
  1391.         {block:Pagination}
  1392.           {block:PreviousPage}<a href="{PreviousPage}" class="prev-page">back</a>{/block:PreviousPage}
  1393.          
  1394.           <div id="jump-pagination">
  1395.             Page <b>{CurrentPage}</b> of <b>{TotalPages}</b>
  1396.           </div>
  1397.          
  1398.           {block:NextPage}<a href="{NextPage}" class="next-page">forward</a>{/block:NextPage}
  1399.         {/block:Pagination}
  1400.        
  1401.         {block:PermalinkPagination}
  1402.           {block:PreviousPost}<a href="{PreviousPost}" class="prev-page">Previous Post</a>{/block:PreviousPost}  
  1403.           {block:NextPost}<a href="{NextPost}" class="next-page">Next Post</a>{/block:NextPost}
  1404.         {/block:PermalinkPagination}
  1405.       </footer>
  1406.     </div>
  1407.     <!--end main container-->
  1408.  
  1409.     <div id="credit">
  1410.       <a href="//pneuma-themes.tumblr.com" title="mnemosyne by @pneuma-themes"><i class="iconsax" icon-name="sun-fog"></i></a>
  1411.     </div>
  1412.  
  1413.     <script>
  1414.       const toggle = document.getElementById("theme-toggle");
  1415.       toggle.onclick = function () {
  1416.         document.documentElement.classList.add("theme-transition");
  1417.         let currentTheme = document.documentElement.getAttribute("data-theme");
  1418.         let targetTheme = "light";
  1419.         if (currentTheme === "light") {
  1420.           targetTheme = "dark";
  1421.         }
  1422.  
  1423.         window.setTimeout(function () {
  1424.           document.documentElement.classList.remove("theme-transition");
  1425.         }, 50);
  1426.         document.documentElement.setAttribute("data-theme", targetTheme);
  1427.         localStorage.setItem("theme", targetTheme);
  1428.       };
  1429.     </script>
  1430.   </body>
  1431.  
  1432.   <script>
  1433.     $(document).ready(function () {
  1434.       $("#open-menu, #close-menu").click(function (e) {
  1435.         e.preventDefault();
  1436.         $(".show-menu").slideToggle(500);
  1437.       });
  1438.  
  1439.       $(".controls-button").click(function () {
  1440.         $("body").toggleClass("controls-click");
  1441.       });
  1442.  
  1443.       function flexFrame() {
  1444.         $(".caption").each(function() {
  1445.             $(this).find("iframe").wrap("<div class='capframe'></div>"); // wrap iframe
  1446.             flexibleFrames($(".capframe"));
  1447.         });
  1448.         flexibleFrames($(".video"));
  1449.       }
  1450.  
  1451.       tippy("[title]", {
  1452.         // change these to your liking
  1453.         arrow: false,
  1454.         placement: "bottom", // top, right, bottom, left
  1455.         delay: 5, //ms
  1456.         offset: [0, 20], //px or string
  1457.         maxWidth: 300, //px or string
  1458.  
  1459.         // leave these as they are
  1460.         followCursor: false,
  1461.         allowHTML: true,
  1462.         theme: "custom",
  1463.         ignoreAttributes: true,
  1464.         content(reference) {
  1465.           const title = reference.getAttribute("title");
  1466.           reference.removeAttribute("title");
  1467.           return title;
  1468.         },
  1469.       });
  1470.  
  1471.       customAudio({
  1472.         post: ".post",
  1473.         wrappers: {
  1474.           audio: ".custom_audio_wrapper",
  1475.           buttons: ".custom_audio_buttons",
  1476.           duration: ".custom_audio_duration",
  1477.           timeCurrent: ".custom_audio_current_time",
  1478.           timeLeft: ".custom_audio_time_left",
  1479.           seekbar: ".custom_audio_seekbar",
  1480.         },
  1481.         default: false,
  1482.         pauseAll: true,
  1483.         playButton: "<i data-feather='play'></i>",
  1484.         pauseButton: "<i data-feather='pause'></i>",
  1485.         errorIcon: "<i data-feather='x'></i>",
  1486.         hideInfoIfError: true,
  1487.         callAfterLoad: () => {
  1488.           feather.replace();
  1489.         },
  1490.       });
  1491.     });
  1492.   </script>
  1493. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!