API tools faq
paste
Advertisement
likesmagic

making the bed v1 by @gloriapritchetts

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