API tools faq
paste
Advertisement
pneumathemes

theme #06: afflatus

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