API tools faq
paste
kosmique

theme: miranda

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