API tools faq
paste
Advertisement
likesmagic

cobra by @gloriapritchetts

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