API tools faq
paste
Advertisement
Sky_Blue

for corasans

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