API tools faq
paste
Advertisement
likesmagic

making the bed v2 w/o updates by @gloriapritchetts

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