API tools faq
paste
pneumathemes

theme #02: thin air

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