API tools faq
paste
Advertisement
Sky_Blue

CATBOY :3c theme

Sky_Blue
Jun 18th, 2021 (edited)
2,224
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 26.41 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!-----
  5.  
  6. CATBOY :3c theme by @puella, designed by @trans
  7.  
  8. NOTE: the header image is 450px x 225px.
  9.  
  10. NOTE: the downside of using tags is that you can't click on posts. i only recommend using tags if you don't care about not being able to click on posts. it looks cool but it's not very practical... :(
  11.  
  12. scrollbar from: https://gist.github.com/Dakedres/0ccda599648833a1c2f65d3967aa131b
  13.  
  14. ----->
  15.  
  16. <script src="https://kit.fontawesome.com/f936906ae0.js" crossorigin="anonymous"></script>
  17.  
  18. <meta charset="utf-8">
  19. <meta name="viewport" content="width=device-width, initial-scale=1">
  20. <meta https-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  21. {block:Description}
  22. <meta name="description" content="{MetaDescription}" />
  23. {/block:Description}
  24.    
  25. <title>{Title}</title>
  26.        
  27. <link rel="shortcut icon" href="{image:favicon}">
  28. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  29. <link rel="stylesheet" href="https://static.tumblr.com/qxrkgx6/RWPmgn2qa/normalize.min.css">
  30.  
  31. <script src="https://static.tumblr.com/qxrkgx6/LuRmgn2rm/modernizr-2.6.2.min.js"></script>
  32.  
  33. {block:ifsmoothscrolling}
  34. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  35. {/block:ifsmoothscrolling}
  36.  
  37. <link href="https://static.tumblr.com/p6yopnt/34tqtlasa/scrollbar.css" rel="stylesheet">
  38.  
  39. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  40. <script src="https://static.tumblr.com/rtrqcib/VGGnlh8rf/jquery.style-my-tooltips.min.js"></script>
  41. <script>(function($){$(document).ready(function(){$("a[title]").style_my_tooltips({tip_follows_cursor:true,tip_delay_time:100,tip_fade_speed:100,attribute:"title"});});})(jQuery);</script>
  42.  
  43. <link href="https://fonts.googleapis.com/css?family=Kosugi+Maru|Short+Stack" rel="stylesheet">
  44. <link href='https://fonts.googleapis.com/css?family=Josefin+Sans:300|Roboto' rel='stylesheet' type='text/css'>
  45.        
  46. <meta name="image:favicon" content=""/>
  47. <meta name="image:header" content=""/>
  48. <meta name="image:background" content=""/>
  49. <meta name="image:footer pixel" content=""/>
  50. <meta name="image:control pixel" content="https://static.tumblr.com/p6yopnt/7uIqph33x/tumblr_4515d4b64b9624c92c898e9d7a869295_78a63fff_75.gif"/>
  51. <meta name="image:post background" content=""/>
  52. <meta name="image:footer background" content=""/>
  53. <meta name="image:container background" content=""/>
  54. <meta name="image:title background" content=""/>
  55. <meta name="image:music player background" content=""/>
  56.  
  57. <meta name="color:border" content=""/>
  58. <meta name="color:background" content=""/>
  59. <meta name="color:description background" content=""/>
  60. <meta name="color:tags background" content=""/>
  61. <meta name="color:post background" content=""/>
  62. <meta name="color:container background" content=""/>
  63. <meta name="color:title background" content=""/>
  64. <meta name="color:music player background" content=""/>
  65. <meta name="color:play pause background" content=""/>
  66. <meta name="color:play pause" content=""/>
  67. <meta name="color:text" content=""/>
  68. <meta name="color:footer" content=""/>
  69. <meta name="color:tooltip background" content=""/>
  70. <meta name="color:tooltip text" content=""/>
  71. <meta name="color:title" content=""/>
  72. <meta name="color:title hover" content=""/>
  73. <meta name="color:title glow" content=""/>
  74. <meta name="color:title glow hover" content=""/>
  75. <meta name="color:title outline" content=""/>
  76. <meta name="color:title outline hover" content=""/>
  77. <meta name="color:links" content=""/>
  78. <meta name="color:links hover" content=""/>
  79. <meta name="color:links glow" content=""/>
  80. <meta name="color:links glow hover" content=""/>
  81. <meta name="color:links outline" content=""/>
  82. <meta name="color:links outline hover" content=""/>
  83. <meta name="color:selection background" content=""/>
  84. <meta name="color:selection text" content=""/>
  85.  
  86. <meta name="if:tags" content="1"/>
  87. <meta name="if:background cover" content=""/>
  88. <meta name="if:post background cover" content=""/>
  89. <meta name="if:footer background cover" content=""/>
  90. <meta name="if:container background cover" content=""/>
  91. <meta name="if:title background cover" content=""/>
  92. <meta name="if:music player background cover" content=""/>
  93. <meta name="if:links glow" content=""/>
  94. <meta name="if:links outline" content="1"/>
  95. <meta name="if:title glow" content=""/>
  96. <meta name="if:title outline" content="1"/>
  97. <meta name="if:smooth scrolling" content="1"/>
  98. <meta name="if:redirect" content=""/>
  99. <meta name="if:hover blur" content=""/>
  100. <meta name="if:captions" content=""/>
  101. <meta name="if:fade in out" content="1"/>
  102. <meta name="if:round borders" content=""/>
  103. <meta name="if:music player" content="1"/>
  104. <meta name="if:right description" content=""/>
  105.  
  106. <meta name="select:border style" content="solid"/>
  107. <meta name="select:border style" content="double"/>
  108. <meta name="select:border style" content="dashed"/>
  109. <meta name="select:border style" content="dotted"/>
  110. <meta name="select:border style" content="inset"/>
  111. <meta name="select:border style" content="outset"/>
  112. <meta name="select:border style" content="groove"/>
  113. <meta name="select:border style" content="ridge"/>
  114.  
  115. <meta name="text:font" content="courier"/>
  116. <meta name="text:title font" content=""/>
  117. <meta name="text:font size" content="20"/>
  118. <meta name="text:title size" content="40"/>
  119. <meta name="text:title" content="title"/>
  120. <meta name="text:description" content="description goes here!"/>
  121. <meta name="text:mp3" content=""/>
  122. <meta name="text:song title" content="song title"/>
  123. <meta name="text:text decoration" content="underline"/>
  124. <meta name="text:border width" content="2"/>
  125. <meta name="text:next" content="next"/>
  126. <meta name="text:previous" content="back"/>
  127. <meta name="text:redirect" content=""/>    
  128. <meta name="text:song title speed" content="10"/>  
  129.        
  130. <style type="text/css">
  131.  
  132. @font-face{
  133.     font-family: 'Magica';
  134.     src: url(https://static.tumblr.com/p6yopnt/Qkiqnu0r5/theheart.ttf);
  135. }
  136. @font-face{
  137.     font-family: 'DEAD END';
  138.     src: url(https://static.tumblr.com/pvnotae/DzVqdg2j5/dead_end.ttf);
  139. }
  140. @font-face{
  141.     font-family: 'Decibil';
  142.     src: url(https://static.tumblr.com/pvnotae/kwwqdg2pw/decibel_2.ttf);
  143. }
  144. @font-face{
  145.     font-family: 'Aachen';
  146.     src: url(https://static.tumblr.com/pvnotae/YIoqdg2yp/aachen-bold-opentype.otf);
  147. }
  148.  
  149. ::selection {
  150.     background: {color:selection background};
  151.     color:{color:selection text};
  152. }
  153.  
  154. ::-moz-selection {
  155.     background: {color:selection background};
  156.     color:{color:selection text};
  157. }
  158.  
  159. .tooltip{
  160.     display:inline;
  161.     position:relative;
  162. }
  163.  
  164. .tmblr-iframe{
  165.     padding-right:30px;
  166.     opacity: 0;
  167.     transition: all 1s ease-out;
  168. }
  169.  
  170. .tmblr-iframe:hover {
  171.     opacity: 1;
  172.     transition: all 1s ease-in;
  173. }
  174.  
  175. .controlpixel{
  176.     position:fixed;
  177.     right:10px;
  178.     top:17px;
  179. }
  180.  
  181. #s-m-t-tooltip{
  182.     margin: 20px 0 0 20px;
  183.     padding: 5px;
  184.     max-width: 300px;
  185.     background-color:{color:tooltip background};
  186.     color:{color:tooltip text};
  187.     border:{text:border width}px {select:border style} {color:border};
  188.     z-index: 9999;
  189.     {block:ifroundborders}
  190.     border-radius:5px;
  191.     {/block:ifroundborders}
  192. }
  193.  
  194. body {
  195.     margin:0px;
  196.     background:{color:background};
  197.     background-image: url('{image:background}');
  198.     {block:ifbackgroundcover}
  199.     background-size: cover;
  200.     {/block:ifbackgroundcover}
  201.     {block:ifnotbackgroundcover}
  202.     background-repeat:repeat;
  203.     {/block:ifnotbackgroundcover}
  204.     background-attachment:fixed;
  205.     font-family:{text:font};
  206.     font-size:{text:font size}px;
  207.     color:{color:text};
  208.     word-wrap:break-word;
  209. }
  210.  
  211. p{
  212.     margin:10px 0 10px 0;
  213.     padding:0;
  214. }
  215.  
  216. pre {
  217.     white-space: pre-wrap;
  218.     white-space: -moz-pre-wrap;
  219.     white-space: -pre-wrap;
  220.     white-space: -o-pre-wrap;
  221.     word-wrap: break-word;
  222. }
  223.  
  224. a{
  225.     text-decoration:{text:text decoration};
  226.     color:{color:links};
  227.     {block:iflinksglow}
  228.     text-shadow:0 0 2px {color:links glow},0 0 2px {color:links glow},0 0 2px {color:links glow}, 0 0 1px {color:links glow};
  229.     {/block:iflinksglow}
  230.     {block:iflinksoutline}
  231.     text-shadow: -1px 0 {color:links outline}, 0 1px {color:links outline}, 1px 0 {color:links outline}, 0 -1px {color:links outline};
  232.     {/block:iflinksoutline}
  233.     transition:0.5s;
  234. }
  235.  
  236. a:hover{
  237.     color:{color:links hover};
  238.     {block:iflinksglow}
  239.     text-shadow:0 0 2px {color:links glow hover},0 0 2px {color:links glow hover},0 0 2px {color:links glow hover},0 0 1px {color:links glow hover};
  240.     {/block:iflinksglow}
  241.     {block:iflinksoutline}
  242.     text-shadow: -1px 0 {color:links outline hover}, 0 1px {color:links outline hover}, 1px 0 {color:links outline hover}, 0 -1px           {color:links outline hover};
  243.     {/block:iflinksoutline}
  244.     transition:0.5s;
  245.    
  246.     {block:ifhoverblur}
  247.     -webkit-filter: blur(.9px);
  248.     {/block:ifhoverblur}
  249.     cursor:help;
  250. }
  251.  
  252. a.tumblr_blog{
  253.     display:inline-block;
  254.     margin-bottom:0px;
  255. }
  256.  
  257. li{
  258.     margin-left:-15px;
  259. }
  260.  
  261. #wrapper{
  262.     width:fit-content;
  263.     height:fit-content;
  264.     width: -moz-fit-content;
  265.     height: -moz-fit-content;
  266.     {block:iffadeinout}
  267.     animation: fadeEffect 1s;
  268.     {block:iffadeinout}
  269.     position:fixed;
  270.     display: inline-block;
  271.     top: 0;
  272.     bottom: 0;
  273.     left: 0;
  274.     right: 0;
  275.     margin: auto;
  276. }
  277.  
  278. @keyframes fadeEffect {
  279.   from {opacity: 0;}
  280.   to {opacity: 1;}
  281. }
  282.  
  283. #title{
  284.     {block:ifroundborders}
  285.     border-radius:5px 5px 0px 0px;
  286.     {/block:ifroundborders}
  287.     text-align:center;
  288.     font-size:{text:title size}px;
  289.     font-family:{text:title font};
  290.     padding:10px;
  291.     border:{text:border width}px {select:border style} {color:border};
  292.     background:{color:title background};
  293.     background-image: url('{image:title background}');
  294.     {block:iftitlebackgroundcover}
  295.     background-size: cover;
  296.     {/block:iftitlebackgroundcover}
  297.     {block:iftitlenotbackgroundcover}
  298.     background-repeat:repeat;
  299.     {/block:iftitlenotbackgroundcover}
  300.     background-attachment:fixed;
  301. }
  302.  
  303. #title a{
  304.     color:{color:title};
  305.     text-decoration:none;
  306.     {block:iftitleglow}
  307.     text-shadow:0 0 2px {color:title glow},0 0 2px {color:title glow},0 0 2px {color:title glow}, 0 0 1px {color:title glow};
  308.     {/block:iftitleglow}
  309.     {block:iftitleoutline}
  310.     text-shadow: -1px 0 {color:title outline}, 0 1px {color:title outline}, 1px 0 {color:title outline}, 0 -1px {color:title outline};
  311.     {/block:iftitleoutline}
  312.     transition:0.5s;
  313. }
  314.  
  315. #title a:hover{
  316.     color:{color:title hover};
  317.     {block:iftitleglow}
  318.     text-shadow:0 0 2px {color:title glow hover},0 0 2px {color:title glow hover},0 0 2px {color:title glow hover},0 0 1px {color:title glow hover};
  319.     {/block:iftitleglow}
  320.     {block:iftitleoutline}
  321.     text-shadow: -1px 0 {color:title outline hover}, 0 1px {color:title outline hover}, 1px 0 {color:title outline hover}, 0 -1px           {color:title outline hover};
  322.     {/block:iftitleoutline}
  323.     transition:0.5s;
  324.    
  325.     {block:ifhoverblur}
  326.     -webkit-filter: blur(.9px);
  327.     {/block:ifhoverblur}
  328.     cursor:help;
  329. }
  330.  
  331. #header{
  332.     display:grid;
  333.     grid-template-columns: auto auto;
  334.     {block:ifnotrightdescription}
  335.     direction: rtl;
  336.     {/block:ifnotrightdescription}
  337.     align-items:center;
  338.     width:450px;
  339.     height:225px;
  340.     text-align:center;
  341.     border-left:{text:border width}px {select:border style} {color:border};
  342.     border-right:{text:border width}px {select:border style} {color:border};
  343.     {block:ifmusicplayer}
  344.     border-bottom:{text:border width}px {select:border style} {color:border};
  345.     {/block:ifmusicplayer}
  346.     position:relative;
  347.     background:url('{image:header}');
  348.     background-size:cover;
  349.     background-clip: padding-box;
  350. }
  351.  
  352. #description{
  353.     width:220px;
  354.     height:210px;
  355.     padding:10px;
  356.     box-sizing:border-box;
  357.     overflow:auto;
  358.     background:rgb({RGBcolor:description background}, .3);;
  359.     {block:ifrightdescription}
  360.     float:right;
  361.     {/block:ifrightdescription}
  362.     {block:ifnotrightdescription}
  363.     float:left;
  364.     {/block:ifnotrightdescription}
  365. }
  366.  
  367. #whitespace{
  368.     {block:ifnotrightdescription}
  369.     width:215px;
  370.     float:right;
  371.     {/block:ifnotrightdescription}
  372.     {block:ifrightdescription}
  373.     width:220px;
  374.     float:left;
  375.     {/block:ifrightdescription}
  376.     height:210px;
  377. }
  378.  
  379. #musicplayer{
  380.     width:450px;
  381.     border-left: {text:border width}px {select:border style} {color:border};
  382.     border-right: {text:border width}px {select:border style} {color:border};
  383.     background:{color:music player background};
  384.     background-image: url('{image:music player background}');
  385.     {block:ifmusicplayerbackgroundcover}
  386.     background-size: cover;
  387.     {/block:ifmusicplayerbackgroundcover}
  388.     {block:ifnotmusicplayerbackgroundcover}
  389.     background-repeat:repeat;
  390.     {/block:ifnotmusicplayerbackgroundcover}
  391.     background-attachment:fixed;
  392. }
  393.  
  394. .controls{
  395.     padding:5px;
  396.     font-size:15px !important;
  397. }
  398.  
  399. .songtitle{
  400.     width:400px;
  401.     font-size:{text:font size}px !important;
  402.     display:flex;
  403.     padding-right:10px;
  404. }
  405.  
  406. #content{
  407.     overflow:auto;
  408.     height:320px;
  409.     width:450px;
  410.     border:{text:border width}px {select:border style} {color:border};
  411.     {block:ifroundborders}
  412.     border-radius:0px 0px 5px 5px;
  413.     {/block:ifroundborders}
  414.     background:{color:container background};
  415.     background-image: url('{image:container background}');
  416.     {block:ifcontainerbackgroundcover}
  417.     background-size: cover;
  418.     {/block:ifcontainerbackgroundcover}
  419.     {block:ifnotcontainerbackgroundcover}
  420.     background-repeat:repeat;
  421.     {/block:ifnotcontainerbackgroundcover}
  422.     background-attachment:fixed;
  423. }
  424.  
  425. #postwrapper{
  426.     width:fit-content;
  427.     height:fit-content;
  428.     width: -moz-fit-content;
  429.     height: -moz-fit-content;
  430.     margin: 15px auto;
  431. }
  432.  
  433. .post{
  434.     width:400px;
  435.     position:relative;
  436.     word-wrap:break-word;
  437.     background:{color:post background};
  438.     border:{text:border width}px {select:border style} {color:border};
  439.     {block:ifroundborders}
  440.     border-radius:5px 5px 0px 0px;
  441.     {/block:ifroundborders}
  442.     background-image: url('{image:post background}');
  443.     {block:ifpostbackgroundcover}
  444.     background-size: cover;
  445.     {/block:ifpostbackgroundcover}
  446.     {block:ifnotpostbackgroundcover}
  447.     background-repeat:repeat;
  448.     {/block:ifnotpostbackgroundcover}
  449. }
  450.  
  451. .post img{
  452.     max-width:100%;
  453.     height:auto;
  454. }
  455.  
  456. .footer{
  457.     text-align:center;
  458.     padding:15px;
  459.     border-left:{text:border width}px {select:border style} {color:border};
  460.     border-right:{text:border width}px {select:border style} {color:border};
  461.     border-bottom:{text:border width}px {select:border style} {color:border};
  462.     {block:ifroundborders}
  463.     {block:IndexPage}
  464.     border-radius:0px 0px 5px 5px;
  465.     {/block:IndexPage}
  466.     {block:PermalinkPage}
  467.     border-radius:0px;
  468.     {/block:PermalinkPage}
  469.     {/block:ifroundborders}
  470.     background:{color:footer};
  471.     background-image: url('{image:footer background}');
  472.     {block:iffooterbackgroundcover}
  473.     background-size: cover;
  474.     {/block:iffooterbackgroundcover}
  475.     {block:ifnotfooterbackgroundcover}
  476.     background-repeat:repeat;
  477.     {/block:ifnotfooterbackgroundcover}
  478.     background-attachment:fixed;
  479.     width: calc(400px + ({text:border width}px * 2));
  480.     box-sizing: border-box;
  481. }
  482.  
  483. #nav{
  484.     text-align:center;
  485.     padding:5px 5px 0px 5px;
  486.     font-size:{text:title size}px;
  487. }
  488.  
  489. video{
  490.     max-width:100%;
  491.     height:auto!important;
  492. }
  493.  
  494. .video-container {
  495.     overflow: hidden;
  496. }
  497.        
  498. .video-container iframe,
  499. .video-container object,
  500. .video-container embed {
  501.     position: center;
  502.     max-width: 350px;
  503.     max-height: 100%;
  504. }
  505.        
  506. .video-wrapper {
  507.     max-width: 350px;
  508.     max-height: 100%;
  509.  
  510. }
  511.  
  512. .media{
  513.     text-align:center;
  514.     margin-bottom:-6px;
  515.     transition:0.5s;
  516. }
  517.  
  518. .media:hover{
  519.     {block:ifhoverblur}
  520.     -webkit-filter: blur(.9px);
  521.     {/block:ifhoverblur}
  522. }
  523.  
  524. .caption{
  525.     padding: 15px;
  526. }
  527.  
  528. .title{
  529.     font-size:calc({text:font size}px + 5px);
  530.     font-weight:normal;
  531.     margin:10px;
  532.     text-align:center;
  533.     color:{color:text};
  534. }
  535.  
  536. h1, h2, h3, h4, h5, h6{
  537.     font-size:calc({text:font size}px + 5px);
  538.     font-weight:normal;
  539.     margin:10px;
  540.     text-align:center;
  541.     color:{color:text};
  542. }
  543.  
  544. .quote{
  545.     font-weight:normal;
  546.     font-size:{text:font size};
  547.     font-style:italic;
  548.     margin:0 0 10px 0;
  549. }
  550.  
  551. .quotesource{
  552.     margin-bottom:10px;
  553. }
  554.  
  555. .question{
  556.     padding:10px 10px 0 10px;
  557.     border:0.5px dotted {color:text};
  558.     {block:ifroundborders}
  559.     border-radius:5px;
  560.     {/block:ifroundborders}
  561. }
  562.  
  563. blockquote{
  564.     margin:0 0 10px 10px;
  565.     padding:10px 10px 0 10px;
  566.     border-left:dotted 1px {color:text};
  567.     overflow:hidden;
  568.     border-radius:5px;
  569. }
  570.  
  571. blockquote img{
  572. }
  573.  
  574. ol.notes{
  575.     list-style-type: none;
  576.     padding: 10px 0 10px 0;
  577.     margin-bottom: 0px;
  578.     margin-top: 0px;
  579.     text-align: left;
  580.     overflow: auto;
  581.     height: 200px;
  582.     border-left:{text:border width}px {select:border style} {color:border};
  583.     border-right:{text:border width}px {select:border style} {color:border};
  584.     border-bottom:{text:border width}px {select:border style} {color:border};
  585.     {block:ifroundborders}
  586.     border-radius:0px 0px 5px 5px;
  587.     {/block:ifroundborders}
  588.     background:{color:post background};
  589.     width: calc(400px + ({text:border width}px * 2));
  590.     box-sizing: border-box;
  591. }
  592.  
  593. ol.notes li.note img{
  594.     width:10px;
  595.     height:10px;
  596.     margin-right:10px;
  597.     {block:ifroundborders}
  598.     border-radius:5px;
  599.     {/block:ifroundborders}
  600. }
  601.  
  602. ol.notes li.note{
  603.     margin:0px;
  604.     margin-left:5px;
  605. }
  606.  
  607. .heartbeat:hover{
  608.     animation: heartbeat 1s infinite;
  609. }
  610.  
  611. @keyframes heartbeat
  612. {
  613.   0%
  614.   {
  615.     transform: scale( .90 );
  616.   }
  617.   20%
  618.   {
  619.     transform: scale( 1 );
  620.   }
  621.   40%
  622.   {
  623.     transform: scale( .90 );
  624.   }
  625.   60%
  626.   {
  627.     transform: scale( 1 );
  628.   }
  629.   80%
  630.   {
  631.     transform: scale( .90 );
  632.   }
  633.   100%
  634.   {
  635.     transform: scale( .90 );
  636.   }
  637. }
  638.  
  639. i.fas:hover{
  640.     cursor:help;
  641. }
  642.  
  643. i.fas.fa-pause{
  644.     border:1px solid {color:border};
  645.     padding:10px;
  646.     {block:ifroundborders}
  647.     border-radius:5px;
  648.     {/block:ifroundborders}
  649.     background:{color:play pause background};
  650.     color:{color:play pause};
  651. }
  652.  
  653. i.fas.fa-play{
  654.     border:1px solid {color:border};
  655.     padding:10px;
  656.     {block:ifroundborders}
  657.     border-radius:5px;
  658.     {/block:ifroundborders}
  659.     background:{color:play pause background};
  660.     color:{color:play pause};
  661. }
  662.  
  663. {block:iftags}
  664. .tags {
  665.     position: absolute;
  666.     top: 0;
  667.     bottom: 0;
  668.     left: 0;
  669.     right: 0;
  670.     display: flex;
  671.     align-items: center;
  672.     justify-content: center;
  673.     opacity: 0;
  674.     z-index: 200;
  675.     text-align:center;
  676.     background-color: rgb({RGBcolor:tags background}, .3);
  677.     transition: opacity .2s, visibility .2s;
  678. }
  679.  
  680. .scroll-container {
  681.   margin: auto;
  682.   max-height: 100%;
  683.   overflow: auto;
  684.   width:400px;
  685. }
  686.  
  687. .flex-container {
  688.   display: flex;
  689.   flex-direction: column;
  690.   justify-content: center;
  691. }
  692.  
  693. .post:hover .tags {
  694.     opacity: 1;
  695. }
  696. {/block:iftags}
  697.  
  698. {CustomCSS}
  699. </style>
  700. </head>
  701.  
  702. <body>
  703.  
  704. <div class="controlpixel"><img src="{image:control pixel}"></div>
  705.  
  706. {block:ifredirect}
  707. {block:IndexPage}
  708. <script type="text/javascript">
  709.     var url = location.href;
  710.     if (url == "{BlogURL}") {
  711.         window.location = "{BlogURL}tagged/{text:redirect}";
  712.     }
  713. </script>
  714. {/block:IndexPage}
  715. {/block:ifredirect}
  716.  
  717. <div id="wrapper">
  718.  
  719. <div id="title"><a href="/">{text:title}</a></div>
  720. <div id="header">
  721. <div id="whitespace"></div>
  722. <div id="description">{text:description}</div>
  723. </div>
  724.  
  725. {block:ifmusicplayer}
  726. <div id="musicplayer">
  727. <table>
  728. <tr>
  729. <td>
  730. <div class="controls">
  731. <div class="play" style="display:inline-block"><i class="fas fa-play" onclick="play()"></i></div>
  732. </div>
  733. </td>
  734. <td>
  735. <div class="songtitle"><marquee scrollamount="{text:song title speed}">{text:song title}</marquee></div>
  736. </td>
  737. </tr>
  738. </table>
  739. <audio id="music" src="{text:mp3}"></audio>
  740. </div>
  741. {/block:ifmusicplayer}
  742.  
  743.  
  744. <div id="content">
  745. {block:Posts}
  746.  
  747. <div id="postwrapper">
  748. <div class="post">
  749.  
  750. {block:Text}
  751. <div style="padding:15px;">
  752. {block:Title}
  753. <div class="title">{Title}</div>
  754. {/block:Title}
  755. {Body}
  756. </div>
  757.  
  758. {block:iftags}{block:HasTags}<div class="tags"><div class="scroll-container"><div class="flex-container">{block:Tags}<div style="text-align:center"><a href="{TagURL}">#{Tag}</a></div> {/block:Tags}</div></div></div>{/block:HasTags}{/block:iftags}
  759.  
  760. {/block:Text}
  761.  
  762. {block:Photo}
  763. <div class="media">{LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>
  764. {block:ifcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifcaptions}
  765.  
  766. {block:iftags}{block:HasTags}<div class="tags"><div class="scroll-container"><div class="flex-container">{block:Tags}<div style="text-align:center"><a href="{TagURL}">#{Tag}</a></div> {/block:Tags}</div></div></div>{/block:HasTags}{/block:iftags}
  767.  
  768. {/block:Photo}
  769.  
  770. {block:Photoset}
  771. <div class="media">{Photoset}</div>
  772. {block:ifcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifcaptions}
  773.  
  774. {block:iftags}{block:HasTags}<div class="tags"><div class="scroll-container"><div class="flex-container">{block:Tags}<div style="text-align:center"><a href="{TagURL}">#{Tag}</a></div> {/block:Tags}</div></div></div>{/block:HasTags}{/block:iftags}
  775.  
  776. {/block:Photoset}
  777.  
  778. {block:Quote}
  779. <div style="padding:15px;">
  780. <div class="quote">"{Quote}"</div>
  781. {block:Source}
  782. <div class="quotesource">- {Source}</div>
  783. {/block:Source}
  784. </div>
  785.  
  786. {block:iftags}{block:HasTags}<div class="tags"><div class="scroll-container"><div class="flex-container">{block:Tags}<div style="text-align:center"><a href="{TagURL}">#{Tag}</a></div> {/block:Tags}</div></div></div>{/block:HasTags}{/block:iftags}
  787.  
  788. {/block:Quote}
  789.  
  790. {block:Link}
  791. <div style="padding:15px;">
  792. <div class="title"><a href="{URL}">{Name}</a></div>
  793. {block:Description}
  794. <div class="description">{Description}</div>
  795. {/block:Description}
  796. </div>
  797.  
  798. {block:iftags}{block:HasTags}<div class="tags"><div class="scroll-container"><div class="flex-container">{block:Tags}<div style="text-align:center"><a href="{TagURL}">#{Tag}</a></div> {/block:Tags}</div></div></div>{/block:HasTags}{/block:iftags}
  799.  
  800. {/block:Link}
  801.  
  802. {block:Chat}
  803. <div style="padding:15px;">
  804. {block:Title}
  805. <div class="title">{Title}</div>
  806.  
  807. {block:iftags}{block:HasTags}<div class="tags"><div class="scroll-container"><div class="flex-container">{block:Tags}<div style="text-align:center"><a href="{TagURL}">#{Tag}</a></div> {/block:Tags}</div></div></div>{/block:HasTags}{/block:iftags}
  808.  
  809. {/block:Title}
  810.  
  811. {block:Lines}
  812. <div class="{Alt} user_{UserNumber}">
  813. {block:Label}
  814. <b>{Label}</b>{/block:Label}
  815. &nbsp;{Line}
  816. </div>
  817. {/block:Lines}
  818. </div>
  819.  
  820. {block:iftags}{block:HasTags}<div class="tags"><div class="scroll-container"><div class="flex-container">{block:Tags}<div style="text-align:center"><a href="{TagURL}">#{Tag}</a></div> {/block:Tags}</div></div></div>{/block:HasTags}{/block:iftags}
  821.  
  822. {/block:Chat}
  823.  
  824. {block:Video}
  825. <div class="media" style="margin-bottom:10px !important"><div class="video-wrapper">
  826. <div class="video-container">{video-400}</div>
  827. </div></div>
  828. {block:ifcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifcaptions}
  829.  
  830. {block:iftags}{block:HasTags}<div class="tags"><div class="scroll-container"><div class="flex-container">{block:Tags}<div style="text-align:center"><a href="{TagURL}">#{Tag}</a></div> {/block:Tags}</div></div></div>{/block:HasTags}{/block:iftags}
  831.  
  832. {/block:Video}
  833.  
  834. {block:Audio}
  835. <div class="media" style="margin-bottom:-85px !important">
  836. {block:AudioEmbed}<div class="video-wrapper"><div class="video-container">{AudioEmbed-400}</div></div>{/block:AudioEmbed}
  837. </div>
  838. {block:ifcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifcaptions}
  839.  
  840. {block:iftags}{block:HasTags}<div class="tags"><div class="scroll-container"><div class="flex-container">{block:Tags}<div style="text-align:center"><a href="{TagURL}">#{Tag}</a></div> {/block:Tags}</div></div></div>{/block:HasTags}{/block:iftags}
  841.  
  842. {/block:Audio}
  843.                
  844. {block:Answer}
  845. <div style="padding:15px;">
  846. <div class="question" style="font-style:italic;">{Asker}: {Question}</div>
  847. {Answer}
  848. </div>
  849.  
  850. {block:iftags}{block:HasTags}<div class="tags"><div class="scroll-container"><div class="flex-container">{block:Tags}<div style="text-align:center"><a href="{TagURL}">#{Tag}</a></div> {/block:Tags}</div></div></div>{/block:HasTags}{/block:iftags}
  851.  
  852. {/block:Answer}
  853.  
  854. </div>
  855.  
  856. {block:Date}
  857.  
  858. <div class="footer">
  859.  
  860. <img src="{image:footer pixel}"> <a href="{Permalink}" title="{notecount}">{24hourwithzero}:{minutes}</a> <img src="{image:footer pixel}">
  861.  
  862. <!-- {block:NoRebloggedFrom}
  863. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  864. {/block:NoRebloggedFrom} -->{block:ContentSource}<!-- {SourceURL}
  865. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  866. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  867. {/block:ContentSource}
  868.  
  869. </div>
  870.  
  871. {block:PermalinkPage}
  872. {block:NoteCount}
  873. {block:PostNotes}{PostNotes}{/block:PostNotes}
  874. {/block:NoteCount}
  875. {/block:PermalinkPage}
  876. {/block:Date}
  877.  
  878. </div>
  879.  
  880. {/block:Posts}
  881. </div>
  882.  
  883. {block:Pagination}
  884. <div id="nav">
  885. {block:PreviousPage}<a href="{PreviousPage}" style="padding: 0px 10px">{text:previous}</a>{/block:PreviousPage}
  886.  
  887. {block:NextPage}<a href="{NextPage}" style="padding: 0px 10px">{text:next}</a>{/block:NextPage}
  888. </div>
  889. {/block:Pagination}
  890.  
  891. </div>
  892.  
  893. <script>
  894. let player = document.getElementById("music");
  895.  
  896. function play(){
  897.     player.play();
  898.     document.querySelector('.play').innerHTML = "<i class='fas fa-pause' onclick='pause()'></i>";
  899. }
  900.  
  901. function pause(){
  902.     player.pause();
  903.     document.querySelector('.play').innerHTML = "<i class='fas fa-play' onclick='play()'></i>";
  904. }
  905.  
  906. player.onended = function(){
  907.     document.querySelector('.play').innerHTML = "<i class='fas fa-play' onclick='play()'></i>";
  908. }
  909. </script>
  910.  
  911.  
  912.         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  913.         <script>window.jQuery || document.write('<script src="https://static.tumblr.com/qxrkgx6/q6kmgn2w2/jquery-1.8.3.min.js"><\/script>')</script>
  914.  
  915. <a href="https://puella.tumblr.com" title="by @puella, designed by @trans" style="position:fixed;left:12px;bottom:-12px;font-size:20px;"><div class="heartbeat"><3</div>️</a>
  916.  
  917.     </body>
  918.  
  919. </div></div></div></div></div></div></div></div></div></div>
  920. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!