Advertisement
Sky_Blue

CATBOY :3c theme

Jun 18th, 2021 (edited)
2,190
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 26.41 KB | None | 0 0
  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