API tools faq
paste
Advertisement
likesmagic

for good by @gloriapritchetts

likesmagic
Aug 22nd, 2024
471
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 51.92 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:7px;
  16. }
  17. </style>
  18. <script src="https://unpkg.com/phosphor-icons"></script>
  19. <script src="https://unpkg.com/@phosphor-icons/web"></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=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">
  23.  
  24. <script src="//pull.cappuccicons.com/cpf.js"></script>
  25. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  26. <title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  27.  
  28. <link rel="shortcut icon" href="{Favicon}">
  29. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  30. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  31. <meta charset="utf-8">
  32. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  33.  
  34. <!---
  35.  
  36. ♡ CODE BY GLORIAPRITCHETTS ♡
  37. rules and credits @ gloriapritchetts.tumblr.com/themes
  38.  
  39. --->
  40.  
  41. <meta name="image:icon" content="https://placehold.co/50x50/EEE/31343C"/>
  42. <meta name="image:sidebar" content="https://placehold.co/280x350/EEE/31343C"/>
  43. <meta name="image:popup" content="https://placehold.co/230x218/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="if:quicksand" content="0"/>
  54. <meta name="if:karla" content="0"/>
  55. <meta name="if:roboto" content="0"/>
  56. <meta name="if:nunito" content="0"/>
  57. <meta name="if:abeezee" content="0"/>
  58.  
  59. <meta name="select:shadow" content="0px"/>
  60. <meta name="select:shadow" content="10px"/>
  61.  
  62. <meta name="select:borders" content="0px"/>
  63. <meta name="select:borders" content="1px"/>
  64.  
  65. <meta name="select:border radius" content="0px"/>
  66. <meta name="select:border radius" content="5px"/>
  67. <meta name="select:border radius" content="10px"/>
  68.  
  69. <meta name="text:header link url" content="/"/>
  70. <meta name="text:header link title" content="links"/>
  71.  
  72. <meta name="text:description" content="this looks best at two lines! la lalalalalal dee lal laal"/>
  73.  
  74. <meta name="text:blog 1 name" content="gloriapritchetts"/>
  75. <meta name="text:blog 1 desc" content="main blog"/>
  76. <meta name="text:blog 2 name" content="gloriapritchetts"/>
  77. <meta name="text:blog 2 desc" content="main blog"/>
  78. <meta name="text:blog 3 name" content="gloriapritchetts"/>
  79. <meta name="text:blog 3 desc" content="main blog"/>
  80.  
  81. <meta name="text:watching" content="watching"/>
  82. <meta name="text:listening to" content="listening to"/>
  83. <meta name="text:reading" content="reading"/>
  84. <meta name="text:working on" content="working on"/>
  85. <meta name="text:status" content="status"/>
  86.  
  87. <meta name="text:link 1 url" content="/"/>
  88. <meta name="text:link 1 title" content="link 1"/>
  89. <meta name="text:link 2 url" content="/"/>
  90. <meta name="text:link 2 title" content="link 2"/>
  91. <meta name="text:popup title" content="about"/>
  92. <meta name="text:updates title" content="updates"/>
  93.  
  94. <meta name="text:popup box" content="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."/>
  95.  
  96. <meta name="text:name" content="name"/>
  97. <meta name="text:age" content="age"/>
  98. <meta name="text:pronouns" content="pronouns"/>
  99. <meta name="text:zodiac" content="zodiac"/>
  100.  
  101. <!----- css ----->
  102.  
  103. <style type="text/css">
  104.  
  105. /*----- general -----*/
  106.  
  107. ::-webkit-scrollbar {
  108. width: 0px;
  109. background: transparent;
  110. border-radius:{select:border radius};
  111. }
  112.  
  113. ::-webkit-scrollbar-thumb {
  114. background: transparent;
  115. border-radius:{select:border radius};
  116. }
  117.  
  118. #bg {
  119. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  120. top:0px;
  121. left:0px;
  122. width:100%;
  123. height:100px;
  124. position:fixed;
  125. }
  126.  
  127. body {
  128. font-size: 13.5px;
  129. color: {color:text};
  130. background-color: {color:background};
  131. line-height: 135%;
  132. word-wrap: break-word;
  133. letter-spacing: 0.3px;
  134. margin: 0;
  135. padding: 0;
  136. }
  137.  
  138. {block:ifquicksand}
  139. body {
  140. font-family: quicksand;
  141. font-size: 13.5px;
  142. }
  143. {/block:ifquicksand}
  144.  
  145. {block:ifkarla}
  146. body {
  147. font-family: karla;
  148. font-size: 13.5px;
  149. }
  150. {/block:ifkarla}
  151.  
  152. {block:ifroboto}
  153. body {
  154. font-family: roboto;
  155. font-size: 13.5px;
  156. }
  157. {/block:ifroboto}
  158.  
  159. {block:ifnunito}
  160. body {
  161. font-family: nunito;
  162. font-size: 13.5px;
  163. }
  164. {/block:ifnunito}
  165.  
  166. {block:ifabeezee}
  167. body {
  168. font-family: abeezee;
  169. font-size: 13.5px;
  170. }
  171. {/block:ifabeezee}
  172.  
  173. a {
  174. color: {color:text};
  175. position: relative;
  176. text-decoration: none;
  177. -webkit-transition: all 0.5s ease;
  178. transition: all 0.5s ease;
  179. -moz-transition: all 0.5s ease;
  180. -o-transition: all 0.5s ease;
  181. }
  182.  
  183. a:hover {
  184. border:none;
  185. text-decoration:none;
  186. color:{color:accent};
  187. text-shadow:none;
  188. -webkit-transition: all 0.5s ease;
  189. transition: all 0.5s ease;
  190. -moz-transition: all 0.5s ease;
  191. -o-transition: all 0.5s ease;
  192. }
  193.  
  194. blockquote {
  195. padding: 0 0 0 1.5em;
  196. border-left: 1px solid {color:borders};
  197. margin: 1.5em 0 1.5em 1.5em;
  198. }
  199.  
  200. h1 {
  201. font-size:19px;
  202. background: linear-gradient(to right, {color:gradient 1}, {color:gradient 2});
  203. -webkit-text-fill-color: transparent;
  204. -webkit-background-clip: text;
  205. font-weight:bold;
  206. text-align:left;
  207. line-height:25px;
  208. border:none;
  209. box-shadow:none;
  210. }
  211.  
  212. h1 a {
  213. font-size:19px;
  214. background: linear-gradient(to right, {color:gradient 1}, {color:gradient 2});
  215. -webkit-text-fill-color: transparent;
  216. -webkit-background-clip: text;
  217. font-weight:bold;
  218. text-align:left;
  219. line-height:25px;
  220. border:none;
  221. box-shadow:none;
  222. }
  223.  
  224. h1 a:hover {
  225. font-size:19px;
  226. background: linear-gradient(to right, {color:gradient 1}, {color:gradient 2});
  227. -webkit-text-fill-color: transparent;
  228. -webkit-background-clip: text;
  229. font-weight:bold;
  230. text-align:left;
  231. line-height:25px;
  232. border:none;
  233. box-shadow:none;
  234. }
  235.  
  236. h2 {
  237. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  238. padding:10px;
  239. border-radius:{select:border radius};
  240. font-size:17px;
  241. color:{color:posts};
  242. text-align:center;
  243. line-height:22px;
  244. text-transform:justify;
  245. font-weight:bold;
  246. box-shadow:none;
  247. }
  248.  
  249. h2 a {
  250. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  251. padding:10px;
  252. border-radius:{select:border radius};
  253. font-size:17px;
  254. color:{color:posts};
  255. text-align:center;
  256. line-height:22px;
  257. text-transform:justify;
  258. font-weight:bold;
  259. box-shadow:none;
  260. }
  261.  
  262. h2 a:hover {
  263. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  264. padding:10px;
  265. border-radius:{select:border radius};
  266. font-size:17px;
  267. color:{color:posts};
  268. text-align:center;
  269. line-height:22px;
  270. text-transform:justify;
  271. font-weight:bold;
  272. box-shadow:none;
  273. }
  274.  
  275. bold, b, strong {
  276. font-weight:bold;
  277. color:{color:accent};
  278. }
  279.  
  280. i, em, italic {
  281. color:{color:gradient 2};
  282. }
  283.  
  284. small {
  285. font-size:13px;
  286. }
  287.  
  288. .tmblr-iframe-compact .tmblr-iframe--unified-controls { z-index: 999999999!important;margin-top: 2.7em;padding-right:0em;opacity: 0;visibility: hidden;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-ms-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s; }
  289.  
  290. body.controls-click .tmblr-iframe {
  291. opacity: 1.0;
  292. visibility: visible;
  293. -webkit-transition: all 0.5s;
  294. -moz-transition: all 0.5s;
  295. -ms-transition: all 0.5s;
  296. -o-transition: all 0.5s;
  297. transition: all 0.5s;
  298. }
  299.  
  300. /*----- sidebar -----*/
  301.  
  302. #sidebar {
  303. width:280px;
  304. height:423px;
  305. position:absolute;
  306. padding:20px;
  307. top:210px;
  308. left:-20px;
  309. background:{color:posts};
  310. border-radius:{select:border radius};
  311. box-shadow:0px 0px {select:shadow} {color:borders};
  312. border:{select:borders} solid {color:borders};
  313. }
  314.  
  315. #sidebarie {
  316. position:absolute;
  317. width:280px;
  318. height:350px;
  319. margin-top:0em;
  320. object-fit: cover;
  321. border-radius:{select:border radius};
  322. }
  323.  
  324. #sidebarie img {
  325. width:280px;
  326. height:350px;
  327. object-fit: cover;
  328. }
  329.  
  330. #desc {
  331. margin-top:27em;
  332. margin-left:0em;
  333. background:{color:background};
  334. padding:10px;
  335. width:260px;
  336. height:37px;
  337. text-align:center;
  338. border-radius:{select:border radius};
  339. }
  340.  
  341. #desc a {
  342. background: linear-gradient(to right, {color:gradient 1}, {color:gradient 2});
  343. -webkit-text-fill-color: transparent;
  344. -webkit-background-clip: text;
  345. }
  346.  
  347. #sidebar2 {
  348. width:280px;
  349. height:93px;
  350. position:absolute;
  351. padding:20px;
  352. top:50px;
  353. left:-20px;
  354. background:{color:posts};
  355. border-radius:{select:border radius};
  356. box-shadow:0px 0px {select:shadow} {color:borders};
  357. border:{select:borders} solid {color:borders};
  358. }
  359.  
  360. #sidebar2 img {
  361. border:10px solid {color:posts};
  362. width:50px;
  363. height:50px;
  364. box-shadow:0px 0px {select:shadow} {color:borders};
  365. outline:{select:borders} solid {color:borders};
  366. }
  367.  
  368. #title {
  369. position:absolute;
  370. margin-top:1.45em;
  371. margin-left:0em;
  372. width:270px;
  373. text-align:left;
  374. font-weight:bold;
  375. font-size:16px;
  376. line-height:16px;
  377. overflow-y:hidden;
  378. margin-bottom:0.5em;
  379. }
  380.  
  381. #title a {
  382. background: linear-gradient(to right, {color:gradient 1}, {color:gradient 2});
  383. -webkit-text-fill-color: transparent;
  384. -webkit-background-clip: text;
  385. }
  386.  
  387. #follow {
  388. width:300px;
  389. margin-top:4.7em;
  390. margin-left:-0.6em;
  391. position:absolute;
  392. text-align:center;
  393. }
  394.  
  395. #follow li {
  396. list-style-type:none;
  397. display:inline-block;
  398. width:128px!important;
  399. margin:3.4px;
  400. padding:5px;
  401. border-radius:{select:border radius};
  402. background:{color:background};
  403. color:{color:text};
  404. -webkit-transition: all 0.5s ease;
  405. transition: all 0.5s ease;
  406. -moz-transition: all 0.5s ease;
  407. -o-transition: all 0.5s ease;
  408. }
  409.  
  410. #follow a {
  411. color:{color:text};
  412. font-weight:normal;
  413. text-align:center;
  414. border:none;
  415. -webkit-transition: all 0.5s ease;
  416. transition: all 0.5s ease;
  417. -moz-transition: all 0.5s ease;
  418. -o-transition: all 0.5s ease;
  419. }
  420.  
  421. #follow li:hover {
  422. border-radius:{select:border radius};
  423. color:{color:posts};
  424. border:none;
  425. transform: scale(1.05);
  426. -webkit-transition: all 0.5s ease;
  427. transition: all 0.5s ease;
  428. -moz-transition: all 0.5s ease;
  429. -o-transition: all 0.5s ease;
  430. }
  431.  
  432. #nav {
  433. width:280px;
  434. height:212px;
  435. position:absolute;
  436. padding:20px;
  437. top:700px;
  438. left:-20px;
  439. background:{color:posts};
  440. border-radius:{select:border radius};
  441. box-shadow:0px 0px {select:shadow} {color:borders};
  442. border:{select:borders} solid {color:borders};
  443. }
  444.  
  445. #nav i {
  446. color:{color:posts};
  447. font-size:19px;
  448. }
  449.  
  450. #nav li {
  451. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  452. line-height:14px;
  453. width:270px;
  454. height:38px;
  455. padding:5px;
  456. margin-bottom:6px;
  457. text-align:center;
  458. color:{color:posts};
  459. border-radius:{select:border radius};
  460. list-style-type:none;
  461. display:inline-block;
  462. -webkit-transition: all 0.6s ease;
  463. transition: all 0.6s ease;
  464. -moz-transition: all 0.6s ease;
  465. -o-transition: all 0.6s ease;
  466. }
  467.  
  468. #nav a {
  469. color:{color:posts};
  470. -webkit-transition: all 0.5s ease;
  471. transition: all 0.5s ease;
  472. -moz-transition: all 0.5s ease;
  473. -o-transition: all 0.5s ease;
  474. }
  475.  
  476. #nav li:hover {
  477. transform: scale(0.96);
  478. -webkit-transition: all 0.5s ease;
  479. transition: all 0.5s ease;
  480. -moz-transition: all 0.5s ease;
  481. -o-transition: all 0.5s ease;
  482. }
  483.  
  484. #quickiez {
  485. margin-top:72.5em;
  486. margin-left:-1.5em;
  487. position:absolute;
  488. border-radius:{select:border radius};
  489. width:280px;
  490. height:200px;
  491. padding:20px;
  492. line-height:17px;
  493. text-align:left;
  494. overflow-y:hidden;
  495. background:{color:posts};
  496. box-shadow:0px 0px {select:shadow} {color:borders};
  497. border:{select:borders} solid {color:borders};
  498. }
  499.  
  500. #quickiez li {
  501. width:400px;
  502. padding-left:19px;
  503. padding-top:10px;
  504. text-align:left;
  505. margin-left:-1.5em;
  506. margin-bottom:0.4em;
  507. border-bottom:1px solid {color:borders};
  508. list-style-type:none;
  509. -webkit-transition: all 0.4s ease;
  510. transition: all 0.4s ease;
  511. -moz-transition: all 0.4s ease;
  512. -o-transition: all 0.4s ease;
  513. }
  514.  
  515. #quickiez a {
  516. border:none;
  517. font-weight:bold;
  518. color:{color:accent};
  519. -webkit-transition: all 0.4s ease;
  520. transition: all 0.4s ease;
  521. -moz-transition: all 0.4s ease;
  522. -o-transition: all 0.4s ease;
  523. }
  524.  
  525. #quickiez a:hover {
  526. border:none;
  527. color:{color:gradient 2};
  528. -webkit-transition: all 0.4s ease;
  529. transition: all 0.4s ease;
  530. -moz-transition: all 0.4s ease;
  531. -o-transition: all 0.4s ease;
  532. }
  533.  
  534. #quickiez img {
  535. width:25px;
  536. height:25px;
  537. border-radius:100%;
  538. border:2px solid {color:background};
  539. }
  540.  
  541. #desc2 {
  542. margin-top:50em;
  543. margin-left:0em;
  544. background:{color:background};
  545. padding:10px;
  546. width:280px;
  547. height:10px;
  548. border-radius:{select:border radius};
  549. }
  550.  
  551. #desc2 a {
  552. color:{color:accent};
  553. -webkit-transition: all 0.5s ease;
  554. transition: all 0.5s ease;
  555. -moz-transition: all 0.5s ease;
  556. -o-transition: all 0.5s ease;
  557. }
  558.  
  559. #desc2 a:hover {
  560. color:{color:gradient 2};
  561. -webkit-transition: all 0.5s ease;
  562. transition: all 0.5s ease;
  563. -moz-transition: all 0.5s ease;
  564. -o-transition: all 0.5s ease;
  565. letter-spacing:2px;
  566. }
  567.  
  568. #desc2 i {
  569. color:{color:accent};
  570. }
  571.  
  572. .search .query {
  573. position:absolute;
  574. top:5.6em;
  575. left:2em;
  576. margin-top:54.3em;
  577. border: 0;
  578. outline: 0;
  579. width:280px;
  580. padding: 4px;
  581. padding-left:10px;
  582. font-size: 9px;
  583. letter-spacing:3px;
  584. text-transform:uppercase;
  585. background:transparent;
  586. color:{color:text};
  587. }
  588.  
  589. {block:ifabeezee}
  590. .search .query {
  591. font-family: abeezee;
  592. font-size: 9px;
  593. }
  594. {/block:ifabeezee}
  595.  
  596. {block:ifquicksand}
  597. .search .query {
  598. font-family: quicksand;
  599. font-size: 9px;
  600. margin-top:54.2em;
  601. }
  602. {/block:ifquicksand}
  603.  
  604. {block:ifkarla}
  605. .search .query {
  606. font-family: karla;
  607. font-size: 10.5px;
  608. margin-top:45.65em;
  609. }
  610. {/block:ifkarla}
  611.  
  612. {block:ifroboto}
  613. .search .query {
  614. font-family: roboto;
  615. font-size: 9px;
  616. margin-top:54.25em;
  617. }
  618. {/block:ifroboto}
  619.  
  620. {block:ifnunito}
  621. .search .query {
  622. font-family: nunito;
  623. font-size: 9px;
  624. margin-top:54.25em;
  625. }
  626. {/block:ifnunito}
  627.  
  628. ::-webkit-input-placeholder {color: inherit;}
  629. :-moz-placeholder {color: inherit; opacity:1;}
  630. ::-moz-placeholder {color: inherit; opacity:1;}
  631. :-ms-input-placeholder {color: inherit;}
  632.  
  633. input:focus::-webkit-input-placeholder {color: transparent;}
  634. input:focus:-moz-placeholder {color: transparent;}
  635. input:focus::-moz-placeholder {color: transparent;}
  636. input:focus:-ms-input-placeholder { color: transparent;}
  637.  
  638. /*----- heading -----*/
  639.  
  640. #heading {
  641. background:linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  642. width: 100%;
  643. height:20px;
  644. padding:10px;
  645. position: fixed;
  646. z-index:99999999999!important;
  647. text-align:left;
  648. top:0px;
  649. left:0px;
  650. }
  651.  
  652. #heading a {
  653. border-bottom:0px;
  654. margin-right:1.5em!important;
  655. }
  656.  
  657. #linkiez {
  658. margin-top:0em;
  659. position:absolute;
  660. margin-left:0.3em;
  661. -webkit-transition: all 0.5s ease;
  662. transition: all 0.5s ease;
  663. -moz-transition: all 0.5s ease;
  664. -o-transition: all 0.5s ease;
  665. }
  666.  
  667. {block:ifroboto}
  668. #linkiez {
  669. margin-top:0.6px;
  670. }
  671. {/block:ifroboto}
  672.  
  673. {block:ifnunito}
  674. #linkiez {
  675. margin-top:0.9px;
  676. }
  677. {/block:ifnunito}
  678.  
  679. #linkiez li {
  680. color:{color:posts};
  681. list-style-type:none;
  682. display:inline-block;
  683. text-align:center;
  684. font-size:14px;
  685. -webkit-transition: all 0.5s ease;
  686. transition: all 0.5s ease;
  687. -moz-transition: all 0.5s ease;
  688. -o-transition: all 0.5s ease;
  689. }
  690.  
  691. #linkiez a {
  692. color:{color:posts};
  693. border:none;
  694. font-size:14px;
  695. -webkit-transition: all 0.5s ease;
  696. transition: all 0.5s ease;
  697. -moz-transition: all 0.5s ease;
  698. -o-transition: all 0.5s ease;
  699. }
  700.  
  701. #linkiez a:hover {
  702. color:{color:posts};
  703. letter-spacing:3px;
  704. font-size:14px;
  705. border:none;
  706. -webkit-transition: all 0.5s ease;
  707. transition: all 0.5s ease;
  708. -moz-transition: all 0.5s ease;
  709. -o-transition: all 0.5s ease;
  710. }
  711.  
  712. .jin {
  713. position: fixed;
  714. z-index:99999999999!important;
  715. text-align:center;
  716. bottom:0px;
  717. right:10px;
  718. }
  719.  
  720. .jin li {
  721. list-style-type:none;
  722. }
  723.  
  724. .jin i {
  725. font-size:20px;
  726. -webkit-transition: all 0.5s ease;
  727. transition: all 0.5s ease;
  728. -moz-transition: all 0.5s ease;
  729. -o-transition: all 0.5s ease;
  730. background: linear-gradient(to right, {color:gradient 1}, {color:gradient 2});
  731. -webkit-text-fill-color: transparent;
  732. -webkit-background-clip: text;
  733. }
  734.  
  735. .jincontrols a {
  736. background: {color:posts};
  737. box-shadow:0px 0px {select:shadow} {color:borders};
  738. border:{select:borders} solid {color:borders};
  739. position:relative;
  740. display:inline-block;
  741. overflow:hidden;
  742. padding:6px;
  743. width:20px;
  744. height:20px;
  745. border-radius:{select:border radius};
  746. margin-bottom:0.3em;
  747. }
  748.  
  749. .jincontrols a:hover {
  750. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  751. position:relative;
  752. display:inline-block;
  753. overflow:hidden;
  754. padding:6px;
  755. width:20px;
  756. height:20px;
  757. border:{select:borders} solid {color:borders};
  758. box-shadow:0px 0px {select:shadow} {color:borders}!important;
  759. border-radius:{select:border radius};
  760. box-shadow:none;
  761. transform: scale(0.9);
  762. -webkit-transition: all 0.6s ease;
  763. transition: all 0.6s ease;
  764. -moz-transition: all 0.6s ease;
  765. -o-transition: all 0.6s ease;
  766. }
  767.  
  768. .jin a:hover i, .jin li:hover {
  769. background:{color:posts};
  770. -webkit-text-fill-color: transparent;
  771. -webkit-background-clip: text;
  772. -webkit-transition: all 0.6s ease;
  773. transition: all 0.6s ease;
  774. -moz-transition: all 0.6s ease;
  775. -o-transition: all 0.6s ease;
  776. }
  777.  
  778. .scrollToTop {
  779. position:fixed;
  780. bottom:0px;
  781. right:0em;
  782. display:none;
  783. z-index:999999999999999999;
  784. }
  785.  
  786. .scrollToTop:hover{
  787. text-decoration:none;
  788. }
  789.  
  790. .controlz {
  791. position:fixed;
  792. top:0px;
  793. right:0px;
  794. }
  795.  
  796. /*----- posts -----*/
  797.  
  798. main {
  799. position: relative;
  800. width: calc(250px + 540px + 150px);
  801. margin: auto;
  802. }
  803.  
  804. section {
  805. position:relative;
  806. top:50%;
  807. left:50%;
  808. width: 580px;
  809. margin-left: -110px;
  810. margin-top:75px;
  811. padding:20px;
  812. }
  813.  
  814. article {
  815. width: 540px;
  816. position: relative;
  817. margin-bottom:60px!important;
  818. background:{color:posts};
  819. padding:20px;
  820. border-radius:{select:border radius};
  821. {block:PermalinkPage}
  822. padding-bottom:25px;{/block:PermalinkPage}
  823. box-shadow:0px 0px {select:shadow} {color:borders};
  824. border:{select:borders} solid {color:borders};
  825. }
  826.  
  827. article a {
  828. box-shadow:0px 2px 0px {color:borders};
  829. }
  830.  
  831. article a:hover {
  832. box-shadow:0px 2px 0px {color:accent};
  833. }
  834.  
  835. .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%; }
  836.  
  837. .caption {
  838. list-style-type: none;
  839. margin-top:0.5em;
  840. margin-left:0.3em;
  841. }
  842.  
  843. .caption .username a {
  844. box-shadow:0px 2px 0px {color:borders};
  845. }
  846.  
  847. .caption .username a:hover {
  848. box-shadow:0px 2px 0px {color:accent};
  849. }
  850.  
  851. li {
  852. list-style-type:circle;
  853. }
  854.  
  855. li::marker {
  856. color: {color:accent};
  857. }
  858.  
  859. .text-caption:first-of-type { margin-top: 0.8em; }
  860.  
  861. .rbinfo {
  862. width:555px;
  863. margin-top:-1.5em;
  864. margin-left:-1.5em;
  865. font-weight:normal!important;
  866. line-height:16px;
  867. border-bottom:1px solid {color:borders};
  868. padding:13px;
  869. padding-bottom:15px;
  870. }
  871.  
  872. .rbinfo span {
  873. font-weight:normal!important;
  874. margin-left:0em;
  875. }
  876.  
  877. .rbinfo i {
  878. padding-left:4px;
  879. padding-right:4px;
  880. }
  881.  
  882. .rbinfo a, .rbinfo .username {
  883. border:none;
  884. color:{color:accent}!important;
  885. box-shadow:none;
  886. }
  887.  
  888. .rbinfo .username {
  889. border:none;
  890. color:{color:text}!important;
  891. margin-left:0.1em;
  892. box-shadow:none;
  893. margin-top:0em;
  894. margin-bottom:0em;
  895. }
  896.  
  897. .rbinfo .username a:hover {
  898. color:{color:gradient 2}!important;
  899. }
  900.  
  901. .rbinfo .user-icon {
  902. width:2em;
  903. height:2em;
  904. outline:2px solid {color:background};
  905. outline-offset:0px;
  906. margin-left:8px;
  907. margin-top:-1em!important;
  908. border-radius:100%;
  909. margin-right:13px;
  910. }
  911.  
  912. .rbinfo .user-icon img {
  913. border-radius:100%;
  914. }
  915.  
  916. .user-icon {
  917. display: inline-block;
  918. vertical-align: middle;
  919. width: 0.5em;
  920. height: 0.5em;
  921. margin-right: 0.6em;
  922. margin-top:0em;
  923. border-radius:100%;
  924. background:{color:gradient 2};
  925. }
  926.  
  927. .username, .username a {
  928. display: inline-block;
  929. font-weight: bold;
  930. color:{color:accent};
  931. text-decoration:none;
  932. border-bottom:none;
  933. box-shadow:none!important;
  934. }
  935.  
  936. .username a:hover {
  937. font-weight: bold;
  938. color:{color:gradient 2};
  939. text-decoration:none;
  940. border-bottom:none;
  941. box-shadow:none;
  942. }
  943.  
  944. p.tmblr-attribution {margin-top: 1em !important;}
  945.  
  946. a.link-wrap {
  947. display: block;
  948. border: 1px solid {color:borders};
  949. }
  950.  
  951. .link { padding: 2em; }
  952.  
  953. .link-host, .link-txt { margin-top: 1.5em; }
  954.  
  955. .npf-link-block {
  956. margin-top: 1.5em;
  957. background-color: inherit;
  958. border: 1px solid inherit;
  959. color: inherit;
  960. }
  961.  
  962. article img {
  963. margin: 0;
  964. display: block;
  965. height: auto;
  966. max-width: 100%;
  967. margin-bottom:5px;
  968. border-radius:{select:border radius};
  969. }
  970.  
  971. .photo-slideshow,
  972. .npf_photoset {
  973. border-radius:{select:border radius};
  974. }
  975.  
  976. .vignette, #vignette {opacity: 0;}
  977. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.75) !important;}
  978.  
  979. .lightbox-image, #tumblr_lightbox img {
  980. box-shadow: none !important;
  981. border-radius: 0 !important;
  982. max-width: none;
  983. }
  984.  
  985. #tumblr_lightbox_caption, .lightbox-caption {
  986. color: #fff !important;
  987. font-family: inherit;
  988. margin-top: 1em !important;
  989. }
  990.  
  991. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  992. margin-left: 0 !important;
  993. margin-right: 0 !important;
  994. }
  995.  
  996. .quote { line-height: 160%; font-size: 1.25em; }
  997.  
  998. .quote p:first-of-type { margin-top: 0; }
  999. .quote p:last-of-type { margin-bottom: 0; }
  1000.  
  1001. .source { margin-top: 1.5em; }
  1002.  
  1003. .chat { padding: 0; margin: 0; }
  1004. .chat li { list-style-type: none; margin-top: 1em; }
  1005. .chat li:first-of-type { margin-top: 0; }
  1006. .chatter { font-weight: bold; }
  1007.  
  1008. p.npf_chat, p.npf_chat b {font-family: inherit;}
  1009.  
  1010. /*----- asks -----*/
  1011.  
  1012. .question {
  1013. background:{color:posts};
  1014. color:{color:text};
  1015. padding:20px;
  1016. border-top-right-radius:35px;
  1017. border-bottom-right-radius:35px;
  1018. border-bottom-left-radius:35px;
  1019. margin-top:5px;
  1020. text-align:justify;
  1021. position:relative;
  1022. }
  1023.  
  1024. .asking {
  1025. margin-top:1em;
  1026. background:{color:background};
  1027. border-radius:{select:border radius};
  1028. padding:20px;
  1029. color:{color:text};
  1030. text-align:justify;
  1031. }
  1032.  
  1033. .asking b, .asking a {
  1034. font-weight:bold;
  1035. color:{color:accent};
  1036. border-bottom:0px solid;
  1037. box-shadow:none;
  1038. }
  1039.  
  1040. .asking a:hover {
  1041. color:{color:gradient 2};
  1042. border-bottom:0px solid;
  1043. box-shadow:none;
  1044. }
  1045.  
  1046. .question p:first-of-type { margin-top: 0; }
  1047. .question p:last-of-type { margin-bottom: 0; }
  1048.  
  1049. .answer2 {
  1050. font-weight:normal;
  1051. text-transform:lowercase;
  1052. text-align:justify;
  1053. font-family: {text:font};
  1054. font-size: 13.5px;
  1055. color: {color:text};
  1056. padding-top:3px;
  1057. }
  1058.  
  1059. /*----- info -----*/
  1060.  
  1061. .info {
  1062. height:21px;
  1063. margin-top: 2.5em;
  1064. color:{color:text};
  1065. margin-left:-1.5em;
  1066. width:580px;
  1067. }
  1068.  
  1069. .info a {
  1070. text-transform:lowercase;
  1071. color:{color:text};
  1072. box-shadow:none;
  1073. }
  1074.  
  1075. .info a:hover {
  1076. text-decoration:none;
  1077. color:{color:gradient 2};
  1078. text-shadow:none;
  1079. border-bottom:0px solid;
  1080. box-shadow:none;
  1081. }
  1082.  
  1083. .info img {
  1084. width: 1em;
  1085. height: 1em;
  1086. border-radius:100%;
  1087. outline:2px solid {color:posts};
  1088. outline-offset:0px;
  1089. margin:2.2px;
  1090. }
  1091.  
  1092. .but {
  1093. margin-top:0px;
  1094. text-align:left;
  1095. margin-left:20px;
  1096. }
  1097.  
  1098. .but a {
  1099. font-weight:bold;
  1100. color:{color:accent};
  1101. }
  1102.  
  1103. {block:ifquicksand}
  1104. .info a {
  1105. margin-top:-2px;
  1106. }
  1107.  
  1108. .but {
  1109. margin-top:-18px;
  1110. }
  1111. {/block:ifquicksand}
  1112.  
  1113. {block:ifkarla}
  1114. .info a {
  1115. margin-top:-3px;
  1116. }
  1117.  
  1118. .but {
  1119. margin-top:-18px;
  1120. }
  1121. {/block:ifkarla}
  1122.  
  1123. {block:ifroboto}
  1124. .info a {
  1125. margin-top:0px;
  1126. }
  1127.  
  1128. .but {
  1129. margin-top:-19px;
  1130. }
  1131. {/block:ifroboto}
  1132.  
  1133. {block:ifnunito}
  1134. .info a {
  1135. margin-top:1.2px;
  1136. }
  1137.  
  1138. .but {
  1139. margin-top:-19px;
  1140. }
  1141. {/block:ifnunito}
  1142.  
  1143. .buttons {
  1144. top:0em;
  1145. left:44em;
  1146. position:absolute;
  1147. z-index:999999!important;
  1148. }
  1149.  
  1150. .buttons i {
  1151. font-size:20px;
  1152. -webkit-transition: all 0.5s ease;
  1153. transition: all 0.5s ease;
  1154. -moz-transition: all 0.5s ease;
  1155. -o-transition: all 0.5s ease;
  1156. background: linear-gradient(to right, {color:gradient 1}, {color:gradient 2});
  1157. -webkit-text-fill-color: transparent;
  1158. -webkit-background-clip: text;
  1159. }
  1160.  
  1161. .buttonscontrols a {
  1162. background: {color:posts};
  1163. box-shadow:0px 0px {select:shadow} {color:borders};
  1164. border:{select:borders} solid {color:borders};
  1165. position:relative;
  1166. display:inline-block;
  1167. overflow:hidden;
  1168. padding:8px;
  1169. width:20px;
  1170. height:20px;
  1171. border-radius:{select:border radius};
  1172. margin-bottom:0.3em;
  1173. }
  1174.  
  1175. .buttonscontrols a:hover {
  1176. background: linear-gradient(to right, {color:Gradient 1}, {color:Gradient 2});
  1177. position:relative;
  1178. display:inline-block;
  1179. overflow:hidden;
  1180. padding:8px;
  1181. width:20px;
  1182. height:20px;
  1183. border:{select:borders} solid {color:borders};
  1184. box-shadow:0px 0px {select:shadow} {color:borders}!important;
  1185. border-radius:{select:border radius};
  1186. box-shadow:none;
  1187. transform: scale(0.9);
  1188. -webkit-transition: all 0.6s ease;
  1189. transition: all 0.6s ease;
  1190. -moz-transition: all 0.6s ease;
  1191. -o-transition: all 0.6s ease;
  1192. }
  1193.  
  1194. .buttons a:hover i, .buttons li:hover {
  1195. background:{color:posts};
  1196. -webkit-text-fill-color: transparent;
  1197. -webkit-background-clip: text;
  1198. -webkit-transition: all 0.6s ease;
  1199. transition: all 0.6s ease;
  1200. -moz-transition: all 0.6s ease;
  1201. -o-transition: all 0.6s ease;
  1202. }
  1203.  
  1204. .buttonscontrols .like .like_button {
  1205. position:relative;
  1206. }
  1207.  
  1208. .buttonscontrols .like .like_button iframe {
  1209. position:absolute;
  1210. top:0;
  1211. left:0;
  1212. bottom:0;
  1213. right:0;
  1214. z-index:2;
  1215. opacity:0;
  1216. }
  1217.  
  1218. .tags {
  1219. word-wrap: break-word;
  1220. margin-top:1em!important;
  1221. margin-left:-1.5em;
  1222. border-top:1px solid {color:borders};
  1223. padding-top:15px;
  1224. width:540px;
  1225. padding-left:20px;
  1226. padding-right:20px;
  1227. }
  1228.  
  1229. .tags a {
  1230. color:{color:text};
  1231. font-weight:normal;
  1232. margin-right:0.5em;
  1233. box-shadow:none;
  1234. }
  1235.  
  1236. .tags a:hover {
  1237. text-decoration:none;
  1238. color:{color:gradient 2};
  1239. text-shadow:none;
  1240. box-shadow:none;
  1241. }
  1242.  
  1243. .tags a:before {
  1244. content: '#';
  1245. }
  1246.  
  1247. /*----- notes -----*/
  1248.  
  1249. .notes { margin-top:-1em; }
  1250. .notes a { color:{color:accent}; text-decoration:none;border-bottom:0px solid;box-shadow:none; }
  1251. .notes a:hover { color:{color:gradient 2}; text-decoration:none;border-bottom:0px solid;box-shadow:none; }
  1252.  
  1253. ol.notes {
  1254. max-width: 100%;
  1255. padding: 0;
  1256. margin: 2em 0 0 0;
  1257. text-align:left;
  1258. }
  1259.  
  1260. ol.notes li.note { padding: 0.3em 0; list-style-type: none; }
  1261.  
  1262. ol.notes li.note img.avatar {
  1263. margin-right: 0.5em;
  1264. margin-top:0.4em;
  1265. vertical-align: middle;
  1266. display: inline-block;
  1267. width: 1em;
  1268. height: 1em;
  1269. border-radius:100%;
  1270. border:2px solid {color:accent};
  1271. }
  1272.  
  1273. /*----- pagination -----*/
  1274.  
  1275. #page-navigation { text-align: center; }
  1276. #page-navigation a, .current-page { margin: 0 0.5em;box-shadow:none;-webkit-transition: all 0.6s ease;transition: all 0.6s ease;-moz-transition: all 0.6s ease;-o-transition: all 0.6s ease; }
  1277. #page-navigation a:hover, #page-navigation i:hover { color:{color:gradient 2};-webkit-transition: all 0.6s ease;transition: all 0.6s ease;-moz-transition: all 0.6s ease;-o-transition: all 0.6s ease; }
  1278. #page-navigation i { color:{color:accent};font-size:20px;-webkit-transition: all 0.6s ease;transition: all 0.6s ease;-moz-transition: all 0.6s ease;-o-transition: all 0.6s ease; }
  1279. .current-page { font-weight: bold; color: {color:accent}; }
  1280.  
  1281. {CustomCSS}
  1282.  
  1283. /*----- tooltips -----*/
  1284.  
  1285. .tippy-tooltip.custom-theme {
  1286. background-color: {color:posts};
  1287. color: {color:text};
  1288. text-align:center;
  1289. font-size:12.5px;
  1290. text-transform:lowercase;
  1291. border:{select:borders} solid {color:borders};
  1292. border-radius:{select:border radius};
  1293. box-shadow:0px 0px 10px {color:borders};
  1294. }
  1295.  
  1296. /*----- popup box -----*/
  1297.  
  1298. #pop {
  1299. width:100%;
  1300. height:100%;
  1301. top:0;left:0;
  1302. position:fixed;
  1303. z-index:999999999!important;
  1304. backdrop-filter: blur(5px);
  1305. display:none;
  1306. }
  1307.  
  1308. #pop img {
  1309. border-radius:{select:border radius};
  1310. }
  1311.  
  1312. .fade {
  1313. top:0;
  1314. left:0;
  1315. position:fixed;
  1316. z-index:1000;
  1317. width:100%;
  1318. height:100%;
  1319. }
  1320.  
  1321. .popup {
  1322. top:50%;
  1323. left:50%;
  1324. transform:translate(-50%,-50%);
  1325. position:fixed;
  1326. background:{color:posts}; /* background of popup box */
  1327. padding:20px; /* padding of popup box */
  1328. z-index:10000;
  1329. width:500px; /* width of popup */
  1330. height:475px;
  1331. border-radius:{select:border radius};
  1332. line-height:20px;
  1333. box-shadow:0px 0px {select:shadow} {color:borders};
  1334. border:{select:borders} solid {color:borders};
  1335. }
  1336.  
  1337. .popup a {
  1338. background: linear-gradient(to right, {color:gradient 1}, {color:gradient 2});
  1339. -webkit-text-fill-color: transparent;
  1340. -webkit-background-clip: text;
  1341. }
  1342.  
  1343. .bio {
  1344. background: linear-gradient(to right, {color:gradient 1}, {color:gradient 2});
  1345. padding:10px;
  1346. width:210px;
  1347. height:225px;
  1348. margin-top:0em;
  1349. border-radius:{select:border radius};
  1350. text-align:center;
  1351. }
  1352.  
  1353. .bio li {
  1354. line-height:23px;
  1355. list-style-type:none;
  1356. padding:5px;
  1357. text-align:center;
  1358. color:{color:posts};
  1359. margin-right:10px;
  1360. }
  1361.  
  1362. .bio b {
  1363. color:{color:posts};
  1364. box-shadow:0px 2px 0px {color:posts};
  1365. padding-bottom:2px;
  1366. }
  1367.  
  1368. .bio2 {
  1369. position:absolute;
  1370. width:218px;
  1371. height:432px;
  1372. top:20px;
  1373. right:19px;
  1374. padding:20px;
  1375. background:{color:posts};
  1376. border:1px solid {color:borders};
  1377. text-align:left;
  1378. border-radius:{select:border radius};
  1379. overflow-y:scroll;
  1380. overflow-x:hidden;
  1381. }
  1382.  
  1383. .bio2 b {
  1384. color:{color:accent};
  1385. font-weight:bold;
  1386. }
  1387.  
  1388. .bio2 bb {
  1389. color:{color:gradient 2};
  1390. font-weight:bold;
  1391. }
  1392.  
  1393. #headerg {
  1394. margin-top:0.8em;
  1395. margin-left:0em;
  1396. width:230px;
  1397. height:218px;
  1398. z-index:99999999999!important;
  1399. object-fit: cover;
  1400. }
  1401.  
  1402. #headerg img {
  1403. width:230px;
  1404. height:218px;
  1405. object-fit: cover;
  1406. }
  1407.  
  1408. .etc {
  1409. position:absolute;
  1410. top:-10em;
  1411. left:19.3em;
  1412. margin-top:36em;
  1413. width:220px;
  1414. height:38px;
  1415. text-align:center;
  1416. padding:20px;
  1417. line-height:18px;
  1418. background: linear-gradient(to right, {color:gradient 1}, {color:gradient 2});
  1419. color:{color:posts};
  1420. border-radius:{select:border radius};
  1421. }
  1422.  
  1423. .etc b {
  1424. color:{color:posts};
  1425. }
  1426.  
  1427. {block:ifabeezee}
  1428. .etc {
  1429. font-family: abeezee;
  1430. font-size: 13.5px;
  1431. }
  1432. {/block:ifabeezee}
  1433.  
  1434. .etc a:hover {
  1435. color:{color:gradient 2};
  1436. border:none;
  1437. padding-left:0px;
  1438. -webkit-transition: all 0.5s ease;
  1439. transition: all 0.5s ease;
  1440. -moz-transition: all 0.5s ease;
  1441. -o-transition: all 0.5s ease;
  1442. }
  1443.  
  1444. </style>
  1445.  
  1446. <!--✻✻✻✻✻✻ 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.5s; } </style>
  1447.  
  1448. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script>
  1449. $(document).ready(function(){
  1450. $('.click,.fade').click(function() {
  1451. $('#pop').fadeToggle();
  1452. });
  1453. });
  1454. </script>
  1455.  
  1456. </head>
  1457.  
  1458. <!----- html ----->
  1459.  
  1460. <body>
  1461.  
  1462. <!--✻✻✻✻✻✻ npf audio player by @glenthemes ✻✻✻✻✻✻-->
  1463. <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  1464. <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  1465. <script>
  1466. tumblr_npf_audio({
  1467. emptyTitleText: "Untitled track",
  1468. emptyArtistText: "Untitled artist",
  1469. emptyAlbumText: "Untitled album",
  1470.  
  1471. titleLabel: "Track:",
  1472. artistLabel: "Artist:",
  1473. albumLabel: "Album:"
  1474. });
  1475. </script>
  1476. <style edit-npf-audio-player>
  1477. .npf-audio-wrapper {
  1478. --NPF-Audio-Buttons-Size: 1.4rem;
  1479. --NPF-Audio-Buttons-Color: {color:accent};
  1480. --NPF-Audio-Buttons-Spacing: 1.3rem;
  1481. --NPF-Audio-Image-Size: 72px;
  1482. --NPF-Audio-Image-Spacing: 5px;
  1483. }
  1484.  
  1485. .npf-audio-background {
  1486. background-color: {color:background};
  1487. padding: 1.5rem;
  1488. border-radius:{select:border radius};
  1489. margin-top:-0.4em;
  1490. }
  1491.  
  1492. .npf-audio-title-label,
  1493. .npf-audio-artist-label,
  1494. .npf-audio-album-label {
  1495. font-weight: bold;
  1496. color:{color:accent};
  1497. }
  1498.  
  1499. .npf-audio-title,
  1500. .npf-audio-artist,
  1501. .npf-audio-album {
  1502. color: {color:text};
  1503. }
  1504.  
  1505. /*----- updates -----*/
  1506.  
  1507. .tab {
  1508. left:10px;
  1509. bottom:10px;
  1510. position:fixed;
  1511. width:350px;
  1512. height:auto;
  1513. max-height:100%;
  1514. overflow:hidden;
  1515. z-index:999999999999999;
  1516. }
  1517.  
  1518. .tab_content {
  1519. color:{color:text};
  1520. display:none;
  1521. padding:20px;
  1522. width:250px;
  1523. height:165px;
  1524. background:{color:posts};
  1525. box-shadow:0px 0px {select:shadow} {color:borders};
  1526. border:{select:borders} solid {color:borders};
  1527. border-radius:{select:border radius};
  1528. }
  1529.  
  1530. .tab_content li {
  1531. list-style-type:none;
  1532. margin-bottom:9.5px;
  1533. line-height:25px;
  1534. }
  1535.  
  1536. {block:ifnunito}
  1537. .tab_content li {
  1538. list-style-type:none;
  1539. margin-bottom:9px;
  1540. line-height:25px;
  1541. }
  1542.  
  1543. .tab_content {
  1544. color:{color:text};
  1545. display:none;
  1546. padding:20px;
  1547. width:250px;
  1548. height:170px;
  1549. background:{color:posts};
  1550. border:{select:borders} solid {color:borders};
  1551. border-radius:{select:border radius};
  1552. }
  1553. {/block:ifnunito}
  1554.  
  1555. {block:ifroboto}
  1556. .tab_content {
  1557. color:{color:text};
  1558. display:none;
  1559. padding:20px;
  1560. width:250px;
  1561. height:163px;
  1562. background:{color:posts};
  1563. border:{select:borders} solid {color:borders};
  1564. border-radius:{select:border radius};
  1565. }
  1566. {/block:ifroboto}
  1567.  
  1568. {block:ifkarla}
  1569. .tab_content {
  1570. color:{color:text};
  1571. display:none;
  1572. padding:20px;
  1573. width:250px;
  1574. height:165px;
  1575. background:{color:posts};
  1576. border:{select:borders} solid {color:borders};
  1577. border-radius:{select:border radius};
  1578. }
  1579. {/block:ifkarla}
  1580.  
  1581. .tab_content b {
  1582. background:{color:accent};
  1583. color:{color:posts};
  1584. padding:5px;
  1585. padding-left:7px;
  1586. padding-right:7px;
  1587. border-radius:{select:border radius};
  1588. font-weight:bold;
  1589. margin-right:0.3em;
  1590. }
  1591.  
  1592. .tab_content bb {
  1593. background:{color:gradient 2};
  1594. color:{color:posts};
  1595. padding:5px;
  1596. padding-left:7px;
  1597. padding-right:7px;
  1598. border-radius:{select:border radius};
  1599. font-weight:bold;
  1600. margin-right:0.3em;
  1601. }
  1602.  
  1603. .tab_content i {
  1604. font-size:20px;
  1605. }
  1606.  
  1607. .tab_content a {
  1608. color:{color:text};
  1609. box-shadow:0px 2px 0px {color:borders};
  1610. }
  1611.  
  1612. .tab_content a:hover {
  1613. color:{color:accent};
  1614. box-shadow:0px 2px 0px {color:accent};
  1615. }
  1616.  
  1617. </style>
  1618.  
  1619. <main>
  1620.  
  1621. <div class="jin">
  1622. <div class="jincontrols">
  1623. <li><a class="scrollToTop"title="scroll to top"><i class="ph ph-arrow-circle-up"></i></a></li>
  1624. <li><a class="controls-button"title="controls"><i class="ph ph-gear"></i></a></li>
  1625. <li><a href="/"title="credit"><i class="ph ph-butterfly"></i></a></li>
  1626. </div></div>
  1627.  
  1628. <!----- heading ----->
  1629.  
  1630. <div id="heading">
  1631. <div id="linkiez">
  1632. <li><a href="/">refresh</a></li>
  1633. <li><a href="/ask">contact</a></li>
  1634. <li><a href="{text:header link url}">{text:header link title}</a></li>
  1635. <li><a href="/archive">archive</a></li>
  1636. </div>
  1637.  
  1638. </div> <!----- heading end ----->
  1639.  
  1640. <!----- 1st sidebar ----->
  1641.  
  1642. <div id="sidebar2">
  1643. <div style="position:absolute;top:-32px;left:125px;"><img src="{image:icon}"style="border-radius:100%;"></div>
  1644.  
  1645. <div id="title">
  1646. <a href="/">{Title}</a>
  1647. <br><span style="font-size:12.5px;text-transform:lowercase;font-weight:normal;">@{Name}</span>
  1648. </div>
  1649.  
  1650. <div id="follow">
  1651. <li><a href="https://tumblr.com/follow/{Name}">follow</a></li>
  1652. <li><a href="https://tumblr.com/message/{Name}">message</a></li>
  1653. </div>
  1654.  
  1655. </div> <!----- 1st sidebar end ----->
  1656.  
  1657. <!----- 2nd sidebar ----->
  1658.  
  1659. <div id="sidebar">
  1660. <img src="{image:sidebar}" id="sidebarie">
  1661. <div id="desc">{text:description}</div>
  1662.  
  1663. </div> <!----- 2nd sidebar end ----->
  1664.  
  1665. <!----- 3rd sidebar ----->
  1666.  
  1667. <div id="nav">
  1668. <li><a href="{text:link 1 url}"><i class="ph ph-magic-wand"></i><br>{text:link 1 title}</a></li>
  1669. <li><a href="{text:link 1 url}"><i class="ph ph-user"></i><br>{text:link 2 title}</a></li>
  1670. <li><div class="click"><i class="ph ph-list"></i><br>{text:popup title}</div></li>
  1671. <li><div class="tabs"><i class="ph ph-question"></i><br>{text:updates title}</div></li>
  1672.  
  1673. </div> <!----- 3rd sidebar end ----->
  1674.  
  1675. <div id="quickiez">
  1676. <div id="title"style="margin-top:-0.2em;">
  1677. <a href="/">recommended</a>
  1678. <br><span style="font-size:12.5px;text-transform:lowercase;font-weight:normal;">blogs to follow</span>
  1679. </div>
  1680. <div style="margin-top:3em;">
  1681. <li><img src="https://api.tumblr.com/v2/blog/{text:blog 1 name}.tumblr.com/avatar"> <div style="margin-top:-2.6em;margin-left:3em;"><a href="https://{text:blog 1 name}.tumblr.com/">{text:blog 1 name}</a><p style="margin-left:0em;margin-top:-0.1em;">{text:blog 1 desc}</p></div></li>
  1682.  
  1683. <li><img src="https://api.tumblr.com/v2/blog/{text:blog 2 name}.tumblr.com/avatar"> <div style="margin-top:-2.6em;margin-left:3em;"><a href="https://{text:blog 2 name}.tumblr.com/">{text:blog 2 name}</a><p style="margin-left:0em;margin-top:-0.1em;">{text:blog 2 desc}</p></div></li>
  1684.  
  1685. <li style="border-bottom:none;"><img src="https://api.tumblr.com/v2/blog/{text:blog 3 name}.tumblr.com/avatar"> <div style="margin-top:-2.6em;margin-left:3em;"><a href="https://{text:blog 3 name}.tumblr.com/">{text:blog 3 name}</a><p style="margin-left:0em;margin-top:-0.1em;">{text:blog 3 desc}</p></div></li>
  1686.  
  1687. </div>
  1688. </div>
  1689.  
  1690. <!----- popup ----->
  1691.  
  1692. <div id="pop"> <div class="fade"></div>
  1693. <div class="popup">
  1694.  
  1695. <div class="bio">
  1696. <li><b>name</b><br>{text:name}</li>
  1697. <li><b>age</b><br>{text:age}</li>
  1698. <li><b>pronouns</b><br>{text:pronouns}</li>
  1699. <li><b>tracking</b><br>{text:zodiac}</li>
  1700. </div>
  1701.  
  1702. <img src="{image:popup}" id="headerg">
  1703.  
  1704. <div class="bio2">
  1705. {text:popup box}
  1706. </div>
  1707.  
  1708. </div>
  1709. </div> <!----- popup end ----->
  1710.  
  1711. <section>
  1712.  
  1713. {block:TagPage}
  1714. <article>
  1715. <b>posts tagged under:</b> #{Tag}
  1716. </article>
  1717. {/block:TagPage}
  1718.  
  1719. <!----- posts ----->
  1720.  
  1721. {block:Posts}
  1722. <article class="posts" id="{PostID}">
  1723.  
  1724. <!----- rb/via ----->
  1725. <div class="rbinfo">
  1726. {block:RebloggedFrom}
  1727. <div class="user-icon"style="margin-top:-1.1em!important;"><img src="{ReblogParentPortraitURL-64}"></div>
  1728. <div class="username"><a href="{Permalink}">{Name}</a> <i class="ph ph-repeat"style="color:{color:text};font-size:11px;"></i> <span> <a href="{ReblogParentURL}"title="{ReblogParentTitle}">{ReblogParentName}</a><br>reblogged {TimeAgo}</span></div>
  1729. {/block:RebloggedFrom}
  1730. {block:NotReblog}
  1731. <div class="user-icon"style="margin-top:-1.1em!important;"><img src="{FavIcon}"></div>
  1732. <div class="username"><a href="{Permalink}"title="original post">{Name}</a><br> <span>posted {TimeAgo}</span></div>
  1733. {/block:NotReblog}
  1734. </div><!----- rb/via end ----->
  1735.  
  1736. <!----- buttons ----->
  1737.  
  1738. {block:Date}
  1739. <div class="buttons">
  1740. <div class="buttonscontrols">
  1741. {block:PinnedPostLabel}<a href="{Permalink}" class="pinned-post"title="pinned"><i class="ph ph-push-pin-simple"></i></a>{/block:PinnedPostLabel}
  1742.  
  1743. <a href="{Permalink}" title="{NoteCountWithLabel}"><i class="ph ph-note-pencil"></i></a>
  1744.  
  1745. <a href="{ReblogURL}" target="_blank" class="reblog"title="reblog"><i class="ph ph-repeat"></i></a>
  1746.  
  1747. <a href="#" class="like"title="like"style="padding-bottom:8.5px;">{LikeButton}<i class="ph ph-heart"></i></a>
  1748.  
  1749. {block:ContentSource}<a href="{SourceURL}"title="source"><i class="ph ph-link"></i></a>{/block:ContentSource}
  1750. </div>
  1751. </div>
  1752. {/block:Date}
  1753.  
  1754. {block:Text}
  1755. {block:Title}<h1>{Title}</h1>{/block:Title}
  1756. {block:NotReblog}
  1757. <li class="caption text-caption">
  1758. {Body}
  1759. </li>
  1760. {/block:NotReblog}
  1761. {block:RebloggedFrom}
  1762. {block:Reblogs}
  1763. <li class="caption text-caption">
  1764. <div class="user-icon"></div>
  1765. <div class="username"><a href="{Permalink}">{Username}</a></div>
  1766. {Body}
  1767. </li>
  1768. {/block:Reblogs}
  1769. {/block:RebloggedFrom}
  1770. {/block:Text}
  1771.  
  1772. {block:Link}
  1773. <a href="{URL}" class="link-wrap">
  1774. {block:Thumbnail}<img src="{Thumbnail-HighRes}">{/block:Thumbnail}
  1775. <div class="link">
  1776. <div class="title">{Name}</div>
  1777. {block:Excerpt}<div class="link-txt">{Excerpt}</div>{/block:Excerpt}
  1778. {block:Host}<div class="link-host">{Host}</div>{/block:Host}
  1779. </div>
  1780. </a>
  1781. {block:Description}
  1782. {block:NotReblog}
  1783. <li class="caption">
  1784. {Description}
  1785. </li>
  1786. {/block:NotReblog}
  1787. {/block:Description}
  1788. {block:RebloggedFrom}
  1789. {block:Reblogs}
  1790. <li class="caption">
  1791. <div class="user-icon"></div>
  1792. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1793. {Body}
  1794. </li>
  1795. {/block:Reblogs}
  1796. {/block:RebloggedFrom}
  1797. {/block:Link}
  1798.  
  1799. {block:Photo}
  1800. <div class="photo">
  1801. {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}
  1802. </div>
  1803. {block:Caption}
  1804. {block:NotReblog}
  1805. <li class="caption">
  1806. {Caption}
  1807. </li>
  1808. {/block:NotReblog}
  1809. {block:RebloggedFrom}
  1810. {block:Reblogs}
  1811. <li class="caption">
  1812. <div class="user-icon"></div>
  1813. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1814. {Body}
  1815. </li>
  1816. {/block:Reblogs}
  1817. {/block:RebloggedFrom}
  1818. {/block:Caption}
  1819. {/block:Photo}
  1820.  
  1821. {block:Photoset}
  1822. <div class="photo"style="margin-top:1em;">{Photoset-700}</div>
  1823. {block:Caption}
  1824. {block:NotReblog}
  1825. <li class="caption">
  1826. {Caption}
  1827. </li>
  1828. {/block:NotReblog}
  1829. {block:RebloggedFrom}
  1830. {block:Reblogs}
  1831. <li class="caption">
  1832. <div class="user-icon"></div>
  1833. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1834. {Body}
  1835. </li>
  1836. {/block:Reblogs}
  1837. {/block:RebloggedFrom}
  1838. {/block:Caption}
  1839. {/block:Photoset}
  1840.  
  1841. {block:Video}
  1842. <div class="video">{Video-500}</div>
  1843. {block:Caption}
  1844. {block:NotReblog}
  1845. <li class="caption">
  1846. {Caption}
  1847. </li>
  1848. {/block:NotReblog}
  1849. {block:RebloggedFrom}
  1850. {block:Reblogs}
  1851. <li class="caption">
  1852. <div class="user-icon"></div>
  1853. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1854. {Body}
  1855. </li>
  1856. {/block:Reblogs}
  1857. {/block:RebloggedFrom}
  1858. {/block:Caption}
  1859. {/block:Video}
  1860.  
  1861. {block:Quote}
  1862. <div class="quote">{Quote}</div>
  1863. {block:Source}<div class="source">{Source}</div>{/block:Source}
  1864. {/block:Quote}
  1865.  
  1866. {block:Chat}
  1867. {block:Title}<h1><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1868. <ul class="chat">{block:Lines}
  1869. <li>
  1870. {block:Label}<div class="chatter">{Label}</div>{/block:Label}
  1871. {Line}
  1872. </li>
  1873. {/block:Lines}</ul>
  1874. {/block:Chat}
  1875.  
  1876. {block:Answer}
  1877. <div class="asking"><b>{Asker}</b> sent a message
  1878. <div class="question">{Question}</div></div>
  1879. {block:Answerer}
  1880. <div class="answer2">{Answer}</div>
  1881. {/block:Answerer}
  1882. {block:NotReblog}
  1883. <li class="caption">
  1884. {Replies}
  1885. </li></div>
  1886. {/block:NotReblog}
  1887. {block:RebloggedFrom}
  1888. {block:Reblogs}
  1889. <li class="caption">
  1890. <div class="user-icon"></div>
  1891. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1892. {Body}
  1893. </li>
  1894. {/block:Reblogs}
  1895. {/block:RebloggedFrom}
  1896. {/block:Answer}
  1897.  
  1898. {block:Audio}
  1899. <div class="audiopost">
  1900. <div class="audiobox">
  1901. <div class="button">
  1902. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  1903. </div>
  1904. </div>
  1905. {block:AlbumArt}
  1906. <img src="{AlbumArtURL}" class="album-art">
  1907. {/block:AlbumArt}
  1908. <div class="audioinfo">
  1909. {block:TrackName}<li class="track">{TrackName}</li>{/block:TrackName}
  1910. {block:Artist}<li>{Artist}</li>{/block:Artist}
  1911. {block:Album}<li>{Album}</li>{/block:Album}
  1912. </div>
  1913. </div>
  1914. {block:Caption}
  1915. {block:NotReblog}
  1916. <li class="caption">
  1917. {Caption}
  1918. </li>
  1919. {/block:NotReblog}
  1920. {block:RebloggedFrom}
  1921. {block:Reblogs}
  1922. <li class="caption">
  1923. <div class="user-icon"></div>
  1924. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1925. {Body}
  1926. </li>
  1927. {/block:Reblogs}
  1928. {/block:RebloggedFrom}
  1929. {/block:Caption}
  1930. {/block:Audio}
  1931.  
  1932. <!----- tags ----->
  1933.  
  1934. {block:HasTags}
  1935. <div class="tags">
  1936. {block:Tags}
  1937. <a href="{TagURL}">{Tag}</a>
  1938. {/block:Tags}
  1939. </div>
  1940. {/block:HasTags}
  1941.  
  1942. <!----- notes ----->
  1943.  
  1944. {block:PermalinkPage}{block:Date}
  1945. {block:NoteCount}{block:PostNotes}
  1946. <div class="notes">
  1947. {PostNotes-64}
  1948. </div>
  1949. {/block:PostNotes}{/block:NoteCount}
  1950. {/block:Date}{/block:PermalinkPage}
  1951.  
  1952. </article>
  1953.  
  1954. {/block:Posts}
  1955.  
  1956. <!----- pagination ----->
  1957.  
  1958. {block:Pagination}
  1959. <article id="page-navigation">
  1960.  
  1961. {block:PreviousPage}
  1962. <div style="position:absolute; left:10px; margin-top:-0.15em;"><a href="{PreviousPage}"title="previous page"><i class="ph ph-arrow-circle-left"></i></a></div>
  1963. {/block:PreviousPage}
  1964.  
  1965. {block:JumpPagination length="5"}
  1966. {block:CurrentPage}<span class="current-page">{PageNumber}</span>{/block:CurrentPage}
  1967. {block:JumpPage}<a href="{URL}">{PageNumber}</a>{/block:JumpPage}
  1968. {/block:JumpPagination}
  1969.  
  1970. {block:NextPage}
  1971. <div style="position:absolute; right:10px;margin-top:-1.5em;"><a href="{NextPage}"title="next page"><i class="ph ph-arrow-circle-right"></i></a></div>{/block:NextPage}
  1972. </article>
  1973. {/block:Pagination}
  1974.  
  1975. </section>
  1976.  
  1977. </main>
  1978.  
  1979. <!----- scripts ----->
  1980.  
  1981. <script src="https://unpkg.com/popper.js@1"></script>
  1982. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1983. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  1984.  
  1985. <script>
  1986.  
  1987. $(document).ready(function(){
  1988.  
  1989. //Check to see if the window is top if not then display button
  1990. $(window).scroll(function(){
  1991. if ($(this).scrollTop() > 100) {
  1992. $('.scrollToTop').fadeIn(0);
  1993. } else {
  1994. $('.scrollToTop').fadeOut(0);
  1995. }
  1996. });
  1997.  
  1998. //Click event to scroll to top
  1999. $('.scrollToTop').click(function(){
  2000. $('html, body').animate({scrollTop : 0},800);
  2001. return false;
  2002. });
  2003.  
  2004. });
  2005.  
  2006.  
  2007. tippy('a[title]', {
  2008. theme: 'custom',
  2009. arrow: tippy.round,
  2010. zIndex: 9999999999,
  2011. maxWidth: 300,
  2012.  
  2013. content(reference) {
  2014. const title = reference.getAttribute('title');
  2015. reference.removeAttribute('title');
  2016. return title;
  2017. },
  2018. });
  2019. </script>
  2020.  
  2021. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  2022.  
  2023. <script>
  2024. $(document).ready(function(){
  2025. $('.controls-button').click(function(){
  2026. $('body').toggleClass('controls-click');
  2027. });
  2028. });
  2029. </script>
  2030.  
  2031. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  2032. <script>
  2033. $(document).ready(function(){
  2034. $('.search').submit(function(event){
  2035. var value = $('input:first').val();
  2036. location.replace('https://{Name}.tumblr.com/tagged/' + value);
  2037. });
  2038. });
  2039. </script>
  2040.  
  2041. </body>
  2042.  
  2043. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  2044. <script>
  2045. $(document).ready(function(){
  2046. $(".tabs").click(function(){
  2047. $(".tab_content").slideToggle("slow");
  2048. });
  2049. });
  2050. </script>
  2051.  
  2052. <!----- updates ----->
  2053.  
  2054. <div class="tab">
  2055. <div class="tab_content">
  2056.  
  2057. <li><i class="ph ph-television"style="color:{color:accent};"></i>
  2058. <div style="margin-top:-2.2em;margin-left:2em;"><b>watching</b> {text:watching}</div></li>
  2059.  
  2060. <li><i class="ph ph-headphones"style="color:{color:gradient 2};"></i>
  2061. <div style="margin-top:-2.2em;margin-left:2em;"><bb>listening to</bb> {text:listening to}</div></li>
  2062.  
  2063. <li><i class="ph ph-book"style="color:{color:accent};"></i>
  2064. <div style="margin-top:-2.2em;margin-left:2em;"><b>reading</b> {text:reading} </div></li>
  2065.  
  2066. <li><i class="ph ph-magic-wand"style="color:{color:gradient 2};"></i>
  2067. <div style="margin-top:-2.2em;margin-left:2em;"><bb>working on</bb> {text:working on} </div></li>
  2068.  
  2069. <li><i class="ph ph-info"style="color:{color:accent};"></i>
  2070. <div style="margin-top:-2.2em;margin-left:2em;"><b>status</b> {text:status}</div></li>
  2071.  
  2072. </div>
  2073. </div> <!----- updates end ----->
  2074.  
  2075. </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!