API tools faq
paste
Advertisement
likesmagic

just one day by @gloriapritchetts

likesmagic
Jun 8th, 2024
387
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 34.93 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=ABeeZee:ital@0;1&family=Karla:ital,wght@0,200..800;1,200..800&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.  
  24. <script src="//pull.cappuccicons.com/cpf.js"></script>
  25. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  26. <title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  27.  
  28. <link rel="shortcut icon" href="{Favicon}">
  29. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  30. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  31. <meta charset="utf-8">
  32. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  33.  
  34. <!---
  35.  
  36. ♡ CODE BY GLORIAPRITCHETTS ♡
  37. rules and credits @ gloriapritchetts.tumblr.com/themes
  38.  
  39. --->
  40.  
  41. <meta name="image:sidebar" content="https://placehold.co/330x330/EEE/31343C"/>
  42. <meta name="image:header" content="https://placehold.co/580x200/EEE/31343C"/>
  43.  
  44. <meta name="color:background" content="#0f0f0f"/>
  45. <meta name="color:posts" content="#121212"/>
  46. <meta name="color:text" content="#fff"/>
  47. <meta name="color:accent" content="#64bffa"/>
  48. <meta name="color:borders" content="#181818"/>
  49. <meta name="color:gradient 1" content="#64bffa"/>
  50. <meta name="color:gradient 2" content="#c7e6f7"/>
  51.  
  52. <meta name="select:font" content="karla"/>
  53. <meta name="select:font" content="roboto"/>
  54. <meta name="select:font" content="quicksand"/>
  55. <meta name="select:font" content="nunito"/>
  56. <meta name="select:font" content="poppins"/>
  57. <meta name="select:font" content="abeezee"/>
  58. <meta name="select:font" content="montserrat"/>
  59. <meta name="select:font" content="varela round"/>
  60.  
  61. <meta name="select:borders" content="0px"/>
  62. <meta name="select:borders" content="1px"/>
  63.  
  64. <meta name="select:border radius" content="0px"/>
  65. <meta name="select:border radius" content="5px"/>
  66. <meta name="select:border radius" content="10px"/>
  67.  
  68. <meta name="text:tracking" content="tag"/>
  69.  
  70. <meta name="text:link 1 url" content="/"/>
  71. <meta name="text:link 1 title" content="about"/>
  72. <meta name="text:link 2 url" content="/"/>
  73. <meta name="text:link 2 title" content="gifs"/>
  74. <meta name="text:link 3 url" content="/"/>
  75. <meta name="text:link 3 title" content="links"/>
  76.  
  77. <meta name="text:title" content="title"/>
  78. <meta name="text:description" content="this looks best at one line"/>
  79.  
  80. <meta name="text:name" content="name"/>
  81. <meta name="text:age" content="age"/>
  82. <meta name="text:pronouns" content="pronouns"/>
  83. <meta name="text:zodiac" content="zodiac"/>
  84.  
  85. <meta name="text:working on" content="working on"/>
  86. <meta name="text:watching" content="watching"/>
  87. <meta name="text:listening to" content="listening to"/>
  88. <meta name="text:reading" content="reading"/>
  89.  
  90. <!----- css ----->
  91.  
  92. <style type="text/css">
  93.  
  94. /*----- general -----*/
  95.  
  96. ::-webkit-scrollbar {
  97. width: 3px;
  98. background: {color:background};
  99. border-radius:{select:border radius};
  100. }
  101.  
  102. ::-webkit-scrollbar-thumb {
  103. background: {color:accent};
  104. border-radius:{select:border radius};
  105. }
  106.  
  107. .scrollToTop {
  108. padding:10px;
  109. text-decoration: none;
  110. position:fixed;
  111. top:90px;
  112. right:-5px;
  113. display:none;
  114. }
  115.  
  116. .scrollToTop:hover{
  117. text-decoration:none;
  118. }
  119.  
  120. .scrollToTop i {
  121. font-size:17px;
  122. }
  123.  
  124. body {
  125. font-family: {select:font};
  126. font-size: 13.5px;
  127. color: {color:text};
  128. background-color: {color:background};
  129. line-height: 135%;
  130. word-wrap: break-word;
  131. letter-spacing: 0.3px;
  132. margin: 0;
  133. padding: 0;
  134. }
  135.  
  136. a {
  137. color: {color:accent};
  138. border-bottom:1px solid {color:gradient 1};
  139. font-weight:700;
  140. position: relative;
  141. text-decoration: none;
  142. -webkit-transition: all 0.4s ease;
  143. transition: all 0.4s ease;
  144. -moz-transition: all 0.4s ease;
  145. -o-transition: all 0.4s ease;
  146. }
  147.  
  148. a:hover {
  149. border-bottom:1px solid {color:gradient 2};
  150. font-weight:700;
  151. text-decoration:none;
  152. color:{color:gradient 2};
  153. text-shadow:none;
  154. -webkit-transition: all 0.4s ease;
  155. transition: all 0.4s ease;
  156. -moz-transition: all 0.4s ease;
  157. -o-transition: all 0.4s ease;
  158. }
  159.  
  160. blockquote {
  161. padding: 0 0 0 1.5em;
  162. border-left: 1px solid {color:borders};
  163. margin: 1.5em 0 1.5em 1.5em;
  164. }
  165.  
  166. h1.post-title {
  167. font-size:23px;
  168. color:{color:accent};
  169. text-align:left;
  170. }
  171.  
  172. h1 {
  173. font-size:16px;
  174. color:{color:accent};
  175. text-align:left;
  176. line-height:22px;
  177. border:none;
  178. }
  179.  
  180. h1 a {
  181. font-size:16px;
  182. color:{color:accent};
  183. text-align:left;
  184. line-height:22px;
  185. border:none;
  186. }
  187.  
  188. h1 a:hover {
  189. font-size:16px;
  190. color:{color:accent};
  191. text-align:left;
  192. line-height:22px;
  193. border:none;
  194. }
  195.  
  196. h2 {
  197. font-size:15px;
  198. color:{color:posts};
  199. border-radius:{select:border radius};
  200. padding:10px;
  201. text-align:center;
  202. line-height:22px;
  203. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  204. text-transform:justify;
  205. }
  206.  
  207. h2 a {
  208. font-size:15px;
  209. color:{color:posts};
  210. border:none;
  211. }
  212.  
  213. h2 a:hover {
  214. font-size:15px;
  215. color:{color:posts};
  216. border:none;
  217. }
  218.  
  219. bold, b, strong {
  220. font-weight:bold;
  221. color:{color:accent};
  222. }
  223.  
  224. i, em, italic {
  225. color:{color:accent};
  226. }
  227.  
  228. small, sub, sup {
  229. font-size:13px;
  230. }
  231.  
  232. .tmblr-iframe-compact .tmblr-iframe--unified-controls { z-index: 999999999!important;margin-top: 1em;padding-right:4em;opacity: 0;visibility: hidden;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-ms-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s; }
  233.  
  234. .controls-button i {
  235. position:absolute;
  236. top: 0px;
  237. left: 0px;
  238. margin-left:-0.5em;
  239. margin-top:-0.5em;
  240. z-index: 1000;
  241. }
  242.  
  243. body.controls-click .tmblr-iframe {
  244. opacity: 1.0;
  245. visibility: visible;
  246. -webkit-transition: all 0.5s;
  247. -moz-transition: all 0.5s;
  248. -ms-transition: all 0.5s;
  249. -o-transition: all 0.5s;
  250. transition: all 0.5s;
  251. }
  252.  
  253. /*----- sidebar -----*/
  254.  
  255. #sidebar {
  256. width: 330px!important;
  257. height:390px;
  258. position: fixed;
  259. top: 190px;
  260. margin-left:620px!important;
  261. background:{color:posts};
  262. padding:20px;
  263. border-radius:{select:border radius};
  264. border:{select:borders} solid {color:borders};
  265. }
  266.  
  267. #side-img {
  268. margin-left:0em;
  269. width:330px;
  270. height:330px;
  271. object-fit: cover;
  272. z-index:99999999999!important;
  273. }
  274.  
  275. #side-img img {
  276. width:330px;
  277. height:330px;
  278. }
  279.  
  280. #side-header {
  281. position:fixed;
  282. text-align:center!important;
  283. width:370px;
  284. margin-left:46em;
  285. margin-top:1.6em;
  286. height:48px;
  287. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  288. border-radius:{select:border radius};
  289. color:{color:posts};
  290. }
  291.  
  292. #title {
  293. color:{color:posts};
  294. margin-top:1em;
  295. margin-left:1em;
  296. font-size:16px;
  297. font-weight:bold;
  298. text-align:center!important;
  299. }
  300.  
  301. #description {
  302. margin-top:1em;
  303. margin-left:0;
  304. position:absolute;
  305. width:311px;
  306. height:18px;
  307. padding:10px;
  308. text-align:center;
  309. overflow-y:hidden;
  310. background:{color:background};
  311. border-radius:{select:border radius};
  312. }
  313.  
  314. #linkiez {
  315. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  316. width: 370px;
  317. position: fixed;
  318. text-align:center;
  319. height:55px;
  320. margin-top:40.5em;
  321. margin-left:46em;
  322. border-radius:{select:border radius};
  323. }
  324.  
  325. #linkiez a {
  326. border-bottom:0px;
  327. margin:0.7em!important;
  328. }
  329.  
  330. #linkiez i {
  331. margin-top:0.6em!important;
  332. border-radius:100%;
  333. background:{color:posts};
  334. color:{color:accent};
  335. padding:6px;
  336. font-size:20px;
  337. -webkit-transition: all 0.4s ease;
  338. transition: all 0.4s ease;
  339. -moz-transition: all 0.4s ease;
  340. -o-transition: all 0.4s ease;
  341. }
  342.  
  343. #linkiez i:hover {
  344. background-color:{color:gradient 2};
  345. color:{color:posts};
  346. -webkit-transition: all 0.4s ease;
  347. transition: all 0.4s ease;
  348. -moz-transition: all 0.4s ease;
  349. -o-transition: all 0.4s ease;
  350. }
  351.  
  352. #header {
  353. width:540px;
  354. height:240px;
  355. background:{color:posts};
  356. padding:20px;
  357. position:relative;
  358. border:{select:borders} solid {color:borders};
  359. border-radius:{select:border radius};
  360. }
  361.  
  362. #side-img2 {
  363. margin-top:0em;
  364. margin-left:0em;
  365. width:580px;
  366. height:200px;
  367. object-fit: cover;
  368. z-index:99999999999!important;
  369. }
  370.  
  371. #side-img2 img {
  372. width:580px;
  373. height:200px;
  374. }
  375.  
  376. #joon {
  377. margin-left:0px;
  378. margin-top:0px;
  379. text-transform:uppercase;
  380. font-size:11px;
  381. text-align:left;
  382. line-height:-5px!important;
  383. }
  384.  
  385. #joon img {
  386. width:30px;
  387. height:30px;
  388. }
  389.  
  390. #tracking {
  391. margin-top:-2.6em!important;
  392. margin-left:30em;
  393. width:200px;
  394. padding:5px;
  395. text-align:center;
  396. overflow-y:hidden;
  397. background:{color:background};
  398. border-radius:{select:border radius};
  399. text-transform:uppercase;
  400. font-size:11px;
  401. }
  402.  
  403. /*----- header -----*/
  404.  
  405. nav {
  406. text-align:center;
  407. position:fixed;
  408. z-index:99999999999!important;
  409. top:0px;
  410. right:0px;
  411. width:100%;
  412. height:25px;
  413. padding:10px;
  414. }
  415.  
  416. nav a {
  417. text-align:center;
  418. border-bottom:0px solid;
  419. margin: auto 0.95em;
  420. -webkit-transition: all 0.4s ease;
  421. transition: all 0.4s ease;
  422. -moz-transition: all 0.4s ease;
  423. -o-transition: all 0.4s ease;
  424. }
  425.  
  426. nav i {
  427. margin-top:0.1em;
  428. font-size:22px;
  429. color:{color:accent};
  430. -webkit-transition: all 0.4s ease;
  431. transition: all 0.4s ease;
  432. -moz-transition: all 0.4s ease;
  433. -o-transition: all 0.4s ease;
  434. }
  435.  
  436. nav a:hover, nav i:hover {
  437. font-weight:bold;
  438. border-bottom:0px solid;
  439. text-decoration:none;
  440. text-shadow:none;
  441. color:{color:gradient 2};
  442. -webkit-transition: all 0.4s ease;
  443. transition: all 0.4s ease;
  444. -moz-transition: all 0.4s ease;
  445. -o-transition: all 0.4s ease;
  446. }
  447.  
  448. #controlz {
  449. position:fixed;
  450. margin-top:1.5em;
  451. margin-right:1.2em;
  452. top:0px;
  453. right:0px;
  454. }
  455.  
  456. #seokjin {
  457. position:fixed;
  458. width:15px;
  459. height:15px;
  460. padding:10px;
  461. top:2.3em;
  462. right:2em;
  463. transition: all .4s ease-in-out;
  464. z-index:9999999999!important;
  465. }
  466.  
  467. #seokjin i {
  468. font-size:21px;
  469. margin-bottom:0.5em;
  470. color:{color:accent};
  471. }
  472.  
  473. #seokjin a:hover, #seokjin i:hover {
  474. text-shadow:none;
  475. color:{color:gradient 2};
  476. }
  477.  
  478. .utabcontent {
  479. width: 349px;
  480. position: absolute;
  481. background:{color:posts};
  482. padding:10px;
  483. border-radius:{select:border radius};
  484. height:409px;
  485. top:50%;
  486. left:50%;
  487. margin-left:12em;
  488. margin-top:169px!important;
  489. overflow-y:hidden;
  490. z-index:9999999999999999999999!important;
  491. }
  492.  
  493. .bio {
  494. position:absolute;
  495. width:330px;
  496. height:140px;
  497. padding:5px;
  498. border-radius:{select:border radius};
  499. text-align:left;
  500. overflow-y:scroll;
  501. }
  502.  
  503. .bio kook {
  504. padding:5px;
  505. border-radius:{select:border radius};
  506. background:{color:gradient 2};
  507. color:{color:posts};
  508. }
  509.  
  510. .bio yoongi {
  511. padding:5px;
  512. border-radius:{select:border radius};
  513. background:{color:accent};
  514. color:{color:posts};
  515. }
  516.  
  517. .bio li {
  518. list-style-type:none;
  519. margin-bottom:1.5em;
  520. margin-right:0.8em;
  521. }
  522.  
  523. .credit {
  524. position:fixed;
  525. top:5.3em;
  526. right:5px;
  527. }
  528.  
  529. /*----- posts -----*/
  530.  
  531. main {
  532. position: relative;
  533. width: calc(250px + 540px + 150px);
  534. margin: auto;
  535. }
  536.  
  537. section {
  538. position:relative;
  539. top:50%;
  540. left:50%;
  541. width: 580px;
  542. margin-left: -570px;
  543. margin-top:100px;
  544. padding:20px;
  545. }
  546.  
  547. article {
  548. width: 540px;
  549. position: relative;
  550. margin-bottom:100px!important;
  551. background:{color:posts};
  552. padding:20px;
  553. border:{select:borders} solid {color:borders};
  554. border-radius:{select:border radius};
  555. }
  556.  
  557. .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%; }
  558.  
  559. .caption {
  560. margin-top: 1em;
  561. list-style-type: none;
  562. }
  563.  
  564. li {
  565. list-style-type:circle;
  566. }
  567.  
  568. li::marker {
  569. color: {color:accent};
  570. }
  571.  
  572. .text-caption:first-of-type { margin-top: 0; }
  573.  
  574. .user-icon {
  575. display: inline-block;
  576. vertical-align: middle;
  577. width: 1em;
  578. height: 1em;
  579. margin-right: 0.5em;
  580. margin-top:0.45em;
  581. border-radius:100%;
  582. border:2px solid {color:accent};
  583. }
  584.  
  585. .username, .username a {
  586. display: inline-block;
  587. vertical-align: middle;
  588. font-weight: bold;
  589. color:{color:accent};
  590. text-decoration:none;
  591. border-bottom:0px solid;
  592. }
  593.  
  594. .username a:hover {
  595. font-weight: bold;
  596. color:{color:gradient 2};
  597. text-decoration:none;
  598. border-bottom:0px solid;
  599. }
  600.  
  601. .deactive::after {
  602. content: '(deactivated)';
  603. margin-left: 0.5em;
  604. opacity: .25;
  605. color: {color:text};
  606. }
  607.  
  608. p.tmblr-attribution {margin-top: 1em !important;}
  609.  
  610. a.link-wrap {
  611. display: block;
  612. border: 1px solid {color:borders};
  613. }
  614.  
  615. .link { padding: 2em; }
  616.  
  617. .link-host, .link-txt { margin-top: 1.5em; }
  618.  
  619. .npf-link-block {
  620. margin-top: 1.5em;
  621. background-color: inherit;
  622. border: 1px solid inherit;
  623. color: inherit;
  624. }
  625.  
  626. img {
  627. margin: 0;
  628. display: block;
  629. height: auto;
  630. max-width: 100%;
  631. margin-bottom:5px;
  632. border-radius:{select:border radius};
  633. }
  634.  
  635. .photo-slideshow,
  636. .npf_photoset {
  637. border-radius:{select:border radius};
  638. }
  639.  
  640. .vignette, #vignette {opacity: 0;}
  641. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.75) !important;}
  642.  
  643. .lightbox-image, #tumblr_lightbox img {
  644. box-shadow: none !important;
  645. border-radius: 0 !important;
  646. max-width: none;
  647. }
  648.  
  649. #tumblr_lightbox_caption, .lightbox-caption {
  650. color: #fff !important;
  651. font-family: inherit;
  652. margin-top: 1em !important;
  653. }
  654.  
  655. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  656. margin-left: 0 !important;
  657. margin-right: 0 !important;
  658. }
  659.  
  660. .quote { line-height: 160%; font-size: 1.25em; }
  661.  
  662. .quote p:first-of-type { margin-top: 0; }
  663. .quote p:last-of-type { margin-bottom: 0; }
  664.  
  665. .source { margin-top: 1.5em; }
  666.  
  667. .chat { padding: 0; margin: 0; }
  668. .chat li { list-style-type: none; margin-top: 1em; }
  669. .chat li:first-of-type { margin-top: 0; }
  670. .chatter { font-weight: bold; }
  671.  
  672. p.npf_chat, p.npf_chat b {font-family: inherit;}
  673.  
  674. /*----- asks -----*/
  675.  
  676. .ask-wrap {
  677. background:{color:background};
  678. padding:15px;
  679. border-radius:{select:border radius};
  680. text-align:right;
  681. }
  682.  
  683. .ask-wrap .asking {
  684. display: inline-block;
  685. margin-left: 0em;
  686. font-weight: bold;
  687. color:{color:accent};
  688. text-transform:justify;
  689. word-spacing:0px;
  690. padding-left:2.5px;
  691. }
  692.  
  693. .asking a {
  694. border-bottom:0px solid;
  695. }
  696.  
  697. .asking a:hover {
  698. color:{color:gradient 2};
  699. border-bottom:0px solid;
  700. }
  701.  
  702. .question { margin-top: 0.5em; }
  703. .question p:first-of-type { margin-top: 0; }
  704. .question p:last-of-type { margin-bottom: 0; }
  705.  
  706. .answer {
  707. margin-top:1em;
  708. display: inline-block;
  709. font-weight: bold;
  710. font-size:13.5px;
  711. color:{color:accent};
  712. text-align:left;
  713. text-transform:justify;
  714. word-spacing:0px;
  715. }
  716.  
  717. .answer a {
  718. border-bottom:0px solid;
  719. }
  720.  
  721. .answer a:hover {
  722. color:{color:gradient 2};
  723. border-bottom:0px solid;
  724. }
  725.  
  726. .answer2 {
  727. margin-top:1em;
  728. font-weight:normal;
  729. text-transform:lowercase;
  730. text-align:left;
  731. font-family: {text:font};
  732. font-size: 13.5px;
  733. color: {color:text};
  734. background:{color:background};
  735. padding:15px;
  736. border-radius:{select:border radius};
  737. }
  738.  
  739. .ask-icon {
  740. display: inline-block;
  741. vertical-align: middle;
  742. width: 1em;
  743. height: 1em;
  744. margin-right: 0.4em;
  745. margin-top:0.4em;
  746. border-radius:100%;
  747. border:2px solid {color:accent};
  748. }
  749.  
  750. /*----- info -----*/
  751.  
  752. .info {
  753. height:21px;
  754. margin-top: 1.3em;
  755. padding:10px;
  756. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  757. border-radius:{select:border radius};
  758. }
  759.  
  760. .info a {
  761. display: inline-block;
  762. vertical-align: middle;
  763. text-transform:lowercase;
  764. font-weight:bold;
  765. color:{color:posts};
  766. border-bottom:0px solid;
  767. }
  768.  
  769. .info a:hover {
  770. text-decoration:none;
  771. color:{color:posts};
  772. text-shadow:none;
  773. border-bottom:0px solid;
  774. }
  775.  
  776. .info i {
  777. color:{color:posts};
  778. font-size:13px;
  779. margin-right:0.5em;
  780. }
  781.  
  782. .pinned {
  783. width:10px;
  784. padding:10px;
  785. height:10px;
  786. top:-0.7em;
  787. left:13.6em;
  788. background: {color:posts};
  789. border:{select:borders} solid {color:borders};
  790. position:absolute;
  791. border-radius:{select:border radius};
  792. z-index:999999!important;
  793. font-size:20px;
  794. color:{color:accent};
  795. text-align:center;
  796. -webkit-transition: all 0.4s ease;
  797. transition: all 0.4s ease;
  798. -moz-transition: all 0.4s ease;
  799. -o-transition: all 0.4s ease;
  800. }
  801.  
  802. .pinned a {
  803. text-decoration:none;
  804. text-shadow:none;
  805. border:none;
  806. }
  807.  
  808. .likeb {
  809. position: relative;
  810. display: inline-block;
  811. height: 1.6em;
  812. margin-bottom: 0px;
  813. margin-top:2px;
  814. }
  815.  
  816. .likeb .like_button iframe {
  817. position: absolute;
  818. top: 0;
  819. left: 0;
  820. bottom: 0;
  821. right: 0;
  822. z-index: 2;
  823. opacity: 0;
  824. }
  825.  
  826. .like_button iframe {width: 100% !important; height: 100% !important;}
  827. .likeb .liked + .actual-button {}
  828. .likeb .liked + .actual-button:after {content: '';}
  829.  
  830. .buttons {
  831. margin-top:-19px;
  832. text-align:right;
  833. }
  834.  
  835. .buttons a {
  836. margin-left:0em;
  837. margin-right:0.4em;
  838. color:{color:posts};
  839. border-bottom:0px solid;
  840. -webkit-transition: all 0.4s ease;
  841. transition: all 0.4s ease;
  842. -moz-transition: all 0.4s ease;
  843. -o-transition: all 0.4s ease;
  844. }
  845.  
  846. .buttons i {
  847. font-size:13px;
  848. margin-right:0.3em;
  849. color:{color:posts};
  850. -webkit-transition: all 0.4s ease;
  851. transition: all 0.4s ease;
  852. -moz-transition: all 0.4s ease;
  853. -o-transition: all 0.4s ease;
  854. }
  855.  
  856. .buttons i:hover, .buttons a:hover {
  857. color:{color:posts};
  858. border-bottom:0px solid;
  859. -webkit-transition: all 0.4s ease;
  860. transition: all 0.4s ease;
  861. -moz-transition: all 0.4s ease;
  862. -o-transition: all 0.4s ease;
  863. }
  864.  
  865. .tags {
  866. word-wrap: break-word;
  867. margin-top:1em!important;
  868. margin-left:0em;
  869. }
  870.  
  871. .tags a {
  872. margin-right:0em;
  873. color:{color:text};
  874. font-weight:normal;
  875. padding-right:0.4em;
  876. border-bottom:0px solid;
  877. }
  878.  
  879. .tags a:hover {
  880. text-decoration:none;
  881. color:{color:gradient 2};
  882. text-shadow:none;
  883. border-bottom:0px solid;
  884. }
  885.  
  886. .tags a:before {
  887. content: '#';
  888. }
  889.  
  890. .tags a:after {
  891. content: ',';
  892. }
  893.  
  894. .tags a:last-child:after {
  895. content: '.';
  896. }
  897.  
  898. .tags b {
  899. color:{color:accent};
  900. margin-right:0.5em;
  901. text-transform:lowercase;
  902. }
  903.  
  904. /*----- notes -----*/
  905.  
  906. .notes { margin-top:-1em; }
  907. .notes a { color:{color:accent}; text-decoration:none;border-bottom:0px solid; }
  908. .notes a:hover { color:{color:gradient 2}; text-decoration:none;border-bottom:0px solid; }
  909.  
  910. ol.notes {
  911. max-width: 100%;
  912. padding: 0;
  913. margin: 2em 0 0 0;
  914. text-align:left;
  915. }
  916.  
  917. ol.notes li.note { padding: 0.3em 0; list-style-type: none; }
  918.  
  919. ol.notes li.note img.avatar {
  920. margin-right: 0.5em;
  921. vertical-align: middle;
  922. display: inline-block;
  923. width: 1em;
  924. height: 1em;
  925. border-radius:100%;
  926. border:3px solid {color:accent};
  927. }
  928.  
  929. /*----- pagination -----*/
  930.  
  931. #page-navigation {text-align: center;}
  932. #page-navigation a, .current-page {margin: 0 0.5em;}
  933. #page-navigation a { border-bottom:none; }
  934.  
  935. /*----- taehyung's military wife -----*/
  936.  
  937. #credit {
  938. position: fixed;
  939. width:20px;
  940. height:20px;
  941. bottom: 20px;
  942. right: 20px;
  943. font-size: 15px;
  944. padding:5px;
  945. }
  946.  
  947. #credit i, #credit a {
  948. color:{color:accent};
  949. border-bottom:0px solid;
  950. }
  951.  
  952. {CustomCSS}
  953.  
  954. /*----- tooltips -----*/
  955.  
  956. .tippy-tooltip.custom-theme {
  957. background-color: {color:accent};
  958. color: {color:posts};
  959. text-align:center;
  960. font-size:12.5px;
  961. border-radius:{select:border radius};
  962. }
  963.  
  964. </style>
  965.  
  966. <!--✻✻✻✻✻✻ UN-BLUE POLLS by @glenthemes ✻✻✻✻✻✻--> <link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet"> <style> .poll-post { --Poll-Question-Font-Size: 16px; --Poll-Option-Background-Color: {color:accent}; --Poll-Option-Corner-Rounding: 18px; --Poll-Option-Border-Size: 0px; --Poll-Option-Border-Color: {color:borders}; --Poll-Option-Padding: 10px; --Poll-Option-Font-Size: 13.5px; --Poll-Option-Spacing: 10px; --Poll-Option-Text-Color: {color:posts}; --Poll-Option-HOVER-Border-Color: none; --Poll-Option-HOVER-Background-Color: {color:gradient 2}; --Poll-Option-HOVER-Text-Color: {color:accent}; --Poll-Option-HOVER-Speed: 0.4s; } </style>
  967.  
  968. </head>
  969.  
  970. <!----- html ----->
  971.  
  972. <body>
  973.  
  974. <!--✻✻✻✻✻✻ npf audio player by @glenthemes ✻✻✻✻✻✻-->
  975. <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  976. <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  977. <script>
  978. tumblr_npf_audio({
  979. emptyTitleText: "Untitled track",
  980. emptyArtistText: "Untitled artist",
  981. emptyAlbumText: "Untitled album",
  982.  
  983. titleLabel: "Track:",
  984. artistLabel: "Artist:",
  985. albumLabel: "Album:"
  986. });
  987. </script>
  988. <style edit-npf-audio-player>
  989. .npf-audio-wrapper {
  990. --NPF-Audio-Buttons-Size: 1.4rem;
  991. --NPF-Audio-Buttons-Color: {color:accent};
  992. --NPF-Audio-Buttons-Spacing: 1.3rem;
  993. --NPF-Audio-Image-Size: 72px;
  994. --NPF-Audio-Image-Spacing: 5px;
  995. }
  996.  
  997. .npf-audio-background {
  998. background-color: {color:background};
  999. padding: 1.5rem;
  1000. border-radius:{select:border radius};
  1001. margin-top:-0.4em;
  1002. }
  1003.  
  1004. .npf-audio-title-label,
  1005. .npf-audio-artist-label,
  1006. .npf-audio-album-label {
  1007. font-weight: bold;
  1008. color:{color:accent};
  1009. }
  1010.  
  1011. .npf-audio-title,
  1012. .npf-audio-artist,
  1013. .npf-audio-album {
  1014. color: {color:text};
  1015. }
  1016.  
  1017. </style>
  1018.  
  1019. <main>
  1020.  
  1021. <!----- sidebar ----->
  1022.  
  1023. <div id="side-header">
  1024. <div id="title">{text:title}</div>
  1025. </div>
  1026.  
  1027. <aside id="sidebar">
  1028.  
  1029. <img src="{image:sidebar}" id="side-img">
  1030. <div id="description">{text:description}</div>
  1031.  
  1032. </aside>
  1033.  
  1034. <div id="linkiez">
  1035. <a href="/"title="home"><i class="ph ph-house"></i></a>
  1036. <a href="/ask"title="message"><i class="ph ph-chats"></i></a>
  1037. <a href="/archive"title="archive"><i class="ph ph-archive"></i></a>
  1038. <a href="{text:link 1 url}"title="{text:link 1 title}"><i class="ph ph-user"></i></a>
  1039. <a href="{text:link 2 url}"title="{text:link 2 title}"><i class="ph ph-magic-wand"></i></a>
  1040. <a href="{text:link 3 url}"title="{text:link 3 title}"><i class="ph ph-list"></i></a>
  1041. </div>
  1042.  
  1043. <nav>
  1044.  
  1045. <!----- updates ----->
  1046.  
  1047. <div id="seokjin"><a title="click me!"><i class="ph ph-bell-ringing"></i></a>
  1048.  
  1049. <!----- taehyung's military wife ----->
  1050.  
  1051. <a href="https://gloriapritchetts.tumblr.com" class="credit"title="by drea"><i class="ph ph-butterfly"style="font-size:20.5px;"></i></a>
  1052.  
  1053. <a href="#" class="scrollToTop"title="scroll to top"><i class="ph ph-caret-double-up"></i></a>
  1054.  
  1055. </div>
  1056.  
  1057. <div class="utabcontent" style="display:none;">
  1058. <h2 style="margin-top:0em;">about me</h2>
  1059. <div class="bio"style="overflow-y:hidden;">
  1060. <li><kook>name:</kook>&nbsp; {text:name}</li>
  1061. <li><yoongi>age:</yoongi>&nbsp; {text:age} years</li>
  1062. <li><kook>pronouns:</kook>&nbsp; {text:pronouns}</li>
  1063. <li><yoongi>zodiac:</yoongi>&nbsp; {text:zodiac}</li>
  1064. </div>
  1065.  
  1066. <h2 style="margin-top:11.2em;">updates</h2>
  1067. <div class="bio"style="overflow-y:hidden;height:140px;">
  1068. <li><kook>working on:</kook>&nbsp; {text:working on}</li>
  1069. <li><yoongi>watching:</yoongi>&nbsp; {text:watching}</li>
  1070. <li><kook>listening to:</kook>&nbsp; {text:listening to}</li>
  1071. <li><yoongi>reading:</yoongi>&nbsp; {text:reading}</li>
  1072. </div>
  1073.  
  1074. </div>
  1075.  
  1076. <div id="controlz">
  1077. <a class="controls-button"title="controls"><i class="ph ph-gear"style="font-size:21px;padding-top:1px;"></i></a>
  1078. </div>
  1079.  
  1080. </nav>
  1081.  
  1082. <section>
  1083.  
  1084. <!----- posts ----->
  1085.  
  1086. <!----- header ----->
  1087.  
  1088. {block:IndexPage}
  1089. <div id="header">
  1090. <img src="{image:header}" id="side-img2">
  1091.  
  1092. <div id="joon">
  1093. <img src="{PortraitURL-64}" class="user-icon">
  1094. <div style="margin-top:-3.3em!important;padding-left:3.8em;">
  1095. <b>{Name}</b>
  1096. </div>
  1097. </div>
  1098.  
  1099. <div style="padding-left:4.7em;margin-top:-0.7em!important;text-transform:uppercase;letter-spacing:3px;font-size:9px;">{Title}</div>
  1100.  
  1101. <div id="tracking"><b>tracking</b> #{text:tracking}</div>
  1102.  
  1103. </div><br><br><br><br><br>
  1104. {/block:IndexPage}
  1105.  
  1106. {block:Posts}
  1107. <article class="posts" id="{PostID}">
  1108.  
  1109. {block:PinnedPostLabel}
  1110. <div class="pinned">
  1111. <a href="{Permalink}" class="pinned-post"title="pinned post"><div style="margin-left:-0.25em;margin-top:-0.3em!important;"><i class="ph ph-push-pin-simple"></i></a></div>
  1112. </div>
  1113. {/block:PinnedPostLabel}
  1114.  
  1115. {block:Text}
  1116. {block:Title}<h1 class="post-title">{Title}</h1>{/block:Title}
  1117. {block:NotReblog}
  1118. <li class="caption text-caption">
  1119. {Body}
  1120. </li>
  1121. {/block:NotReblog}
  1122. {block:RebloggedFrom}
  1123. {block:Reblogs}
  1124. <li class="caption text-caption">
  1125. <img src="{PortraitURL-64}" class="user-icon">
  1126. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1127. {Body}
  1128. </li>
  1129. {/block:Reblogs}
  1130. {/block:RebloggedFrom}
  1131. {/block:Text}
  1132.  
  1133. {block:Link}
  1134. <a href="{URL}" class="link-wrap">
  1135. {block:Thumbnail}<img src="{Thumbnail-HighRes}">{/block:Thumbnail}
  1136. <div class="link">
  1137. <div class="title">{Name}</div>
  1138. {block:Excerpt}<div class="link-txt">{Excerpt}</div>{/block:Excerpt}
  1139. {block:Host}<div class="link-host">{Host}</div>{/block:Host}
  1140. </div>
  1141. </a>
  1142. {block:Description}
  1143. {block:NotReblog}
  1144. <li class="caption">
  1145. {Description}
  1146. </li>
  1147. {/block:NotReblog}
  1148. {/block:Description}
  1149. {block:RebloggedFrom}
  1150. {block:Reblogs}
  1151. <li class="caption">
  1152. <img src="{PortraitURL-64}" class="user-icon">
  1153. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1154. {Body}
  1155. </li>
  1156. {/block:Reblogs}
  1157. {/block:RebloggedFrom}
  1158. {/block:Link}
  1159.  
  1160. {block:Photo}
  1161. <div class="photo">
  1162. {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}
  1163. </div>
  1164. {block:Caption}
  1165. {block:NotReblog}
  1166. <li class="caption">
  1167. {Caption}
  1168. </li>
  1169. {/block:NotReblog}
  1170. {block:RebloggedFrom}
  1171. {block:Reblogs}
  1172. <li class="caption">
  1173. <img src="{PortraitURL-64}" class="user-icon">
  1174. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1175. {Body}
  1176. </li>
  1177. {/block:Reblogs}
  1178. {/block:RebloggedFrom}
  1179. {/block:Caption}
  1180. {/block:Photo}
  1181.  
  1182. {block:Photoset}
  1183. <div class="photo">{Photoset-700}</div>
  1184. {block:Caption}
  1185. {block:NotReblog}
  1186. <li class="caption">
  1187. {Caption}
  1188. </li>
  1189. {/block:NotReblog}
  1190. {block:RebloggedFrom}
  1191. {block:Reblogs}
  1192. <li class="caption">
  1193. <img src="{PortraitURL-64}" class="user-icon">
  1194. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1195. {Body}
  1196. </li>
  1197. {/block:Reblogs}
  1198. {/block:RebloggedFrom}
  1199. {/block:Caption}
  1200. {/block:Photoset}
  1201.  
  1202. {block:Video}
  1203. <div class="video">{Video-500}</div>
  1204. {block:Caption}
  1205. {block:NotReblog}
  1206. <li class="caption">
  1207. {Caption}
  1208. </li>
  1209. {/block:NotReblog}
  1210. {block:RebloggedFrom}
  1211. {block:Reblogs}
  1212. <li class="caption">
  1213. <img src="{PortraitURL-64}" class="user-icon">
  1214. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1215. {Body}
  1216. </li>
  1217. {/block:Reblogs}
  1218. {/block:RebloggedFrom}
  1219. {/block:Caption}
  1220. {/block:Video}
  1221.  
  1222. {block:Quote}
  1223. <div class="quote">{Quote}</div>
  1224. {block:Source}<div class="source">{Source}</div>{/block:Source}
  1225. {/block:Quote}
  1226.  
  1227. {block:Chat}
  1228. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1229. <ul class="chat">{block:Lines}
  1230. <li>
  1231. {block:Label}<div class="chatter">{Label}</div>{/block:Label}
  1232. {Line}
  1233. </li>
  1234. {/block:Lines}</ul>
  1235. {/block:Chat}
  1236.  
  1237. {block:Answer}
  1238. <div class="ask-wrap">
  1239. <img src="{AskerPortraitURL-64}" class="ask-icon">
  1240. <div class="asking"><a href="{Permalink}">{Asker}</a> sent:</div>
  1241. <div class="question">{Question}</div>
  1242. </div>
  1243. {block:Answerer}
  1244. <div class="answer"><img src="{AnswererPortraitURL-64}" class="ask-icon"style="margin-right:9px;"><a href="{Permalink}">{Answerer}</a> replied:</div>
  1245. <div class="answer2">{Answer}</div>
  1246. {/block:Answerer}
  1247. {block:NotReblog}
  1248. <li class="caption">
  1249. {Replies}
  1250. </li>
  1251. {/block:NotReblog}
  1252. {block:RebloggedFrom}
  1253. {block:Reblogs}
  1254. <li class="caption">
  1255. <img src="{PortraitURL-64}" class="user-icon">
  1256. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1257. {Body}
  1258. </li>
  1259. {/block:Reblogs}
  1260. {/block:RebloggedFrom}
  1261. {/block:Answer}
  1262.  
  1263. {block:Audio}
  1264. <div class="audiopost">
  1265. <div class="audiobox">
  1266. <div class="button">
  1267. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  1268. </div>
  1269. </div>
  1270. {block:AlbumArt}
  1271. <img src="{AlbumArtURL}" class="album-art">
  1272. {/block:AlbumArt}
  1273. <div class="audioinfo">
  1274. {block:TrackName}<li class="track">{TrackName}</li>{/block:TrackName}
  1275. {block:Artist}<li>{Artist}</li>{/block:Artist}
  1276. {block:Album}<li>{Album}</li>{/block:Album}
  1277. </div>
  1278. </div>
  1279. {block:Caption}
  1280. {block:NotReblog}
  1281. <li class="caption">
  1282. {Caption}
  1283. </li>
  1284. {/block:NotReblog}
  1285. {block:RebloggedFrom}
  1286. {block:Reblogs}
  1287. <li class="caption">
  1288. <img src="{PortraitURL-64}" class="user-icon">
  1289. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1290. {Body}
  1291. </li>
  1292. {/block:Reblogs}
  1293. {/block:RebloggedFrom}
  1294. {/block:Caption}
  1295. {/block:Audio}
  1296.  
  1297. {/block:HasTags}
  1298. <!----- info ----->
  1299.  
  1300. {block:Date}
  1301. <div class="info">
  1302. <a href="{Permalink}"title="{TimeAgo}"style="padding-left:7px;margin-top:1px;">{DayOfWeek}</a>
  1303.  
  1304. <!----- buttons ----->
  1305. <div class="buttons">
  1306. {block:NoteCount}<a href="{Permalink}"title="{NoteCountWithLabel}"style="margin-top:0px;"><i class="ph-note-pencil"></i></a>{/block:NoteCount}
  1307. <a href="{ReblogURL}" target="_blank"title="reblog"style="margin-top:-4.5px;"><i class="cp cp-reblog-alt"style="font-size:11px;"></i></a>
  1308. <a class="likeb" href="#"title="like"style="margin-top:2px;">{LikeButton}<span class="actual-button"><i class="ph ph-heart"></i></span></a>
  1309. {block:ContentSource}<a href="{SourceURL}"title="source"style="margin-top:-1.4px!important;"><i class="ph-ph-export"></i></a>{/block:ContentSource}
  1310. </div>
  1311. </div>
  1312. {/block:Date}
  1313.  
  1314. <!----- tags ----->
  1315.  
  1316. {block:HasTags}
  1317. <div class="tags">
  1318. {block:Tags}
  1319. <a href="{TagURL}">{Tag}</a></li>
  1320. {/block:Tags}
  1321. </div>
  1322. {/block:HasTags}
  1323.  
  1324. <!----- notes ----->
  1325.  
  1326. {block:PermalinkPage}{block:Date}
  1327. {block:NoteCount}{block:PostNotes}
  1328. <div class="notes">
  1329. {PostNotes-64}
  1330. </div>
  1331. {/block:PostNotes}{/block:NoteCount}
  1332. {/block:Date}{/block:PermalinkPage}
  1333.  
  1334. </article>
  1335.  
  1336. {/block:Posts}
  1337.  
  1338. <!----- pagination ----->
  1339.  
  1340. {block:Pagination}
  1341. <article id="page-navigation">
  1342. {block:PreviousPage}<a href="{PreviousPage}"title="previous"><i class="ph ph-caret-double-left"></i></a>{/block:PreviousPage}
  1343. {block:NextPage}<a href="{NextPage}"title="forward"><i class="ph ph-caret-double-right"></i></a>{/block:NextPage}
  1344. </article>
  1345. {/block:Pagination}
  1346.  
  1347. </section>
  1348.  
  1349. </main>
  1350.  
  1351. <!----- tooltips ----->
  1352.  
  1353. <script src="https://unpkg.com/popper.js@1"></script>
  1354. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1355. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  1356.  
  1357. <script>
  1358.  
  1359. $(document).ready(function(){
  1360.  
  1361. //Check to see if the window is top if not then display button
  1362. $(window).scroll(function(){
  1363. if ($(this).scrollTop() > 100) {
  1364. $('.scrollToTop').fadeIn();
  1365. } else {
  1366. $('.scrollToTop').fadeOut();
  1367. }
  1368. });
  1369.  
  1370. //Click event to scroll to top
  1371. $('.scrollToTop').click(function(){
  1372. $('html, body').animate({scrollTop : 0},800);
  1373. return false;
  1374. });
  1375.  
  1376. });
  1377.  
  1378.  
  1379. tippy('a[title]', {
  1380. theme: 'custom',
  1381. arrow: tippy.round,
  1382. zIndex: 9999999999,
  1383. maxWidth: 300,
  1384.  
  1385. content(reference) {
  1386. const title = reference.getAttribute('title');
  1387. reference.removeAttribute('title');
  1388. return title;
  1389. },
  1390. });
  1391. </script>
  1392.  
  1393. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  1394.  
  1395. <script>
  1396. $(document).ready(function(){
  1397. $('.controls-button').click(function(){
  1398. $('body').toggleClass('controls-click');
  1399. });
  1400. });
  1401. </script>
  1402.  
  1403. </body>
  1404. </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!