API tools faq
paste
Advertisement
Sky_Blue

WORLD IS MINE theme

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