API tools faq
paste
Sky_Blue

for mallary

Sky_Blue
Jun 16th, 2023 (edited)
84
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.01 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!-----
  5.  
  6. for mallary, thank u <3333 mwah
  7.  
  8. ----->
  9.  
  10. <script src="https://kit.fontawesome.com/f936906ae0.js" crossorigin="anonymous"></script>
  11.  
  12. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  13.  
  14. <meta charset="utf-8">
  15. <meta https-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  16. {block:Description}
  17. <meta name="description" content="{MetaDescription}" />
  18. {/block:Description}
  19.  
  20. <title>{Title}</title>
  21.  
  22. <link rel="shortcut icon" href="{image:favicon}">
  23. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  24. <link rel="stylesheet" href="https://static.tumblr.com/qxrkgx6/RWPmgn2qa/normalize.min.css">
  25.  
  26. <script src="https://static.tumblr.com/qxrkgx6/LuRmgn2rm/modernizr-2.6.2.min.js"></script>
  27.  
  28. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
  29.  
  30. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  31. <script src="https://static.tumblr.com/rtrqcib/VGGnlh8rf/jquery.style-my-tooltips.min.js"></script>
  32. <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>
  33.  
  34. <link href="https://fonts.googleapis.com/css?family=Kosugi+Maru|Short+Stack" rel="stylesheet">
  35.  
  36. <link rel="stylesheet" href="https://static.tumblr.com/p6yopnt/PxJr3vu6k/scrollbar.css">
  37.  
  38. <script>
  39. function gatherData(images, arr) {
  40. for (let i = 0; i < images.length; i++) {
  41. let currentData = {
  42. "width": images[i].getAttribute('data-width'),
  43. "height": images[i].getAttribute('data-height'),
  44. "low_res": images[i].getAttribute('data-lowres'),
  45. "high_res": images[i].getAttribute('data-highres')
  46. };
  47. arr.push(currentData);
  48. }
  49. }
  50. function getIndex(elem) {
  51. let i = 0;
  52. while( (elem = elem.previousElementSibling) != null ) i++;
  53. return i;
  54. }
  55. function lightbox(elem) {
  56. let currentPhotoset = elem.parentNode;
  57. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  58. let data = [];
  59. gatherData(photosetPhotos, data);
  60. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  61. }
  62. </script>
  63.  
  64. <meta name="image:favicon" content=""/>
  65. <meta name="image:icon" content=""/>
  66. <meta name="image:background" content=""/>
  67. <meta name="image:header background" content=""/>
  68. <meta name="image:container background" content=""/>
  69. <meta name="image:post background" content=""/>
  70. <meta name="image:pixel 1" content=""/>
  71. <meta name="image:pixel 2" content=""/>
  72. <meta name="image:pixel 3" content=""/>
  73. <meta name="image:pixel 4" content=""/>
  74. <meta name="image:pixel 5" content=""/>
  75.  
  76. <meta name="color:border" content="#ffffff"/>
  77. <meta name="color:background" content="#000"/>
  78. <meta name="color:header background" content=""/>
  79. <meta name="color:description background" content=""/>
  80. <meta name="color:container background" content=""/>
  81. <meta name="color:post background" content="#fff"/>
  82. <meta name="color:text" content="#000"/>
  83. <meta name="color:links" content="#000"/>
  84. <meta name="color:links hover" content="#fff"/>
  85. <meta name="color:links glow" content=""/>
  86. <meta name="color:links glow hover" content=""/>
  87. <meta name="color:links outline" content=""/>
  88. <meta name="color:links outline hover" content=""/>
  89. <meta name="color:tooltip background" content="#000"/>
  90. <meta name="color:tooltip text" content="#fff"/>
  91. <meta name="color:selection background" content="#fff"/>
  92. <meta name="color:selection text" content="#000"/>
  93. <meta name="color:play pause" content="#000"/>
  94.  
  95. <meta name="if:links glow" content=""/>
  96. <meta name="if:links outline" content="1"/>
  97. <meta name="if:star icon" content=""/>
  98. <meta name="if:circle icon" content=""/>
  99. <meta name="if:heart icon" content=""/>
  100. <meta name="if:lace border" content=""/>
  101. <meta name="if:blue lace border" content=""/>
  102. <meta name="if:purple lace border" content=""/>
  103. <meta name="if:pink lace border" content=""/>
  104. <meta name="if:yellow lace border" content=""/>
  105. <meta name="if:music player" content=""/>
  106. <meta name="if:redirect" content=""/>
  107. <meta name="if:hover blur" content=""/>
  108. <meta name="if:captions" content="1"/>
  109. <meta name="if:round borders" content=""/>
  110. <meta name="if:background cover" content=""/>
  111.  
  112. <meta name="select:border style" content="solid"/>
  113. <meta name="select:border style" content="dashed"/>
  114. <meta name="select:border style" content="dotted"/>
  115. <meta name="select:border style" content="double"/>
  116. <meta name="select:border style" content="inset"/>
  117. <meta name="select:border style" content="outset"/>
  118. <meta name="select:border style" content="groove"/>
  119. <meta name="select:border style" content="ridge"/>
  120.  
  121. <meta name="text:font size" content="20"/>
  122. <meta name="text:font" content="arial"/>
  123. <meta name="text:border width" content="5"/>
  124. <meta name="text:description" content="description"/>
  125. <meta name="text:links title" content="links"/>
  126. <meta name="text:link 1" content="one"/>
  127. <meta name="text:link 1 url" content=""/>
  128. <meta name="text:link 2" content="two"/>
  129. <meta name="text:link 2 url" content=""/>
  130. <meta name="text:link 3" content="three"/>
  131. <meta name="text:link 3 url" content=""/>
  132. <meta name="text:link 4" content="four"/>
  133. <meta name="text:link 4 url" content=""/>
  134. <meta name="text:link 5" content="five"/>
  135. <meta name="text:link 5 url" content=""/>
  136. <meta name="text:mp3" content=""/>
  137. <meta name="text:song title" content="song title"/>
  138. <meta name="text:search" content="search"/>
  139. <meta name="text:pagination text" content="text"/>
  140. <meta name="text:redirect" content=""/>
  141.  
  142.  
  143. </head>
  144.  
  145. <style type="text/css">
  146. .npf_row {
  147. margin: 0 !important;
  148. }
  149.  
  150. .tmblr-full img{
  151. box-sizing:border-box !important;
  152. }
  153.  
  154. ::selection {
  155. background: {color:selection background};
  156. color:{color:selection text};
  157. }
  158.  
  159. ::-moz-selection {
  160. background: {color:selection background};
  161. color:{color:selection text};
  162. }
  163.  
  164. #s-m-t-tooltip{
  165. margin: 20px 0 0 20px;
  166. padding: 5px;
  167. max-width: 300px;
  168. background-color:{color:tooltip background};
  169. color:{color:tooltip text};
  170. border:{text:border width}px {select:border style} {color:border};
  171. {block:ifrainbowborder}
  172. border-image:linear-gradient(to top left, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
  173. border-image-slice:1;
  174. {/block:ifrainbowborder}
  175. z-index: 9999;
  176. }
  177.  
  178. @font-face{
  179. font-family: 'Magica';
  180. src: url(https://static.tumblr.com/p6yopnt/Qkiqnu0r5/theheart.ttf);
  181. }
  182. @font-face{
  183. font-family: 'DEAD END';
  184. src: url(https://static.tumblr.com/pvnotae/DzVqdg2j5/dead_end.ttf);
  185. }
  186. @font-face{
  187. font-family: 'Decibil';
  188. src: url(https://static.tumblr.com/pvnotae/kwwqdg2pw/decibel_2.ttf);
  189. }
  190. @font-face{
  191. font-family: 'Aachen';
  192. src: url(https://static.tumblr.com/pvnotae/YIoqdg2yp/aachen-bold-opentype.otf);
  193. }
  194.  
  195. body {
  196. margin:0px;
  197. background:{color:background};
  198. background-image: url('{image:background}');
  199. {block:ifbackgroundcover}
  200. background-size: cover;
  201. {/block:ifbackgroundcover}
  202. {block:ifnotbackgroundcover}
  203. background-repeat:repeat;
  204. {/block:ifnotbackgroundcover}
  205. background-attachment:fixed;
  206. font-family:{text:font};
  207. font-size:{text:font size}px;
  208. color:{color:text};
  209. overflow:auto;
  210. }
  211.  
  212. p{
  213. margin:5px 0px;
  214. padding:0;
  215. }
  216.  
  217. pre {
  218. white-space: pre-wrap;
  219. white-space: -moz-pre-wrap;
  220. white-space: -pre-wrap;
  221. white-space: -o-pre-wrap;
  222. word-wrap: break-word;
  223. }
  224.  
  225. a{
  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. text-decoration:none;
  234. transition:1s;
  235. }
  236.  
  237. a:hover{
  238. color:{color:links hover};
  239. {block:iflinksglow}
  240. 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};
  241. {/block:iflinksglow}
  242. {block:iflinksoutline}
  243. 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};
  244. {/block:iflinksoutline}
  245. {block:ifhoverblur}
  246. -webkit-filter: blur(.9px);
  247. {/block:ifhoverblur}
  248. transition:1s;
  249. cursor:help;
  250. }
  251.  
  252. a.tumblr_blog{
  253. display:inline-block;
  254. margin-bottom:5px;
  255. }
  256.  
  257. li{
  258. margin-left:-15px;
  259. }
  260.  
  261. #wrapper{
  262. width:fit-content;
  263. width: -moz-fit-content;
  264. box-sizing:border-box;
  265. padding:50px;
  266. margin:auto;
  267. }
  268.  
  269. @keyframes fadeEffect {
  270. from {opacity: 0;}
  271. to {opacity: 1;}
  272. }
  273.  
  274. #header{
  275. {block:ifnotyellowlaceborder}
  276. {block:ifnotpinklaceborder}
  277. {block:ifnotpurplelaceborder}
  278. {block:ifnotbluelaceborder}
  279. {block:ifnotlaceborder}
  280. border:{text:border width}px {select:border style} {color:border};
  281. {/block:ifnotlaceborder}
  282. {/block:ifnotbluelaceborder}
  283. {/block:ifnotpurplelaceborder}
  284. {/block:ifnotpinklaceborder}
  285. {/block:ifnotyellowlaceborder}
  286.  
  287. {block:iflaceborder}
  288. border:10px {select:border style} {color:border};
  289. border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
  290. {/block:iflaceborder}
  291.  
  292. {block:ifbluelaceborder}
  293. border-width:10px;
  294. border-style:solid;
  295. border-image: url("https://cdn.discordapp.com/attachments/904308736712138793/995929957790388284/image_copy.png") 7 fill round;
  296. background-color:transparent !important;
  297. {/block:ifbluelaceborder}
  298.  
  299. {block:ifpurplelaceborder}
  300. border-width:10px;
  301. border-style:solid;
  302. border-image: url("https://dl.dropbox.com/s/l61yvavjx2e501e/image.png") 8 fill round;
  303. background-color:transparent !important;
  304. {/block:ifpurplelaceborder}
  305.  
  306. {block:ifpinklaceborder}
  307. border-width:10px;
  308. border-style:solid;
  309. border-image: url("https://i.imgur.com/ROjUrNz.gif") 7 fill round;
  310. background-color:transparent !important;
  311. {/block:ifpinklaceborder}
  312.  
  313. {block:ifyellowlaceborder}
  314. border-width:10px;
  315. border-style:solid;
  316. border-image: url("https://i.imgur.com/3pzGJd7.png") 7 fill round;
  317. background-color:transparent !important;
  318. {/block:ifyellowlaceborder}
  319.  
  320. padding:20px;
  321. background-color:{color:header background};
  322. background-image:url({image:header background});
  323.  
  324. display: flex;
  325. justify-content: space-between;
  326. }
  327.  
  328. #desc{
  329. width:260px;
  330. height:calc(134px - {text:border width}px);
  331. box-sizing:border-box;
  332. border:{text:border width}px {select:border style} {color:border};
  333. padding:10px;
  334. overflow:auto;
  335. word-break:break-word;
  336. background-color:{color:description background};
  337. text-align:center;
  338. }
  339.  
  340. #right{
  341. width:260px;
  342. box-sizing:border-box;
  343. text-align:center;
  344. height:calc(134px - {text:border width}px);
  345. display:flex;
  346. align-content: space-between;
  347. flex-wrap: wrap;
  348. flex-direction: column;
  349. justify-content: space-between;
  350. }
  351.  
  352. select{
  353. box-sizing:border-box;
  354. border:{text:border width}px {select:border style} {color:border};
  355. padding:5px;
  356. background-color:{color:description background};
  357. width:100%;
  358. }
  359.  
  360. #content{
  361. height:100%;
  362. padding:50px 100px;
  363. overflow-x:hidden;
  364. width: min-content;
  365.  
  366. {block:ifnotyellowlaceborder}
  367. {block:ifnotpinklaceborder}
  368. {block:ifnotpurplelaceborder}
  369. {block:ifnotbluelaceborder}
  370. {block:ifnotlaceborder}
  371. border:{text:border width}px {select:border style} {color:border};
  372. {/block:ifnotlaceborder}
  373. {/block:ifnotbluelaceborder}
  374. {/block:ifnotpurplelaceborder}
  375. {/block:ifnotpinklaceborder}
  376. {/block:ifnotyellowlaceborder}
  377.  
  378. {block:iflaceborder}
  379. border:10px {select:border style} {color:border};
  380. border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
  381. {/block:iflaceborder}
  382.  
  383. {block:ifbluelaceborder}
  384. border-width:10px;
  385. border-style:solid;
  386. border-image: url("https://cdn.discordapp.com/attachments/904308736712138793/995929957790388284/image_copy.png") 7 fill round;
  387. background-color:transparent !important;
  388. {/block:ifbluelaceborder}
  389.  
  390. {block:ifpurplelaceborder}
  391. border-width:10px;
  392. border-style:solid;
  393. border-image: url("https://dl.dropbox.com/s/l61yvavjx2e501e/image.png") 8 fill round;
  394. background-color:transparent !important;
  395. {/block:ifpurplelaceborder}
  396.  
  397. {block:ifpinklaceborder}
  398. border-width:10px;
  399. border-style:solid;
  400. border-image: url("https://i.imgur.com/ROjUrNz.gif") 7 fill round;
  401. background-color:transparent !important;
  402. {/block:ifpinklaceborder}
  403.  
  404. {block:ifyellowlaceborder}
  405. border-width:10px;
  406. border-style:solid;
  407. border-image: url("https://i.imgur.com/3pzGJd7.png") 7 fill round;
  408. background-color:transparent !important;
  409. {/block:ifyellowlaceborder}
  410.  
  411. background-color:{color:container background};
  412. background-image:url({image:container background});
  413. }
  414.  
  415. #icon{
  416. width:200px;
  417. height:200px;
  418. position:absolute;
  419. margin-left: auto;
  420. margin-right: auto;
  421. left: 0;
  422. right: 0;
  423. text-align: center;
  424. top:70px;
  425. animation:float 3s infinite ease-in-out;
  426. }
  427. @keyframes float {
  428. 0% { transform: translate(0, 0px); }
  429. 50% { transform: translate(0, 15px); }
  430. 100% { transform: translate(0, 0px); }
  431. }
  432.  
  433. #icon img{
  434. width:200px;
  435. height:200px;
  436. display:block;
  437. border:{text:border width}px {select:border style} {color:border};
  438. box-sizing:border-box;
  439.  
  440. {block:ifstaricon}
  441. -webkit-mask-image: url(https://i.imgur.com/iE8ff6N.png);
  442. -webkit-mask-size: 100%;
  443. -webkit-mask-repeat: no-repeat;
  444. -webkit-mask-position: center;
  445. border:none !important;
  446. {/block:ifstaricon}
  447.  
  448. {block:ifhearticon}
  449. -webkit-mask-image: url("https://files.catbox.moe/x6j0e7.png");
  450. -webkit-mask-size: 100% 100%;
  451. -webkit-mask-repeat: no-repeat;
  452. -webkit-mask-position: center;
  453. border:none !important;
  454. {/block:ifhearticon}
  455.  
  456. {block:ifcircleicon}
  457. border-radius:50%;
  458. {/block:ifcircleicon}
  459. }
  460.  
  461. #pixels{
  462. display: flex;
  463. justify-content: space-between;
  464. }
  465.  
  466. #posts{
  467. column-count: 2;
  468. column-gap: 30px;
  469. }
  470.  
  471. .post{
  472. width:400px;
  473. margin:30px 0px auto;
  474. overflow:hidden;
  475.  
  476. background-image:url({image:post background});
  477. {block:ifnotyellowlaceborder}
  478. {block:ifnotpinklaceborder}
  479. {block:ifnotpurplelaceborder}
  480. {block:ifnotbluelaceborder}
  481. {block:ifnotlaceborder}
  482. border:{text:border width}px {select:border style} {color:border};
  483. {/block:ifnotlaceborder}
  484. {/block:ifnotbluelaceborder}
  485. {/block:ifnotpurplelaceborder}
  486. {/block:ifnotpinklaceborder}
  487. {/block:ifnotyellowlaceborder}
  488.  
  489. {block:iflaceborder}
  490. border:10px {select:border style} {color:border};
  491. border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
  492. {/block:iflaceborder}
  493.  
  494. {block:ifbluelaceborder}
  495. border-width:10px;
  496. border-style:solid;
  497. border-image: url("https://cdn.discordapp.com/attachments/904308736712138793/995929957790388284/image_copy.png") 7 fill round;
  498. background-color:transparent !important;
  499. {/block:ifbluelaceborder}
  500.  
  501. {block:ifpurplelaceborder}
  502. border-width:10px;
  503. border-style:solid;
  504. border-image: url("https://dl.dropbox.com/s/l61yvavjx2e501e/image.png") 8 fill round;
  505. background-color:transparent !important;
  506. {/block:ifpurplelaceborder}
  507.  
  508. {block:ifpinklaceborder}
  509. border-width:10px;
  510. border-style:solid;
  511. border-image: url("https://i.imgur.com/ROjUrNz.gif") 7 fill round;
  512. background-color:transparent !important;
  513. {/block:ifpinklaceborder}
  514.  
  515. {block:ifyellowlaceborder}
  516. border-width:10px;
  517. border-style:solid;
  518. border-image: url("https://i.imgur.com/3pzGJd7.png") 7 fill round;
  519. background-color:transparent !important;
  520. {/block:ifyellowlaceborder}
  521. background:{color:post background};
  522. background-image:url('{image:post background}');
  523. box-sizing:border-box;
  524. word-break:break-word;
  525. break-inside: avoid;
  526. display:inline-block;
  527. }
  528.  
  529. .footer{
  530. text-align:center;
  531. margin:auto;
  532. margin-top:20px;
  533. width:200px;
  534. }
  535.  
  536. .answer .embed_iframe{
  537. width: 340px;
  538. }
  539.  
  540. .nfp_row{
  541. margin-left:0px;
  542. margin-right:0px;
  543. }
  544.  
  545. #nav{
  546. margin-bottom:10px;
  547. text-align: right;
  548. display: flex;
  549. justify-content: space-between;
  550. }
  551.  
  552. video{
  553. max-width:100%;
  554. height:auto!important;
  555. border:{text:border width}px {select:border style} {color:border};
  556. }
  557.  
  558. .video-container {
  559. overflow: hidden;
  560. }
  561.  
  562. .video-container iframe,
  563. .video-container object,
  564. .video-container embed {
  565. position: center;
  566. max-width: 360px;
  567. max-height: 360px;
  568. border:{text:border width}px {select:border style} {color:border};
  569. box-sizing:border-box;
  570. }
  571.  
  572. .video-wrapper {
  573. max-width: 360px;
  574. max-height: 360px;
  575.  
  576. }
  577.  
  578. iframe.tumblr_audio_player {
  579. height: 85px;
  580. border:{text:border width}px {select:border style} {color:border};
  581. box-sizing:border-box;
  582. }
  583.  
  584. .media{
  585. margin:0 0 0px 0;
  586. text-align:center;
  587. }
  588.  
  589. .media:hover{
  590. {block:ifhoverblur}
  591. -webkit-filter: blur(.9px);
  592. {/block:ifhoverblur}
  593. }
  594.  
  595. .media img{
  596. border:{text:border width}px {select:border style} {color:border};
  597. display:block;
  598. box-sizing:border-box;
  599. }
  600.  
  601. .title{
  602. font-size:calc({text:font size}px * 2 - 10px);
  603. font-weight:bold;
  604. margin:10px 0 10px 0;
  605. color:{color:text};
  606. }
  607.  
  608. h1, h2, h3, h4, h5, h6{
  609. font-size:calc({text:font size}px * 2 - 10px);
  610. font-weight:bold;
  611. margin:10px 0 10px 0;
  612. color:{color:text};
  613. }
  614.  
  615. .quote{
  616. font-weight:normal;
  617. font-size:{text:font size};
  618. font-style:italic;
  619. margin:0 0 10px 0;
  620. }
  621.  
  622. .question {
  623. position: relative;
  624. border:{text:border width}px {select:border style} {color:border};
  625. background-color:{color:description background};
  626. padding: 10px;
  627. margin-left:10px;
  628. width:100%;
  629. word-break: break-all;
  630. }
  631.  
  632. .asker{
  633. display:flex;
  634. align-items: flex-start;
  635. }
  636.  
  637. .asker img{
  638. border:{text:border width}px {select:border style} {color:border};
  639. }
  640.  
  641. .answer{
  642. position: relative;
  643. border:{text:border width}px {select:border style} {color:border};
  644. background-color:{color:description background};
  645. padding: 10px;
  646. margin-right:10px;
  647. width:100%;
  648. word-break: break-all;
  649. }
  650.  
  651. .answerer{
  652. margin-top:10px;
  653. display:flex;
  654. align-items: flex-start;
  655. }
  656.  
  657. .answerer img{
  658. border:{text:border width}px {select:border style} {color:border};
  659. }
  660.  
  661. .caption{
  662. margin-top:10px;
  663. }
  664.  
  665. blockquote{
  666. margin:10px;
  667. padding-left:10px;
  668. border-left:{text:border width}px {select:border style} {color:border};
  669. }
  670.  
  671. blockquote img{
  672. max-width:100%;
  673. height:auto;
  674. object-fit:cover;
  675. display: block;
  676. border:{text:border width}px {select:border style} {color:border};
  677. box-sizing:border-box;
  678. }
  679.  
  680. img{
  681. max-width:100%;
  682. height:auto;
  683. }
  684.  
  685. ol.notes{
  686. border:{text:border width}px {select:border style} {color:border};
  687. background-color:{color:post background};
  688. margin-top:10px;
  689. padding:10px;
  690. list-style-type:none;
  691. max-height:200px;
  692. overflow:auto;
  693. margin-bottom:0px;
  694. }
  695.  
  696. ol.notes li.note img{
  697. width:16px;
  698. height:16px;
  699. margin-right:3px;
  700. }
  701.  
  702. ol.notes li.note{
  703. margin:0px;
  704. }
  705.  
  706. .tags {
  707. max-height:0px;
  708. text-align:center;
  709. opacity:0;
  710. -webkit-transition: all 0.7s ease;
  711. transition: all 0.7s ease;
  712. -moz-transition: all 0.7s ease;
  713. -o-transition: all 0.7s ease;
  714. overflow:hidden;
  715. }
  716.  
  717. .post:hover .tags{
  718. opacity:1;
  719. max-height:300px;
  720. -webkit-transition: all 0.7s ease;
  721. transition: all 0.7s ease;
  722. -moz-transition: all 0.7s ease;
  723. -o-transition: all 0.7s ease;
  724. }
  725.  
  726. [photoset-layout] {
  727. grid-gap: 10px;
  728. }
  729.  
  730. [photoset-layout] img {
  731. border:{text:border width}px {select:border style} {color:border};
  732. display: block;
  733. height: 100%;
  734. width: 100%;
  735. object-fit: cover;
  736. background-color:{color:description background};
  737. }
  738.  
  739. [photoset-layout] div {
  740. cursor: help;
  741. }
  742.  
  743. .answer .embed_iframe{
  744. width: 140px;
  745. }
  746.  
  747. #musicplayer{
  748. overflow:hidden;
  749. width:260px;
  750. }
  751.  
  752. .controls{
  753. padding:5px;
  754. }
  755.  
  756. .songtitle{
  757. font-size:{text:font size}px;
  758. color:{color:text};
  759. display:flex;
  760. width:260px;
  761. }
  762.  
  763. i.fas.fa-pause:hover{
  764. cursor:help;
  765. }
  766.  
  767. i.fas.fa-play:hover{
  768. cursor:help;
  769. }
  770.  
  771. i.fas.fa-pause{
  772. padding:7px;
  773. color:{color:play pause color};
  774. font-size:15px !important;
  775. }
  776.  
  777. i.fas.fa-play{
  778. padding:7px;
  779. color:{color:play pause color};
  780. font-size:15px !important;
  781. }
  782.  
  783. #pagi{
  784. position:fixed;
  785. bottom:10px;
  786. right:10px;
  787. }
  788.  
  789. input{
  790. border:{text:border width}px {select:border style} {color:border};
  791. font-family:{text:font};
  792. font-size:{text:font size}px;
  793. padding:5px;
  794. }
  795.  
  796. </style>
  797. <body>
  798. {block:ifredirect}
  799. {block:IndexPage}
  800. <script type="text/javascript">
  801. var url = location.href;
  802. if (url == "{BlogURL}") {
  803. window.location = "{BlogURL}tagged/{text:redirect}";
  804. }
  805. </script>
  806. {/block:IndexPage}
  807. {/block:ifredirect}
  808.  
  809. <div id="wrapper">
  810. <div id="content">
  811. <div id="header">
  812. <div style="display:flex;gap:20px;align-items:center;">
  813. <div id="icon">
  814. <a href="/"><img src="{image:icon}"></a>
  815. </div>
  816. <div id="desc">
  817. {text:description}
  818. </div>
  819. </div>
  820.  
  821. <div id="right">
  822.  
  823. <div id="musicplayer">
  824. <table>
  825. <tr>
  826. <td>
  827. <div><div class="controls"><div class="play" style="display:inline-block"><i class="fas fa-play" onclick="play()"></i></div></div></div>
  828. </td>
  829. <td>
  830. <div class="songtitle"><marquee scrollamount="10">{text:song title}</marquee></div>
  831. </td>
  832. </tr>
  833. </table>
  834. <audio id="music" src="{text:mp3}"></audio>
  835. </div>
  836.  
  837. <div id="links">
  838. <select onChange="window.location.href=this.value">
  839. <option value="">{text:links title}</option>
  840. <option value="{text:link 1 url}">{text:link 1}</option>
  841. <option value="{text:link 2 url}">{text:link 2}</option>
  842. <option value="{text:link 3 url}">{text:link 3}</option>
  843. <option value="{text:link 4 url}">{text:link 4}</option>
  844. <option value="{text:link 5 url}">{text:link 5}</option>
  845. </select>
  846. </div>
  847.  
  848. <div id="pixels">
  849. <img src="{image:pixel 1}">
  850. <img src="{image:pixel 2}">
  851. <img src="{image:pixel 3}">
  852. <img src="{image:pixel 4}">
  853. <img src="{image:pixel 5}">
  854. </div>
  855. </div>
  856.  
  857. </div>
  858.  
  859.  
  860.  
  861. <div id="posts">
  862. {block:Posts}
  863.  
  864. <div class="post" post-type="{PostType}">
  865.  
  866. <div style="padding:20px">
  867.  
  868. {block:Text}
  869. {block:Title}
  870. <div class="title">{Title}</div>
  871. {/block:Title}
  872. {Body}
  873. {/block:Text}
  874.  
  875. {block:Photo}
  876. <div class="media">{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>
  877. {block:ifcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifcaptions}
  878. {/block:Photo}
  879.  
  880. {block:Photoset}
  881. <div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>
  882. {block:ifcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifcaptions}
  883. {/block:Photoset}
  884.  
  885. {block:Quote}
  886. <div class="quote">"{Quote}"</div>
  887. {block:Source}
  888. <div class="quotesource">{Source}</div>
  889. {/block:Source}
  890. {/block:Quote}
  891.  
  892. {block:Link}
  893. <div class="title"><a href="{URL}">{Name}</a></div>
  894. {block:Description}
  895. <div class="description">{Description}</div>
  896. {/block:Description}
  897. {/block:Link}
  898.  
  899. {block:Chat}
  900. {block:Title}
  901. <div class="title">{Title}</div>
  902. {/block:Title}
  903.  
  904. {block:Lines}
  905. <div class="{Alt} user_{UserNumber}">
  906. {block:Label}
  907. <b>{Label}</b>{/block:Label}
  908. &nbsp;{Line}
  909. </div>
  910. {/block:Lines}
  911. {/block:Chat}
  912.  
  913. {block:Video}
  914. <div class="media"><div class="video-wrapper">
  915. <div class="video-container">{video-400}</div>
  916. </div></div>
  917. {block:ifcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifcaptions}
  918. {/block:Video}
  919.  
  920. {block:Audio}
  921. <div class="media">
  922. {block:AudioEmbed}<div class="video-wrapper"><div class="video-container">{AudioEmbed-400}</div></div>{/block:AudioEmbed}
  923. </div>
  924. {block:ifcaptions}{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:ifcaptions}
  925. {/block:Audio}
  926.  
  927. {block:Answer}
  928. <div class="asker"><img src="{AskerPortraitURL-48}"> <div class="question" style="font-style:italic">{Question}</div></div>
  929.  
  930. <div class="answerer"><div class="answer">{Answer}</div>{block:Answerer}<img src="{AnswererPortraitURL-48}">{/block:Answerer}<img src="{PortraitURL-48}" style="{block:Answerer}display:none{/block:Answerer}"></div>
  931.  
  932. <div style="margin-top:20px;{block:NotReblog}display:none;{/block:NotReblog}">{Replies}</div>
  933. {/block:Answer}
  934.  
  935.  
  936. {block:Date}
  937. <div class="footer">
  938.  
  939. <a href="{Permalink}" title="{notecount} notes">{TimeAgo}</a>
  940.  
  941. <!-- {block:NoRebloggedFrom}
  942. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  943. {/block:NoRebloggedFrom} -->{block:ContentSource}<!-- {SourceURL}
  944. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  945. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  946. {/block:ContentSource}
  947.  
  948. </div>
  949.  
  950. {block:HasTags}
  951. {block:IndexPage}<div class="tags"><div style="margin-top:10px">{block:Tags}<a href="{TagURL}"><i class="fas fa-hashtag"></i>{Tag} </a>{/block:Tags}</div></div>{/block:IndexPage}
  952. {block:PermalinkPage}<div style="margin-top:10px;text-align:center;">{block:Tags}<a href="{TagURL}"><i class="fas fa-hashtag"></i>{Tag} </a>{/block:Tags}</div>{/block:PermalinkPage}
  953. {/block:HasTags}
  954.  
  955. {block:PermalinkPage}
  956. {block:NoteCount}
  957. {block:PostNotes}{PostNotes}{/block:PostNotes}
  958. {/block:NoteCount}
  959. {/block:PermalinkPage}
  960. {/block:Date}
  961.  
  962. </div>
  963. </div>
  964.  
  965. {/block:Posts}
  966. </div>
  967.  
  968. <div id="pagi">
  969. <form action="/search" method="get">
  970. <input type="text" name="q" value="{SearchQuery}" placeholder="{text:search}"/>
  971. </form>
  972. {block:Pagination}
  973. <div id="nav">
  974. {block:PreviousPage}<div id="navbutton"><a href="{PreviousPage}">← </a></div>{/block:PreviousPage}
  975. {text:pagination text}
  976. {block:NextPage}<div id="navbutton"><a href="{NextPage}"> →</a></div>{/block:NextPage}
  977. </div>
  978. {/block:Pagination}
  979. </div>
  980.  
  981. </div>
  982. </div>
  983.  
  984. <script>
  985. let player = document.getElementById("music");
  986.  
  987. function play(){
  988. player.play();
  989. document.querySelector('.play').innerHTML = "<i class='fas fa-pause' onclick='pause()'></i>";
  990. }
  991.  
  992. function pause(){
  993. player.pause();
  994. document.querySelector('.play').innerHTML = "<i class='fas fa-play' onclick='play()'></i>";
  995. }
  996.  
  997. player.onended = function(){
  998. document.querySelector('.play').innerHTML = "<i class='fas fa-play' onclick='play()'></i>";
  999. }
  1000. </script>
  1001.  
  1002.  
  1003. </body>
  1004. </html>
  1005.  
  1006. </body>
  1007. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!