API tools faq
paste
Advertisement
pneumathemes

theme #07: clio

pneumathemes
May 10th, 2023 (edited)
2,555
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 46.66 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 #07: Clio
  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.         <script src="https://unpkg.com/@popperjs/core@2"></script>
  33.         <script src="https://unpkg.com/tippy.js@6"></script>
  34.         <link
  35.             href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css"
  36.             rel="stylesheet"
  37.         />
  38.         <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  39.         <script src="https://unpkg.com/@phosphor-icons/web@2.0.3"></script>
  40.         <script src="https://cdn.jsdelivr.net/gh/annasthms/customaudio@latest/customaudio.min.js"></script>
  41.         <link
  42.             rel="stylesheet"
  43.             href="https://static.tumblr.com/r7bx1qs/nkdr83z11/note-reblog.css"
  44.         />
  45.  
  46.         <!--Variables-->
  47.         <meta name="image:header" content="" />
  48.  
  49.         <meta name="color:body" content="#141414" />
  50.         <meta name="color:accent" content="#FF9090" />
  51.         <meta name="color:border" content="#eee" />
  52.         <meta name="color:topbar bg" content="#fff" />
  53.         <meta name="color:post bg" content="#fff" />
  54.         <meta name="color:background" content="#F4F4F4" />
  55.         <meta name="color:sidebar box background" content="#fff" />
  56.         <meta name="color:footer text color" content="#fff" />
  57.  
  58.         <meta name="text:font size" content="" />
  59.         <meta name="text:post size" content="" />
  60.         <meta name="text:photoset gutter" content="" />
  61.  
  62.         <meta name="text:link 1 title" content="" />
  63.         <meta name="text:link 1 url" content="" />
  64.         <meta name="text:link 2 title" content="" />
  65.         <meta name="text:link 2 url" content="" />
  66.         <meta name="text:link 3 title" content="" />
  67.         <meta name="text:link 3 url" content="" />
  68.         <meta name="text:link 4 title" content="" />
  69.         <meta name="text:link 4 url" content="" />
  70.         <meta name="text:link 5 title" content="" />
  71.         <meta name="text:link 5 url" content="" />
  72.  
  73.         <meta name="text:sidebar link 1 title" content="" />
  74.         <meta name="text:sidebar link 1 url" content="" />
  75.         <meta name="text:sidebar link 2 title" content="" />
  76.         <meta name="text:sidebar link 2 url" content="" />
  77.         <meta name="text:sidebar link 3 title" content="" />
  78.         <meta name="text:sidebar link 3 url" content="" />
  79.         <meta name="text:sidebar link 4 title" content="" />
  80.         <meta name="text:sidebar link 4 url" content="" />
  81.         <meta name="text:sidebar link 5 title" content="" />
  82.         <meta name="text:sidebar link 5 url" content="" />
  83.         <meta name="text:sidebar link 6 title" content="" />
  84.         <meta name="text:sidebar link 6 url" content="" />
  85.         <meta name="text:sidebar link 7 title" content="" />
  86.         <meta name="text:sidebar link 7 url" content="" />
  87.         <meta name="text:sidebar link 8 title" content="" />
  88.         <meta name="text:sidebar link 8 url" content="" />
  89.  
  90.         <meta name="text:search entry 1" content="" />
  91.         <meta name="text:search entry 2" content="" />
  92.         <meta name="text:search entry 3" content="" />
  93.  
  94.         <meta name="text:search entry 1 url" content="" />
  95.         <meta name="text:search entry 2 url" content="" />
  96.         <meta name="text:search entry 3 url" content="" />
  97.  
  98.         <meta name="if:centered title" content="1" />
  99.         <meta name="if:leftside title" content="0" />
  100.         <meta name="if:rightside title" content="0" />
  101.         <meta name="if:display title" content="1" />
  102.  
  103.         <style type="text/css">
  104.             @import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap');
  105.  
  106.             iframe.tmblr-iframe {
  107.                 z-index:99999999999999!important;
  108.                 top:70px!important;
  109.                 right:20px!important;
  110.                 transform:scale(0.75);
  111.                 transform-origin:100% 0;
  112.                 -webkit-transform:scale(0.75);
  113.                 -webkit-transform-origin:100% 0;
  114.                 -o-transform:scale(0.75);
  115.                 -o-transform-origin:100% 0;
  116.                 -moz-transform:scale(0.75);
  117.                 -moz-transform-origin:100% 0;
  118.                 -ms-transform:scale(0.75);
  119.                 -ms-transform-origin:100% 0;
  120.                 opacity: 0;
  121.                 visibility: hidden;
  122.             }
  123.  
  124.             ::selection{
  125.                 background:{color:accent};
  126.             }
  127.  
  128.             ::-moz-selection{
  129.                 background:{color:accent};
  130.             }
  131.  
  132.             ::-webkit-scrollbar{
  133.                 width:6px;
  134.             }
  135.  
  136.             ::-webkit-scrollbar-thumb:vertical{
  137.                 background:{color:accent};
  138.             }
  139.  
  140.             body {
  141.                 margin: 0;
  142.                 padding: 0;
  143.                 font-family: 'Nunito';
  144.                 font-size: {text:font size}px;
  145.                 color: {color:body};
  146.                 background:{color:background};
  147.             }
  148.  
  149.             body.controls-click iframe.tmblr-iframe {
  150.                 opacity: 1.0;
  151.                 visibility: visible;
  152.                 -webkit-transition: all 0.5s;
  153.                 -moz-transition: all 0.5s;
  154.                 -ms-transition: all 0.5s;
  155.                 -o-transition: all 0.5s;
  156.                 transition: all 0.5s;
  157.             }
  158.  
  159.             iframe[src*='open.spotify.com'][src*='track'], figure[data-npf*='open.spotify.com'][data-npf*='track']{
  160.                 height:80px!important;
  161.             }
  162.  
  163.             a {
  164.                 text-decoration: none;
  165.                 color: {color:body};
  166.             }
  167.  
  168.             .tippy-box{
  169.                 box-shadow: 2px 2px 7px 0px rgba(255,255,255,0.75);
  170.                 background:{color:accent};
  171.                 font-size:calc({text:font size}px - 2px);
  172.             }
  173.  
  174.             #top-bar{
  175.                 width:100%;
  176.                 display:flex;
  177.                 align-items:center;
  178.                 justify-content:space-between;
  179.                 height:60px;
  180.                 position:sticky;
  181.                 top:0;
  182.                 background:{color:topbar bg};
  183.                 z-index:99;
  184.                 border-bottom:1px solid {color:border};
  185.             }
  186.  
  187.             #tumblr-control-container{
  188.                 position:fixed;
  189.                 right:20px;
  190.                 top:20px;
  191.                 z-index:999999999;
  192.             }
  193.  
  194.             #tumblr-control-container i{
  195.                 font-size:20px;
  196.             }
  197.  
  198.             header{
  199.                 width:100%;
  200.                 height:350px;
  201.                 position:absolute;
  202.                 top:60px;
  203.                 display:flex;
  204.  
  205.                 {block:ifcenteredtitle}
  206.                 justify-content:center;
  207.                 {/block:ifcenteredtitle}
  208.  
  209.                 {block:ifleftsidetitle}
  210.                 justify-content:flex-start;
  211.                 {/block:ifleftsidetitle}
  212.  
  213.                 {block:ifrightsidetitle}
  214.                 justify-content:flex-end;
  215.                 {/block:ifrightsidetitle}
  216.  
  217.                 align-items:center;
  218.                 left:0;
  219.                 z-index:-9;
  220.                 background-image:url('{image:header}');
  221.                 background-size:cover;
  222.             }
  223.  
  224.             header img{
  225.                 width:100%;
  226.                 height:350px;
  227.                 max-width:100%;
  228.                 max-height:350px;
  229.             }
  230.  
  231.             #nav-links-container, #custom-links-container{
  232.                 display:flex;
  233.                 align-items:center;
  234.                 justify-content:center;
  235.                 width:40%;
  236.                 font-family:'Merriweather';
  237.                 margin:20px;
  238.             }
  239.  
  240.             .nav-links a, .custom-link a{
  241.                 margin-right:20px;
  242.                 text-transform:uppercase;
  243.                 font-weight:700;
  244.                 box-shadow:0 -10px inset {color:accent};
  245.             }
  246.  
  247.             .nav-links a:last-child, .custom-links a:last-child{
  248.                 margin-right:0 !important;
  249.             }
  250.  
  251.             #icon{
  252.                 width:40px;
  253.                 height:40px;
  254.                 padding:5px;
  255.                 border-radius:100%;
  256.                 border:1px solid {color:accent};
  257.             }
  258.  
  259.             #icon img{
  260.                 width:40px;
  261.                 height:40px;
  262.                 max-width:40px;
  263.                 max-height:40px;
  264.                 border-radius:100%;
  265.             }
  266.  
  267.             #blogtitle{
  268.                 {block:ifnotdisplaytitle}
  269.                 display:none;
  270.                 {/block:ifnotdisplaytitle}
  271.  
  272.                 {block:ifdisplaytitle}
  273.                 display:flex;
  274.                 {/block:ifdisplaytitle}
  275.  
  276.                 {block:ifleftsidetitle}
  277.                 margin-left:60px;
  278.                 {/block:ifleftsidetitle}
  279.  
  280.                 {block:ifrightsidetitle}
  281.                 margin-right:60px;
  282.                 {/block:ifrightsidetitle}
  283.  
  284.                 font-size:calc({text:font size}px + 10px);
  285.                 font-weight:700;
  286.                 padding:20px;
  287.                 background:rgba(255,255,255, .5);
  288.                 border:1px solid #fff;
  289.                 backdrop-filter: blur( 6px );
  290.                 -webkit-backdrop-filter: blur( 6px );
  291.                 font-family:'Merriweather';
  292.             }
  293.  
  294.             #main-container{
  295.                 width:calc({text:post size}px + 750px);
  296.                 margin:0 auto;
  297.                 {block:IndexPage}
  298.                 margin-top:400px;
  299.                 {/block:IndexPage}
  300.  
  301.                 {block:PermalinkPage}
  302.                 margin-top:70px;
  303.                 {/block:PermalinkPage}
  304.                 display:flex;
  305.             }
  306.  
  307.             #sidebar{
  308.                 position:sticky;
  309.                 width:350px;
  310.                 top:120px;
  311.                 height:100vh;
  312.             }
  313.  
  314.             #post-container{
  315.                 width:{text:post size}px;
  316.                 margin-left:50px;
  317.                 margin-right:50px;
  318.                 display:flex;
  319.                 flex-wrap:wrap;
  320.             }
  321.  
  322.             .sidebar-box{
  323.                 margin:0 auto;
  324.                 width:100%;
  325.                 background:{color:sidebar box background};
  326.                 border:1px solid {color:border};
  327.                 margin-bottom:50px;
  328.             }
  329.  
  330.             .sidebar-box:last-of-type{
  331.                 margin-bottom:0 !important;
  332.             }
  333.  
  334.             .sidebar-box-title{
  335.                 display:flex;
  336.                 align-items:center;
  337.                 font-family:'Merriweather';
  338.                 padding:20px;
  339.                 justify-content:space-between;
  340.                 border-bottom:1px solid {color:border};
  341.                 font-size:calc({text:font size}px + 5px);
  342.                 font-weight:700;
  343.             }
  344.  
  345.             .sidebar-box-text{
  346.                 padding:20px;
  347.             }
  348.  
  349.             .sidebar-box-title i{
  350.                 color:{color:accent};
  351.             }
  352.  
  353.             #navigation-links{
  354.                 display:flex;
  355.                 flex-wrap:wrap;
  356.                 align-items:center;
  357.                 padding:10px;
  358.                 justify-content:center;
  359.             }
  360.  
  361.             #navigation-links a{
  362.                 padding:10px;
  363.                 margin:10px;
  364.                 width:35%;
  365.                 text-align:center;
  366.                 text-transform:uppercase;
  367.                 font-weight:700;
  368.                 background:{color:accent};
  369.             }
  370.  
  371.             #members, #events, #updates, #site-info{
  372.                 display:flex;
  373.                 align-items:center;
  374.                 justify-content:center;
  375.                 flex-wrap:wrap;
  376.                 padding:0;
  377.             }
  378.  
  379.             .members-row, .updates-row, .site-info-rows{
  380.                 display:flex;
  381.                 align-items:center;
  382.                 justify-content:space-between;
  383.                 width:calc(100% - 40px);
  384.                 padding:10px;
  385.                 margin-top:10px;
  386.                 margin-bottom:10px;
  387.             }
  388.  
  389.             .updates-row, .site-info-rows{
  390.                 margin:10px;
  391.                 margin-bottom:0;
  392.                 width:calc(100% - 20px) !important;
  393.             }
  394.  
  395.             .updates-row:last-of-type, .site-info-rows:last-of-type{
  396.                 margin-bottom:10px;
  397.             }
  398.  
  399.             .members-row-info{
  400.                 display:flex;
  401.                 width:70%;
  402.                 align-items:center;
  403.             }
  404.  
  405.             .members-row-info .username{
  406.                 font-weight:700;
  407.                 text-transform:uppercase;
  408.             }
  409.  
  410.             .members-row-info .url{
  411.                 box-shadow:0 -15px inset {color:accent};
  412.                 text-transform:uppercase;
  413.                 font-weight:700;
  414.             }
  415.  
  416.             .members-row-info img{
  417.                 width:40px;
  418.                 height:40px;
  419.                 margin-right:10px;
  420.                 border-radius:3px;
  421.             }
  422.  
  423.             .members-row-follow-button i{
  424.                 font-size:30px;
  425.                 color:{color:accent};
  426.             }
  427.  
  428.             #events{
  429.                 border-left:5px solid {color:accent};
  430.                 margin:20px;
  431.             }
  432.  
  433.             #events .events-row:first-child{
  434.                 margin-top:0 !important;
  435.             }
  436.  
  437.             .events-row{
  438.                 display:flex;
  439.                 width:100%;
  440.                 align-items:center;
  441.                 margin-top:20px;
  442.             }
  443.  
  444.             .events-line{
  445.                 width:10%;
  446.                 height:1px;
  447.                 position:absolute;
  448.                 left:21px;
  449.                 background:{color:accent};
  450.             }
  451.  
  452.             .events-row-info{
  453.                 display:flex;
  454.                 padding:10px;
  455.                 margin-left:27px;
  456.                 align-items:center;
  457.                 border:1px solid {color:accent};
  458.                 width:100%;
  459.             }
  460.  
  461.             .events-row-label, .updates-row-label, .site-info-label{
  462.                 background:{color:accent};
  463.                 padding:5px;
  464.                 margin-right:10px;
  465.                 text-transform:uppercase;
  466.                 font-weight:700;
  467.             }
  468.  
  469.             article{
  470.                 width:{text:post size}px;
  471.                 margin-bottom:100px;
  472.                 position:relative;
  473.                 background:{color:post bg};
  474.             }
  475.  
  476.             article img{
  477.                 width:100%;
  478.                 max-width:100%;
  479.             }
  480.  
  481.             .original-post, .reblog-content{
  482.                 padding:10px 20px;
  483.             }
  484.  
  485.             .original-post li, .reblog-content li{
  486.                 margin-bottom:5px;
  487.             }
  488.  
  489.             .original-post li:last-of-type, .reblog-content li:last-of-type{
  490.                 margin-bottom:0;
  491.             }
  492.  
  493.             .original-post a, .reblog-content a{
  494.                 box-shadow:0 -2px inset {color:accent};
  495.             }
  496.  
  497.             blockquote.npf_indented, .caption blockquote, .caption blockquote blockquote{
  498.                 padding-left:15px;
  499.                 border-left:1px solid {color:border};
  500.             }
  501.  
  502.             .title{
  503.                 font-size:calc({text:font size}px + 5px);
  504.                 text-align:center;
  505.                 font-weight:700;
  506.                 padding:20px;
  507.                 text-transform:uppercase;
  508.                 font-family:'Merriweather';
  509.                 background:{color:accent};
  510.             }
  511.  
  512.             .photoset-grid{
  513.                 grid-gap:{text:photoset gutter}px;
  514.             }
  515.  
  516.             .quote-post > .caption, .answer-post > .caption{
  517.                 display:none;
  518.             }
  519.  
  520.             .source p{
  521.                 display:none;
  522.             }
  523.  
  524.             .quote, .npf_quote{
  525.                 display:flex;
  526.                 align-items:center;
  527.                 justify-content:space-between;
  528.                 padding:20px;
  529.                 font-family:'Merriweather';
  530.                 font-size:calc({text:font size}px + 3px);
  531.                 border-bottom:1px solid {color:border};
  532.             }
  533.  
  534.             .npf-link-block{
  535.                 border:0 !important;
  536.                 border-radius:0 !important;
  537.                 padding:20px;
  538.                 background:{color:accent};
  539.                 font-size:calc({text:font size}px + 3px);
  540.                 font-weight:700;
  541.                 display:flex;
  542.                 align-items:center;
  543.                 justify-content:space-between;
  544.                 font-family:'Merriweather';
  545.             }
  546.  
  547.             .quote i, .npf_quote i{
  548.                 font-size:40px;
  549.                 background:{color:accent};
  550.                 padding:10px;
  551.                 margin-right:20px;
  552.             }
  553.  
  554.                .source{
  555.                 display:flex;
  556.                 align-items:center;
  557.                 justify-content:center;
  558.                 font-weight:700;
  559.                 padding:20px;
  560.             }
  561.  
  562.             .reblog-header{
  563.                 display:flex;
  564.                 align-items:center;
  565.                 padding:20px;
  566.                 background:{color:accent};
  567.             }
  568.  
  569.             .reblog-header .avatar{
  570.                 width:24px;
  571.                 height:24px;
  572.             }
  573.  
  574.             .reblog-header .username{
  575.                 font-weight:700;
  576.                 margin-left:10px;
  577.             }
  578.  
  579.             .reblog-header .username.inactive{
  580.                 text-decoration:line-through;
  581.             }
  582.  
  583.             .post-info{
  584.                 display:flex;
  585.                 align-items:center;
  586.                 background:{color:accent};
  587.                 padding:20px;
  588.                 justify-content:space-between;
  589.             }
  590.  
  591.             .controls{
  592.                 display:flex;
  593.                 align-items:center;
  594.                 justify-content:center;
  595.             }
  596.  
  597.             .controls a{
  598.                 margin-right:20px;
  599.             }
  600.  
  601.             .controls a:last-of-type{
  602.                 margin-right:0 !important;
  603.             }
  604.  
  605.             .controls i{
  606.                 font-size:16px;
  607.             }
  608.  
  609.             .controls .like .like_button iframe {
  610.                 position:absolute;
  611.                 top:0;
  612.                 left:0;
  613.                 bottom:0;
  614.                 right:0;
  615.                 z-index:2;
  616.                 opacity:0;
  617.             }
  618.  
  619.             .controls .like{
  620.                 display:inline-block;
  621.             }
  622.  
  623.             .controls .like .liked + svg {
  624.                 opacity:1;
  625.             }
  626.  
  627.             .controls .like .liked + svg path {
  628.                 fill:#ec5a5a;
  629.             }
  630.  
  631.             .reblog-info a{
  632.                 text-align:center;
  633.                 margin-right:10px;
  634.                 box-shadow:0 -10px inset #fff;
  635.             }
  636.  
  637.             .reblog-info a:last-of-type{
  638.                 margin-right:0;
  639.             }
  640.  
  641.             .reblog-info-permalink{
  642.                 width:100%;
  643.             }
  644.  
  645.             #pagination{
  646.                 width:100%;
  647.                 display:flex;
  648.                 align-items:center;
  649.                 margin-top:100px;
  650.                 justify-content:space-between;
  651.             }
  652.  
  653.             #prev-page i, #next-page i{
  654.                 background:{color:accent};
  655.                 text-align:center;
  656.                 font-size:16px;
  657.                 padding:10px;
  658.             }
  659.  
  660.             #current-page{
  661.                 display:flex;
  662.                 align-items:center;
  663.                 justify-content:center;
  664.             }
  665.  
  666.             a.jump_page, .current_page{
  667.                 padding:10px;
  668.                 width:16px;
  669.                 height:16px;
  670.                 text-align:center;
  671.                 background:{color:accent};
  672.                 margin-right:20px;
  673.             }
  674.  
  675.              .current_page{
  676.                 font-weight:700;
  677.             }
  678.  
  679.             .question, .answer{
  680.                 display:flex;
  681.                 align-items:center;
  682.             }
  683.  
  684.             .answer{
  685.                 border-top:1px solid {color:border};
  686.             }
  687.  
  688.             .asker-image, .answerer-image{
  689.                 width:64px;
  690.                 height:64px;
  691.                 border-radius:100%;
  692.                 border:1px solid {color:accent};
  693.                 padding:10px;
  694.                 position:relative;
  695.                 margin:20px;
  696.             }
  697.  
  698.             .question-text, .answer-text{
  699.                 padding:20px;
  700.                 text-align:justify;
  701.             }
  702.  
  703.             .asker-image img, .answerer-image img{
  704.                 width:64px;
  705.                 height:64px;
  706.                 max-width:64px;
  707.                 max-height:64px;
  708.                 border-radius:100%;
  709.             }
  710.  
  711.             .asker-icon, .answerer-icon{
  712.                 position:absolute;
  713.                 background:{color:accent};
  714.                 width:20px;
  715.                 padding:5px;
  716.                 height:20px;
  717.                 right:-5px;
  718.                 bottom:-5px;
  719.                 border-radius:100%;
  720.             }
  721.  
  722.             span.asker, span.answerer{
  723.                 font-weight:700;
  724.                 text-transform:uppercase;
  725.                 font-family:'Merriweather';
  726.                 box-shadow:0 -5px inset {color:accent};
  727.             }
  728.  
  729.             span.asker{
  730.                 margin-bottom:20px;
  731.             }
  732.  
  733.             .asker-icon i, .answerer-icon i{
  734.                 font-size:20px;
  735.             }
  736.  
  737.             .replies{
  738.                 padding:20px;
  739.             }
  740.  
  741.             .audio-container{
  742.                 display:flex;
  743.                 align-items:center;
  744.                 justify-content:space-between;
  745.                 padding:20px;
  746.             }
  747.  
  748.             .audio_info{
  749.                 display:flex;
  750.                 align-items:center;
  751.                 justify-content:center;
  752.             }
  753.  
  754.             .album-art{
  755.                 width:120px;
  756.                 height:120px;
  757.                 margin-right:20px;
  758.             }
  759.  
  760.             #trackname{
  761.                 font-family:'Merriweather';
  762.                 font-size:calc({text:font size}px + 2px);
  763.                 font-weight:700;
  764.             }
  765.  
  766.             #album{
  767.                 font-size:calc({text:font size}px - 2px);
  768.                 font-style:italic;
  769.             }
  770.  
  771.             #album-name{
  772.                 font-weight:700;
  773.                 font-family:'Merriweather';
  774.             }
  775.  
  776.             #artist{
  777.                 font-size:calc({text:font size}px - 2px);
  778.                 font-family:'Merriweather';
  779.             }
  780.  
  781.             .custom_audio_buttons i{
  782.                 font-size:30px;
  783.                 color:{color:accent};
  784.             }
  785.  
  786.             .tagcont{
  787.                 position:absolute;
  788.                 margin-top:10px;
  789.                 display:flex;
  790.                 align-items:center;
  791.                 margin-bottom:50px;
  792.                 display:none;
  793.             }
  794.  
  795.             .tagcont a{
  796.                 font-size:calc({text:font size}px - 2px);
  797.                 margin-right:2px;
  798.                 margin-bottom:1px;
  799.             }
  800.  
  801.             #pinned-post{
  802.                 font-size:16px;
  803.             }
  804.  
  805.             /**footer**/
  806.             #fansite-footer{
  807.                 width:100%;
  808.                 height:300px;
  809.                 background:{color:accent};
  810.                 margin-top:350px;
  811.                 display:flex;
  812.                 color:{color:footer text color};
  813.                 justify-content:center;
  814.                 flex-wrap:wrap;
  815.             }
  816.  
  817.             .footer-sections{
  818.                 width:30%;
  819.                 margin:20px;
  820.             }
  821.  
  822.             .footer-section-title{
  823.                 display:block;
  824.                 font-weight:700;
  825.                 padding:20px;
  826.                 font-size:calc({text:font size}px + 2px);
  827.                 font-family:'Merriweather';
  828.             }
  829.  
  830.             .footer-section-text{
  831.                 padding:20px;
  832.             }
  833.  
  834.             #affiliate-image{
  835.                 display:flex;
  836.                 align-items:center;
  837.                 justify-content:center;
  838.             }
  839.  
  840.             #affiliate-image a{
  841.                 margin-right:20px;
  842.                 margin-bottom:20px;
  843.             }
  844.  
  845.             .affiliate-image{
  846.                 width:30px;
  847.                 height:30px;
  848.                 border-radius:100%;
  849.                 padding:10px;
  850.                 border:1px solid #fff;
  851.                 margin-right:20px;
  852.                 margin-bottom:20px;
  853.             }
  854.  
  855.             #affiliate-image a:last-of-type{
  856.                 margin-right:0 !important;
  857.             }
  858.  
  859.             #copyright{
  860.                 padding:10px;
  861.                 width:100%;
  862.                 text-align:center;
  863.                 text-transform:uppercase;
  864.                 font-weight:700;
  865.                 font-family:'Merriweather';
  866.             }
  867.  
  868.             .search-form{
  869.                 width:100%;
  870.             }
  871.  
  872.             .search-form input{
  873.                 border:0 !important;
  874.                 font-size:calc({text:font size}px - 2px);
  875.                 padding:5px 10px;
  876.                 font-family:'Nunito';
  877.             }
  878.  
  879.             .search-form input[type="text"]{
  880.                 width:60%;
  881.             }
  882.  
  883.             .search-form input:focus{
  884.                 outline:none !important;
  885.             }
  886.  
  887.             .post-info-permalink{
  888.                 display:flex;
  889.                 align-items:center;
  890.                 border-top:1px solid {color:border};
  891.                 padding:20px;
  892.                 flex-wrap:wrap;
  893.             }
  894.  
  895.             .tag-info-permalink{
  896.                 width:100%;
  897.             }
  898.  
  899.             #post-notes{
  900.                 display:flex;
  901.                 align-items:center;
  902.                 justify-content:center;
  903.                 padding:20px;
  904.                 width:calc({text:post size}px - 40px);
  905.                 background:{color:post bg};
  906.             }
  907.  
  908.             #post-notes ol, #post-notes li{
  909.                     list-style-type:none;
  910.                 }
  911.  
  912.                 #post-notes ol{
  913.                     width:{text:post size}px;
  914.                 }
  915.  
  916.                 #post-notes li img.avatar{
  917.                     display:none;
  918.                 }
  919.  
  920.                 #post-notes li{
  921.                     margin-bottom:10px;
  922.                     margin-left:-40px;
  923.                     display:flex;
  924.                     flex-wrap:wrap;
  925.                     align-items:center;
  926.                 }
  927.  
  928.                 #post-notes li a{
  929.                     font-weight:700;
  930.                     box-shadow:0 -5px inset {color:accent};
  931.                 }
  932.  
  933.                 .note.with_commentary blockquote{
  934.                     width:100%;
  935.                     padding:10px;
  936.                     border:1px solid {color:border};
  937.                 }
  938.  
  939.                 .tag-permalink a{
  940.                     margin-right:2px;
  941.                     margin-bottom:2px;
  942.                 }
  943.         </style>
  944.     </head>
  945.  
  946.     <body>
  947.         <div id="tumblr-control-container">
  948.             <a class="controls-button" title="tumblr controls"
  949.                 ><i class="ph ph-gear-six"></i
  950.             ></a>
  951.         </div>
  952.         <div id="top-bar">
  953.             <div id="nav-links-container">
  954.                 <div class="nav-links">
  955.                     <a href="/">home</a>
  956.                     <a href="/ask">ask</a>
  957.                     <a href="/archive">past</a>
  958.                     <a href="/submit">submit</a>
  959.                     <a href="//pneuma-themes.tumblr.com" title="clio by pneuma-themes"
  960.                         >credit</a
  961.                     >
  962.                 </div>
  963.             </div>
  964.             <div id="icon">
  965.                 <img src="{Favicon}" />
  966.             </div>
  967.             <div id="custom-links-container">
  968.                 {block:iflink1title}
  969.                 <div class="custom-link">
  970.                     <a href="{text:link 1 url}">{text:link 1 title}</a>
  971.                 </div>
  972.                 {/block:iflink1title} {block:iflink2title}
  973.                 <div class="custom-link">
  974.                     <a href="{text:link 2 url}">{text:link 2 title}</a>
  975.                 </div>
  976.                 {/block:iflink2title} {block:iflink3title}
  977.                 <div class="custom-link">
  978.                     <a href="{text:link 3 url}">{text:link 3 title}</a>
  979.                 </div>
  980.                 {/block:iflink3title} {block:iflink4title}
  981.                 <div class="custom-link">
  982.                     <a href="{text:link 4 url}">{text:link 4 title}</a>
  983.                 </div>
  984.                 {/block:iflink4title} {block:iflink5title}
  985.                 <div class="custom-link">
  986.                     <a href="{text:link 5 url}">{text:link 5 title}</a>
  987.                 </div>
  988.                 {/block:iflink5title}
  989.             </div>
  990.         </div>
  991.  
  992.         {block:IndexPage}
  993.         <header>
  994.             <div id="blogtitle">{Title}</div>
  995.         </header>
  996.         {/block:IndexPage}
  997.  
  998.         <div id="main-container">
  999.             <div id="sidebar">
  1000.                 <div class="sidebar-box">
  1001.                     <div class="sidebar-box-title">
  1002.                         welcome!
  1003.                         <i class="ph ph-bell"></i>
  1004.                     </div>
  1005.                     <div class="sidebar-box-text" id="description">{Description}</div>
  1006.                 </div>
  1007.  
  1008.                 <div class="sidebar-box">
  1009.                     <div class="sidebar-box-title">
  1010.                         navigation
  1011.                         <i class="ph ph-link-simple-horizontal"></i>
  1012.                     </div>
  1013.                     <div class="sidebar-box-text" id="navigation-links">
  1014.                         {block:ifsidebarlink1title}
  1015.                         <a href="{text:sidebar link 1 url}">{text:sidebar link 1 title}</a>
  1016.                         {/block:ifsidebarlink1title} {block:ifsidebarlink2title}
  1017.                         <a href="{text:sidebar link 2 url}">{text:sidebar link 2 title}</a>
  1018.                         {/block:ifsidebarlink2title} {block:ifsidebarlink3title}
  1019.                         <a href="{text:sidebar link 3 url}">{text:sidebar link 3 title}</a>
  1020.                         {/block:ifsidebarlink3title} {block:ifsidebarlink4title}
  1021.                         <a href="{text:sidebar link 4 url}">{text:sidebar link 4 title}</a>
  1022.                         {/block:ifsidebarlink4title} {block:ifsidebarlink5title}
  1023.                         <a href="{text:sidebar link 5 url}">{text:sidebar link 5 title}</a>
  1024.                         {/block:ifsidebarlink5title} {block:ifsidebarlink6title}
  1025.                         <a href="{text:sidebar link 6 url}">{text:sidebar link 6 title}</a>
  1026.                         {/block:ifsidebarlink6title} {block:ifsidebarlink7title}
  1027.                         <a href="{text:sidebar link 7 url}">{text:sidebar link 7 title}</a>
  1028.                         {/block:ifsidebarlink7title} {block:ifsidebarlink8title}
  1029.                         <a href="{text:sidebar link 8 url}">{text:sidebar link 8 title}</a>
  1030.                         {/block:ifsidebarlink8title}
  1031.                     </div>
  1032.                     <!--end navigation links-->
  1033.                 </div>
  1034.  
  1035.                 <div class="sidebar-box">
  1036.                     <div class="sidebar-box-title">
  1037.                         members
  1038.                         <i class="ph ph-users"></i>
  1039.                     </div>
  1040.                     <div class="sidebar-box-text" id="members">
  1041.                         <!--to add or remove member rows, copy or delete from below this line-->
  1042.                         <div class="members-row">
  1043.                             <div class="members-row-info">
  1044.                                 <!--change the image of your members here-->
  1045.                                 <img src="https://i.imgur.com/cGntfgd.png" />
  1046.                                 <div class="members-row-blog-info">
  1047.                                     <span class="username">
  1048.                                         <!--change the username here-->
  1049.                                         username</span
  1050.                                     >
  1051.                                     <br />
  1052.                                     <span class="url">
  1053.                                         <!--change the URL here-->
  1054.                                         @url</span
  1055.                                     >
  1056.                                 </div>
  1057.                             </div>
  1058.                             <div class="members-row-follow-button">
  1059.                                 <!--add the url of your member's blog here-->
  1060.                                 <a href="link here" title="go to blog"
  1061.                                     ><i class="ph ph-plus-square"></i
  1062.                                 ></a>
  1063.                             </div>
  1064.                         </div>
  1065.                         <!--to above this line-->
  1066.  
  1067.                         <div class="members-row">
  1068.                             <div class="members-row-info">
  1069.                                 <img src="https://i.imgur.com/cGntfgd.png" />
  1070.                                 <div class="members-row-blog-info">
  1071.                                     <span class="username">username</span>
  1072.                                     <br />
  1073.                                     <span class="url">@url</span>
  1074.                                 </div>
  1075.                             </div>
  1076.                             <div class="members-row-follow-button">
  1077.                                 <a href="/" title="go to blog"
  1078.                                     ><i class="ph ph-plus-square"></i
  1079.                                 ></a>
  1080.                             </div>
  1081.                         </div>
  1082.  
  1083.                         <div class="members-row">
  1084.                             <div class="members-row-info">
  1085.                                 <img src="https://i.imgur.com/cGntfgd.png" />
  1086.                                 <div class="members-row-blog-info">
  1087.                                     <span class="username">username</span>
  1088.                                     <br />
  1089.                                     <span class="url">@url</span>
  1090.                                 </div>
  1091.                             </div>
  1092.                             <div class="members-row-follow-button">
  1093.                                 <a href="/" title="go to blog"
  1094.                                     ><i class="ph ph-plus-square"></i
  1095.                                 ></a>
  1096.                             </div>
  1097.                         </div>
  1098.  
  1099.                         <div class="members-row">
  1100.                             <div class="members-row-info">
  1101.                                 <img src="https://i.imgur.com/cGntfgd.png" />
  1102.                                 <div class="members-row-blog-info">
  1103.                                     <span class="username">username</span>
  1104.                                     <br />
  1105.                                     <span class="url">@url</span>
  1106.                                 </div>
  1107.                             </div>
  1108.                             <div class="members-row-follow-button">
  1109.                                 <a href="/" title="go to blog"
  1110.                                     ><i class="ph ph-plus-square"></i
  1111.                                 ></a>
  1112.                             </div>
  1113.                         </div>
  1114.  
  1115.                         <!--if you're adding rows, remember to copy them above this line!-->
  1116.                     </div>
  1117.                 </div>
  1118.                 <!--end members-->
  1119.             </div>
  1120.             <!--end sidebar-->
  1121.  
  1122.             <div id="post-container">
  1123.                 <section id="blogposts">
  1124.                     {block:Posts}
  1125.                     <article id="post-{PostID}" class="{posttype}-post posts">
  1126.                         {block:Text} {block:Title}
  1127.                         <div class="title">{Title}</div>
  1128.                         {/block:Title} {/block:Text} {block:Photo}
  1129.                         <div class="legacy-photo">
  1130.                             <img src="{PhotoURL-HighRes}" alt="{photoalt}" class="photos" />
  1131.                         </div>
  1132.                         {/block:Photo} {block:Photoset}
  1133.                         <div class="photoset-grid" photoset-layout="{PhotosetLayout}">
  1134.                             {block:Photos}
  1135.                             <div
  1136.                                 data-width="{PhotoWidth-HighRes}"
  1137.                                 data-height="{PhotoHeight-HighRes}"
  1138.                                 data-lowres="{PhotoURL-500}"
  1139.                                 data-highres="{PhotoURL-HighRes}"
  1140.                                 onclick="lightbox(this)"
  1141.                             >
  1142.                                 <img src="{PhotoURL-HighRes}" />
  1143.                             </div>
  1144.                             {/block:Photos}
  1145.                         </div>
  1146.                         {/block:Photoset} {block:Panorama}
  1147.                         <div class="legacy-photo">
  1148.                             <img src="{photourl-panorama}" alt="{photoalt}" />
  1149.                         </div>
  1150.                         {/block:Panorama}
  1151.  
  1152.                         <!-- quote posts -->
  1153.                         {block:Quote}
  1154.                         <div class="quote"><i class="ph ph-quotes"></i>{Quote}</div>
  1155.                         <div class="source">{Source}</div>
  1156.                         {/block:Quote}
  1157.  
  1158.                         <!-- chat posts -->
  1159.                         {block:Chat}
  1160.                         <ul class="chat">
  1161.                             {block:Lines}
  1162.                             <li>{block:Label}{Label}{/block:Label} {Line}</li>
  1163.                             {/block:Lines}
  1164.                         </ul>
  1165.                         {/block:Chat} {block:link}
  1166.                         <div class="npf-link-block">
  1167.                             <a href="{URL}"> {Name} </a>
  1168.                         </div>
  1169.                         {/block:link} {block:Video} {Video-500} {/block:Video} {block:Audio}
  1170.                         {block:AudioPlayer} {AudioPlayer}
  1171.                         <div class="audio-container">
  1172.                             <div class="audio_info">
  1173.                                 <div class="album-art">
  1174.                                     <img
  1175.                                         src="{block:AlbumArt}{AlbumArtURL}{/block:AlbumArt}
  1176.                  {block:IfNotAlbumArt}https://64.media.tumblr.com/d6b9b7a76bccffee6dbc1d69e5e625bd/tumblr_mjcin8WReA1rb8evoo3_r1_500.png{/block:IfNotAlbumArt}"
  1177.                                     />
  1178.                                 </div>
  1179.                                 <div class="audio-details">
  1180.                                     {block:TrackName}
  1181.                                     <p id="trackname">{TrackName}</p>
  1182.                                     {/block:TrackName} {block:Album}
  1183.                                     <p id="album"><span id="album-name">{Album}</span></p>
  1184.                                     {/block:Album} {block:Artist}
  1185.                                     <p id="artist">{Artist}</p>
  1186.                                     {/block:Artist}
  1187.                                 </div>
  1188.                             </div>
  1189.  
  1190.                             <div class="audio_player_container">
  1191.                                 <span class="custom_audio_buttons"></span>
  1192.                             </div>
  1193.  
  1194.                             <div class="custom_audio_seekbar"></div>
  1195.                         </div>
  1196.  
  1197.                         {/block:AudioPlayer} {/block:Audio} {block:Answer}
  1198.                         <div class="question">
  1199.                             <div class="asker-image">
  1200.                                 <img src="{AskerPortraitURL-128}" />
  1201.                                 <div class="asker-icon">
  1202.                                     <i class="ph ph-question"></i>
  1203.                                 </div>
  1204.                             </div>
  1205.                             <div class="question-text">
  1206.                                 <span class="asker">{Asker}</span>
  1207.                                 <br />
  1208.                                 {Question}
  1209.                             </div>
  1210.                         </div>
  1211.                         {block:Answerer}
  1212.                         <div class="answer">
  1213.                             <div class="answerer-image">
  1214.                                 <img src="{AnswererPortraitURL-128}" />
  1215.                                 <div class="answerer-icon">
  1216.                                     <i class="ph ph-envelope-simple-open"></i>
  1217.                                 </div>
  1218.                             </div>
  1219.                             <div class="answer-text">
  1220.                                 <span class="answerer">{Answerer}</span> {Answer}
  1221.                             </div>
  1222.                         </div>
  1223.                         {/block:Answerer} {block:NotReblog}
  1224.                         <div class="replies">{Replies}</div>
  1225.                         {/block:NotReblog} {/block:Answer}
  1226.  
  1227.                         <div
  1228.                             class="caption {block:notreblog} original-post {/block:notreblog}"
  1229.                         >
  1230.                             {block:notreblog} {block:caption}{Caption}{/block:caption}
  1231.                             {block:Text}{body}{/block:Text} {/block:notreblog}
  1232.                             {block:Rebloggedfrom} {block:Reblogs}
  1233.                             <div class="reblogs">
  1234.                                 <div
  1235.                                     class="reblog-header {block:IsOriginalEntry}original{/block:IsOriginalEntry}"
  1236.                                 >
  1237.                                     <a href="{permalink}" target="_blank"
  1238.                                         ><img
  1239.                                             src="{PortraitURL-64}"
  1240.                                             class="avatar"
  1241.                                             alt="{username}'s avatar"
  1242.                                     /></a>
  1243.                                     <a
  1244.                                         href="{permalink}"
  1245.                                         class="username {block:isdeactivated}inactive{/block:isdeactivated}"
  1246.                                         target="_blank"
  1247.                                     >
  1248.                                         {username}
  1249.                                     </a>
  1250.                                 </div>
  1251.                                 <div class="reblog-content">{Body}</div>
  1252.                             </div>
  1253.                             {/block:Reblogs} {/block:RebloggedFrom}
  1254.                         </div>
  1255.  
  1256.                         {block:IndexPage} {block:Date}
  1257.                         <div class="post-info">
  1258.                             {block:PinnedPostLabel}
  1259.                             <i
  1260.                                 class="ph ph-push-pin-simple"
  1261.                                 id="pinned-post"
  1262.                                 title="pinned post"
  1263.                             ></i>
  1264.                             {/block:PinnedPostLabel}
  1265.                             <a href="/day/{Year}/{MonthNumberWithZero}/{dayofmonthwithzero}"
  1266.                                 >{DayofMonth} {ShortMonth} {Year}
  1267.                             </a>
  1268.                             <a href="{permalink}" class="notecount">{NoteCountWithLabel}</a>
  1269.  
  1270.                             {block:RebloggedFrom}
  1271.                             <div class="reblog-info">
  1272.                                 <a href="{reblogparenturl}" title="{reblogparentname}">via </a>
  1273.                                 <a href="{reblogrooturl}" title="{reblogrootname}"> src </a>
  1274.                             </div>
  1275.                             {/block:RebloggedFrom}
  1276.  
  1277.                             <div class="controls">
  1278.                                 <a href="{ReblogURL}" title="reblog?"
  1279.                                     ><i class="ph ph-arrows-left-right"></i
  1280.                                 ></a>
  1281.                                 <a class="like" title="like this post"
  1282.                                     >{LikeButton}<i class="ph ph-heart"></i
  1283.                                 ></a>
  1284.                                 <a href="{Permalink}" title="permalink page"
  1285.                                     ><i class="ph ph-bookmark"></i
  1286.                                 ></a>
  1287.                                 {block:HasTags}
  1288.                                 <a class="viewtags {PostID}" title="view tags"
  1289.                                     ><i class="ph ph-tag"></i
  1290.                                 ></a>
  1291.                                 {/block:HasTags}
  1292.                             </div>
  1293.                         </div>
  1294.                         {block:Hastags}
  1295.                         <div class="tagcont {PostID}">
  1296.                             {block:Tags}
  1297.                             <a href="{TagURL}">#{Tag}</a>
  1298.                             {/block:Tags}
  1299.                         </div>
  1300.                         {/block:Hastags} {/block:Date} {/block:IndexPage}
  1301.                         {block:PermalinkPage}
  1302.  
  1303.                         <div class="post-info-permalink">
  1304.                             Posted on {DayOfWeek}, {DayOfMonth} {Month} {Year} @
  1305.                             {24Hour}:{Minutes} with {NoteCountWithLabel} {block:RebloggedFrom}
  1306.                             <div class="reblog-info-permalink">
  1307.                                 reblogged from:
  1308.                                 <a href="{ReblogParentURL}">{ReblogParentName}</a>, source:
  1309.                                 <a href="{ReblogRootURL}">{ReblogRootName}</a>
  1310.                             </div>
  1311.                             {/block:RebloggedFrom} {block:HasTags}
  1312.                             <div class="tag-permalink">
  1313.                                 Tagged as: {block:Tags}<a href="{TagURL}">#{Tag}</a
  1314.                                 >{/block:Tags}
  1315.                             </div>
  1316.                             {/block:HasTags}
  1317.                         </div>
  1318.                         {/block:PermalinkPage}
  1319.                     </article>
  1320.                     {block:IndexPage}
  1321.                     <script>
  1322.                         $('a.viewtags.{PostID}').click(function (e) {
  1323.                             e.preventDefault();
  1324.                             $('.tagcont.{PostID}').slideToggle();
  1325.                         });
  1326.                     </script>
  1327.                     {/block:IndexPage} {block:PermalinkPage} {block:PostNotes}
  1328.                     <section id="post-notes">{PostNotes}</section>
  1329.                     {/block:PostNotes} {/block:PermalinkPage} {/block:Posts}
  1330.                 </section>
  1331.  
  1332.                 {block:IndexPage} {block:Pagination}
  1333.                 <footer id="pagination">
  1334.                     <div id="prev-page">
  1335.                         {block:previouspage}
  1336.                         <a href="{previouspage}"><i class="ph ph-arrow-left"></i></a>
  1337.                         {/block:previouspage}
  1338.                     </div>
  1339.  
  1340.                     <div id="current-page">
  1341.                         {block:JumpPagination length="5"} {block:CurrentPage}<span
  1342.                             class="current_page"
  1343.                             >{CurrentPage}</span
  1344.                         >{/block:CurrentPage} {block:JumpPage}<a
  1345.                             class="jump_page"
  1346.                             href="{URL}"
  1347.                             >{PageNumber}</a
  1348.                         >{/block:JumpPage} {/block:JumpPagination}
  1349.                     </div>
  1350.  
  1351.                     <div id="next-page">
  1352.                         {block:nextpage}
  1353.                         <a href="{nextpage}"><i class="ph ph-arrow-right"></i></a>
  1354.                         {/block:nextpage}
  1355.                     </div>
  1356.                 </footer>
  1357.  
  1358.                 {/block:pagination} {/block:IndexPage}
  1359.             </div>
  1360.             <!--end post container-->
  1361.  
  1362.             <div id="sidebar">
  1363.                 <div class="sidebar-box">
  1364.                     <div class="sidebar-box-title">
  1365.                         events
  1366.                         <i class="ph ph-calendar"></i>
  1367.                     </div>
  1368.                     <div class="sidebar-box-text" id="events">
  1369.                         <!--to add or remove rows, copy or delete the line below this line -->
  1370.                         <div class="events-row">
  1371.                             <div class="events-line"></div>
  1372.                             <div class="events-row-info">
  1373.                                 <div class="events-row-label">
  1374.                                     <!--change the label content here -->
  1375.                                     event 01
  1376.                                 </div>
  1377.                                 hermes' defiance
  1378.                             </div>
  1379.                         </div>
  1380.                         <!--until the line above this line-->
  1381.  
  1382.                         <div class="events-row">
  1383.                             <div class="events-line"></div>
  1384.                             <div class="events-row-info">
  1385.                                 <div class="events-row-label">event 02</div>
  1386.                                 the meteia escape
  1387.                             </div>
  1388.                         </div>
  1389.  
  1390.                         <div class="events-row">
  1391.                             <div class="events-line"></div>
  1392.                             <div class="events-row-info">
  1393.                                 <div class="events-row-label">event 03</div>
  1394.                                 the fall of amaurot
  1395.                             </div>
  1396.                         </div>
  1397.  
  1398.                         <div class="events-row">
  1399.                             <div class="events-line"></div>
  1400.                             <div class="events-row-info">
  1401.                                 <div class="events-row-label">event 04</div>
  1402.                                 the sundering
  1403.                             </div>
  1404.                         </div>
  1405.  
  1406.                         <!--add new row (copy code) before this line-->
  1407.                     </div>
  1408.                 </div>
  1409.  
  1410.                 <div class="sidebar-box">
  1411.                     <div class="sidebar-box-title">
  1412.                         updates
  1413.                         <i class="ph ph-clock-clockwise"></i>
  1414.                     </div>
  1415.                     <div class="sidebar-box-text" id="updates">
  1416.                         <!--to add or remove rows, copy or delete the line below this line -->
  1417.                         <div class="updates-row">
  1418.                             <div class="updates-row-label">
  1419.                                 <!--change the label content here -->
  1420.                                 update 01
  1421.                             </div>
  1422.                             azem utilizes the "ifrita" concept
  1423.                         </div>
  1424.                         <!--until the line above this line-->
  1425.  
  1426.                         <div class="updates-row">
  1427.                             <div class="updates-row-label">update 02</div>
  1428.                             the fourteenth seat is vacant
  1429.                         </div>
  1430.                         <div class="updates-row">
  1431.                             <div class="updates-row-label">update 03</div>
  1432.                             elidibus becomes zodiark's heart
  1433.                         </div>
  1434.                         <div class="updates-row">
  1435.                             <div class="updates-row-label">update 04</div>
  1436.                             venat becomes hydaelyn's heart
  1437.                         </div>
  1438.  
  1439.                         <!--add new row (copy code) before this line-->
  1440.                     </div>
  1441.                 </div>
  1442.  
  1443.                 <div class="sidebar-box">
  1444.                     <div class="sidebar-box-title">
  1445.                         site info
  1446.                         <i class="ph ph-browser"></i>
  1447.                     </div>
  1448.                     <div class="sidebar-box-text" id="site-info">
  1449.                         <!--to add or remove rows, copy or delete the line below this line -->
  1450.                         <div class="site-info-rows">
  1451.                             <div class="site-info-label">about</div>
  1452.                             final fantasy xiv
  1453.                         </div>
  1454.                         <!--until the line above this line-->
  1455.  
  1456.                         <div class="site-info-rows">
  1457.                             <div class="site-info-label">established</div>
  1458.                             2023
  1459.                         </div>
  1460.  
  1461.                         <div class="site-info-rows">
  1462.                             <div class="site-info-label">total visits</div>
  1463.                             xxxxx
  1464.                         </div>
  1465.                         <div class="site-info-rows">
  1466.                             <div class="site-info-label">tracking</div>
  1467.                             #thmclio
  1468.                         </div>
  1469.  
  1470.                         <!--add new row (copy code) before this line-->
  1471.                     </div>
  1472.                 </div>
  1473.             </div>
  1474.             <!--end right sidebar-->
  1475.         </div>
  1476.         <!--end main container-->
  1477.  
  1478.         <footer id="fansite-footer">
  1479.             <div class="footer-sections" id="disclaimer">
  1480.                 <div class="footer-section-title">Disclaimer</div>
  1481.                 <div class="footer-section-text">
  1482.                     <!--change the text for your disclaimer here-->
  1483.                     This is not a functional blog, much less an active blog. This is
  1484.                     simply a live preview of a theme, and will not be updated in any way,
  1485.                     shape or form. This blog or any of its members are not affiliated with
  1486.                     Square Enix or the Creative Business Unit III in any shape or form and
  1487.                     claims no ownership over any contents created or available in this
  1488.                     blog unless stated otherwise.
  1489.                 </div>
  1490.             </div>
  1491.             <div class="footer-sections" id="affiliates">
  1492.                 <div class="footer-section-title">Affiliates</div>
  1493.                 <div class="footer-section-text" id="affiliates-image">
  1494.                     <!--to add or remove image, either copy (or remove) the line of code from here-->
  1495.                     <a href="//" title="affiliate one">
  1496.                         <!--to change your affiliate image, change the URL inside the src-->
  1497.                         <img src="https://i.imgur.com/lcIfd7b.png" class="affiliate-image"
  1498.                     /></a>
  1499.                     <!--to here-->
  1500.                     <a href="//" title="affiliate two"
  1501.                         ><img src="https://i.imgur.com/lcIfd7b.png" class="affiliate-image"
  1502.                     /></a>
  1503.                     <a href="//" title="affiliate three"
  1504.                         ><img src="https://i.imgur.com/lcIfd7b.png" class="affiliate-image"
  1505.                     /></a>
  1506.                     <a href="//" title="affiliate four"
  1507.                         ><img src="https://i.imgur.com/lcIfd7b.png" class="affiliate-image"
  1508.                     /></a>
  1509.                     <a href="//" title="affiliate five"
  1510.                         ><img src="https://i.imgur.com/lcIfd7b.png" class="affiliate-image"
  1511.                     /></a>
  1512.  
  1513.                     <!--copy your affiliate code above this line-->
  1514.                 </div>
  1515.             </div>
  1516.             <div class="footer-sections" id="search-box">
  1517.                 <div class="footer-section-title">Search this blog</div>
  1518.                 <div class="footer-section-text">
  1519.                     <div id="searchbox">
  1520.                         <form action="/search" method="get" class="search-form">
  1521.                             <input
  1522.                                 type="text"
  1523.                                 placeholder="Search"
  1524.                                 name="q"
  1525.                                 value="{SearchQuery}"
  1526.                             />
  1527.                             <input type="submit" value="Search" />
  1528.                         </form>
  1529.                     </div>
  1530.                 </div>
  1531.             </div>
  1532.             <div id="copyright">
  1533.                 &copy; {CopyrightYears} {Name}. Powered by Tumblr. All rights reserved.
  1534.             </div>
  1535.         </footer>
  1536.     </body>
  1537.  
  1538.     <script>
  1539.         // remove empty p tags
  1540.         for (const p of document.querySelectorAll('p')) {
  1541.             if (p.innerHTML.trim() === '') {
  1542.                p.remove()
  1543.             }
  1544.         }
  1545.         // create posts array
  1546.         let posts = []
  1547.         {block:Posts}
  1548.             posts.push({ npf: JSON.parse({JSNPF}), id: {JSPostId}})
  1549.         {/block:Posts}
  1550.  
  1551.         //function for updating post types
  1552.         function updateTypes(type, article) {
  1553.             article.classList.remove('text-post')
  1554.             article.classList.add(`${ type }-post`, 'npf-post')
  1555.         }
  1556.  
  1557.         // loop through array to get each post
  1558.         for (const post of posts) {
  1559.            let npf = post.npf
  1560.            let article = document.getElementById(`post-${post.id}`)
  1561.            // select captions that have something in them
  1562.            let caption = article.querySelector('.caption:is(:not(:empty))')
  1563.            if (caption != null && article.classList.contains('text-post')) {
  1564.               // if content exists
  1565.               if (npf.trail.length || npf.content.length) {
  1566.                   // assign various post types based on NPF data
  1567.                     switch (npf.trail[0]?.content[0]?.type ?? npf.content[0].type) {
  1568.                     case 'image':
  1569.                        updateTypes('photos', article)
  1570.                        if (article.querySelector('.npf_row') == null) {
  1571.                           caption.prepend(article.querySelector('figure'))
  1572.                        }
  1573.                        break
  1574.                     case 'video':
  1575.                        updateTypes('video', article)
  1576.                        let video = article.querySelector('figure')
  1577.                        caption.prepend(video)
  1578.                        break
  1579.                     case 'link':
  1580.                       updateTypes('link', article)
  1581.                     case 'audio':
  1582.                        updateTypes('audio', article)
  1583.                         break
  1584.                     case 'quote':
  1585.                         updateTypes('quote', article)
  1586.                     }
  1587.  
  1588.                  // if there are photos
  1589.                  if (article.classList.contains('photos-post')) {
  1590.                     let photoset = document.createElement('div')
  1591.                     photoset.classList.add('npf-photos')
  1592.                     caption.prepend(photoset)
  1593.                     // find where a photoset would be split up by another content block
  1594.                     let photoBreak = article.querySelector('.reblog-content p, .reblog-content h1, .reblog-content h2')
  1595.                     let elements = []
  1596.                     if (photoBreak) {
  1597.                        let prevElement = photoBreak.parentNode.firstElementChild
  1598.                        while (prevElement !== photoBreak) {
  1599.                           elements.push(prevElement)
  1600.                           prevElement = prevElement.nextElementSibling
  1601.                        }
  1602.                     }
  1603.                     // if there is nothing that breaks up the photoset, select all rows
  1604.                     else {
  1605.                        elements = article.querySelectorAll('.npf_row')
  1606.                     }
  1607.                     // move each row to the top
  1608.                     for (const el of elements) {
  1609.                        photoset.append(el)
  1610.                     }
  1611.                     if (article.querySelectorAll('.npf_row').length > 1) {
  1612.                         updateTypes('photoset', article)
  1613.                     }
  1614.                     else {
  1615.                         updateTypes('photo', article)
  1616.                     }
  1617.                  }
  1618.  
  1619.                  // clean up any potential stray reblog headers
  1620.                  let reblogHeader = article.querySelector('.reblog-header')
  1621.                  let reblogContent = article.querySelector('.reblog-content')
  1622.                  if (reblogHeader?.nextElementSibling === reblogContent && reblogContent?.childElementCount === 0) {
  1623.                     reblogHeader.remove()
  1624.                     reblogContent.remove()
  1625.                  }
  1626.               }
  1627.            }
  1628.         }
  1629.  
  1630.         //photoset.css lightbox
  1631.         function gatherData(images, arr) {
  1632.               for (let i = 0; i < images.length; i++) {
  1633.                 let currentData = {
  1634.                   width: images[i].getAttribute("data-width"),
  1635.                   height: images[i].getAttribute("data-height"),
  1636.                   low_res: images[i].getAttribute("data-lowres"),
  1637.                   high_res: images[i].getAttribute("data-highres"),
  1638.                 };
  1639.                 arr.push(currentData);
  1640.               }
  1641.             }
  1642.             function getIndex(elem) {
  1643.               let i = 0;
  1644.               while ((elem = elem.previousElementSibling) != null) i++;
  1645.               return i;
  1646.             }
  1647.             function lightbox(elem) {
  1648.               let currentPhotoset = elem.parentNode;
  1649.               let photosetPhotos = currentPhotoset.getElementsByTagName("div");
  1650.               let data = [];
  1651.               gatherData(photosetPhotos, data);
  1652.               Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  1653.             }
  1654.  
  1655.         $(document).ready(function(){
  1656.              $(".controls-button").click(function () {
  1657.                 $("body").toggleClass("controls-click");
  1658.               });
  1659.  
  1660.               $(".expand").click(function (list) {
  1661.                 list.stopPropagation();
  1662.                 $("#searchentries").slideToggle("slow");
  1663.               });
  1664.  
  1665.               $(document).click(function (outside) {
  1666.                 var box = $("#searchentries");
  1667.                 if (!box.is(outside.target) && box.has(outside.target).length === 0) {
  1668.                   $("#searchentries").slideUp("slow");
  1669.                 }
  1670.               });
  1671.  
  1672.               function flexFrame() {
  1673.                 $(".caption").each(function () {
  1674.                   $(this).find("iframe").wrap("<div class='capframe'></div>"); // wrap iframe
  1675.                   flexibleFrames($(".capframe"));
  1676.                 });
  1677.               }
  1678.  
  1679.             flexibleFrames($(".video"));
  1680.  
  1681.             var $container = $('article');
  1682.             $container.find('.notecount').each(function(){
  1683.                var n = $(this).html().split(' ')[0].replace(/,/g, '');
  1684.                if (n > 999) {
  1685.                    n = Math.floor(n / 100) / 10;
  1686.                    $(this).text(n + 'k notes');
  1687.                }
  1688.            });
  1689.  
  1690.               $(document).ready(flexFrame);
  1691.  
  1692.               customAudio({
  1693.                 post: "article",
  1694.                 wrappers: {
  1695.                   audio: ".custom_audio_wrapper",
  1696.                   buttons: ".custom_audio_buttons"
  1697.                 },
  1698.                 default: false,
  1699.                 pauseAll: true,
  1700.                 playButton: "<i class='ph ph-play'></i>",
  1701.                 pauseButton: "<i class='ph ph-pause'></i>",
  1702.                 errorIcon: "<i class='ph ph-x'></i>",
  1703.                 hideInfoIfError: true,
  1704.                 callAfterLoad:null,
  1705.               });
  1706.  
  1707.               tippy("[title]", {
  1708.                 // change these to your liking
  1709.                 arrow: false,
  1710.                 placement: "bottom", // top, right, bottom, left
  1711.                 delay: 5, //ms
  1712.                 offset: [0, 10], //px or string
  1713.                 maxWidth: 300, //px or string
  1714.  
  1715.                 // leave these as they are
  1716.                 followCursor: false,
  1717.                 allowHTML: true,
  1718.                 theme: "custom",
  1719.                 ignoreAttributes: true,
  1720.                 content(reference) {
  1721.                   const title = reference.getAttribute("title");
  1722.                   reference.removeAttribute("title");
  1723.                   return title;
  1724.                 },
  1725.               });
  1726.         })
  1727.     </script>
  1728. </html>
  1729.  
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!