API tools faq
paste
Advertisement
likesmagic

boa by @gloriapritchetts

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