API tools faq
paste
Advertisement
pneumathemes

theme #04: million clouds

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