API tools faq
paste
Advertisement
likesmagic

like crazy by @gloriapritchetts

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