API tools faq
paste
Advertisement
pneumathemes

theme #05: sakurairo

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