API tools faq
paste
Advertisement
likesmagic

espresso v1 by @gloriapritchetts

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