API tools faq
paste
kosmique

theme: urano

kosmique
Nov 24th, 2020 (edited)
4,644
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 42.12 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. by kosmique.tumblr.com
  4.  
  5. full credit list at kosmique.tumblr.com/credits
  6. -->
  7.  
  8. <!DOCTYPE html>
  9. <head>
  10.  
  11. <title>{block:PostSummary}{PostSummary} : {/block:PostSummary}{Title}</title>
  12.  
  13. <link rel="shortcut icon" href="{favicon}">
  14.  
  15. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  16. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  17.  
  18. <meta name="viewport" content="width=device-width, initial-scale=1">
  19.  
  20. <!--Default Variables-->
  21.  
  22. <meta name="if:Infinite Scroll" content="1"/>
  23. <meta name="if:Manual Load" content=""/>
  24.  
  25. <meta name="text:Link one title" content="link title"/>
  26. <meta name="text:Link one icon" content="cloud"/>
  27. <meta name="text:Link one URL" content="/"/>
  28.  
  29. <meta name="text:Link two title" content="link title"/>
  30. <meta name="text:Link two icon" content="sun"/>
  31. <meta name="text:Link two URL" content="/"/>
  32.  
  33. <meta name="text:Link three title" content="link title"/>
  34. <meta name="text:Link three icon" content="moon"/>
  35. <meta name="text:Link three URL" content="/"/>
  36.  
  37. <meta name="text:Link four title" content="link title"/>
  38. <meta name="text:Link four icon" content="star"/>
  39. <meta name="text:Link four URL" content="/"/>
  40.  
  41. <meta name="color:Background" content="#f5f5f5"/>
  42. <meta name="color:Accent" content="#ffbbcb"/>
  43. <meta name="color:Sub color" content="#a9c9ff"/>
  44. <meta name="color:Text" content="#646464"/>
  45. <meta name="color:Sub text" content="#ffffff"/>
  46. <meta name="color:Link" content="#000000"/>
  47. <meta name="color:Title" content="#000000"/>
  48. <meta name="color:Borders" content="#f2f2f2"/>
  49. <meta name="color:Scrollbar" content="#000000"/>
  50. <meta name="color:Shadows" content="#000000"/>
  51. <meta name="color:Posts" content="#ffffff"/>
  52.  
  53. <!--Scripts-->
  54.  
  55. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  56. <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
  57. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  58. <script src="https://static.tumblr.com/dj2anrv/ZVmq8svlk/jquery.style-my-tooltips.js"></script>
  59. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  60. <script src="//cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosets.js"></script>
  61. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.js"></script>
  62.  
  63. <link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,200;0,400;0,700;1,400;1,700&family=Merriweather:wght@700&display=swap" rel="stylesheet">
  64. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  65. <link href="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosetstyle.css" rel="stylesheet" type="text/css">
  66. <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_o5hd5vvqpoqiwwmi.css">
  67.  
  68. <!--CSS customization here. -->
  69.  
  70. <style type="text/css">
  71.  
  72. *{box-sizing:border-box}
  73.  
  74. :root{
  75. --Main-font:'barlow';
  76. --Sub-font:'merriweather';
  77. }
  78.  
  79. .icon {
  80. speak:none;
  81. line-height:1;
  82. font-style:normal;
  83. font-weight:normal;
  84. font-variant:normal;
  85. text-transform:none;
  86. font-family:'feather' !important;
  87. -webkit-font-smoothing:antialiased;
  88. -moz-osx-font-smoothing:grayscale;
  89. }
  90.  
  91. body{
  92. margin:0;
  93. width:100%;
  94. height:100%;
  95. overflow-x:hidden;
  96. word-break:break-word;
  97. color:{color:text};
  98. background-color:{color:background};
  99. font:400 13px/1.6 var(--Main-font), sans-serif;
  100. }
  101.  
  102. body::before {
  103. top:0;
  104. left:0;
  105. z-index:-1;
  106. content:'';
  107. width:100vw;
  108. height:100px;
  109. position:fixed;
  110. background-color:{color:accent};
  111. background-image:linear-gradient(240deg, {color:sub color} 0%, {color:accent} 100%);
  112. }
  113.  
  114. :focus{
  115. border:0;
  116. outline:0;
  117. }
  118.  
  119. a, a:hover{
  120. cursor:pointer;
  121. transition:ease .3s;
  122. text-decoration:none;
  123. -moz-transition:ease .3s;
  124. -webkit-transition:ease .3s;
  125. }
  126.  
  127. a{color:{color:link}}
  128.  
  129. b, strong{font-weight:700;}
  130.  
  131. b, i, strike, u{color:{color:accent}}
  132.  
  133. small,sub,sup{font-size:.7em;}
  134.  
  135. big{font-size:1.1em;}
  136.  
  137. p {margin:.7em 0;}
  138. p:first-of-type {margin-top:0;}
  139. p:last-of-type {margin-bottom:0;}
  140.  
  141. h1, h2, h3, h4 {
  142. margin:1em 0;
  143. font-weight:700;
  144. font-size:1.05em;
  145. }
  146.  
  147. blockquote{
  148. margin:.5em 0;
  149. padding:2px 10px;
  150. font-style:italic;
  151. border-left:2px solid {color:sub color};
  152. }
  153.  
  154. pre{
  155. padding:15px;
  156. margin:.5em 0;
  157. display:block;
  158. user-select:all;
  159. border-radius:4px;
  160. font-family:inherit;
  161. -ms-user-select:all;
  162. white-space:pre-wrap;
  163. -webkit-user-select:all;
  164. color:{color:background};
  165. background:{color:accent};
  166. }
  167.  
  168. code{
  169. margin:0;
  170. color:{color:background};
  171. display:inline;
  172. padding:3px 10px;
  173. border-radius:4px;
  174. background:{color:accent};
  175. font-family:inherit;
  176. }
  177.  
  178. h1:first-of-type, h2:first-of-type, h3:first-of-type, h4:first-of-type {margin-top:0;}
  179.  
  180. ul,ol{
  181. padding:0;
  182. margin:0;
  183. list-style:none;
  184. }
  185.  
  186. .post > ul, .post > ol:not(.notes):not(.chat){padding-left:1em!important;}
  187.  
  188. .post > ul li::before, .post > ol:not(.notes):not(.chat) li::before{
  189. width:5px;
  190. height:5px;
  191. content:"";
  192. margin-right:1em;
  193. position:relative;
  194. display:inline-block;
  195. vertical-align:middle;
  196. background:rgba({RGBcolor:Sub color},.5);
  197. }
  198.  
  199. hr {
  200. width:30%;
  201. height:1px;
  202. border:none;
  203. box-shadow:0;
  204. margin:1em auto;
  205. background:{color:borders};
  206. }
  207.  
  208. a.read_more{
  209. color:{color:sub text};
  210. padding:5px 10px;
  211. background:{color:accent};
  212. border-radius:4px;
  213. display:inline-block;
  214. text-transform:uppercase;
  215. }
  216.  
  217. .credits{
  218. top:20px;
  219. right:20px;
  220. z-index:99;
  221. position:fixed;
  222. color:{color:sub text};
  223. }
  224.  
  225. .credits svg{
  226. width:1em;
  227. height:1em;
  228. }
  229.  
  230. /*tumblr controls*/
  231.  
  232. iframe.iframe-controls--desktop {
  233. opacity:.4;
  234. top:auto;
  235. bottom:0!important;
  236. margin-bottom:20px;
  237. filter:invert(1);
  238. z-index:12!important;
  239. left:15px!important;
  240. transform:scale(0.55);
  241. position:fixed!important;
  242. -moz-transform:scale(0.55);
  243. transform-origin:left bottom;
  244. -webkit-transform:scale(0.55);
  245. -moz-transform-origin:left bottom;
  246. -webkit-transform-origin:left bottom;
  247. }
  248.  
  249.  
  250. .tmblr-iframe--follow-teaser, .tmblr-iframe--app-cta-button{display:none !important;}
  251.  
  252. /*lightboxes*/
  253.  
  254. img{
  255. height:auto;
  256. display:block;
  257. max-width:100%;
  258. }
  259.  
  260. iframe{display:block;}
  261.  
  262. .vignette, #vignette {opacity:0;}
  263.  
  264. .lightbox-image, #tumblr_lightbox img {
  265. box-shadow:none !important;
  266. border-radius:0 !important;
  267. max-width:none;
  268. }
  269.  
  270. .tmblr-lightbox, #tumblr_lightbox {background:rgba({RGBcolor:background},.9) !important;}
  271.  
  272. .lightbox-caption, #tumblr_lightbox_caption {visibility:hidden;}
  273.  
  274. .npf_row figure{cursor:pointer;}
  275.  
  276. .npf_row figure:focus{outline:0;}
  277.  
  278. /*tooltip*/
  279.  
  280. #s-m-t-tooltip{
  281. z-index:9999999;
  282. max-width:300px;
  283. padding:3px 15px;
  284. position:relative;
  285. border-radius:3px;
  286. margin:0 14px 7px 30px;
  287. -moz-border-radius:3px;
  288. text-transform:lowercase;
  289. -webkit-border-radius:3px;
  290. color:{color:sub text};
  291. background:{color:accent};
  292. border:3px solid {color:posts};
  293. }
  294.  
  295. #s-m-t-tooltip::before{
  296. top:50%;
  297. width:0;
  298. height:0;
  299. left:-8px;
  300. content:'';
  301. position:absolute;
  302. border-style:solid;
  303. transform:translatey(-50%);
  304. border-width:5px 5px 5px 0;
  305. border-color:transparent {color:posts} transparent transparent;
  306.  
  307. }
  308.  
  309. /*scrollbar*/
  310.  
  311. ::-webkit-scrollbar{
  312. width:11px;
  313. height:11px;
  314. padding:4px;
  315. background-color:{color:borders};
  316. }
  317.  
  318. ::-webkit-scrollbar-thumb {
  319. border-radius:10px;
  320. background:{color:scrollbar};
  321. background-clip:padding-box;
  322. border:4px solid transparent;
  323. }
  324.  
  325. /*selection*/
  326.  
  327. ::selection{background:{color:background};}
  328.  
  329. ::-moz-selection{background:{color:background};}
  330.  
  331. /*pagination*/
  332.  
  333. {block:ifInfiniteScroll}#pagination {display:none;}{/block:ifInfiniteScroll}
  334.  
  335. {block:ifNotInfiniteScroll}
  336. #pagination {
  337. display:flex;
  338. margin:50px auto;
  339. justify-content:center;
  340. width:calc(500px + 350px);
  341. }
  342.  
  343. #pagination a, #pagination span{
  344. width:30px;
  345. height:30px;
  346. display:flex;
  347. margin:0 10px;
  348. border-radius:4px;
  349. align-items:center;
  350. justify-content:center;
  351. color:{color:sub text};
  352. box-shadow:1px 1px 1px rgba({RGBcolor:shadows},.05);
  353. }
  354.  
  355. #pagination a{background-image:linear-gradient(240deg, {color:sub color} 0%, {color:accent} 100%);}
  356.  
  357. #pagination span{background:{color:accent};}
  358.  
  359. #pagination svg{
  360. width:1em;
  361. height:1em;
  362. }
  363.  
  364. {/block:ifNotInfiniteScroll}
  365.  
  366. .manual{
  367. display:flex;
  368. margin:50px auto;
  369. justify-content:center;
  370. width:calc(500px + 350px);
  371. }
  372.  
  373. .load-more{
  374. padding:10px 20px;
  375. border-radius:5px;
  376. display:inline-block;
  377. text-transform:uppercase;
  378. color:{color:sub text};
  379. background-image:linear-gradient(240deg, {color:sub color} 0%, {color:accent} 100%);
  380. }
  381.  
  382. #infscr-loading {display:none!important;}
  383.  
  384. /*menu*/
  385.  
  386. #menu{
  387. left:10px;
  388. bottom:10px;
  389. z-index:99;
  390. height:50px;
  391. display:none;
  392. position:fixed;
  393. border-radius:5px;
  394. align-items:center;
  395. width:calc(100vw - 20px);
  396. justify-content:space-evenly;
  397. background-color:{color:accent};
  398. box-shadow:2px 2px 3px -2px rgba({RGBcolor:shadows},.1);
  399. background-image:linear-gradient(240deg, {color:sub color} 0%, {color:accent} 100%);
  400. }
  401.  
  402. .r-menu{
  403. top:0;
  404. opacity:0;
  405. z-index:10;
  406. width:100vw;
  407. height:100vh;
  408. padding:50px;
  409. position:fixed;
  410. overflow-y:overlay;
  411. border-top:5px solid;
  412. border-image-slice:1;
  413. transition:ease-out .2s;
  414. transform:translatex(100%);
  415. background:{color:posts};
  416. -moz-transition:ease-out .2s;
  417. -webkit-transition:ease-out .2s;
  418. border-image-source:linear-gradient(240deg, {color:sub color} 0%, {color:accent} 100%);
  419. }
  420.  
  421. .r-menu > *{opacity:0;}
  422.  
  423. .r-menu.active > *{
  424. opacity:1;
  425. transition-delay:.4s;
  426. }
  427.  
  428. .r-menu.active{
  429. opacity:1;
  430. transform:translatex(0);
  431. }
  432.  
  433. .r-menu .blog-title{margin-bottom:50px;}
  434.  
  435. .r-menu nav a{
  436. width:100%;
  437. padding:10px;
  438. display:flex;
  439. font-weight:700;
  440. border-radius:3px;
  441. align-items:center;
  442. margin-bottom:10px;
  443. color:{color:text};
  444. background:rgba({RGBcolor:borders},.3);
  445. border:1px solid {color:borders};
  446. }
  447.  
  448. .r-menu nav{
  449. padding:10px;
  450. display:flex;
  451. flex-wrap:wrap;
  452. margin-top:50px;
  453. align-items:center;
  454. flex-direction:column;
  455. justify-content:space-between;
  456. }
  457.  
  458. .r-menu svg{margin-right:20px;}
  459.  
  460. /*sidebar*/
  461.  
  462. aside{
  463. z-index:9;
  464. width:250px;
  465. position:fixed;
  466. border-radius:5px;
  467. overflow-x:hidden;
  468. box-shadow:2px 2px 3px -2px rgba({RGBcolor:shadows},.1);
  469. }
  470.  
  471. .sidebar{
  472. display:flex;
  473. align-items:center;
  474. background:{color:posts};
  475. }
  476.  
  477. .side-one, .side-two{
  478. flex:auto;
  479. min-width:250px;
  480. transition:ease .3s;
  481. -moz-transition:ease .3s;
  482. -webkit-transition:ease .3s;
  483. }
  484.  
  485. .side-two{
  486. padding:5px;
  487. display:flex;
  488. flex-wrap:wrap;
  489. align-self:normal;
  490. justify-content:space-between;
  491. }
  492.  
  493. .side-two a{
  494. display:flex;
  495. font-weight:700;
  496. border-radius:3px;
  497. align-items:center;
  498. flex-direction:column;
  499. color:{color:text};
  500. justify-content:center;
  501. width:calc(250px/2 - 7px);
  502. height:calc(250px/2 - 35px);
  503. background:rgba({RGBcolor:borders},.3);
  504. border:1px solid {color:borders};
  505. }
  506.  
  507. .side-two a:nth-of-type(2), .side-two a:first-of-type{margin-bottom:2.5px}
  508.  
  509. .side-two a:nth-of-type(3), .side-two a:last-of-type{margin-top:2.5px}
  510.  
  511. .side-two a span{
  512. display:block;
  513. max-width:80%;
  514. overflow:hidden;
  515. margin-top:10px;
  516. white-space:nowrap;
  517. text-overflow:ellipsis;
  518. }
  519.  
  520. .side-two a:hover svg, .r-menu nav a:hover svg{
  521. fill:{color:accent};
  522. color:{color:accent};
  523. filter:drop-shadow(1px 1px 1px);
  524. }
  525.  
  526. .side-one.active, .side-two.active{transform:translatex(-250px);}
  527.  
  528. .menu{
  529. height:50px;
  530. display:flex;
  531. align-items:center;
  532. border-radius:5px 5px 0 0;
  533. border-bottom:0!important;
  534. justify-content:space-evenly;
  535. border:5px solid {color:posts};
  536. }
  537.  
  538. #menu a, .menu a{color:{color:sub text};}
  539.  
  540. #menu svg, .menu svg, .side-two svg, .r-menu svg{
  541. width:1.1em;
  542. height:1.1em;
  543. display:block;
  544. transition:ease .2s;
  545. -moz-transition:ease .2s;
  546. -webkit-transition:ease .2s;
  547. }
  548.  
  549. .nav{position:relative;}
  550.  
  551. .nav::before{
  552. opacity:0;
  553. width:100%;
  554. height:5px;
  555. content:'';
  556. bottom:-16px;
  557. position:absolute;
  558. border-radius:15px;
  559. transition:ease .3s;
  560. -moz-transition:ease .3s;
  561. transform:translatex(10px);
  562. -webkit-transition:ease .3s;
  563. background-color:{color:accent};
  564. background-image:linear-gradient(240deg, {color:sub color} 0%, {color:accent} 100%);
  565. }
  566.  
  567. .nav.active::before{
  568. opacity:1;
  569. transform:translatex(0);
  570. }
  571.  
  572. .blog-title{
  573. padding:10px;
  574. display:flex;
  575. font-size:.75em;
  576. font-weight:700;
  577. align-items:center;
  578. letter-spacing:2px;
  579. text-transform:uppercase;
  580. color:{color:sub color};
  581. font-family:var(--Sub-font);
  582. }
  583.  
  584. .blog-title span {
  585. max-width:90%;
  586. overflow:hidden;
  587. white-space:nowrap;
  588. text-overflow:ellipsis;
  589. }
  590.  
  591. #top img, .blog-title img{
  592. width:25px;
  593. height:25px;
  594. margin-right:10px;
  595. border-radius:100%;
  596. border-top:3px solid {color:accent};
  597. border-bottom:3px solid {color:accent};
  598. border-left:3px solid {color:sub color};
  599. border-right:3px solid {color:sub color};
  600. }
  601.  
  602. .blog-description{padding:0 10px 10px;}
  603.  
  604. .blog-description span, .search form{
  605. padding:10px;
  606. display:block;
  607. border-radius:5px;
  608. background:{color:background};
  609. border:1px solid {color:borders};
  610. }
  611.  
  612. .blog-description span{
  613. max-height:80px;
  614. overflow:hidden;
  615. line-height:1.65;
  616. display:-webkit-box;
  617. -webkit-line-clamp:3;
  618. -webkit-box-orient:vertical;
  619. }
  620.  
  621. .search{
  622. padding:0 10px 10px;
  623. border-radius:0 0 5px 5px;
  624. }
  625.  
  626. .search input{
  627. border:0;
  628. font:inherit;
  629. color:inherit;
  630. background:transparent;
  631. }
  632.  
  633. input:focus::-webkit-input-placeholder {color:transparent;}
  634. input:focus::-moz-placeholder {color:transparent;}
  635.  
  636. /*posts*/
  637.  
  638. #entries{
  639. margin:50px auto;
  640. position:relative;
  641. width:calc(500px + 350px);
  642. }
  643.  
  644. .post {
  645. width:500px;
  646. padding:20px;
  647. overflow:hidden;
  648. border-radius:5px;
  649. margin:0 0 120px 350px;
  650. background:{color:posts};
  651. box-shadow:2px 2px 3px -2px rgba({RGBcolor:shadows},.1);
  652. }
  653.  
  654. .pin{
  655. float:right;
  656. display:flex;
  657. padding:10px 15px;
  658. align-items:flex-start;
  659. margin:-20px -20px 20px;
  660. text-transform:uppercase;
  661. color:{color:sub text};
  662. background:{color:accent};
  663. border-bottom-left-radius:5px;
  664. }
  665.  
  666. .pin + *:not(.title), .title + *:not(.pin), .as + *{clear:both;}
  667.  
  668. .pin svg{
  669. width:1.3em;
  670. height:1.3em;
  671. margin-right:10px;
  672. fill:{color:sub text};
  673. }
  674.  
  675. .photo {
  676. overflow:hidden;
  677. position:relative;
  678. border-radius:5px;
  679. }
  680.  
  681. .photo img, .tex > .tmblr-full img{
  682. width:100%;
  683. display:block;
  684. }
  685.  
  686. .tex > .tmblr-full img, .npf_photoset{
  687. overflow:hidden;
  688. border-radius:10px;
  689. }
  690.  
  691. /*titles*/
  692.  
  693. .post .title:first-of-type {
  694. float:left;
  695. max-width:80%;
  696. overflow:hidden;
  697. padding:10px 15px;
  698. white-space:nowrap;
  699. text-overflow:ellipsis;
  700. margin:-20px -20px 20px;
  701. text-transform:uppercase;
  702. color:{color:sub text};
  703. border-bottom-right-radius:5px;
  704. background:{color:sub color};
  705. }
  706.  
  707. .post.title a {color:rgb(var(--Title));}
  708.  
  709. .post.title a:hover {color:{color:link};}
  710.  
  711. /*captions*/
  712.  
  713. .photo + .captions, .audio + .captions, .link + .captions{margin-top:20px;}
  714.  
  715. .comment {
  716. padding:20px;
  717. margin:20px 0;
  718. list-style:none;
  719. border-radius:5px;
  720. background:rgba({RGBcolor:borders},.5);
  721. }
  722.  
  723. .comment:first-of-type{margin-top:0;}
  724.  
  725. .npf_photoset + p{margin-top:25px;}
  726.  
  727. .user {
  728. font-size:1.1em;
  729. font-weight:700;
  730. padding:5px 10px;
  731. border-radius:5px;
  732. margin-bottom:1.5em;
  733. display:inline-block;
  734. background:{color:posts};
  735. border:1px solid {color:borders};
  736. }
  737.  
  738. .icon{display:none}
  739.  
  740. /*quote*/
  741. .q{
  742. display:flex;
  743. align-items:center;
  744. flex-direction:column;
  745. }
  746.  
  747. .quote{
  748. padding:15px;
  749. font-size:1.1em;
  750. border:1px solid;
  751. border-radius:5px;
  752. border-top-color:{color:accent};
  753. border-left-color:{color:accent};
  754. border-right-color:{color:sub color};
  755. border-bottom-color:{color:sub color};
  756. }
  757.  
  758. .source {
  759. margin:20px auto;
  760. padding:10px 15px;
  761. position:relative;
  762. display:inline-block;
  763. }
  764.  
  765. .source::before{
  766. top:0;
  767. left:0;
  768. width:50%;
  769. content:'';
  770. height:100%;
  771. position:absolute;
  772. border-right:0!important;
  773. border-radius:5px 0 0 5px;
  774. border:1px solid {color:accent};
  775. }
  776.  
  777. .source::after{
  778. top:0;
  779. right:0;
  780. width:50%;
  781. content:'';
  782. height:100%;
  783. position:absolute;
  784. border-left:0!important;
  785. border-radius:0 5px 5px 0;
  786. border:1px solid {color:sub color};
  787. }
  788.  
  789. .left-arrow, .right-arrow{
  790. width:0;
  791. height:0;
  792. top:-7px;
  793. position:absolute;
  794. border-style:solid;
  795. }
  796.  
  797. .left-arrow{
  798. left:calc(50% - 7px);
  799. border-width:7px 7px 0px 0;
  800. border-color:transparent {color:accent} transparent transparent;
  801. }
  802.  
  803. .right-arrow{
  804. left:50%;
  805. border-width:7px 0 0px 7px;
  806. border-color: transparent transparent transparent {color:sub color};
  807. }
  808.  
  809. /*link*/
  810.  
  811. .link{
  812. padding:15px;
  813. font-size:1.3em;
  814. font-weight:600;
  815. border-radius:5px;
  816. border:1px solid {color:borders};
  817. }
  818.  
  819. /*audio*/
  820.  
  821. .player {
  822. width:100%;
  823. display:flex;
  824. padding:20px;
  825. justify-content:center;
  826. }
  827.  
  828. .player iframe, .player span{
  829. width:30px;
  830. height:30px;
  831. display:flex;
  832. margin:0 10px;
  833. border-radius:4px;
  834. align-items:center;
  835. justify-content:center;
  836. border:1px solid {color:borders};
  837. }
  838.  
  839. .player svg{
  840. width:1em;
  841. height:1em;
  842. }
  843.  
  844. .audio {
  845. display:flex;
  846. flex-wrap:wrap;
  847. overflow:hidden;
  848. position:relative;
  849. border-radius:5px;
  850. border:1px solid {color:borders};
  851. }
  852.  
  853. .audio_info {
  854. display:flex;
  855. padding:10px 20px;
  856. flex-direction:column;
  857. justify-content:center;
  858. text-transform:uppercase;
  859. color:{color:sub text};
  860. min-width:calc(100% - 100px);
  861. background-image:linear-gradient(240deg, {color:sub color} 0%, {color:accent} 100%);
  862. }
  863.  
  864. .audio_info span {
  865. display:block;
  866. overflow:hidden;
  867. white-space:nowrap;
  868. text-overflow:ellipsis;
  869. }
  870.  
  871. .audio-cover{
  872. width:100px;
  873. height:100px;
  874. }
  875.  
  876. .audio .artist {font-size:.85em}
  877.  
  878. /*asks*/
  879.  
  880. .question{
  881. padding:20px;
  882. overflow:hidden;
  883. border-radius:5px;
  884. margin-bottom:20px;
  885. border:1px solid {color:sub color};
  886. }
  887.  
  888. .answer{
  889. padding:20px;
  890. overflow:hidden;
  891. border-radius:5px;
  892. margin-bottom:20px;
  893. border:1px solid {color:accent};
  894. }
  895.  
  896. .as{
  897. padding:10px;
  898. display:flex;
  899. align-items:center;
  900. margin:-20px -20px 20px;
  901. text-transform:uppercase;
  902. color:{color:sub text};
  903. }
  904.  
  905. .question .as{
  906. float:left;
  907. border-radius:0 0 5px 0;
  908. background:{color:sub color};
  909. }
  910.  
  911. .answer .as{
  912. float:right;
  913. border-radius:0 0 0 5px;
  914. background:{color:accent};
  915. }
  916.  
  917. .as a{color:{color:sub text};}
  918.  
  919. .question .icon, .answer .icon{
  920. width:1.1em;
  921. height:1.1em;
  922. display:block;
  923. color:{color:sub text};
  924. }
  925.  
  926. .question .icon{margin-right:20px;}
  927.  
  928. .answer .icon{margin-left:20px;}
  929.  
  930. .question .tex, .answer .tex{
  931. padding:20px;
  932. border-radius:5px;
  933. }
  934.  
  935. .question .tex{background:rgba({RGBcolor:Sub color},.4);}
  936.  
  937. .answer .tex{background:rgba({RGBcolor:accent},.4);}
  938.  
  939. /*chat*/
  940.  
  941. .chat{
  942. display:flex;
  943. margin-bottom:20px;
  944. flex-direction:column;
  945. }
  946.  
  947. .l {
  948. display:flex;
  949. max-width:80%;
  950. margin-bottom:15px;
  951. flex-flow:column-reverse;
  952. }
  953.  
  954. .l.even {
  955. text-align:right;
  956. align-self:flex-end;
  957. }
  958.  
  959. .label {
  960. font-size:.85em;
  961. margin:1em .5em .5em;
  962. display:inline-block;
  963. }
  964.  
  965. .line{
  966. padding:10px 15px;
  967. position:relative;
  968. border-radius:5px;
  969. color:{color:sub text};
  970. }
  971.  
  972. .l.odd .line::before{
  973. width:0;
  974. height:0;
  975. left:10px;
  976. content:'';
  977. bottom:-5px;
  978. position:absolute;
  979. border-style:solid;
  980. border-width:5px 5px 0 5px;
  981. border-color:{color:accent} transparent transparent transparent;
  982. }
  983.  
  984. .l.even .line::before{
  985. width:0;
  986. height:0;
  987. right:10px;
  988. content:'';
  989. bottom:-5px;
  990. position:absolute;
  991. border-style:solid;
  992. border-width:5px 5px 0 5px;
  993. border-color:{color:sub color} transparent transparent transparent;
  994. }
  995.  
  996. .l.odd .line{background:{color:accent};}
  997.  
  998. .l.even .line{background:{color:sub color};}
  999.  
  1000. .l:first-of-type {margin-top:0;}
  1001.  
  1002. .l:last-of-type {margin-bottom:0;}
  1003.  
  1004. /*permalink and notes*/
  1005.  
  1006. .photo + .when, .photo + .tags, .audio + .when, .audio + .tags{margin-top:20px;}
  1007.  
  1008. .when {
  1009. padding:20px;
  1010. margin:0 -20px -20px;
  1011. text-transform:uppercase;
  1012. border-radius:0 0 5px 5px;
  1013. color:{color:sub text};
  1014. background:{color:sub color};
  1015. }
  1016.  
  1017. .when a{
  1018. display:flex;
  1019. overflow:hidden;
  1020. position:relative;
  1021. align-items:center;
  1022. color:{color:sub text};
  1023. }
  1024.  
  1025. a.perma {
  1026. }
  1027.  
  1028. .when svg, .tags svg{
  1029. width:.85em;
  1030. height:.85em;
  1031. margin-right:10px;
  1032. }
  1033.  
  1034. .when li{
  1035. display:flex;
  1036. margin-top:1em;
  1037. align-items:center;
  1038. }
  1039.  
  1040. .when li:first-of-type{margin-top:0;}
  1041.  
  1042. .when .like{margin-right:20px;}
  1043.  
  1044. .liked ~ svg{
  1045. color:{color:accent};
  1046. filter:drop-shadow(1px 1px 1px);
  1047. }
  1048.  
  1049. .liked ~ span::after{content:"d"!important;}
  1050.  
  1051. .when .like span::after{content:"?"}
  1052.  
  1053. .when .like .like_button {position:relative;}
  1054.  
  1055. .when .like .like_button iframe {
  1056. position:absolute;
  1057. top:-30px;
  1058. left:-30px;
  1059. bottom:0;
  1060. right:0;
  1061. z-index:2;
  1062. opacity:0;
  1063. }
  1064.  
  1065. .tags {
  1066. display:flex;
  1067. padding:20px;
  1068. flex-wrap:wrap;
  1069. margin:0 -20px 0;
  1070. align-items:center;
  1071. text-transform:uppercase;
  1072. color:{color:sub text};
  1073. background:{color:accent};
  1074. }
  1075.  
  1076. .tags a {
  1077. margin:0 5px;
  1078. display:inline-block;
  1079. color:{color:sub text};
  1080. }
  1081.  
  1082. .pagenotes .title{
  1083. display:flex;
  1084. align-items:center;
  1085. }
  1086.  
  1087. .pagenotes .title svg{
  1088. width:1em;
  1089. height:1em;
  1090. margin-right:20px;
  1091. }
  1092.  
  1093. ol.notes {
  1094. margin:0px;
  1095. border-right:0;
  1096. list-style-type:none;
  1097. }
  1098.  
  1099. ol.notes li.note {margin:20px 0;}
  1100.  
  1101. ol.notes li.note:first-of-type {margin-top:0;}
  1102. ol.notes li.note:last-of-type {margin-bottom:0;}
  1103.  
  1104. li.note::before{
  1105. float:right;
  1106. margin-left:20px;
  1107. font-family:'feather';
  1108. vertical-align:middle;
  1109. color:{color:sub color};
  1110. filter:drop-shadow(1px 1px 1px);
  1111. }
  1112.  
  1113. li.note.reblog::before{content:'\e8b6';}
  1114. li.note.like::before{content:'\e879';}
  1115. li.note.with_commentary::before, li.note.reply::before{content:'\e890';}
  1116.  
  1117. ol.notes .clear{clear:both;}
  1118.  
  1119. a.avatar_frame {display:none}
  1120.  
  1121. ol.notes blockquote{margin:1em 2em!important;}
  1122.  
  1123. a.more_notes_link {
  1124. display:block;
  1125. text-align:center;
  1126. color:rgb(var(--Title));
  1127. }
  1128.  
  1129. @media (max-width:900px){
  1130. aside, body::before,.tmblr-iframe, .audio .audio-cover{display:none;}
  1131.  
  1132. .audio_info{width:100%}
  1133.  
  1134. #top, #menu{display:flex;}
  1135.  
  1136. #entries{
  1137. width:90vw;
  1138. margin:5vw auto;
  1139. }
  1140.  
  1141. #pagination, .manual{
  1142. width:90vw;
  1143. margin-bottom:150px;
  1144. }
  1145.  
  1146. .post{
  1147. width:100%;
  1148. margin:0 0 150px;
  1149. }
  1150.  
  1151. .credits{display:none;}
  1152.  
  1153. }
  1154.  
  1155. @media (min-width:901px){
  1156. .r-menu, .r-menu.active{
  1157. opacity:0!important;
  1158. transform:translatex(100%)!important;
  1159. }
  1160. }
  1161.  
  1162. {CustomCSS}
  1163.  
  1164. </style>
  1165.  
  1166. </head>
  1167.  
  1168. <body>
  1169.  
  1170. <nav id="menu">
  1171. <a href="{blogurl}" title="refresh"><i data-feather="home"></i></a>
  1172. <a href="/ask" title="message"><i data-feather="message-circle"></i></a>
  1173. <a href="/archive" title="grid"><i data-feather="grid"></i></a>
  1174. <a class="nav" title="navigation"><i data-feather="menu"></i></a>
  1175. <a href="//kosmique.tumblr.com" title="credits"><i data-feather="star"></i></a>
  1176. </nav>
  1177.  
  1178. <nav class="r-menu">
  1179. <a class="blog-title">
  1180. <img src="{portraiturl-48}">
  1181. <span>{title}</span>
  1182. </a>
  1183.  
  1184. {block:description}
  1185. <div class="blog-description">
  1186. <span>{description}</span>
  1187. </div>
  1188. {/block:description}
  1189.  
  1190. <div class="search">
  1191. <form action="/search" method="get">
  1192. <input type="text" name="q" value="{SearchQuery}" placeholder="search"/>
  1193. </form>
  1194. </div>
  1195.  
  1196. <nav>
  1197. <a href="{text:link one url}">
  1198. <i data-feather="{text:link one icon}"></i>
  1199. <span>{text:link one title}</span>
  1200. </a>
  1201. <a href="{text:link two url}">
  1202. <i data-feather="{text:link two icon}"></i>
  1203. <span>{text:link two title}</span>
  1204. </a>
  1205. <a href="{text:link three url}">
  1206. <i data-feather="{text:link three icon}"></i>
  1207. <span>{text:link three title}</span>
  1208. </a>
  1209. <a href="{text:link four url}">
  1210. <i data-feather="{text:link four icon}"></i>
  1211. <span>{text:link four title}</span>
  1212. </a>
  1213. </nav>
  1214. </nav>
  1215.  
  1216. <section id="entries">
  1217.  
  1218. <aside>
  1219. <div class="menu">
  1220. <a href="{blogurl}" title="refresh"><i data-feather="home"></i></a>
  1221. <a href="/ask" title="message"><i data-feather="message-circle"></i></a>
  1222. <a href="/archive" title="grid"><i data-feather="grid"></i></a>
  1223. <a class="nav" title="navigation"><i data-feather="menu"></i></a>
  1224. </div>
  1225.  
  1226. <div class="sidebar">
  1227. <section class="side-one">
  1228. <a class="blog-title">
  1229. <img src="{portraiturl-48}">
  1230. <span>{title}</span>
  1231. </a>
  1232.  
  1233. {block:description}
  1234. <div class="blog-description">
  1235. <span>{description}</span>
  1236. </div>
  1237. {/block:description}
  1238.  
  1239. <div class="search">
  1240. <form action="/search" method="get">
  1241. <input type="text" name="q" value="{SearchQuery}" placeholder="search"/>
  1242. </form>
  1243. </div>
  1244. </section>
  1245.  
  1246. <section class="side-two">
  1247. <a href="{text:link one url}">
  1248. <i data-feather="{text:link one icon}"></i>
  1249. <span>{text:link one title}</span>
  1250. </a>
  1251. <a href="{text:link two url}">
  1252. <i data-feather="{text:link two icon}"></i>
  1253. <span>{text:link two title}</span>
  1254. </a>
  1255. <a href="{text:link three url}">
  1256. <i data-feather="{text:link three icon}"></i>
  1257. <span>{text:link three title}</span>
  1258. </a>
  1259. <a href="{text:link four url}">
  1260. <i data-feather="{text:link four icon}"></i>
  1261. <span>{text:link four title}</span>
  1262. </a>
  1263. </section>
  1264. </div>
  1265. </aside>
  1266.  
  1267. {block:posts}
  1268.  
  1269. <article class="post {block:caption}captioned{/block:caption} {block:PinnedPostLabel}pinned{/block:PinnedPostLabel}" id="{postid}">
  1270.  
  1271. {block:indexpage}
  1272. {block:PinnedPostLabel}
  1273. <a href="{permalink}" class="pin">
  1274. <svg class="svg-icon" viewBox="0 0 20 20">
  1275. <path d="M17.592,8.936l-6.531-6.534c-0.593-0.631-0.751-0.245-0.751,0.056l0.002,2.999L5.427,9.075H2.491c-0.839,0-0.162,0.901-0.311,0.752l3.683,3.678l-3.081,3.108c-0.17,0.171-0.17,0.449,0,0.62c0.169,0.17,0.448,0.17,0.618,0l3.098-3.093l3.675,3.685c-0.099-0.099,0.773,0.474,0.773-0.296v-2.965l3.601-4.872l2.734-0.005C17.73,9.688,18.326,9.669,17.592,8.936 M3.534,9.904h1.906l4.659,4.66v1.906L3.534,9.904z M10.522,13.717L6.287,9.48l4.325-3.124l3.088,3.124L10.522,13.717z M14.335,8.845l-3.177-3.177V3.762l5.083,5.083H14.335z"></path>
  1276. </svg>
  1277. {PinnedPostLabel}
  1278. </a>
  1279. {/block:PinnedPostLabel}
  1280. {/block:indexpage}
  1281.  
  1282. {block:Quote}
  1283. <div class="q">
  1284. <div class="quote">{quote}</div>
  1285. {block:Source}
  1286. <div class="source">
  1287. <span class="left-arrow"></span>
  1288. <span class="right-arrow"></span>
  1289. {source}
  1290. </div>
  1291. {/block:Source}
  1292. </div>
  1293. {/block:Quote}
  1294.  
  1295. {block:Text}
  1296. {block:Title}<div class="title">{title}</div>{/block:Title}
  1297. {block:RebloggedFrom}
  1298. <div class="captions">
  1299. {block:Reblogs}
  1300. <li class="comment">
  1301. {block:IsActive}
  1302. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">
  1303. <img src="{portraiturl-64}" class="icon"/>
  1304. {username}
  1305. </a>
  1306. {/block:IsActive}
  1307.  
  1308. {block:IsDeactivated}
  1309. <span class="user deactivated" target="_blank">
  1310. <img src="{portraiturl-64}" class="icon"/>
  1311. {username}
  1312. </span>
  1313. {block:IsDeactivated}
  1314. <div class="tex">{body}</div>
  1315. </li>
  1316. {/block:Reblogs}
  1317. </div>
  1318. {/block:RebloggedFrom}
  1319. {block:NotReblog}
  1320. <div class="captions">
  1321. <li class="comment">
  1322. <div class="tex">{body}</div>
  1323. </li>
  1324. </div>
  1325. {/block:NotReblog}
  1326. {/block:Text}
  1327.  
  1328. {block:Link}
  1329. <div class="link"><a href="{URL}">{name}</a></div>
  1330. {block:Description}
  1331. {block:NotReblog}
  1332. <div class="captions">
  1333. <li class="comment">
  1334. <div class="tex">{description}</div>
  1335. </li>
  1336. </div>
  1337. {/block:NotReblog}
  1338. {/block:Description}
  1339. {block:RebloggedFrom}
  1340. <div class="captions">
  1341. {block:Reblogs}
  1342. <li class="comment">
  1343. {block:IsActive}
  1344. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">
  1345. <img src="{portraiturl-64}" class="icon"/>
  1346. {username}
  1347. </a>
  1348. {/block:IsActive}
  1349.  
  1350. {block:IsDeactivated}
  1351. <span class="user deactivated" target="_blank">
  1352. <img src="{portraiturl-64}" class="icon"/>
  1353. {username}
  1354. </span>
  1355. {block:IsDeactivated}
  1356. <div class="tex">{body}</div>
  1357. </li>
  1358. {/block:Reblogs}
  1359. </div>
  1360. {/block:RebloggedFrom}
  1361. {/block:Link}
  1362.  
  1363.  
  1364. {block:Chat}
  1365. {block:Title}<div class="title">{title}</div>{/block:Title}
  1366. <ol class="chat">
  1367. {block:lines}
  1368. <li class="l {Alt}">
  1369. {block:label}<span class="label">{label}</span>{/block:label} <div class="line">{line}</div>
  1370. </li>
  1371. {/block:lines}
  1372. </ol>
  1373. {/block:Chat}
  1374.  
  1375. {block:Photo}<div class="photo">{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}"></a>{linkclosetag}</div>{/block:Photo}
  1376.  
  1377. {block:Photoset}<div class="photo"><div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div></div>{/block:Photoset}
  1378.  
  1379. {block:Video}<div class="photo video">{video-500}</div>{/block:Video}
  1380.  
  1381. {block:Audio}
  1382. {block:audioplayer}
  1383. <div class="audio">
  1384. {block:AlbumArt}
  1385. <img src="{AlbumArtURL}" class="audio-cover"></img>
  1386. {/block:AlbumArt}
  1387. <div class="audio_info">
  1388. {block:trackname}<span class="track">{trackname}</span>{/block:trackname}
  1389. {block:artist}<span class="artist">{artist}</span>{/block:artist}
  1390. </div>
  1391. <div class="player">
  1392. <span><i data-feather="skip-back"></i></span>
  1393. {audioplayerwhite}
  1394. <span><i data-feather="skip-forward"></i></span>
  1395. </div>
  1396. </div>
  1397. {/block:audioplayer}
  1398. {/block:Audio}
  1399.  
  1400.  
  1401. {block:caption}
  1402. <div class="captions">
  1403. {block:Reblogs}
  1404. <li class="comment">
  1405. {block:IsActive}
  1406. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">
  1407. <img src="{portraiturl-64}" class="icon"/>
  1408. {username}
  1409. </a>
  1410. {/block:IsActive}
  1411.  
  1412. {block:IsDeactivated}
  1413. <span class="user deactivated" target="_blank">
  1414. <img src="{portraiturl-64}" class="icon"/>
  1415. {username}
  1416. </span>
  1417. {block:IsDeactivated}
  1418. <div class="tex">{body}</div>
  1419. </li>
  1420. {/block:Reblogs}
  1421. {block:NotReblog}
  1422. <li class="comment">
  1423. <div class="tex">{caption}</div>
  1424. </li>
  1425. {/block:NotReblog}
  1426. </div>
  1427. {/block:caption}
  1428.  
  1429. {block:Answer}
  1430. <div class="question">
  1431. <div class="as">
  1432. <i data-feather="mail" class="icon"></i>
  1433. {asker}
  1434. </div>
  1435. <div class="tex">{question}</div>
  1436. </div>
  1437. {block:Answerer}
  1438. <div class="answer">
  1439. <div class="as">
  1440. {answerer}
  1441. <i data-feather="message-square" class="icon"></i>
  1442. </div>
  1443. <div class="tex">{answer}</div>
  1444. </div>
  1445. {/block:Answerer}
  1446. {block:NotReblog}
  1447. <div class="answer">
  1448. <div class="as">
  1449. <a href="{permalink}">{name}</a>
  1450. <i data-feather="message-square" class="icon"></i>
  1451. </div>
  1452. <div class="tex">{replies}</div>
  1453. </div>
  1454. {/block:NotReblog}
  1455. {block:RebloggedFrom}
  1456. {block:Reblogs}
  1457. <div class="answer">
  1458. <div class="as">
  1459. <a href="{permalink}">{username}</a>
  1460. <i data-feather="message-square" class="icon"></i>
  1461. </div>
  1462. <div class="tex">{body}</div>
  1463. </div>
  1464. {/block:Reblogs}
  1465. {/block:RebloggedFrom}
  1466. {/block:Answer}
  1467.  
  1468. {block:date}
  1469.  
  1470.  
  1471. {block:hastags}
  1472. <div class="tags">
  1473. <i data-feather="tag"></i>
  1474. {block:Tags}<a href="{TagUrl}">#{Tag}</a>{/block:Tags}
  1475. </div>
  1476. {/block:hasTags}
  1477.  
  1478. <div class="when">
  1479. <ul>
  1480. <li>
  1481. <a href="{permalink}">
  1482. <i data-feather="calendar"></i>posted on {DayOfMonthWithZero} {Month}
  1483. </a>
  1484. </li>
  1485.  
  1486. {block:NoteCount}
  1487. <li class="reblog-line">
  1488. <i data-feather="bar-chart"></i>
  1489. <span class="notecount">{NoteCountWithLabel}</span>
  1490. </li>
  1491. {/block:NoteCount}
  1492.  
  1493. <li>
  1494. <a href="#" class="like">
  1495. {LikeButton size="100"}
  1496. <i data-feather="heart"></i>
  1497. <span>like</span>
  1498. </a>
  1499.  
  1500. <a href="{ReblogURL}" target="_blank">
  1501. <i data-feather="refresh-ccw"></i>
  1502. reblog
  1503. </a>
  1504. </li>
  1505.  
  1506. {block:ContentSource}
  1507. <li>
  1508. <i data-feather="bookmark"></i>
  1509. <a href="{SourceURL}">source: {SourceTitle}</a>
  1510. </li>
  1511. {/block:ContentSource}
  1512. </ul>
  1513.  
  1514.  
  1515. </div>
  1516. {/block:date}
  1517.  
  1518. </article>
  1519.  
  1520. {block:permalinkpage}
  1521.  
  1522. {block:PostNotes}
  1523. <article class="post pagenotes">
  1524. {PostNotes-64}
  1525. </article>
  1526. {/block:PostNotes}
  1527.  
  1528. {/block:permalinkpage}
  1529.  
  1530. {/block:Posts}
  1531.  
  1532. </section>
  1533.  
  1534. <a href="//kosmique.tumblr.com" title="credits" class="credits"><i data-feather="star"></i></a>
  1535.  
  1536. {block:Pagination}
  1537. {block:ifInfiniteScroll}
  1538. <footer id="pagination">
  1539. {block:NextPage}<a href="{NextPage}"></a>{/block:NextPage}
  1540. </footer>
  1541.  
  1542. {block:ifManualLoad}
  1543. <footer class="manual">
  1544. <a href="#" class="load-more">load more</a>
  1545. </footer>
  1546. {/block:ifManualLoad}
  1547. {/block:ifInfiniteScroll}
  1548.  
  1549. {block:ifNotInfiniteScroll}
  1550. <footer id="pagination">
  1551. {block:PreviousPage}<a href="{PreviousPage}"><i data-feather="chevron-left"></i></a>{/block:PreviousPage}
  1552. {block:JumpPagination length="3"}
  1553. {block:CurrentPage}
  1554. <span class="current_page">{PageNumber}</span>
  1555. {/block:CurrentPage}
  1556. {block:JumpPage}
  1557. <a class="jump_page" href="{URL}">{PageNumber}</a>
  1558. {/block:JumpPage}
  1559. {/block:JumpPagination}
  1560. {block:NextPage}<a href="{NextPage}"><i data-feather="chevron-right"></i></a>{/block:NextPage}
  1561. </footer>
  1562. {/block:ifNotInfiniteScroll}
  1563. {/block:Pagination}
  1564.  
  1565. {block:indexpage}{block:ifInfiniteScroll}<script src="//static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>{/block:ifInfiniteScroll}{/block:indexpage}
  1566.  
  1567. <script>
  1568. $(document).ready(function(){
  1569. var $container = $('#entries');
  1570. $('.photo-slideshow').pxuPhotoset({
  1571. lightbox: true,
  1572. rounded: false,
  1573. gutter: '1px',
  1574. borderRadius: '0px',
  1575. photoset: '.photo-slideshow',
  1576. photoWrap: '.photo-data',
  1577. photo: '.pxu-photo'
  1578. });
  1579. $container.find('.notecount').each(function(){
  1580. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  1581. if (n > 999) {
  1582. n = Math.floor(n / 100) / 10;
  1583. $(this).text(n + 'k notes');
  1584. }
  1585. });
  1586. feather.replace();
  1587. $('iframe.tumblr_audio_player').load( function(){
  1588. $(this).contents().find("head")
  1589. .append($("<style type='text/css'> .audio-player{background:transparent!important;} .audio-player .play-pause{color:#000 !important; font-size:1em!important;} </style>"));
  1590. });
  1591. flexibleFrames($(".video"));
  1592. $("[title]").style_my_tooltips({
  1593. tip_follows_cursor:true,
  1594. tip_delay_time:100,
  1595. tip_fade_speed:100
  1596. });
  1597. var npfOptions = {
  1598. rowClass:"npf_row",
  1599. imageContainerClass:"tmblr-full",
  1600. generatedPhotosetContainerClass:"npf_photoset",
  1601. imageClass:"npf_image",
  1602. includeCommonPhotosets: true,
  1603. useTumblrLightbox: true,
  1604. insertGalleryIndicator: false,
  1605. galleryIndicatorClass: "npf_gallery_indicator",
  1606. galleryIndicatorContent: "<img src='image_url'>",
  1607. photosetMargins:"1"
  1608. }
  1609. npfPhotosets(".post", npfOptions);
  1610. $('a[href*="t.umblr.com/redirect"]').each(function(){
  1611. var originalURL = $(this).attr("href").split("?z=")[1].split("&t=")[0];
  1612. var replaceURL = decodeURIComponent(originalURL);
  1613. $(this).attr("href", replaceURL);
  1614. });
  1615. $('.label').each(function(){
  1616. var newValue = $(this).text().replace(':', '');
  1617. $(this).text( newValue );
  1618. });
  1619. $('.captions').each(function() {
  1620. var $this = $(this);
  1621. if($this.html().replace(/\s|&nbsp;/g, '').length == 0)
  1622. $this.remove();
  1623. });
  1624. $('aside .nav').click(function(){
  1625. $(this).toggleClass('active');
  1626. $('.side-one,.side-two').toggleClass('active');
  1627. });
  1628. $('#menu .nav').click(function(){
  1629. $(this).toggleClass('active');
  1630. $('.r-menu').toggleClass('active');
  1631. });
  1632. {block:indexpage}
  1633. {block:ifInfiniteScroll}
  1634. $container.infinitescroll({
  1635. itemSelector: 'article',
  1636. navSelector: '#pagination',
  1637. nextSelector: '#pagination a',
  1638. loadingImg: '',
  1639. loadingText: '<em></em>',
  1640. bufferPx: 100,
  1641. {block:ifManualLoad}
  1642. errorCallback: function(){
  1643. $('.load-more').hide();
  1644. }
  1645. {/block:ifManualLoad}
  1646. },
  1647. function( newElements ) {
  1648. var $newElems = $( newElements );
  1649. var $newElemsIDs = $newElems.map(function(){
  1650. return this.id;
  1651. }).get();
  1652. Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
  1653. $newElems.find('.photo-slideshow').pxuPhotoset({
  1654. lightbox: true,
  1655. rounded: false,
  1656. gutter: '1px',
  1657. borderRadius: '0px',
  1658. photoset: '.photo-slideshow',
  1659. photoWrap: '.photo-data',
  1660. photo: '.pxu-photo'
  1661. });
  1662. feather.replace();
  1663. $newElems.find('.notecount').each(function(){
  1664. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  1665. if (n > 999) {
  1666. n = Math.floor(n / 100) / 10;
  1667. $(this).text(n + 'k notes');
  1668. }
  1669. });
  1670. $newElems.find('iframe.tumblr_audio_player').load( function(){
  1671. $(this).contents().find("head")
  1672. .append($("<style type='text/css'> .audio-player{background:transparent!important;} .audio-player .play-pause{color:#000 !important; font-size:1em!important;} </style>"));
  1673. });
  1674. flexibleFrames($(".video"));
  1675. npfPhotosets(".post", npfOptions);
  1676. $newElems.find('.captions').each(function() {
  1677. var $this = $(this);
  1678. if($this.html().replace(/\s|&nbsp;/g, '').length == 0)
  1679. $this.remove();
  1680. });
  1681. });
  1682.  
  1683. {block:ifManualLoad}
  1684. $(window).unbind('.infscr');
  1685. $('.load-more').click(function(){
  1686. $container.infinitescroll('retrieve');
  1687. return false
  1688. });
  1689. {/block:ifManualLoad}
  1690. {/block:ifInfiniteScroll}
  1691. {/block:indexpage}
  1692. });
  1693.  
  1694. </script>
  1695. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!