API tools faq
paste
Advertisement
likesmagic

hiss by @gloriapritchetts

likesmagic
Jun 5th, 2024
302
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.98 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><script type="text/javascript">$(document).ready(function() {$('#seokjin').click(function() {$('.utabcontent').slideToggle(600);});});</script>
  5. <link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
  6.  
  7. <!--
  8. NPF images fix v3.0 by @glenthemes [2021]
  9. 💌 git.io/JRBt7
  10. --->
  11. <script src="//npf-images-v3.github.io/script.js"></script>
  12. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  13. <style tmblr-npf>
  14. :root {
  15. --NPF-Caption-Spacing:1em;
  16. --NPF-Image-Spacing:4px;
  17. }
  18. </style>
  19. <script src="https://unpkg.com/phosphor-icons"></script>
  20. <link rel="preconnect" href="https://fonts.googleapis.com">
  21. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  22. <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:[email protected]&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Varela+Round&display=swap" rel="stylesheet">
  23. <script src="//pull.cappuccicons.com/cpf.js"></script>
  24. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  25. <title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  26.  
  27. <link rel="shortcut icon" href="{Favicon}">
  28. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  29. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  30. <meta charset="utf-8">
  31. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  32.  
  33. <!---
  34.  
  35. ♡ CODE BY GLORIAPRITCHETTS ♡
  36.  
  37. 👎 PLZ DO NOT ↴
  38. — steal or copy it into other codes
  39. — claim as your own
  40. — remove or change the credit
  41.  
  42. 👍 PLZ DO ↴
  43. — edit for your own personal use
  44. — message me for help
  45. — like or reblog the original post
  46.  
  47. ⭐️ CREDITS ↴
  48. — seyche.tumblr.com // base code
  49. — eossa.tumblr.com // tooltips
  50. — glenthemes.tumblr.com // npf posts fix
  51. — southcodes.tumblr.com // updates tab
  52. — fonts.google.com // fonts
  53. — phosphoricons.com // font icons
  54. — cappuccicons.com // font icons
  55. — octomoosey.tumblr.com // tutorials
  56. — themehunter.tumblr.com // tutorials
  57. — w3schools.com // tutorials
  58. — codepen.io // tutorials
  59.  
  60. --->
  61.  
  62. <meta name="image:sidebar" content="https://placehold.co/200x200/EEE/31343C"/>
  63.  
  64. <meta name="color:background" content="#0f0f0f"/>
  65. <meta name="color:posts" content="#121212"/>
  66. <meta name="color:text" content="#fff"/>
  67. <meta name="color:accent" content="#64bffa"/>
  68. <meta name="color:borders" content="#181818"/>
  69. <meta name="color:gradient 1" content="#64bffa"/>
  70. <meta name="color:gradient 2" content="#c7e6f7"/>
  71.  
  72. <meta name="select:border radius" content="0px"/>
  73. <meta name="select:border radius" content="5px"/>
  74. <meta name="select:border radius" content="10px"/>
  75.  
  76. <meta name="text:font" content="quicksand"/>
  77. <meta name="text:letter spacing" content="0.3px"/>
  78. <meta name="text:about" content="try to keep this at three lines or more my friends:)"/>
  79. <meta name="text:dni" content="try to keep this at three lines or more my friends :)"/>
  80. <meta name="text:title" content="title"/>
  81. <meta name="text:description" content="description"/>
  82. <meta name="text:updates" content="updates"/>
  83.  
  84. <meta name="text:link 1 url" content="/"/>
  85. <meta name="text:link 1 title" content="gifs"/>
  86. <meta name="text:link 2 url" content="/"/>
  87. <meta name="text:link 2 title" content="about"/>
  88. <meta name="text:link 3 url" content="/"/>
  89. <meta name="text:link 3 title" content="resources"/>
  90. <meta name="text:link 4 url" content="/"/>
  91. <meta name="text:link 4 title" content="links"/>
  92.  
  93. <!----- css ----->
  94.  
  95. <style type="text/css">
  96.  
  97. /*----- general -----*/
  98.  
  99. body {
  100. font-family: {text:font};
  101. font-size: 14px;
  102. color: {color:text};
  103. background-color: {color:background};
  104. line-height: 130%;
  105. word-wrap: break-word;
  106. letter-spacing: {text:letter spacing};
  107. margin: 0;
  108. padding: 0;
  109. }
  110.  
  111. a {
  112. color: {color:accent};
  113. font-weight:700;
  114. position: relative;
  115. text-decoration: none;
  116. -webkit-transition: all 0.4s ease;
  117. transition: all 0.4s ease;
  118. -moz-transition: all 0.4s ease;
  119. -o-transition: all 0.4s ease;
  120. }
  121.  
  122. a:hover {
  123. font-weight:700;
  124. text-decoration:none;
  125. color:{color:gradient 2};
  126. text-shadow:1px 1px 0px {color:gradient 1};
  127. -webkit-transition: all 0.4s ease;
  128. transition: all 0.4s ease;
  129. -moz-transition: all 0.4s ease;
  130. -o-transition: all 0.4s ease;
  131. }
  132.  
  133. blockquote {
  134. padding: 0 0 0 1.5em;
  135. border-left: 1px solid {color:borders};
  136. margin: 1.5em 0 1.5em 1.5em;
  137. }
  138.  
  139. h1.post-title {
  140. font-size:25px;
  141. color:{color:accent};
  142. text-align:left;
  143. }
  144.  
  145. h1 {
  146. font-size:23px;
  147. color:{color:accent};
  148. text-align:center;
  149. line-height:22px;
  150. }
  151.  
  152. h2 {
  153. font-size:20px;
  154. color:{color:accent};
  155. text-align:center;
  156. line-height:22px;
  157. }
  158.  
  159. bold, b, strong {
  160. font-weight:800;
  161. color:{color:accent};
  162. }
  163.  
  164. i, em, italic {
  165. color:{color:accent};
  166. }
  167.  
  168. small, sub {
  169. font-size:12px;
  170. }
  171.  
  172. .tmblr-iframe-compact .tmblr-iframe--unified-controls {z-index: 999999999!important;}
  173.  
  174. /*----- sidebar -----*/
  175.  
  176. #sidebar {
  177. opacity:1;
  178. width: 400px;
  179. position: fixed;
  180. text-align: center;
  181. background:{color:posts};
  182. border-radius:{select:border radius};
  183. height:465px;
  184. top:50%;
  185. left:50%;
  186. margin-left:160px;
  187. margin-top:-310px;
  188. -webkit-transition: all 0.6s ease;
  189. transition: all 0.6s ease;
  190. -moz-transition: all 0.6s ease;
  191. -o-transition: all 0.6s ease;
  192. }
  193.  
  194. #side-img {
  195. margin-bottom: 1em;
  196. margin-left:0.8em;
  197. margin-top:0.8em;
  198. width:200px;
  199. height:200px;
  200. border-radius:{select:border radius};
  201. }
  202.  
  203. #side-img img {
  204. width:200px;
  205. height:200px;
  206. }
  207.  
  208. .title {
  209. padding:10px;
  210. font-size:8px;
  211. text-transform:uppercase;
  212. text-transform:justify;
  213. text-align:left;
  214. letter-spacing:0.4em;
  215. margin-top:0em;
  216. color:{color:accent};
  217. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  218. width:380px;
  219. border-top-left-radius:{select:border radius};
  220. border-top-right-radius:{select:border radius};
  221. }
  222.  
  223. .title span {
  224. background:{color:posts};
  225. padding:7px;
  226. border-radius:{select:border radius};
  227. }
  228.  
  229. .icons {
  230. width:50px;
  231. margin-top:-20px;
  232. margin-left:335px;
  233. }
  234.  
  235. .icons i {
  236. width:10px;
  237. height:10px;
  238. font-size:10px;
  239. background:{color:posts};
  240. padding:5px;
  241. border-radius:100%;
  242. }
  243.  
  244. #title2 {
  245. text-align:left;
  246. font-weight:bold;
  247. font-size:25px;
  248. padding:10px;
  249. margin-top:-0.4em;
  250. line-height:22px;
  251. margin-bottom:0.3em;
  252. }
  253.  
  254. #description {
  255. position:absolute;
  256. width:360px;
  257. height:40px;
  258. padding:10px;
  259. margin-left:0.7em;
  260. text-align:center;
  261. overflow-y:scroll;
  262. background:{color:background};
  263. border-radius:{select:border radius};
  264. }
  265.  
  266. nav {
  267. text-align:center;
  268. margin-top:80px;
  269. margin-left:10px;
  270. width:360px;
  271. height:30px;
  272. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  273. padding:10px;
  274. border-radius:{select:border radius};
  275. }
  276.  
  277. nav a {
  278. text-align:center;
  279. margin: auto 0.8em;
  280. font-weight:normal;
  281. }
  282.  
  283. nav i {
  284. margin-top:0.1em;
  285. font-size:25px;
  286. color:{color:background};
  287. }
  288.  
  289. nav a:hover, nav i:hover {
  290. text-decoration:none;
  291. text-shadow:none;
  292. }
  293.  
  294. #header {
  295. position:absolute;
  296. z-index:999999999999!important;
  297. top:50px;
  298. left:260px;
  299. padding:5px;
  300. font-weight:bold;
  301. color:{color:posts};
  302. width:80px;
  303. height:20px;
  304. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  305. border-radius:{select:border radius};
  306. }
  307.  
  308.  
  309. #about {
  310. position:absolute;
  311. width:150px;
  312. height:60px;
  313. padding:10px;
  314. margin-top:-14.3em;
  315. margin-left:15.7em;
  316. text-align:center;
  317. overflow-y:scroll;
  318. background:{color:background};
  319. border-radius:{select:border radius};
  320. }
  321.  
  322. #header2 {
  323. position:absolute;
  324. z-index:999999999999!important;
  325. top:155px;
  326. left:260px;
  327. padding:5px;
  328. font-weight:bold;
  329. color:{color:posts};
  330. width:80px;
  331. height:20px;
  332. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  333. border-radius:{select:border radius};
  334. }
  335.  
  336.  
  337. #dni {
  338. position:absolute;
  339. width:150px;
  340. height:60px;
  341. padding:10px;
  342. margin-top:-6.6em;
  343. margin-left:15.7em;
  344. text-align:center;
  345. overflow-y:scroll;
  346. background:{color:background};
  347. border-radius:{select:border radius};
  348. }
  349.  
  350. .down {
  351. height:0px;
  352. -webkit-transition:all 0.6s;
  353. -moz-transition:all 0.4s;
  354. -ms-transition:all 0.6s;
  355. -o-transition:all 0.6s;
  356. transition:all 0.6s;
  357. }
  358.  
  359. .up {
  360. height:150px;
  361. padding-left:10px;
  362. padding-right:10px;
  363. z-index:10000000000;
  364. -webkit-transition:all 0.6s;
  365. -moz-transition:all 0.4s;
  366. -ms-transition:all 0.6s;
  367. -o-transition:all 0.6s;
  368. transition:all 0.6s;
  369. }
  370.  
  371. #seokjin {
  372. position:fixed;
  373. width:15px;
  374. height:15px;
  375. padding:10px;
  376. border-radius:100%;
  377. background:{color:accent};
  378. top:20px;
  379. left:20px;
  380. transition: all .4s ease-in-out;
  381. z-index:9999999999!important;
  382. }
  383.  
  384. #seokjin i {
  385. font-size:18px;
  386. color:{color:background};
  387. }
  388.  
  389. #seokjin a:hover {
  390. text-shadow:none;
  391. }
  392.  
  393. #seokjin:hover {
  394. transform: scale(1.1);
  395. transition: all .4s ease-in-out;
  396. background:{color:gradient 1};
  397. }
  398.  
  399. .utabcontent {
  400. width: 360px;
  401. position: fixed;
  402. background:{color:posts};
  403. padding:20px;
  404. border-radius:{select:border radius};
  405. height:120px;
  406. top:50%;
  407. left:50%;
  408. margin-left:160px;
  409. margin-top:160px!important;
  410. overflow-y:scroll;
  411. z-index:9999999999999999999999!important;
  412. }
  413.  
  414. .utabcontent h1 {
  415. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  416. padding:10px;
  417. border-radius:{select:border radius};
  418. color:{color:background};
  419. }
  420.  
  421. .bio {
  422. position:absolute;
  423. width:360px;
  424. margin-top:-0.5em;
  425. margin-left:0em;
  426. text-align:left;
  427. }
  428.  
  429. .bio h1 {
  430. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  431. font-weight:bold;
  432. font-size:15px;
  433. text-transform:justify;
  434. text-align:left;
  435. padding:10px;
  436. border-radius:{select:border radius};
  437. color:{color:background};
  438. }
  439.  
  440. .bio i {
  441. color:{color:background};
  442. font-size:20px;
  443. }
  444.  
  445. /*----- posts -----*/
  446.  
  447. main {
  448. position: relative;
  449. width: calc(250px + 540px + 150px);
  450. margin: auto;
  451. }
  452.  
  453. section {
  454. position: relative;
  455. width: 600px;
  456. margin-left: -70px;
  457. }
  458.  
  459. article {
  460. width: 540px;
  461. position: relative;
  462. margin: 120px auto;
  463. background:{color:Posts};
  464. padding:20px;
  465. border-radius:{select:border radius};
  466. }
  467.  
  468. .posts li, .posts blockquote, figure, video, iframe, .video, .video iframe, figure.tmblr-embed.tmblr-full, figure.tmblr-embed.tmblr-full iframe, .caption iframe { max-width: 100%; }
  469.  
  470. .caption {
  471. margin-top: 2em;
  472. list-style-type: none;
  473. }
  474.  
  475. .text-caption:first-of-type { margin-top: 0; }
  476.  
  477. .user-icon, .ask-icon {
  478. display: inline-block;
  479. vertical-align: middle;
  480. width: 1em;
  481. height: 1em;
  482. margin-right: 0.5em;
  483. border-radius:100%;
  484. border:3px solid {color:accent};
  485. }
  486.  
  487. .username {
  488. display: inline-block;
  489. vertical-align: middle;
  490. font-weight: bold;
  491. color:{color:accent};
  492. text-decoration:none;
  493. }
  494.  
  495. .username a {
  496. font-weight: bold;
  497. color:{color:accent};
  498. text-decoration:none;
  499. }
  500.  
  501. .deactive::after {
  502. content: '(deactivated)';
  503. margin-left: 1em;
  504. opacity: 0.75;
  505. color: {color:accent};
  506. }
  507.  
  508. p.tmblr-attribution {margin-top: 1em !important;}
  509.  
  510. a.link-wrap {
  511. display: block;
  512. border: 1px solid {color:borders};
  513. }
  514.  
  515. .link { padding: 2em; }
  516.  
  517. .link-host, .link-txt { margin-top: 1.5em; }
  518.  
  519. .npf-link-block {
  520. margin-top: 1.5em;
  521. background-color: inherit;
  522. border: 1px solid inherit;
  523. color: inherit;
  524. }
  525.  
  526. img {
  527. margin: 0;
  528. display: block;
  529. height: auto;
  530. max-width: 100%;
  531. border-radius:{select:border radius};
  532. }
  533.  
  534. .photo img {width: 100%;border-radius:{select:border radius};}
  535. .photoset img { border-radius:{select:border radius}; }
  536.  
  537. .vignette, #vignette {opacity: 0;}
  538. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.75) !important;}
  539.  
  540. .lightbox-image, #tumblr_lightbox img {
  541. box-shadow: none !important;
  542. border-radius: 0 !important;
  543. max-width: none;
  544. }
  545.  
  546. #tumblr_lightbox_caption, .lightbox-caption {
  547. color: #fff !important;
  548. font-family: inherit;
  549. margin-top: 1em !important;
  550. }
  551.  
  552. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  553. margin-left: 0 !important;
  554. margin-right: 0 !important;
  555. }
  556.  
  557. .quote { line-height: 160%; font-size: 1.25em; }
  558.  
  559. .quote p:first-of-type { margin-top: 0; }
  560. .quote p:last-of-type { margin-bottom: 0; }
  561.  
  562. .source { margin-top: 1.5em; }
  563.  
  564. .chat { padding: 0; margin: 0; }
  565. .chat li { list-style-type: none; margin-top: 1em; }
  566. .chat li:first-of-type { margin-top: 0; }
  567. .chatter { font-weight: bold; }
  568.  
  569. p.npf_chat, p.npf_chat b {font-family: inherit;}
  570.  
  571. /*----- asks -----*/
  572.  
  573. .ask-wrap {
  574. background:{color:background};
  575. padding:15px;
  576. border-radius:{select:border radius};
  577. text-align:right;
  578. }
  579.  
  580. .ask-wrap .asking {
  581. display: inline-block;
  582. margin-left: 0em;
  583. font-weight: bold;
  584. }
  585.  
  586. .question { margin-top: 0.5em; }
  587. .question p:first-of-type { margin-top: 0; }
  588. .question p:last-of-type { margin-bottom: 0; }
  589.  
  590. /*----- info -----*/
  591.  
  592. .info {
  593. height:21px;
  594. margin-top: 1em;
  595. padding:10px;
  596. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  597. border-radius:{select:border radius};
  598. }
  599.  
  600. .info a {
  601. display: inline-block;
  602. vertical-align: middle;
  603. text-transform:lowercase;
  604. font-weight:bold;
  605. color:{color:background};
  606. }
  607.  
  608. .info a:hover {
  609. text-decoration:none;
  610. color:{color:background};
  611. text-shadow:none;
  612. }
  613.  
  614. .pinned {
  615. width:18px;
  616. height:18px;
  617. top:-15px;
  618. left:550px;
  619. position:absolute;
  620. background-color:{color:accent};
  621. padding:10px;
  622. border-radius:100%;
  623. transition: all .4s ease-in-out;
  624. }
  625.  
  626. .pinned i {
  627. color:{color:posts};
  628. font-size:17px;
  629. }
  630.  
  631. .pinned a, .pinned a:hover {
  632. text-decoration:none;
  633. text-shadow:none;
  634. }
  635.  
  636. .pinned:hover {
  637. transform: scale(1.1);
  638. transition: all .4s ease-in-out;
  639. background:{color:gradient 1};
  640. }
  641.  
  642. .likeb {
  643. position: relative;
  644. display: inline-block;
  645. height: 1.6em;
  646. margin-bottom: 0px;
  647. margin-top:2px;
  648. }
  649.  
  650. .likeb .like_button iframe {
  651. position: absolute;
  652. top: 0;
  653. left: 0;
  654. bottom: 0;
  655. right: 0;
  656. z-index: 2;
  657. opacity: 0;
  658. }
  659.  
  660. .like_button iframe {width: 100% !important; height: 100% !important;}
  661. .likeb .liked + .actual-button {}
  662. .likeb .liked + .actual-button:after {content: '';}
  663.  
  664. .buttons {
  665. margin-top:-20px;
  666. text-align:right;
  667. }
  668.  
  669. .buttons a {
  670. margin-left:0em;
  671. margin-right:0.7em;
  672. color:{color:background};
  673. -webkit-transition: all 0.4s ease;
  674. transition: all 0.4s ease;
  675. -moz-transition: all 0.4s ease;
  676. -o-transition: all 0.4s ease;
  677. }
  678.  
  679. .buttons i {
  680. font-size:14px;
  681. color:{color:background};
  682. -webkit-transition: all 0.4s ease;
  683. transition: all 0.4s ease;
  684. -moz-transition: all 0.4s ease;
  685. -o-transition: all 0.4s ease;
  686. }
  687.  
  688. .buttons i:hover {
  689. color:{color:background};
  690. -webkit-transition: all 0.4s ease;
  691. transition: all 0.4s ease;
  692. -moz-transition: all 0.4s ease;
  693. -o-transition: all 0.4s ease;
  694. }
  695.  
  696. .tags {
  697. word-wrap: break-word;
  698. margin-top:1em!important;
  699. margin-left:0em;
  700. }
  701.  
  702. .tags a {
  703. margin-right:0em;
  704. color:{color:text};
  705. font-weight:normal;
  706. padding-right:0.4em;
  707. }
  708.  
  709. .tags a:hover {
  710. text-decoration:none;
  711. color:{color:gradient 2};
  712. text-shadow:none;
  713. }
  714.  
  715. .tags a:before {
  716. content: '#';
  717. }
  718.  
  719. .tags a:after {
  720. content: ',';
  721. }
  722.  
  723. .tags a:last-child:after {
  724. content: '.';
  725. }
  726.  
  727. .tags b { color:{color:accent};margin-right:0.4em; }
  728.  
  729. /*----- notes -----*/
  730.  
  731. .notes { margin-top:-1em; }
  732. .notes a { color:{color:accent}; text-decoration:none; }
  733. .notes a:hover { color:{color:gradient 2}; text-decoration:none; }
  734.  
  735. ol.notes {
  736. max-width: 100%;
  737. padding: 0;
  738. margin: 2em 0 0 0;
  739. text-align:left;
  740. }
  741.  
  742. ol.notes li.note { padding: 0.3em 0; list-style-type: none; }
  743.  
  744. ol.notes li.note img.avatar {
  745. margin-right: 0.5em;
  746. vertical-align: middle;
  747. display: inline-block;
  748. width: 1em;
  749. height: 1em;
  750. border-radius:100%;
  751. border:3px solid {color:accent};
  752. }
  753.  
  754. /*----- pagination -----*/
  755.  
  756. #page-navigation {text-align: center;}
  757. #page-navigation a, .current-page {margin: 0 0.5em;}
  758.  
  759. /*----- taehyung's military wife -----*/
  760.  
  761. #credit {
  762. position: fixed;
  763. width:20px;
  764. height:20px;
  765. bottom: 20px;
  766. right: 20px;
  767. font-size: 15px;
  768. padding:5px;
  769. border-radius:100%;
  770. }
  771.  
  772. #credit i, #credit a {
  773. color:{color:accent};
  774. }
  775.  
  776. {CustomCSS}
  777.  
  778. /*----- tooltips -----*/
  779.  
  780. .tippy-tooltip.custom-theme {
  781. background-color: {color:accent};
  782. color: {color:background};
  783. text-align:center;
  784. }
  785.  
  786. </style>
  787. </head>
  788.  
  789. <!----- html ----->
  790.  
  791. <body>
  792.  
  793. <!--✻✻✻✻✻✻ npf audio player by @glenthemes ✻✻✻✻✻✻-->
  794. <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  795. <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  796. <script>
  797. tumblr_npf_audio({
  798. emptyTitleText: "Untitled track",
  799. emptyArtistText: "Untitled artist",
  800. emptyAlbumText: "Untitled album",
  801.  
  802. titleLabel: "Track:",
  803. artistLabel: "Artist:",
  804. albumLabel: "Album:"
  805. });
  806. </script>
  807. <style edit-npf-audio-player>
  808. .npf-audio-wrapper {
  809. --NPF-Audio-Buttons-Size: 1.4rem;
  810. --NPF-Audio-Buttons-Color: {color:accent};
  811. --NPF-Audio-Buttons-Spacing: 1.3rem;
  812. --NPF-Audio-Image-Size: 85px;
  813. --NPF-Audio-Image-Spacing: 0px;
  814. }
  815.  
  816. .npf-audio-background {
  817. background-color: {color:background};
  818. padding: 1.5rem;
  819. border-top-left-radius:{select:border radius};
  820. border-bottom-left-radius:{select:border radius};
  821. }
  822.  
  823. .npf-audio-title-label,
  824. .npf-audio-artist-label,
  825. .npf-audio-album-label {
  826. font-weight: bold;
  827. color:{color:accent};
  828. }
  829.  
  830. .npf-audio-title,
  831. .npf-audio-artist,
  832. .npf-audio-album {
  833. color: {color:text};
  834. }
  835. </style>
  836.  
  837. <main>
  838.  
  839. <!----- sidebar ----->
  840.  
  841. <aside id="sidebar">
  842. <div class="title"><span>www.{Name}.tumblr.com</span><div class="icons"><i class="ph ph-minus"></i> <i class="ph ph-x"></i></div></div>
  843. <img src="{image:sidebar}" id="side-img" alt="Sidebar image"/>
  844. <div id="header">about me</div>
  845. <div id="about"><div style="margin-top:8px;">{text:about}</div></div>
  846. <div id="header2">dni if you</div>
  847. <div id="dni"><div style="margin-top:8px;">{text:dni}</div></div>
  848. <div id="title2"><a href="/">{text:title}</a></div>
  849. <div id="description">{text:description}</div>
  850.  
  851. <!----- updates ----->
  852.  
  853. <div id="seokjin"><a title="click me!"><i class="ph ph-bell-ringing"style="margin-top:-0.1em;margin-left:-0.1em;"></i></a></div>
  854.  
  855. <div class="utabcontent" style="margin-top:13px;display:none;">
  856. <div class="bio">
  857. <h1>updates!</h1>
  858. {text:updates}
  859. </div>
  860. </div>
  861.  
  862. <!----- navigation ----->
  863. <nav>
  864. <a href="/"title="home"><i class="ph ph-house"></i></a>
  865. <a href="/ask"title="message"><i class="ph ph-chats"></i></a>
  866. <a href="/archive"title="archive"><i class="ph ph-archive"></i></a>
  867. <a href="{text:link 1 url}"title="{text:link 1 title}"><i class="ph ph-magic-wand"></i></a>
  868. <a href="{text:link 2 url}"title="{text:link 2 title}"><i class="ph ph-user"></i></a>
  869. <a href="{text:link 3 url}"title="{text:link 3 title}"><i class="ph ph-link"></i></a>
  870. <a href="{text:link 4 url}"title="{text:link 4 title}"><i class="ph ph-list"></i></a>
  871.  
  872. </nav>
  873.  
  874. </aside>
  875.  
  876. <section>
  877.  
  878. {block:TagPage}
  879. <article>
  880. <b>filed under:</b> #{Tag}
  881. </article>
  882. {/block:TagPage}
  883.  
  884. {block:DayPage}
  885. <article>
  886. <b>posts made on:</b> {Month} {DayOfMonth}, {Year}
  887. </article>
  888. {/block:DayPage}
  889.  
  890. <!----- POSTS ----->
  891.  
  892. {block:Posts}
  893. <article class="posts" id="{PostID}">
  894.  
  895. {block:PinnedPostLabel}
  896. <div class="pinned">
  897. <a href="{Permalink}" class="pinned-post"title="pinned"><div style="margin-top:-0.6px;"><i class="cp cp-pin-o"style="margin-left:0px;"></i></div></a>
  898. </div>
  899. {/block:PinnedPostLabel}
  900.  
  901. {block:Text}
  902. {block:Title}<h1 class="post-title">{Title}</h1>{/block:Title}
  903. {block:NotReblog}
  904. <li class="caption text-caption">
  905. {Body}
  906. </li>
  907. {/block:NotReblog}
  908. {block:RebloggedFrom}
  909. {block:Reblogs}
  910. <li class="caption text-caption">
  911. <img src="{PortraitURL-64}" class="user-icon">
  912. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  913. {Body}
  914. </li>
  915. {/block:Reblogs}
  916. {/block:RebloggedFrom}
  917. {/block:Text}
  918.  
  919. {block:Link}
  920. <a href="{URL}" class="link-wrap">
  921. {block:Thumbnail}<img src="{Thumbnail-HighRes}">{/block:Thumbnail}
  922. <div class="link">
  923. <div class="title">{Name}</div>
  924. {block:Excerpt}<div class="link-txt">{Excerpt}</div>{/block:Excerpt}
  925. {block:Host}<div class="link-host">{Host}</div>{/block:Host}
  926. </div>
  927. </a>
  928. {block:Description}
  929. {block:NotReblog}
  930. <li class="caption">
  931. {Description}
  932. </li>
  933. {/block:NotReblog}
  934. {/block:Description}
  935. {block:RebloggedFrom}
  936. {block:Reblogs}
  937. <li class="caption">
  938. <img src="{PortraitURL-64}" class="user-icon">
  939. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  940. {Body}
  941. </li>
  942. {/block:Reblogs}
  943. {/block:RebloggedFrom}
  944. {/block:Link}
  945.  
  946. {block:Photo}
  947. <div class="photo">
  948. {LinkOpenTag}<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>{LinkCloseTag}
  949. </div>
  950. {block:Caption}
  951. {block:NotReblog}
  952. <li class="caption">
  953. {Caption}
  954. </li>
  955. {/block:NotReblog}
  956. {block:RebloggedFrom}
  957. {block:Reblogs}
  958. <li class="caption">
  959. <img src="{PortraitURL-64}" class="user-icon">
  960. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  961. {Body}
  962. </li>
  963. {/block:Reblogs}
  964. {/block:RebloggedFrom}
  965. {/block:Caption}
  966. {/block:Photo}
  967.  
  968. {block:Photoset}
  969. <div class="photo">{Photoset-700}</div>
  970. {block:Caption}
  971. {block:NotReblog}
  972. <li class="caption">
  973. {Caption}
  974. </li>
  975. {/block:NotReblog}
  976. {block:RebloggedFrom}
  977. {block:Reblogs}
  978. <li class="caption">
  979. <img src="{PortraitURL-64}" class="user-icon">
  980. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  981. {Body}
  982. </li>
  983. {/block:Reblogs}
  984. {/block:RebloggedFrom}
  985. {/block:Caption}
  986. {/block:Photoset}
  987.  
  988. {block:Video}
  989. <div class="video">{Video-500}</div>
  990. {block:Caption}
  991. {block:NotReblog}
  992. <li class="caption">
  993. {Caption}
  994. </li>
  995. {/block:NotReblog}
  996. {block:RebloggedFrom}
  997. {block:Reblogs}
  998. <li class="caption">
  999. <img src="{PortraitURL-64}" class="user-icon">
  1000. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1001. {Body}
  1002. </li>
  1003. {/block:Reblogs}
  1004. {/block:RebloggedFrom}
  1005. {/block:Caption}
  1006. {/block:Video}
  1007.  
  1008. {block:Quote}
  1009. <div class="quote">{Quote}</div>
  1010. {block:Source}<div class="source">{Source}</div>{/block:Source}
  1011. {/block:Quote}
  1012.  
  1013. {block:Chat}
  1014. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1015. <ul class="chat">{block:Lines}
  1016. <li>
  1017. {block:Label}<div class="chatter">{Label}</div>{/block:Label}
  1018. {Line}
  1019. </li>
  1020. {/block:Lines}</ul>
  1021. {/block:Chat}
  1022.  
  1023. {block:Answer}
  1024. <div class="ask-wrap">
  1025. <img src="{AskerPortraitURL-64}" class="ask-icon">
  1026. <div class="asking"><a href="{Permalink}">{Asker}</a> sent:</div>
  1027. <div class="question">{Question}</div>
  1028. </div>
  1029. {block:Answerer}
  1030. <li class="caption">
  1031. <img src="{AnswererPortraitURL-64}" class="user-icon">
  1032. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Answerer}</a> <font style="color:{color:text};">replied:</font></div>
  1033. {Answer}
  1034. </li>
  1035. {/block:Answerer}
  1036. {block:NotReblog}
  1037. <li class="caption">
  1038. {Replies}
  1039. </li>
  1040. {/block:NotReblog}
  1041. {block:RebloggedFrom}
  1042. {block:Reblogs}
  1043. <li class="caption">
  1044. <img src="{PortraitURL-64}" class="user-icon">
  1045. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1046. {Body}
  1047. </li>
  1048. {/block:Reblogs}
  1049. {/block:RebloggedFrom}
  1050. {/block:Answer}
  1051.  
  1052. {block:Audio}
  1053. <div class="audiopost">
  1054. <div class="audiobox">
  1055. <div class="button">
  1056. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  1057. </div>
  1058. </div>
  1059. {block:AlbumArt}
  1060. <img src="{AlbumArtURL}" class="album-art">
  1061. {/block:AlbumArt}
  1062. <div class="audioinfo">
  1063. {block:TrackName}<li class="track">{TrackName}</li>{/block:TrackName}
  1064. {block:Artist}<li>{Artist}</li>{/block:Artist}
  1065. {block:Album}<li>{Album}</li>{/block:Album}
  1066. </div>
  1067. </div>
  1068. {block:Caption}
  1069. {block:NotReblog}
  1070. <li class="caption">
  1071. {Caption}
  1072. </li>
  1073. {/block:NotReblog}
  1074. {block:RebloggedFrom}
  1075. {block:Reblogs}
  1076. <li class="caption">
  1077. <img src="{PortraitURL-64}" class="user-icon">
  1078. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1079. {Body}
  1080. </li>
  1081. {/block:Reblogs}
  1082. {/block:RebloggedFrom}
  1083. {/block:Caption}
  1084. {/block:Audio}
  1085.  
  1086. {/block:HasTags}
  1087. <!----- info ----->
  1088.  
  1089. {block:Date}
  1090. <div class="info">
  1091. <a href="{Permalink}"title="{TimeAgo}"style="padding-left:7px;margin-top:0px;">{DayOfWeek}</a>
  1092.  
  1093. <!----- buttons ----->
  1094. <div class="buttons">
  1095. {block:NoteCount}<a href="{Permalink}"title="{NoteCountWithLabel}"><i class="ph-notepad"style="font-size:16px;"></i></a>{/block:NoteCount}
  1096. <a href="{ReblogURL}" target="_blank"title="reblog"style="margin-top:-4px;"><i class="cp cp-reblog-alt"style="font-size:13px;"></i></a>
  1097. <a class="likeb" href="#"title="like"style="margin-top:2px;">{LikeButton}<span class="actual-button"><i class="ph ph-heart"style="font-size:16px;"></i></span></a>
  1098.  
  1099. {block:PermalinkPage}
  1100.  
  1101. {block:RebloggedFrom}
  1102. <a href="{ReblogParentURL}"title="reblogged from {ReblogParentName}"><i class="ph-sort-descending"style="font-size:16px;"></i></a>
  1103. <a href="{ReblogRootURL}"title="posted by {ReblogRootName}"><i class="ph-note-pencil"style="font-size:16px;"></i></a>
  1104. {/block:RebloggedFrom}
  1105. {block:ContentSource}<a href="{SourceURL}">{lang:Source}</a>{/block:ContentSource}
  1106.  
  1107. {/block:PermalinkPage}
  1108. </div>
  1109. </div>
  1110. {/block:Date}
  1111.  
  1112. <!----- tags ----->
  1113.  
  1114. {block:HasTags}
  1115. <div class="tags">
  1116. <b>filed under:</b>
  1117. {block:Tags}
  1118. <a href="{TagURL}">{Tag}</a></li>
  1119. {/block:Tags}
  1120. </div>
  1121. {/block:HasTags}
  1122.  
  1123. <!----- notes ----->
  1124.  
  1125. {block:PermalinkPage}{block:Date}
  1126. {block:NoteCount}{block:PostNotes}
  1127. <div class="notes">
  1128. {PostNotes-64}
  1129. </div>
  1130. {/block:PostNotes}{/block:NoteCount}
  1131. {/block:Date}{/block:PermalinkPage}
  1132.  
  1133. </article>
  1134.  
  1135. {/block:Posts}
  1136.  
  1137. <!----- pagination ----->
  1138.  
  1139. {block:Pagination}
  1140. <article id="page-navigation">
  1141. {block:PreviousPage}<a href="{PreviousPage}"title="previous"><i class="ph ph-caret-double-left"></i></a>{/block:PreviousPage}
  1142. {block:NextPage}<a href="{NextPage}"title="forward"><i class="ph ph-caret-double-right"></i></a>{/block:NextPage}
  1143. </article>
  1144. {/block:Pagination}
  1145.  
  1146. </section>
  1147.  
  1148. </main>
  1149.  
  1150. <!----- taehyung's military wife ----->
  1151.  
  1152. <a href="https://gloriapritchetts.tumblr.com" title="by drea" id="credit"><i class="ph ph-butterfly"style="margin-top:2px;margin-left:2px;"></i></a>
  1153.  
  1154. <!----- tooltips ----->
  1155.  
  1156. <script src="https://unpkg.com/popper.js@1"></script>
  1157. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1158. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  1159.  
  1160. <script>
  1161. tippy('a[title]', {
  1162. theme: 'custom',
  1163. arrow: tippy.round,
  1164. zIndex: 9999999999,
  1165. maxWidth: 300,
  1166.  
  1167. content(reference) {
  1168. const title = reference.getAttribute('title');
  1169. reference.removeAttribute('title');
  1170. return title;
  1171. },
  1172. });
  1173. </script>
  1174.  
  1175. </body>
  1176. </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!