API tools faq
paste
Advertisement
pneumathemes

theme #03: theia

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