API tools faq
paste
Advertisement
kosmique

theme: bellatrix

kosmique
Jul 15th, 2021 (edited)
8,755
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 76.54 KB | None | 1 0
raw download clone embed print report
  1. <!--
  2.  
  3. bellatrix by kosmique.tumblr.com
  4.  
  5. -------------------------------------------------------------------------
  6.  
  7. october 5th update:
  8.  
  9. > left sidebar option
  10. > header only option
  11.  
  12. ✧･ﾟ: *✧･ﾟ:*ﾟ✧*:･ﾟ✧
  13.  
  14. * time ago plugin by bychloethemes
  15. * audio post inspiration: https://dribbble.com/shots/15060139-Rungon-Music-Streaming-Dashboard
  16. * sidebar reveal: https://stackoverflow.com/questions/20775065/add-remove-class-with-jquery-based-on-element-height-scroll
  17. * like button effect: https://codepen.io/pixelandtext/pen/YXbPNK
  18.  
  19. * base code by sorrism
  20. * flexible frames by nouvae (modified by seyche)
  21. * pxu photoset and lightboxes by shythemes
  22.  
  23. full credits list at kosmique.tumblr.com/credits
  24.  
  25. -->
  26.  
  27. <!DOCTYPE html>
  28. <html>
  29. <head>
  30.  
  31. <title>{block:PostSummary}{PostSummary} : {/block:PostSummary}{Title}</title>
  32.  
  33. <link rel="shortcut icon" href="{favicon}">
  34.  
  35. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  36. {block:Description}
  37. <meta name="description" content="{MetaDescription}" />
  38. {/block:Description}
  39.  
  40. <meta charset="utf-8"/>
  41.  
  42. <meta name="viewport" content="width=device-width, initial-scale=1">
  43.  
  44. <!--Default Variables-->
  45. <meta name="image:Header icon" content="https://64.media.tumblr.com/f9c6f843a0eb9722c34d649b56195d8e/35ca77d8d7107d86-db/s540x810/a56c9d5fd91785084c21c8da90372bb5f7aa6604.gifv"/>
  46. <meta name="image:Header image" content="https://64.media.tumblr.com/8baa7830d6366b66ee314e54babd866a/840463032d8062e5-bd/s2048x3072/9fc52bc6aae2275deb082cab73ff73efe31b580c.png"/>
  47.  
  48. <meta name="if:Dark controls" content="1"/>
  49. <meta name="if:Header" content="1"/>
  50. <meta name="if:Header image" content="0"/>
  51. <meta name="if:Header icon" content="1"/>
  52. <meta name="if:Sidebar" content="1"/>
  53. <meta name="if:Left sidebar" content="0"/>
  54. <meta name="if:Sidebar image" content="1"/>
  55. <meta name="if:Sidebar icon" content="1"/>
  56. <meta name="if:Description" content="1"/>
  57. <meta name="if:Description divider" content="1"/>
  58. <meta name="if:Icon gradient borders" content="1"/>
  59.  
  60. <meta name="select:Header divider" content="heart"/>
  61. <meta name="select:Header divider" content="circle"/>
  62. <meta name="select:Header divider" content="cloud"/>
  63. <meta name="select:Header divider" content="sun"/>
  64. <meta name="select:Header divider" content="moon"/>
  65. <meta name="select:Header divider" content="droplet"/>
  66. <meta name="select:Header divider" content="zap"/>
  67.  
  68. <meta name="select:Font" content="Barlow"/>
  69. <meta name="select:Font" content="Roboto"/>
  70. <meta name="select:Font" content="Quicksand"/>
  71. <meta name="select:Font" content="Asap"/>
  72. <meta name="select:Font" content="Karla"/>
  73. <meta name="select:Font" content="Nunito Sans"/>
  74. <meta name="select:Font" content="Poppins"/>
  75.  
  76. <meta name="select:Font size" content="14px"/>
  77. <meta name="select:Font size" content="15px"/>
  78. <meta name="select:Font size" content="16px"/>
  79. <meta name="select:Font size" content="17px"/>
  80.  
  81. <meta name="select:Post width" content="600px"/>
  82. <meta name="select:Post width" content="540px"/>
  83. <meta name="select:Post width" content="500px"/>
  84. <meta name="select:Post width" content="450px"/>
  85.  
  86.  
  87. <meta name="color:Background" content="#202024"/>
  88. <meta name="color:Text" content="#c8c8c8"/>
  89. <meta name="color:Sub text" content="#ffffff"/>
  90. <meta name="color:Title" content="#ffffff"/>
  91. <meta name="color:Link" content="#ffffff"/>
  92. <meta name="color:Accent" content="#ff7391"/>
  93. <meta name="color:Sub color" content="#b4c3e9"/>
  94. <meta name="color:Shadows" content="#000000"/>
  95. <meta name="color:Borders" content="#3b3b42"/>
  96. <meta name="color:Posts" content="#242429"/>
  97. <meta name="color:Boxes" content="#28282e"/>
  98. <meta name="color:Control buttons" content="#18181c"/>
  99. <meta name="color:Scrollbar" content="#000000"/>
  100.  
  101. <meta name="text:Blog username" content="username"/>
  102.  
  103. <meta name="text:Link one title" content="link title"/>
  104. <meta name="text:Link one url" content="/"/>
  105. <meta name="text:Link two title" content="link title"/>
  106. <meta name="text:Link two url" content="/"/>
  107. <meta name="text:Link three title" content="link title"/>
  108. <meta name="text:Link three url" content="/"/>
  109. <meta name="text:Link four title" content="link title"/>
  110. <meta name="text:Link four url" content="/"/>
  111. <meta name="text:Link five title" content="link title"/>
  112. <meta name="text:Link five url" content="/"/>
  113. <meta name="text:Link six title" content="link title"/>
  114. <meta name="text:Link six url" content="/"/>
  115.  
  116. <!--Scripts-->
  117. <link rel="preconnect" href="https://fonts.googleapis.com">
  118. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  119. <link href="https://fonts.googleapis.com/css2?family=Asap:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&family=Karla:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&family=Nunito+Sans:ital,wght@0,400;0,600;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&family=Quicksand:wght@400;500;600;700&family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,700&display=swap" rel="stylesheet">
  120. <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_o5hd5vvqpoqiwwmi.css"/>
  121. <link href="//dl.dropbox.com/s/bnoj86mka0bkplb/npf-override.css" rel="stylesheet">
  122. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  123.  
  124. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  125. <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  126. <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
  127. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  128. <script src="https://seyche.github.io/external-files-hosting/plugins/flexframes-modified.js"></script>
  129. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.js"></script>
  130. <script type="text/javascript" src="https://static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script>
  131. <script src="//dl.dropbox.com/s/vwrm94pcg4c9e71/npf-evenize.js"></script>
  132. <script src="https://static.tumblr.com/0podkko/aZZqe4033/customaudio.min.js"></script>
  133. <script src="https://cdn.rawgit.com/leafo/sticky-kit/v1.1.2/jquery.sticky-kit.js"></script>
  134. <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
  135. <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
  136.  
  137. <!--CSS customization here. -->
  138.  
  139. <style type="text/css">
  140.  
  141. *{box-sizing:border-box}
  142.  
  143. :root{
  144. --Shadows:{RGBcolor:Shadows};
  145. --Scrollbar:{RGBcolor:Scrollbar};
  146. --Text:{RGBcolor:Text};
  147. --Link:{RGBcolor:Link};
  148. --Posts:{RGBcolor:Posts};
  149. --Title:{RGBcolor:Title};
  150. --Borders:{RGBcolor:Borders};
  151. --Controls:{RGBcolor:Control buttons};
  152. --Accent:{RGBcolor:Accent};
  153. --Sub-text:{RGBcolor:Sub text};
  154. --Background:{RGBcolor:Background};
  155. --Light-boxes:{RGBcolor:Boxes};
  156. --Sub-color:{RGBcolor:Sub color};
  157.  
  158. --Font-size:{select:Font size};
  159. --Main-font:'{select:Font}';
  160.  
  161. --Post-width:{select:Post width};
  162.  
  163. --NPF-Image-Spacing:1px;
  164. --NPF-Bottom-Gap-From-Captions:30px;
  165. }
  166.  
  167. i.icon {
  168. speak:none;
  169. line-height:1;
  170. font-style:normal;
  171. font-weight:normal;
  172. font-variant:normal;
  173. text-transform:none;
  174. font-family:'feather' !important;
  175. -webkit-font-smoothing:antialiased;
  176. -moz-osx-font-smoothing:grayscale;
  177. }
  178.  
  179. body{
  180. margin:0;
  181. width:100%;
  182. height:100%;
  183. overflow-x:hidden;
  184. word-break:break-word;
  185. color:rgb(var(--Text));
  186. background-color:rgb(var(--Background));
  187. font:400 var(--Font-size)/1.6 var(--Main-font), sans-serif;
  188. }
  189.  
  190. body::before {
  191. top:0;
  192. left:0;
  193. width:100%;
  194. height:5px;
  195. content:'';
  196. position:fixed;
  197. z-index:999999999999999;
  198. animation:gradient 5s ease infinite;
  199. background-size:200% 200% !important;
  200. background:linear-gradient(-45deg, rgb(var(--Accent)), rgb(var(--Sub-color)));
  201. }
  202.  
  203. @keyframes gradient {
  204. 0% {background-position: 0% 50%;}
  205. 50% {background-position: 100% 50%;}
  206. 100% {background-position: 0% 50%;}
  207. }
  208.  
  209. @keyframes heartbeat {
  210. 0% { transform: scale(1); }
  211. 14% { transform: scale(1.2); }
  212. 28% { transform: scale(1); }
  213. 42% { transform: scale(1.2); }
  214. 70% { transform: scale(1); }
  215. }
  216.  
  217. @keyframes bounce {
  218. to {
  219. opacity: 0.3;
  220. fill:rgb(var(--Sub-color));
  221. color:rgb(var(--Sub-color));
  222. }
  223. }
  224.  
  225. :focus{
  226. border:0;
  227. outline:0;
  228. }
  229.  
  230. a,
  231. a:hover{
  232. cursor:pointer;
  233. transition:ease .3s;
  234. text-decoration:none;
  235. -moz-transition:ease .3s;
  236. -webkit-transition:ease .3s;
  237. }
  238.  
  239. a{color:rgb(var(--Link))}
  240.  
  241. b,
  242. strong{font-weight:700;}
  243.  
  244. small,
  245. sub,
  246. sup{font-size:.7em;}
  247.  
  248. big{font-size:1.1em;}
  249.  
  250. p {margin:.7em 0;}
  251. p:first-of-type {margin-top:0;}
  252. p:last-of-type {margin-bottom:0;}
  253.  
  254. h1,
  255. h2,
  256. h3,
  257. h4 {
  258. margin:1em 0;
  259. font-weight:700;
  260. }
  261.  
  262. h1{font-size:1.35em;}
  263. h2{font-size:1.25em;}
  264. h3{font-size:1.15em;}
  265. h4{font-size:1em;}
  266.  
  267. blockquote{
  268. padding:1em;
  269. margin:.5em 0;
  270. font-style:italic;
  271. border-radius:5px;
  272. background:rgb(var(--Light-boxes));
  273. border-left:2px solid rgb(var(--Sub-color));
  274. }
  275.  
  276. pre{
  277. padding:1em;
  278. margin:1em 0;
  279. display:block;
  280. overflow:auto;
  281. user-select:all;
  282. border-radius:5px;
  283. font-family:inherit;
  284. -ms-user-select:all;
  285. -webkit-user-select:all;
  286. background:rgb(var(--Light-boxes));
  287. border:2px solid rgb(var(--Sub-color));
  288. }
  289.  
  290. code{
  291. margin:0;
  292. padding:.5em;
  293. display:inline;
  294. border-radius:5px;
  295. font-family:inherit;
  296. background:rgb(var(--Light-boxes));
  297. border-left:2px solid rgb(var(--Sub-color));
  298. }
  299.  
  300. h1:first-of-type,
  301. h2:first-of-type,
  302. h3:first-of-type,
  303. h4:first-of-type {margin-top:0;}
  304.  
  305. ul,ol{
  306. padding:0;
  307. margin:0;
  308. list-style:none;
  309. }
  310.  
  311. .post .captions ul,
  312. .post .captions ol{
  313. margin:.75em 0;
  314. padding-left:1em!important;
  315. }
  316.  
  317. .post .captions ul li:not(:last-of-type),
  318. .post .captions ol li:not(:last-of-type){margin-bottom:.75em;}
  319.  
  320. .post .captions ul li::before,
  321. .post .captions ol li::before{
  322. width:7px;
  323. height:7px;
  324. content:"";
  325. margin-right:1em;
  326. position:relative;
  327. border-radius:100%;
  328. display:inline-block;
  329. vertical-align:middle;
  330. border:1px solid rgb(var(--Accent));
  331. }
  332.  
  333. hr {
  334. width:100%;
  335. height:1px;
  336. border:none;
  337. box-shadow:0;
  338. margin:1em auto;
  339. background:rgb(var(--Borders));
  340. }
  341.  
  342. svg{
  343. width:1em;
  344. height:1em;
  345. }
  346.  
  347. p.read-more{
  348. display:flex;
  349. margin-top:15px;
  350. align-items:center;
  351. }
  352.  
  353. p.read-more::before{
  354. width:35px;
  355. height:35px;
  356. display:flex;
  357. line-height:1;
  358. content:"\e89b";
  359. position:relative;
  360. margin-right:-10px;
  361. align-items:center;
  362. border-radius:100%;
  363. transition:ease .5s;
  364. font-family:'feather';
  365. justify-content:center;
  366. color:rgb(var(--Sub-text));
  367. background:rgb(var(--Accent));
  368. }
  369.  
  370. p.read-more:hover::before{
  371. color:rgb(var(--Accent));
  372. background:rgb(var(--Sub-color));
  373. }
  374.  
  375. a.read_more{
  376. font-size:.85em;
  377. font-weight:600;
  378. border-radius:3px;
  379. letter-spacing:.15em;
  380. text-transform:uppercase;
  381. padding:5px 15px 5px 25px;
  382. background:rgb(var(--Light-boxes));
  383. }
  384.  
  385. a.credits,
  386. #back{
  387. right:20px;
  388. width:40px;
  389. height:40px;
  390. display:grid;
  391. cursor:pointer;
  392. position:fixed;
  393. z-index:999999;
  394. place-items:center;
  395. border-radius:100%;
  396. background:rgb(var(--Controls));
  397. }
  398.  
  399. a.credits svg{
  400. transition:all .3s;
  401. -moz-transition:all .3s;
  402. -webkit-transition:all .3s;
  403. }
  404.  
  405. a.credits:hover svg{
  406. fill:rgb(255, 249, 64);
  407. color:rgb(255, 249, 64);
  408. filter:drop-shadow(0 0 4px rgb(255, 249, 64));
  409. }
  410.  
  411. a.credits{bottom:20px;}
  412.  
  413. #back{
  414. bottom:80px;
  415. cursor:pointer;
  416. }
  417.  
  418. #back svg{
  419. width:1.15em;
  420. height:1.15em;
  421. }
  422.  
  423. /*selection*/
  424. ::selection {
  425. color:rgb(var(--Accent));
  426. background-color:rgb(var(--Background));
  427. }
  428.  
  429. ::-moz-selection {
  430. color:rgb(var(--Accent));
  431. background-color:rgb(var(--Background));
  432. }
  433.  
  434. /*tumblr controls*/
  435.  
  436. .iframe-controls--desktop {
  437. display:block;
  438. top:0!important;
  439. margin-top:15px;
  440. margin-right:20px;
  441. {block:ifDarkControls}filter:invert(1);{/block:ifDarkControls}
  442. z-index:-1!important;
  443. z-index:12!important;
  444. position:fixed!important;
  445. }
  446.  
  447. .tmblr-iframe{
  448. opacity:0;
  449. visibility:hidden;
  450. transition:ease .3s;
  451. -moz-transition:ease .3s;
  452. -webkit-transition:ease .3s;
  453. transform:scale(0.7)!important;
  454. -moz-transform:scale(0.7)!important;
  455. -webkit-transform:scale(0.7)!important;
  456. }
  457.  
  458. .tmblr-iframe.active{
  459. opacity:1;
  460. visibility:visible;
  461. }
  462.  
  463. .tmblr-iframe--follow-teaser,
  464. .tmblr-iframe--app-cta-button{display:none !important;}
  465.  
  466. .open-controls{
  467. top:20px;
  468. z-index:9;
  469. right:20px;
  470. width:40px;
  471. height:40px;
  472. display:grid;
  473. cursor:pointer;
  474. position:fixed;
  475. place-items:center;
  476. border-radius:100%;
  477. background:rgb(var(--Controls));
  478. }
  479.  
  480. .open-controls .close,
  481. .open-controls.active .open,
  482. .open-menu .close,
  483. .open-menu.active .open{display:none;}
  484. .open-controls.active .close,
  485. .open-menu.active .close{display:block;}
  486.  
  487. /*lightboxes*/
  488.  
  489. img{
  490. height:auto;
  491. display:block;
  492. max-width:100%;
  493. }
  494.  
  495. iframe{display:block;}
  496.  
  497. .vignette,
  498. #vignette {opacity:0;}
  499.  
  500. .lightbox-image,
  501. #tumblr_lightbox img {
  502. box-shadow:none !important;
  503. border-radius:0 !important;
  504. max-width:none;
  505. }
  506.  
  507. .tmblr-lightbox,
  508. #tumblr_lightbox {background:rgba(var(--Background),.9) !important;}
  509.  
  510. .lightbox-caption,
  511. #tumblr_lightbox_caption {visibility:hidden;}
  512.  
  513. .npf_row figure{cursor:pointer;}
  514.  
  515. .npf_row figure:focus{outline:0;}
  516.  
  517. /*tooltip*/
  518.  
  519. .tippy-box[data-theme~='kosmique'] {background:rgb(var(--Light-boxes))}
  520.  
  521. .tippy-box[data-theme~='kosmique'][data-placement^='top']{
  522. padding-top:2px;
  523. filter:drop-shadow(2px 2px 1px rgba(var(--Shadows),.05));
  524. }
  525.  
  526. .tippy-box[data-theme~='kosmique'][data-placement^='bottom']{
  527. padding-bottom:2px;
  528. filter:drop-shadow(2px 2px 1px rgba(var(--Shadows),.05));
  529. }
  530.  
  531. .tippy-box[data-theme~='kosmique'][data-placement^='top']::before{
  532. top:0;
  533. left:0;
  534. width:100%;
  535. height:2px;
  536. content:'';
  537. z-index:999;
  538. position:fixed;
  539. border-radius:5px 5px 0 0;
  540. animation:gradient 5s ease infinite;
  541. background-size:200% 200% !important;
  542. background:linear-gradient(-45deg, rgb(var(--Accent)), rgb(var(--Sub-color)));
  543. }
  544.  
  545. .tippy-box[data-theme~='kosmique'][data-placement^='bottom']::before{
  546. left:0;
  547. bottom:0;
  548. width:100%;
  549. height:2px;
  550. content:'';
  551. z-index:999;
  552. position:fixed;
  553. border-radius:5px 5px 0 0;
  554. animation:gradient 5s ease infinite;
  555. background-size:200% 200% !important;
  556. background:linear-gradient(-45deg, rgb(var(--Accent)), rgb(var(--Sub-color)));
  557. }
  558.  
  559. .tippy-box[data-theme~='kosmique'][data-placement^='top'] > .tippy-arrow::before {border-top-color:rgb(var(--Light-boxes));}
  560. .tippy-box[data-theme~='kosmique'][data-placement^='bottom'] > .tippy-arrow::before {border-bottom-color:rgb(var(--Light-boxes));}
  561.  
  562. .tippy-content{padding:.5em 1em;}
  563.  
  564. /*scrollbar*/
  565.  
  566. ::-webkit-scrollbar{
  567. width:5px;
  568. height:5px;
  569. background-color:rgb(var(--Background));
  570. }
  571.  
  572. ::-webkit-scrollbar-thumb {
  573. border-radius:5px;
  574. background:rgb(var(--Scrollbar))
  575. }
  576.  
  577. /*pagination*/
  578.  
  579. #pagination {
  580. gap:30px;
  581. display:flex;
  582. flex-wrap:wrap;
  583. margin:100px auto;
  584. align-items:center;
  585. justify-content:center;
  586. }
  587.  
  588. #pagination > span{
  589. width:40px;
  590. height:40px;
  591. display:flex;
  592. line-height:1;
  593. font-weight:600;
  594. position:relative;
  595. align-items:center;
  596. border-radius:100%;
  597. transition:ease .5s;
  598. justify-content:center;
  599. text-transform:uppercase;
  600. color:rgb(var(--Sub-text));
  601. background:rgb(var(--Accent));
  602. }
  603.  
  604. #pagination a{
  605. display:flex;
  606. align-items:center;;
  607. }
  608.  
  609. #pagination a[data-page="prev"] .page-icon {
  610. margin-right:0;
  611. margin-left:-15px;
  612. }
  613.  
  614. #pagination a[data-page="prev"] .page-label {
  615. padding-left:15px;
  616. padding-right:25px;
  617. }
  618.  
  619. #pagination svg{
  620. width:1.25em;
  621. height:1.25em;
  622. }
  623.  
  624. /*mobile menu*/
  625.  
  626. #top{
  627. left:0;
  628. top:5px;
  629. gap:1em;
  630. width:100vw;
  631. height:110px;
  632. display:none;
  633. padding:30px;
  634. z-index:99999;
  635. position:fixed;
  636. flex-wrap:wrap;
  637. align-items:center;
  638. background:rgb(var(--Posts));
  639. justify-content:space-between;
  640. box-shadow:0 2px 2px rgb(var(--Shadows),.05);
  641. }
  642.  
  643. .open-menu{
  644. display:flex;
  645. font-weight:600;
  646. align-items:center;
  647. letter-spacing:.15em;
  648. color:rgb(var(--Title));
  649. text-transform:uppercase;
  650. }
  651.  
  652. .open-menu span{
  653. width:40px;
  654. height:40px;
  655. display:grid;
  656. margin-right:15px;
  657. place-items:center;
  658. border-radius:100%;
  659. background:rgb(var(--Light-boxes));
  660. }
  661.  
  662. .menu-icon{
  663. width:50px;
  664. height:50px;
  665. {block:IfIconGradientBorders}padding:5px;{/block:IfIconGradientBorders}
  666. position:relative;
  667. border-radius:100%;
  668. {block:IfIconGradientBorders}background:linear-gradient(58deg, rgb(var(--Accent)) 0%, rgb(var(--Sub-color)) 100%);{/block:IfIconGradientBorders}
  669. }
  670.  
  671. .menu-icon img{
  672. width:100%;
  673. height:100%;
  674. padding:2px;
  675. object-fit:cover;
  676. border-radius:100%;
  677. background:rgb(var(--Posts));
  678. }
  679.  
  680. .tumblr-controls{display:flex;}
  681. .tumblr-controls a{margin-left:1em;}
  682. .tumblr-controls a:first-of-type{margin-left:0;}
  683.  
  684. #top svg{
  685. width:1.15em;
  686. height:1.15em;
  687. }
  688.  
  689. #menu{
  690. left:0;
  691. top:110px;
  692. width:100vw;
  693. position:absolute;
  694. }
  695.  
  696. #menu .search{
  697. padding:1em;
  698. background:rgb(var(--Light-boxes));
  699. }
  700.  
  701. #menu nav{
  702. padding:30px;
  703. counter-reset:li;
  704. background:rgb(var(--Posts));
  705. }
  706.  
  707. #menu nav a{
  708. display:flex;
  709. font-size:.85em;
  710. font-weight:600;
  711. margin-bottom:1rem;
  712. align-items:center;
  713. letter-spacing:.15em;
  714. counter-increment:li;
  715. text-transform:uppercase;
  716. }
  717.  
  718. #menu nav a span {
  719. flex:1;
  720. overflow:hidden;
  721. white-space:nowrap;
  722. text-overflow:ellipsis;
  723. }
  724.  
  725. #menu nav a::before {
  726. display:block;
  727. margin-right:1em;
  728. transition:color .4s;
  729. content:counter(li, decimal-leading-zero)".";
  730. }
  731.  
  732. #menu nav a:hover::before{color:rgb(var(--Sub-color));}
  733. #menu nav a:last-of-type{margin-bottom:0}
  734. {block:ifHeader}
  735. /*header*/
  736.  
  737. header{
  738. padding:30px;
  739. overflow:hidden;
  740. border-radius:5px;
  741. margin:0 auto 100px;
  742. width:var(--Post-width);
  743. background:rgb(var(--Posts));
  744. box-shadow:2px 2px 2px rgb(var(--Shadows),.05);
  745. }
  746.  
  747. .header-image{
  748. width:100%;
  749. height:200px;
  750. object-fit:cover;
  751. border-radius:5px;
  752. margin-bottom:30px;
  753. }
  754.  
  755. .header-info{
  756. padding:0 50px;
  757. text-align:center;
  758. }
  759.  
  760. .header-icon{
  761. width:80px;
  762. height:80px;
  763. {block:IfIconGradientBorders}padding:5px;{/block:IfIconGradientBorders}
  764. position:relative;
  765. border-radius:100%;
  766. {block:IfNotHeaderImage}margin:0 auto 30px;{/block:IfNotHeaderImage}
  767. {block:IfHeaderImage}
  768. margin:-70px auto 30px;
  769. box-shadow:0 -10px 10px -1px rgba(var(--Shadows),.05);
  770. {/block:IfHeaderImage}
  771. {block:IfIconGradientBorders}background:linear-gradient(58deg, rgb(var(--Accent)) 0%, rgb(var(--Sub-color)) 100%);{/block:IfIconGradientBorders}
  772. }
  773.  
  774. .header-icon img{
  775. width:100%;
  776. height:100%;
  777. padding:2px;
  778. object-fit:cover;
  779. border-radius:100%;
  780. background:rgb(var(--Posts));
  781. }
  782.  
  783. .blog-title{
  784. font-weight:700;
  785. font-size:1.25em;
  786. letter-spacing:.15em;
  787. color:rgb(var(--Title));
  788. text-transform:uppercase;
  789. }
  790.  
  791. .divider{
  792. display:flex;
  793. align-items:center;
  794. margin:1.5em auto 0;
  795. justify-content:center;
  796. }
  797.  
  798. .divider svg{
  799. margin:0 .25em;
  800. fill:rgb(var(--Accent));
  801. color:rgb(var(--Accent));
  802. animation:.9s bounce infinite alternate;
  803. }
  804.  
  805.  
  806. .divider svg:nth-child(2) {animation-delay: 0.3s;}
  807. .divider svg:nth-child(3) {animation-delay: 0.6s;}
  808.  
  809. .blog-description {margin-top:1.5em;}
  810.  
  811. {/block:ifHeader}
  812. /*sidebar*/
  813.  
  814. aside{
  815. z-index:9;
  816. width:280px;
  817. position:absolute;
  818. {block:ifNotLeftSidebar}margin-left:calc(var(--Post-width) + 100px);{/block:ifNotLeftSidebar}
  819. }
  820.  
  821. .sidebar-image{
  822. width:100%;
  823. height:120px;
  824. object-fit:cover;
  825. margin-bottom:30px;
  826. }
  827.  
  828. .small-title{
  829. display:flex;
  830. {block:IfNotSidebarImage}padding:30px;{/block:IfNotSidebarImage};
  831. overflow:hidden;
  832. font-size:.85em;
  833. font-weight:700;
  834. border-radius:5px;
  835. align-items:center;
  836. {block:IfSidebarImage}padding-bottom:30px;{/block:IfSidebarImage}
  837. letter-spacing:.15em;
  838. flex-flow:column wrap;
  839. color:rgb(var(--Title));
  840. text-transform:uppercase;
  841. background:rgb(var(--Posts));
  842. box-shadow:2px 2px 2px rgb(var(--Shadows),.05);
  843. }
  844.  
  845. .sidebar-icon{
  846. width:60px;
  847. height:60px;
  848. {block:IfIconGradientBorders}padding:5px;{/block:IfIconGradientBorders}
  849. position:relative;
  850. border-radius:100%;
  851. {block:ifNotSidebarImage}margin:0 auto 30px;{/block:ifNotSidebarImage}
  852. {block:IfSidebarImage}
  853. margin:-60px auto 30px;
  854. box-shadow:0 -10px 10px -1px rgba(var(--Shadows),.05);
  855. {/block:IfSidebarImage}
  856. {block:IfIconGradientBorders}background:linear-gradient(58deg, rgb(var(--Accent)) 0%, rgb(var(--Sub-color)) 100%);{/block:IfIconGradientBorders}
  857. }
  858.  
  859. .sidebar-icon img{
  860. width:100%;
  861. height:100%;
  862. padding:2px;
  863. object-fit:cover;
  864. border-radius:100%;
  865. background:rgb(var(--Posts));
  866. }
  867.  
  868. .small-title span {
  869. padding:0 30px;
  870. text-align:center;
  871. }
  872.  
  873. aside nav{
  874. padding:30px;
  875. margin:30px 0;
  876. counter-reset:li;
  877. border-radius:5px;
  878. background:rgb(var(--Posts));
  879. box-shadow:2px 2px 2px rgb(var(--Shadows),.05);
  880. }
  881.  
  882. aside nav a{
  883. display:flex;
  884. font-size:.85em;
  885. font-weight:600;
  886. margin-bottom:1rem;
  887. align-items:center;
  888. letter-spacing:.15em;
  889. counter-increment:li;
  890. text-transform:uppercase;
  891. }
  892.  
  893. aside nav a span {
  894. flex:1;
  895. overflow:hidden;
  896. white-space:nowrap;
  897. text-overflow:ellipsis;
  898. }
  899.  
  900. aside nav a::before {
  901. display:block;
  902. margin-right:1em;
  903. transition:color .4s;
  904. content:counter(li, decimal-leading-zero)".";
  905. }
  906.  
  907. aside nav a:hover::before{color:rgb(var(--Sub-color));}
  908. aside nav a:last-of-type{margin-bottom:0}
  909.  
  910. aside .search{
  911. padding:1em;
  912. border-radius:5px;
  913. background:rgb(var(--Posts));
  914. box-shadow:2px 2px 2px rgb(var(--Shadows),.05);
  915. }
  916.  
  917. .search form{
  918. display:flex;
  919. align-items:center;
  920. }
  921.  
  922. .search form::before{
  923. content:'\e8bd';
  924. margin-right:1em;
  925. transition:color .4s;
  926. font-family:'feather';
  927. color:rgb(var(--Sub-text));
  928. }
  929.  
  930. .search form:focus-within::before{color:rgb(var(--Sub-color));}
  931.  
  932. .search input{
  933. flex:1;
  934. border:0;
  935. font-size:.85em;
  936. background:none;
  937. font-weight:500;
  938. font-family:inherit;
  939. letter-spacing:.15em;
  940. color:rgb(var(--Link));
  941. text-transform:uppercase;
  942. }
  943.  
  944. .search input::placeholder{
  945. color:inherit;
  946. transition:ease .3s;
  947. -moz-transition:ease .3s;
  948. -webkit-transition:ease .3s;
  949. }
  950.  
  951. .search input:focus::-webkit-input-placeholder { color:transparent; }
  952. .search input:focus:-moz-placeholder { color:transparent; }
  953. .search input:focus::-moz-placeholder { color:transparent; }
  954. .search input:focus:-ms-input-placeholder { color:transparent; }
  955.  
  956. /*posts*/
  957.  
  958. main{display:block;}
  959.  
  960. {block:ifHeader}
  961. {block:indexpage}
  962. main{
  963. position:relative;
  964. margin:35px auto 30px;
  965. width:var(--Post-width);
  966. }
  967.  
  968. main.active{width:calc(var(--Post-width) + 380px);}
  969. {/block:indexpage}
  970.  
  971. {block:permalinkpage}
  972. main{
  973. position:relative;
  974. margin:35px auto 30px;
  975. width:calc(var(--Post-width) + 380px);
  976. }
  977. {/block:permalinkpage}
  978. {/block:ifHeader}
  979.  
  980. {block:IfNotHeader}
  981. main{
  982. position:relative;
  983. margin:35px auto 30px;
  984. width:calc(var(--Post-width) + 380px);
  985. }
  986. {/block:IfNotHeader}
  987.  
  988. {block:ifLeftSidebar}
  989. main.active #posts{
  990. transition:margin-left .4s;
  991. margin-left:calc(280px + 100px);
  992. }
  993. {/block:ifLeftSidebar}
  994.  
  995. #posts{width:var(--Post-width);}
  996.  
  997. .post{
  998. position:relative;
  999. margin-bottom:100px;
  1000. }
  1001.  
  1002. .post:last-of-type{margin-bottom:0;}
  1003.  
  1004. .entry{
  1005. overflow:hidden;
  1006. position:relative;
  1007. border-radius:5px;
  1008. padding-bottom:2px;
  1009. background:rgb(var(--Posts));
  1010. box-shadow:2px 2px 2px rgb(var(--Shadows),.05);
  1011. }
  1012.  
  1013. .entry::before {
  1014. left:0;
  1015. bottom:0;
  1016. width:100%;
  1017. height:2px;
  1018. content:'';
  1019. z-index:999;
  1020. position:absolute;
  1021. animation:gradient 5s ease infinite;
  1022. background-size:200% 200% !important;
  1023. background:linear-gradient(-45deg, rgb(var(--Accent)), rgb(var(--Sub-color)));
  1024. }
  1025.  
  1026. /*photo*/
  1027.  
  1028. .photo {
  1029. overflow:hidden;
  1030. position:relative;
  1031. }
  1032.  
  1033. .photo img,
  1034. .tex > .tmblr-full img{
  1035. width:100%;
  1036. display:block;
  1037. }
  1038.  
  1039. .tex > .tmblr-full img,
  1040. .npf_inst{
  1041. overflow:hidden;
  1042. border-radius:5px;
  1043. }
  1044.  
  1045. /*titles*/
  1046.  
  1047. .post-title{
  1048. padding:30px;
  1049. font-weight:600;
  1050. letter-spacing:.15em;
  1051. color:rgb(var(--Title));
  1052. text-transform:uppercase;
  1053. background:rgb(var(--Light-boxes));
  1054. }
  1055.  
  1056. /*captions*/
  1057.  
  1058. .captions{padding:30px;}
  1059.  
  1060. .comment {
  1061. list-style:none;
  1062. padding-bottom:2em;
  1063. }
  1064.  
  1065. .comment:last-of-type {padding-bottom:0!important;}
  1066.  
  1067. .user + .tex{margin-left:calc(35px + 1em);}
  1068.  
  1069. .user {
  1070. display:flex;
  1071. font-weight:600;
  1072. margin-bottom:1em;
  1073. align-items:center;
  1074. }
  1075.  
  1076. span.user.deactivated::after {
  1077. margin-left:1em;
  1078. border-radius:3px;
  1079. padding:.25em .5em;
  1080. font-weight:initial;
  1081. content:"deactivated";
  1082. background:rgb(var(--Light-boxes));
  1083. }
  1084.  
  1085. .user .icon{
  1086. width:35px;
  1087. height:35px;
  1088. padding:5px;
  1089. margin-right:1em;
  1090. position:relative;
  1091. border-radius:100%;
  1092. background:linear-gradient(58deg, rgb(var(--Accent)) 0%, rgb(var(--Sub-color)) 100%);
  1093. }
  1094.  
  1095. .user .icon img{
  1096. width:100%;
  1097. height:100%;
  1098. padding:2px;
  1099. border-radius:100%;
  1100. background:rgb(var(--Posts));
  1101. }
  1102.  
  1103. /*quote*/
  1104.  
  1105. .quote{
  1106. padding:30px;
  1107. color:rgb(var(--Sub-text));
  1108. background:rgb(var(--Accent));
  1109. }
  1110.  
  1111. .source {
  1112. font-weight:600;
  1113. margin-bottom:15px;
  1114. letter-spacing:.15em;
  1115. text-transform:uppercase;
  1116. }
  1117.  
  1118. .source::before{
  1119. line-height:1;
  1120. content:'\e891';
  1121. font-weight:initial;
  1122. margin-right:15px;
  1123. font-family:'feather';
  1124. }
  1125.  
  1126. .source a{color:inherit;}
  1127.  
  1128. .quote span{
  1129. font-size:1.3em;
  1130. font-weight:700;
  1131. }
  1132.  
  1133. /*link*/
  1134.  
  1135. .npf-link-block{font:inherit;}
  1136.  
  1137. .link,
  1138. .npf-link-block{
  1139. display:block;
  1140. overflow:hidden;
  1141. border-bottom:1px solid rgb(var(--Borders));
  1142. }
  1143.  
  1144. .link-info,
  1145. .npf-link-block .bottom{padding:30px;}
  1146.  
  1147. .npf-link-block .title + .bottom {padding-top:15px;}
  1148.  
  1149. .link-name,
  1150. .npf-link-block .title{
  1151. font-size:1.3em;
  1152. font-weight:600;
  1153. }
  1154.  
  1155. .thumbnail {display:none}
  1156.  
  1157. .npf-link-block .title {padding:30px 30px 0!important;}
  1158.  
  1159. .npf-link-block .title {
  1160. overflow:inherit;
  1161. max-height:inherit;
  1162. line-height:inherit;
  1163. }
  1164.  
  1165. .npf-link-block .bottom .site-name {
  1166. color:inherit;
  1167. font-size:inherit;
  1168. font-weight:inherit;
  1169. text-transform:inherit;
  1170. }
  1171.  
  1172. .host,
  1173. .npf-link-block .bottom .site-name{margin-top:5px;}
  1174.  
  1175. .host::before,
  1176. .npf-link-block .bottom .site-name::before{
  1177. content:'\e882';
  1178. margin-right:15px;
  1179. font-family:'feather';
  1180. }
  1181.  
  1182. /*audio*/
  1183.  
  1184. .audio {
  1185. gap:4em;
  1186. padding:45px;
  1187. display:flex;
  1188. position:relative;
  1189. text-align:center;
  1190. align-items:center;
  1191. flex-flow:column wrap;
  1192. }
  1193.  
  1194. .player-controls{
  1195. padding:30px;
  1196. display:flex;
  1197. align-items:center;
  1198. margin:0 -45px -45px;
  1199. width:calc(100% + 90px);
  1200. color:rgb(var(--SUb-text));
  1201. justify-content:space-evenly;
  1202. background:rgb(var(--Light-boxes));
  1203. border-bottom:1px solid rgb(var(--Borders));
  1204. }
  1205.  
  1206. .player {
  1207. width:45px;
  1208. height:45px;
  1209. display:flex;
  1210. overflow:hidden;
  1211. align-items:center;
  1212. border-radius:100%;
  1213. justify-content:center;
  1214. color:rgb(255,255,255);
  1215. background:rgb(var(--Accent));
  1216. }
  1217.  
  1218. .current_time {left:1em;}
  1219. .time_left {right:1em;}
  1220.  
  1221. .audio_buttons {line-height:1;}
  1222.  
  1223. .player svg{
  1224. width:1.25em;
  1225. height:1.25em;
  1226. fill:rgb(var(--Sub-text));
  1227. }
  1228.  
  1229. .player-controls svg.skip{fill:rgb(var(--Sub-text));}
  1230.  
  1231. .player-controls svg:first-of-type{margin-left:0;}
  1232. .player-controls svg:last-of-type{margin-right:0;}
  1233.  
  1234. .error_icon svg {stroke:red;}
  1235.  
  1236. .audio_duration {display:inline;}
  1237.  
  1238. .audio_player {
  1239. left:0;
  1240. bottom:0;
  1241. width:90%;
  1242. display:flex;
  1243. position:relative;
  1244. align-items:center;
  1245. justify-content:space-evenly;
  1246. }
  1247.  
  1248. .audio_player .seekbar {
  1249. bottom:0;
  1250. width:50%;
  1251. height:3px;
  1252. border-radius:5px;
  1253. position:relative;
  1254. background:rgb(var(--Borders));
  1255. }
  1256.  
  1257. .audio_player .seekbar_progress {
  1258. width:0;
  1259. height:100%;
  1260. display:flex;
  1261. position:relative;
  1262. align-items:center;
  1263. background:linear-gradient(-45deg, rgb(var(--Accent)), rgb(var(--Sub-color)));
  1264. }
  1265.  
  1266. .seekbar_progress::after {
  1267. right:0;
  1268. width:8px;
  1269. height:8px;
  1270. content:'';
  1271. position:absolute;
  1272. border-radius:100%;
  1273. background:rgb(var(--Accent));
  1274. border:2px solid rgb(var(--Sub-color));
  1275. }
  1276.  
  1277. .time_left::before {content:"-";}
  1278.  
  1279. .current_time,
  1280. .time_left{
  1281. font-size:.75em;
  1282. font-weight:600;
  1283. letter-spacing:.15em;
  1284. }
  1285.  
  1286. .album-art{
  1287. height:120px;
  1288. border-radius:5px;
  1289. margin-bottom:45px;
  1290. }
  1291.  
  1292. .audio_info span {
  1293. display:block;
  1294. letter-spacing:.1em;
  1295. }
  1296.  
  1297. .track{
  1298. font-weight:600;
  1299. color:rgb(var(--Title));
  1300. }
  1301.  
  1302. /*asks*/
  1303.  
  1304. .question{
  1305. padding:30px;
  1306. background:rgb(var(--Light-boxes));
  1307. }
  1308.  
  1309. .answer{padding:30px;}
  1310.  
  1311. .answer ~ .answer{border-top:1px solid rgb(var(--Borders));}
  1312.  
  1313. .question .tex,
  1314. .answer .tex{margin-top:30px;}
  1315.  
  1316. .as{
  1317. display:flex;
  1318. position:relative;
  1319. align-items:center;
  1320. }
  1321.  
  1322. .question .as::before,
  1323. .answer .as::before{
  1324. bottom:0;
  1325. z-index:1;
  1326. padding:7px;
  1327. line-height:1;
  1328. font-size:.85em;
  1329. margin-left:45px;
  1330. position:absolute;
  1331. border-radius:100%;
  1332. font-family:'feather';
  1333. color:rgb(var(--Sub-text));
  1334. background:rgb(var(--Accent));
  1335. }
  1336.  
  1337. .question .as::before{content:'\e88a';}
  1338. .answer .as::before{content:'\e830';}
  1339. .answer ~ .answer .as::before{content:'\e890';}
  1340.  
  1341. .as li[data-name]{
  1342. font-weight:600;
  1343. font-size:1.05em;
  1344. letter-spacing:.1em;
  1345. text-transform:lowercase;
  1346. }
  1347.  
  1348. .as li:not([data-name]){font-weight:500;}
  1349.  
  1350. .as li[data-name="asker"]{color:rgb(var(--Accent));}
  1351. .answer .as li[data-name="answerer"]{color:rgb(var(--Sub-color));}
  1352. .answer ~ .answer .as li[data-name="answerer"]{color:rgb(var(--Title));}
  1353.  
  1354. .as a{color:inherit;}
  1355.  
  1356. .as .icon{
  1357. width:60px;
  1358. height:60px;
  1359. padding:3px;
  1360. margin-right:30px;
  1361. position:relative;
  1362. border-radius:100%;
  1363. background:linear-gradient(58deg, rgb(var(--Accent)) 0%, rgb(var(--Sub-color)) 100%);
  1364. }
  1365.  
  1366. .as .icon img{
  1367. width:100%;
  1368. height:100%;
  1369. padding:2px;
  1370. border-radius:100%;
  1371. background:rgb(var(--Posts));
  1372. }
  1373.  
  1374. /*chat*/
  1375.  
  1376. .post[post-type="text"].has-chat .tex{
  1377. margin:0 -30px;
  1378. }
  1379.  
  1380. .chat{
  1381. }
  1382.  
  1383. .l, p.npf_chat{
  1384. padding:30px;
  1385. border-bottom:1px solid rgb(var(--Borders));
  1386. }
  1387.  
  1388. .l:last-of-type,
  1389. p.npf_chat:last-of-type{border-bottom:0;}
  1390.  
  1391. .tex .npf_chat {font: inherit;}
  1392.  
  1393. .label,
  1394. .npf_chat > b{
  1395. display:block;
  1396. font-weight:600;
  1397. color:rgb(var(--Title));
  1398. }
  1399.  
  1400. .label::before,
  1401. .npf_chat > b::before{
  1402. content:'\e890';
  1403. margin-right:1em;
  1404. font-family:'feather';
  1405. color:rgb(var(--Sub-color));
  1406. }
  1407.  
  1408. .l .line,
  1409. .npf_chat > span{padding:.5em 0 0 1em;}
  1410.  
  1411. .l .line::before,
  1412. .npf_chat > span::before{
  1413. content:'\e856';
  1414. margin-right:1em;
  1415. font-family:'feather';
  1416. }
  1417.  
  1418. /*post footer*/
  1419.  
  1420. .post-footer{
  1421. display:flex;
  1422. padding:30px;
  1423. align-items:center;
  1424. text-transform:lowercase;
  1425. background:rgb(var(--Light-boxes));
  1426. }
  1427.  
  1428. .post-footer ul{
  1429. flex:1;
  1430. overflow:hidden;
  1431. }
  1432.  
  1433. .post-origin{
  1434. display:flex;
  1435. font-weight:600;
  1436. align-items:center;
  1437. }
  1438.  
  1439. .post-origin a{
  1440. max-width:50%;
  1441. overflow:hidden;
  1442. white-space:nowrap;
  1443. text-overflow:ellipsis;
  1444. color:rgb(var(--Title));
  1445. }
  1446.  
  1447. .post-origin a.reblog-parent{opacity:.75;}
  1448.  
  1449. .post-origin a.reblog-parent::before {
  1450. margin:0 10px;
  1451. content:'\e8b6';
  1452. font-weight:initial;
  1453. vertical-align:-2px;
  1454. display:inline-block;
  1455. font-family:'feather';
  1456. }
  1457.  
  1458. .notecount{margin:.5em 0 0 1em;}
  1459.  
  1460. li.notecount::before {
  1461. content:"\e856";
  1462. margin-right:1em;
  1463. font-family:'feather';
  1464. color:rgb(var(--Link));
  1465. }
  1466.  
  1467. .notecount a{
  1468. color:inherit;
  1469. margin-right:1em;
  1470. }
  1471.  
  1472. .post[post-type="photo"] .notecount a[data-type="note"]::before{content:'\e87c';}
  1473. .post[post-type="video"] .notecount a[data-type="note"]::before{content:'\e8ec';}
  1474. .post[post-type="audio"] .notecount a[data-type="note"]::before{content:'\e89d';}
  1475. .post[post-type="text"] .notecount a[data-type="note"]::before{content:'\e870';}
  1476. .post[post-type="link"] .notecount a[data-type="note"]::before{content:'\e882';}
  1477. .post[post-type="chat"] .notecount a[data-type="note"]::before{content:'\e891';}
  1478. .post[post-type="quote"] .notecount a[data-type="note"]::before{content:'\e844';}
  1479. .post[post-type="answer"] .notecount a[data-type="note"]::before{content:'\e88a';}
  1480.  
  1481. .notecount a[data-type="note"]::before{
  1482. margin-right:10px;
  1483. font-family:'feather';
  1484. color:rgb(var(--Accent));
  1485. }
  1486.  
  1487. .notecount a[data-type="time"]::before{
  1488. content:'\e84d';
  1489. margin-right:10px;
  1490. font-family:'feather';
  1491. color:rgb(var(--Accent));
  1492. }
  1493.  
  1494. .pin{
  1495. width:40px;
  1496. height:40px;
  1497. display:flex;
  1498. line-height:1;
  1499. margin-left:30px;
  1500. position:relative;
  1501. align-items:center;
  1502. border-radius:100%;
  1503. transition:ease .5s;
  1504. justify-content:center;
  1505. background:rgb(var(--Accent));
  1506. }
  1507.  
  1508. .pin:hover{background:rgb(var(--Sub-color));}
  1509.  
  1510. .pin svg{
  1511. width:1.5em;
  1512. height:1.5em;
  1513. transition:fill .5s;
  1514. fill:rgb(var(--Sub-text));
  1515. }
  1516.  
  1517. .pin:hover svg{fill:rgb(var(--Accent));}
  1518.  
  1519. /*post info*/
  1520.  
  1521. .when {
  1522. gap:20px;
  1523. display:flex;
  1524. margin-top:30px;
  1525. align-items:center;
  1526. }
  1527.  
  1528. .when a{
  1529. display:flex;
  1530. overflow:hidden;
  1531. position:relative;
  1532. align-items:center;
  1533. }
  1534.  
  1535. .when svg{
  1536. width:1.15em;
  1537. height:1.15em;
  1538. }
  1539.  
  1540. span[class$='-icon']{
  1541. width:40px;
  1542. height:40px;
  1543. display:flex;
  1544. line-height:1;
  1545. position:relative;
  1546. margin-right:-10px;
  1547. align-items:center;
  1548. border-radius:100%;
  1549. transition:ease .5s;
  1550. justify-content:center;
  1551. color:rgb(var(--Sub-text));
  1552. background:rgb(var(--Accent));
  1553. }
  1554.  
  1555. a:hover span[class$='-icon']{
  1556. color:rgb(var(--Accent));
  1557. background:rgb(var(--Sub-color));
  1558. }
  1559.  
  1560. span[class$='-label']{
  1561. font-weight:600;
  1562. border-radius:3px;
  1563. letter-spacing:.15em;
  1564. text-transform:uppercase;
  1565. padding:5px 15px 5px 25px;
  1566. background:rgb(var(--Light-boxes));
  1567. }
  1568.  
  1569. .liked ~ .like-label::after{content:'d';}
  1570.  
  1571. .liked ~ span.like-icon{background:rgb(var(--Sub-color))!important}
  1572.  
  1573. .liked ~ .like-icon svg{
  1574. fill:rgb(var(--Accent));
  1575. animation: heartbeat 1s;
  1576. color:rgb(var(--Accent));
  1577. -ms-animation: heartbeat ease 1.5s;
  1578. -moz-animation: heartbeat ease 1.5s;
  1579. -webkit-animation: heartbeat ease 1.5s;
  1580. }
  1581.  
  1582. .when .like .like_button {position:relative;}
  1583.  
  1584. .when .like .like_button iframe {
  1585. left:0;
  1586. right:0;
  1587. bottom:0;
  1588. top:-30px;
  1589. z-index:2;
  1590. opacity:0;
  1591. min-width:150px;
  1592. position:absolute;
  1593. }
  1594.  
  1595. /*notes*/
  1596.  
  1597. .pagenotes{
  1598. overflow:hidden;
  1599. position:relative;
  1600. border-radius:5px;
  1601. background:rgb(var(--Posts));
  1602. padding:30px 30px calc(30px + 2px);
  1603. box-shadow:2px 2px 2px rgb(var(--Shadows),.05);
  1604. }
  1605.  
  1606. .pagenotes::before {
  1607. left:0;
  1608. bottom:0;
  1609. width:100%;
  1610. height:2px;
  1611. content:'';
  1612. z-index:999;
  1613. position:absolute;
  1614. animation:gradient 5s ease infinite;
  1615. background-size:200% 200% !important;
  1616. background:linear-gradient(-45deg, rgb(var(--Accent)), rgb(var(--Sub-color)));
  1617. }
  1618.  
  1619. .pagenotes .title{
  1620. display:flex;
  1621. font-weight:600;
  1622. align-items:center;
  1623. margin-bottom:30px;
  1624. letter-spacing:.15em;
  1625. color:rgb(var(--Title));
  1626. text-transform:uppercase;
  1627. }
  1628.  
  1629. .pagenotes .title::before{
  1630. width:40px;
  1631. height:40px;
  1632. display:flex;
  1633. line-height:1;
  1634. content:'\e879';
  1635. font-size:1.25em;
  1636. margin-right:1em;
  1637. position:relative;
  1638. align-items:center;
  1639. border-radius:100%;
  1640. transition:ease .5s;
  1641. font-weight:initial;
  1642. font-family:"feather";
  1643. justify-content:center;
  1644. color:rgb(var(--Sub-text));
  1645. background:rgb(var(--Accent));
  1646. }
  1647.  
  1648. ol.notes {
  1649. margin:0px;
  1650. counter-reset:li;
  1651. text-transform:lowercase;
  1652. }
  1653.  
  1654. ol.notes li.note:not(.more_notes_link_container) {
  1655. display:flex;
  1656. margin:20px 0;
  1657. flex-wrap:wrap;
  1658. font-size:.85em;
  1659. font-weight:600;
  1660. margin-bottom:1rem;
  1661. counter-increment:li;
  1662. letter-spacing:.15em;
  1663. counter-increment:li;
  1664. text-transform:uppercase;
  1665. }
  1666.  
  1667. ol.notes li.note:not(.more_notes_link_container)::before {
  1668. display:block;
  1669. margin-right:1em;
  1670. transition:color .4s;
  1671. content:counter(li, decimal-leading-zero)".";
  1672. }
  1673.  
  1674. ol.notes li.note:hover::before{color:rgb(var(--Sub-color));}
  1675.  
  1676. .more_notes_link_container{margin-top:30px;}
  1677.  
  1678. ol.notes li.note:first-of-type {margin-top:0;}
  1679. ol.notes li.note:last-of-type {margin-bottom:0;}
  1680.  
  1681. ol.notes .clear{clear:both;}
  1682.  
  1683. a.avatar_frame {display:none}
  1684.  
  1685. span.action{flex:1}
  1686.  
  1687. ol.notes blockquote{
  1688. width:100%;
  1689. margin:1em 2em!important;
  1690. }
  1691.  
  1692. a.more_notes_link,
  1693. span.notes_loading{
  1694. display:block;
  1695. font-size:.85em;
  1696. text-align:left;
  1697. font-weight:600;
  1698. letter-spacing:.15em;
  1699. text-transform:uppercase;
  1700. }
  1701.  
  1702. /*tags*/
  1703.  
  1704. .result{
  1705. overflow:hidden;
  1706. font-size:.85em;
  1707. font-weight:600;
  1708. text-align:center;
  1709. border-radius:5px;
  1710. position:relative;
  1711. margin-bottom:30px;
  1712. letter-spacing:.15em;
  1713. color:rgb(var(--Title));
  1714. text-transform:uppercase;
  1715. background:rgb(var(--Posts));
  1716. padding:30px 30px calc(30px + 2px);
  1717. }
  1718.  
  1719. .result::before {
  1720. left:0;
  1721. bottom:0;
  1722. width:100%;
  1723. height:2px;
  1724. content:'';
  1725. z-index:999;
  1726. position:absolute;
  1727. animation:gradient 5s ease infinite;
  1728. background-size:200% 200% !important;
  1729. background:linear-gradient(-45deg, rgb(var(--Accent)), rgb(var(--Sub-color)));
  1730. }
  1731.  
  1732. .result span{
  1733. position:relative;
  1734. color:rgb(var(--Accent));
  1735. }
  1736.  
  1737. .tags a{
  1738. line-height:1;
  1739. overflow:hidden;
  1740. max-width:250px;
  1741. padding:.5em 1em;
  1742. border-radius:5px;
  1743. white-space:nowrap;
  1744. text-overflow:ellipsis;
  1745. border:1px solid rgba(var(--Borders));
  1746. }
  1747.  
  1748. .tags a:hover{background:rgb(var(--Sub-color));}
  1749.  
  1750. .tags {
  1751. gap:1em;
  1752. display:flex;
  1753. margin-top:30px;
  1754. overflow:hidden;
  1755. position:relative;
  1756. border-radius:5px;
  1757. align-items:center;
  1758. background:rgb(var(--Posts));
  1759. padding:30px 30px calc(30px + 2px);
  1760. }
  1761.  
  1762. .tags::before {
  1763. left:0;
  1764. bottom:0;
  1765. width:100%;
  1766. height:2px;
  1767. content:'';
  1768. z-index:999;
  1769. position:absolute;
  1770. animation:gradient 5s ease infinite;
  1771. background-size:200% 200% !important;
  1772. background:linear-gradient(-45deg, rgb(var(--Accent)), rgb(var(--Sub-color)));
  1773. }
  1774.  
  1775. .post_tags {
  1776. flex:1;
  1777. overflow:hidden;
  1778. position:relative;
  1779. white-space:nowrap;
  1780. }
  1781.  
  1782. .post_tags.draggable .post_tags_inner {
  1783. gap:1em;
  1784. display:flex;
  1785. user-select:none;
  1786. cursor:col-resize;
  1787. -ms-user-select:none;
  1788. -moz-user-select:none;
  1789. -khtml-user-select:none;
  1790. -webkit-user-select:none;
  1791. -webkit-touch-callout:none;
  1792. }
  1793.  
  1794. .post_tags_inner {
  1795. float:left;
  1796. position:relative;
  1797. }
  1798.  
  1799. .post_tags:after {
  1800. top:0;
  1801. right:0;
  1802. bottom:0;
  1803. width:20px;
  1804. content:'';
  1805. position:absolute;
  1806. background:-moz-linear-gradient(left, transparent 0, rgba(var(--Posts),1) 100%);
  1807. background:-webkit-gradient(linear, left top, right top, color-stop(0%, transparent),color-stop(100%, rgb(var(--Posts))));
  1808. background:-webkit-linear-gradient(left, transparent 0, rgba(var(--Posts),1) 100%);
  1809. background:-o-linear-gradient(left, transparent 0, rgba(var(--Posts),1) 100%);
  1810. background:-ms-linear-gradient(left, transparent 0, rgba(var(--Posts),1) 100%);
  1811. background:linear-gradient(to right, transparent 0, rgba(var(--Posts),1) 100%);
  1812. }
  1813.  
  1814. /*-------------------------------------------------------------------------*/
  1815.  
  1816. @media (max-width:1024px){
  1817. aside{display:none!important;}
  1818.  
  1819. .open-controls,
  1820. a.credits{display:none;}
  1821.  
  1822. #back{bottom:20px;}
  1823.  
  1824. header,
  1825. main,
  1826. main.active,
  1827. #posts{width:90vw;}
  1828.  
  1829. .when{flex-wrap:wrap;}
  1830.  
  1831. {block:ifHeader}
  1832. {block:indexpage}
  1833. #top{
  1834. display:flex;
  1835. transition:transform .5s;
  1836. transform:translatey(-100%);
  1837. }
  1838.  
  1839. #top.active{transform:translatey(0);}
  1840. {/block:indexpage}
  1841.  
  1842. {block:permalinkpage}
  1843. main{margin-top:160px;}
  1844. #top{display:flex;}
  1845. {/block:permalinkpage}
  1846. {/block:ifHeader}
  1847.  
  1848. {block:ifNotHeader}
  1849. main{margin-top:160px;}
  1850. #top{display:flex;}
  1851. {/block:ifNotHeader}
  1852. }
  1853.  
  1854. {CustomCSS}
  1855.  
  1856. </style>
  1857.  
  1858. </head>
  1859.  
  1860. <body>
  1861.  
  1862. <!--============================== responsive menu ==============================-->
  1863.  
  1864. <nav id="top">
  1865. <a class="open-menu">
  1866. <span>
  1867. <i data-feather="menu" class="open"></i>
  1868. <i data-feather="x" class="close"></i>
  1869. </span>
  1870.  
  1871. menu
  1872. </a>
  1873.  
  1874. <div class="menu-icon">
  1875. <img src="{image:header icon}">
  1876. </div>
  1877.  
  1878. <div class="tumblr-controls" style="display:none">
  1879. <a href="/" title="follow">
  1880. <i data-feather="user-plus"></i>
  1881. </a>
  1882.  
  1883. <a href="/" title="message">
  1884. <i data-feather="send"></i>
  1885. </a>
  1886.  
  1887. <a href="/" title="dashboard">
  1888. <i data-feather="power"></i>
  1889. </a>
  1890.  
  1891. <a href="//kosmique.tumblr.com" title="theme by kosmique">
  1892. <i data-feather="star"></i>
  1893. </a>
  1894. </div>
  1895.  
  1896. <nav id="menu" style="display:none;">
  1897. <div class="search">
  1898. <form action="/search" method="get">
  1899. <input type="text" name="q" id="search" value="{SearchQuery}" placeholder="find yourself"/>
  1900. </form>
  1901. </div>
  1902.  
  1903. <nav>
  1904. {block:IfLinkOneTitle}
  1905. <a href="{text:link one url}">
  1906. <span>{text:link one title}</span>
  1907. </a>
  1908. {/block:IfLinkOneTitle}
  1909.  
  1910. {block:IfLinkTwoTitle}
  1911. <a href="{text:link two url}">
  1912. <span>{text:link two title}</span>
  1913. </a>
  1914. {/block:IfLinkTwoTitle}
  1915.  
  1916. {block:IfLinkThreeTitle}
  1917. <a href="{text:link three url}">
  1918. <span>{text:link three title}</span>
  1919. </a>
  1920. {/block:IfLinkThreeTitle}
  1921.  
  1922. {block:IfLinkFourTitle}
  1923. <a href="{text:link four url}">
  1924. <span>{text:link four title}</span>
  1925. </a>
  1926. {/block:IfLinkFourTitle}
  1927.  
  1928. {block:IfLinkFiveTitle}
  1929. <a href="{text:link five url}">
  1930. <span>{text:link five title}</span>
  1931. </a>
  1932. {/block:IfLinkFiveTitle}
  1933.  
  1934. {block:IfLinkSixTitle}
  1935. <a href="{text:link six url}">
  1936. <span>{text:link six title}</span>
  1937. </a>
  1938. {/block:IfLinkSixTitle}
  1939. </nav>
  1940. </nav>
  1941. </nav>
  1942.  
  1943. <!--============================== content ==============================-->
  1944.  
  1945. <main>
  1946.  
  1947. {block:ifHeader}
  1948. {block:indexpage}
  1949. <!--------------------------------- header --------------------------------->
  1950.  
  1951. <header>
  1952. {block:ifHeaderImage}
  1953. <img src="{image:Header image}" class="header-image"/>
  1954. {/block:ifHeaderImage}
  1955.  
  1956. <div class="header-info">
  1957. {block:ifHeaderIcon}
  1958. <div class="header-icon">
  1959. <img src="{image:Header icon}">
  1960. </div>
  1961. {/block:ifHeaderIcon}
  1962.  
  1963. <a href="{blogurl}" class="blog-title">{title}</a>
  1964.  
  1965. {block:ifDescriptionDivider}
  1966. <div class="divider">
  1967. <i data-feather="{select:header divider}"></i>
  1968. <i data-feather="{select:header divider}"></i>
  1969. <i data-feather="{select:header divider}"></i>
  1970. </div>
  1971. {/block:ifDescriptionDivider}
  1972.  
  1973. {block:ifDescription}
  1974. {block:description}
  1975. <div class="blog-description">{description}</div>
  1976. {/block:description}
  1977. {/block:ifDescription}
  1978. </div>
  1979. </header>
  1980.  
  1981. {/block:indexpage}
  1982. {/block:ifHeader}
  1983.  
  1984. {block:ifSidebar}
  1985. <!--------------------------------- sidebar --------------------------------->
  1986.  
  1987. <aside {block:ifHeader}{block:indexpage}style="display:none;"{/block:indexpage}{/block:ifHeader}>
  1988.  
  1989. <a href="{blogurl}" class="small-title">
  1990. {block:ifSidebarImage}
  1991. <img src="{image:Header image}" class="sidebar-image"/>
  1992. {/block:ifSidebarImage}
  1993.  
  1994. {block:ifSidebarIcon}
  1995. <div class="sidebar-icon">
  1996. <img src="{image:Header icon}"/>
  1997. </div>
  1998. {/block:ifSidebarIcon}
  1999.  
  2000. <span>
  2001. {title}
  2002. </span>
  2003. </a>
  2004.  
  2005. <nav>
  2006. {block:IfLinkOneTitle}
  2007. <a href="{text:link one url}">
  2008. <span>{text:link one title}</span>
  2009. </a>
  2010. {/block:IfLinkOneTitle}
  2011.  
  2012. {block:IfLinkTwoTitle}
  2013. <a href="{text:link two url}">
  2014. <span>{text:link two title}</span>
  2015. </a>
  2016. {/block:IfLinkTwoTitle}
  2017.  
  2018. {block:IfLinkThreeTitle}
  2019. <a href="{text:link three url}">
  2020. <span>{text:link three title}</span>
  2021. </a>
  2022. {/block:IfLinkThreeTitle}
  2023.  
  2024. {block:IfLinkFourTitle}
  2025. <a href="{text:link four url}">
  2026. <span>{text:link four title}</span>
  2027. </a>
  2028. {/block:IfLinkFourTitle}
  2029.  
  2030. {block:IfLinkFiveTitle}
  2031. <a href="{text:link five url}">
  2032. <span>{text:link five title}</span>
  2033. </a>
  2034. {/block:IfLinkFiveTitle}
  2035.  
  2036. {block:IfLinkSixTitle}
  2037. <a href="{text:link six url}">
  2038. <span>{text:link six title}</span>
  2039. </a>
  2040. {/block:IfLinkSixTitle}
  2041. </nav>
  2042.  
  2043. <div class="search">
  2044. <form action="/search" method="get">
  2045. <input type="text" name="q" id="search" value="{SearchQuery}" placeholder="find yourself"/>
  2046. </form>
  2047. </div>
  2048. </aside>
  2049. {block:ifSidebar}
  2050.  
  2051. <!--------------------------------- posts --------------------------------->
  2052. <section id="posts">
  2053.  
  2054. {block:SearchPage}
  2055. <article class="result">
  2056. <!----- no search result callback ----->
  2057. {block:NoSearchResults}
  2058. {lang:No search results for SearchQuery 2}
  2059. {/block:NoSearchResults}
  2060.  
  2061. <!----- search result ----->
  2062. {lang:SearchResultCount results for SearchQuery 2}
  2063. </article>
  2064. {/block:SearchPage}
  2065.  
  2066. <!----- no posts callback ----->
  2067. {block:NoPosts}
  2068. <article class="result">
  2069. {lang:This minimalist Tumblr has no posts}
  2070. </article>
  2071. {/block:NoPosts}
  2072.  
  2073. <!----- tag counter result ----->
  2074. {block:TagPage}
  2075. <article class="result">
  2076. {lang:TagResultCount posts tagged Tag 2}
  2077. </article>
  2078. {/block:TagPage}
  2079.  
  2080. <!----- day page result ----->
  2081. {block:DayPage}
  2082. <article class="result">
  2083. {lang:Posted on DayOfWeek DayOfMonth Month Year 2}
  2084. </article>
  2085. {/block:DayPage}
  2086.  
  2087. <!----- posts ----->
  2088.  
  2089. {block:posts inlineMediaWidth="500"}
  2090.  
  2091. <article post-type="{posttype}" class="post {block:caption}captioned{/block:caption} {block:PinnedPostLabel}pinned{/block:PinnedPostLabel}" id="{postid}">
  2092.  
  2093. <div class="entry">
  2094. <!----- quote posts ----->
  2095. {block:Quote}
  2096. <div class="quote">
  2097. {block:Source}
  2098. <div class="source">{source}</div>
  2099. {/block:Source}
  2100.  
  2101. <span>{quote}</span>
  2102. </div>
  2103. {/block:Quote}
  2104.  
  2105. <!----- text posts ----->
  2106. {block:Text}
  2107. {block:Title}
  2108. <div class="post-title">{title}</div>
  2109. {/block:Title}
  2110.  
  2111. {block:RebloggedFrom}
  2112. <div class="captions">
  2113. {block:Reblogs}
  2114. <li class="comment">
  2115. {block:IsActive}
  2116. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">
  2117. <div class="icon">
  2118. <img src="{portraiturl-64}"/>
  2119. </div>
  2120. {username}
  2121. </a>
  2122. {/block:IsActive}
  2123.  
  2124. {block:IsDeactivated}
  2125. <span class="user deactivated">
  2126. <div class="icon">
  2127. <img src="{portraiturl-64}"/>
  2128. </div>
  2129. {username}
  2130. </span>
  2131. {block:IsDeactivated}
  2132. <div class="tex">{body}</div>
  2133. </li>
  2134. {/block:Reblogs}
  2135. </div>
  2136. {/block:RebloggedFrom}
  2137.  
  2138. {block:NotReblog}
  2139. <div class="captions">
  2140. <li class="comment">
  2141. <div class="tex">{body}</div>
  2142. </li>
  2143. </div>
  2144. {/block:NotReblog}
  2145. {/block:Text}
  2146.  
  2147. <!----- link posts ----->
  2148. {block:Link}
  2149. <a href="{URL}" {Target} class="link">
  2150. {block:Thumbnail}
  2151. <img src="{Thumbnail-HighRes}" class="thumbnail"/>
  2152. {/block:Thumbnail}
  2153.  
  2154. <div class="link-info">
  2155. <div class="link-name">{name}</div>
  2156.  
  2157. {block:Host}
  2158. <div class="host">{Host}</div>
  2159. {/block:Host}
  2160. </div>
  2161.  
  2162. </a>
  2163.  
  2164. {block:Description}
  2165. {block:NotReblog}
  2166. <div class="captions">
  2167. <li class="comment">
  2168. <div class="tex">{description}</div>
  2169. </li>
  2170. </div>
  2171. {/block:NotReblog}
  2172. {/block:Description}
  2173.  
  2174. {block:RebloggedFrom}
  2175. <div class="captions">
  2176. {block:Reblogs}
  2177. <li class="comment">
  2178. {block:IsActive}
  2179. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">
  2180. <img src="{portraiturl-64}" class="icon"/>
  2181. {username}
  2182. </a>
  2183. {/block:IsActive}
  2184.  
  2185. {block:IsDeactivated}
  2186. <span class="user deactivated">
  2187. <img src="{portraiturl-64}" class="icon"/>
  2188. {username}
  2189. </span>
  2190. {block:IsDeactivated}
  2191. <div class="tex">{body}</div>
  2192. </li>
  2193. {/block:Reblogs}
  2194. </div>
  2195. {/block:RebloggedFrom}
  2196. {/block:Link}
  2197.  
  2198. <!----- chat posts ----->
  2199. {block:Chat}
  2200. {block:Title}
  2201. <div class="post-title">{title}</div>
  2202. {/block:Title}
  2203.  
  2204. <ol class="chat">
  2205. {block:lines}
  2206. <li class="l {Alt}">
  2207. {block:label}<span class="label">{label}</span>{/block:label} <div class="line">{line}</div>
  2208. </li>
  2209. {/block:lines}
  2210. </ol>
  2211. {/block:Chat}
  2212.  
  2213. <!----- photo posts ----->
  2214. {block:Photo}
  2215. <div class="photo">
  2216. {linkopentag}
  2217. <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">
  2218. <img src="{PhotoURL-HighRes}">
  2219. </a>
  2220. {linkclosetag}
  2221. </div>
  2222.  
  2223. {block:caption}
  2224. <div class="captions">
  2225. {block:Reblogs}
  2226. <li class="comment">
  2227. {block:IsActive}
  2228. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">
  2229. <div class="icon">
  2230. <img src="{portraiturl-64}"/>
  2231. </div>
  2232. {username}
  2233. </a>
  2234. {/block:IsActive}
  2235.  
  2236. {block:IsDeactivated}
  2237. <span class="user deactivated">
  2238. <div class="icon">
  2239. <img src="{portraiturl-64}"/>
  2240. </div>
  2241. {username}
  2242. </span>
  2243. {block:IsDeactivated}
  2244. <div class="tex">{body}</div>
  2245. </li>
  2246. {/block:Reblogs}
  2247.  
  2248. {block:NotReblog}
  2249. <li class="comment">
  2250. <div class="tex">{caption}</div>
  2251. </li>
  2252. {/block:NotReblog}
  2253. </div>
  2254. {/block:caption}
  2255. {/block:Photo}
  2256.  
  2257. <!----- photoset posts ----->
  2258. {block:Photoset}
  2259. <div class="photo">
  2260. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  2261. {block:Photos}
  2262. <div class="photo-data">
  2263. <div class="pxu-photo">
  2264. <img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
  2265. </div>
  2266. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  2267. </div>
  2268. {/block:Photos}
  2269.  
  2270. </div>
  2271. </div>
  2272.  
  2273. {block:caption}
  2274. <div class="captions">
  2275. {block:Reblogs}
  2276. <li class="comment">
  2277. {block:IsActive}
  2278. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">
  2279. <div class="icon">
  2280. <img src="{portraiturl-64}"/>
  2281. </div>
  2282. {username}
  2283. </a>
  2284. {/block:IsActive}
  2285.  
  2286. {block:IsDeactivated}
  2287. <span class="user deactivated">
  2288. <div class="icon">
  2289. <img src="{portraiturl-64}"/>
  2290. </div>
  2291. {username}
  2292. </span>
  2293. {block:IsDeactivated}
  2294. <div class="tex">{body}</div>
  2295. </li>
  2296. {/block:Reblogs}
  2297.  
  2298. {block:NotReblog}
  2299. <li class="comment">
  2300. <div class="tex">{caption}</div>
  2301. </li>
  2302. {/block:NotReblog}
  2303. </div>
  2304. {/block:caption}
  2305. {/block:Photoset}
  2306.  
  2307. <!----- panorama posts ----->
  2308. {block:Panorama}
  2309. <div class="photo">
  2310. {LinkOpenTag}
  2311. <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">
  2312. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" />
  2313. </a>
  2314. {LinkCloseTag}
  2315. </div>
  2316.  
  2317. {block:caption}
  2318. <div class="captions">
  2319. {block:Reblogs}
  2320. <li class="comment">
  2321. {block:IsActive}
  2322. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">
  2323. <div class="icon">
  2324. <img src="{portraiturl-64}"/>
  2325. </div>
  2326. {username}
  2327. </a>
  2328. {/block:IsActive}
  2329.  
  2330. {block:IsDeactivated}
  2331. <span class="user deactivated">
  2332. <div class="icon">
  2333. <img src="{portraiturl-64}"/>
  2334. </div>
  2335. {username}
  2336. </span>
  2337. {block:IsDeactivated}
  2338. <div class="tex">{body}</div>
  2339. </li>
  2340. {/block:Reblogs}
  2341.  
  2342. {block:NotReblog}
  2343. <li class="comment">
  2344. <div class="tex">{caption}</div>
  2345. </li>
  2346. {/block:NotReblog}
  2347. </div>
  2348. {/block:caption}
  2349. {/block:Panorama}
  2350.  
  2351. <!----- video posts ----->
  2352. {block:Video}
  2353. <div class="photo video">{video-500}</div>
  2354.  
  2355. {block:caption}
  2356. <div class="captions">
  2357. {block:Reblogs}
  2358. <li class="comment">
  2359. {block:IsActive}
  2360. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">
  2361. <div class="icon">
  2362. <img src="{portraiturl-64}"/>
  2363. </div>
  2364. {username}
  2365. </a>
  2366. {/block:IsActive}
  2367.  
  2368. {block:IsDeactivated}
  2369. <span class="user deactivated">
  2370. <div class="icon">
  2371. <img src="{portraiturl-64}"/>
  2372. </div>
  2373. {username}
  2374. </span>
  2375. {block:IsDeactivated}
  2376. <div class="tex">{body}</div>
  2377. </li>
  2378. {/block:Reblogs}
  2379.  
  2380. {block:NotReblog}
  2381. <li class="comment">
  2382. <div class="tex">{caption}</div>
  2383. </li>
  2384. {/block:NotReblog}
  2385. </div>
  2386. {/block:caption}
  2387. {/block:Video}
  2388.  
  2389. <!----- audio posts ----->
  2390. {block:Audio}
  2391. <div class="audio">
  2392. {block:AudioPlayer}
  2393.  
  2394. <div class="audio_info">
  2395. {block:AlbumArt}
  2396. <img src="{AlbumArtURL}" class="album-art">
  2397. {/block:AlbumArt}
  2398.  
  2399. {block:TrackName}
  2400. <span class="track">
  2401. {TrackName}
  2402. </span>
  2403. {/block:TrackName}
  2404.  
  2405. {block:Artist}
  2406. <span class="artist">
  2407. {Artist}
  2408. </span>
  2409. {/block:Artist}
  2410. </div>
  2411.  
  2412. <div class="audio_player">
  2413. {audio:CurrentPlayTime}
  2414. {audio:Seekbar}
  2415. {audio:PlayTimeLeft}
  2416. </div>
  2417.  
  2418. <div class="player-controls">
  2419.  
  2420. <i data-feather="repeat"></i>
  2421.  
  2422. <i data-feather="skip-back" class="skip"></i>
  2423.  
  2424. <div class="player">
  2425. {AudioPlayer}
  2426. {audio:AudioButtons}
  2427. </div>
  2428.  
  2429. <i data-feather="skip-forward" class="skip"></i>
  2430.  
  2431. <i data-feather="shuffle"></i>
  2432. </div>
  2433. {/block:AudioPlayer}
  2434. </div>
  2435.  
  2436. {block:caption}
  2437. <div class="captions">
  2438. {block:Reblogs}
  2439. <li class="comment">
  2440. {block:IsActive}
  2441. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">
  2442. <div class="icon">
  2443. <img src="{portraiturl-64}"/>
  2444. </div>
  2445. {username}
  2446. </a>
  2447. {/block:IsActive}
  2448.  
  2449. {block:IsDeactivated}
  2450. <span class="user deactivated">
  2451. <div class="icon">
  2452. <img src="{portraiturl-64}"/>
  2453. </div>
  2454. {username}
  2455. </span>
  2456. {block:IsDeactivated}
  2457. <div class="tex">{body}</div>
  2458. </li>
  2459. {/block:Reblogs}
  2460.  
  2461. {block:NotReblog}
  2462. <li class="comment">
  2463. <div class="tex">{caption}</div>
  2464. </li>
  2465. {/block:NotReblog}
  2466. </div>
  2467. {/block:caption}
  2468. {/block:Audio}
  2469.  
  2470. <!----- answer posts ----->
  2471. {block:Answer}
  2472. <div class="question">
  2473. <div class="as">
  2474. <div class="icon">
  2475. <img src="{askerportraiturl-64}"/>
  2476. </div>
  2477.  
  2478. <ul>
  2479. <li data-name="asker">{asker}</li>
  2480. <li>texted you</li>
  2481. </ul>
  2482. </div>
  2483.  
  2484. <div class="tex">{question}</div>
  2485. </div>
  2486.  
  2487. {block:Answerer}
  2488. <div class="answer">
  2489. <div class="as">
  2490. <div class="icon">
  2491. <img src="{answererportraiturl-64}"/>
  2492. </div>
  2493.  
  2494. <ul>
  2495. <li data-name="answerer">{answerer}</li>
  2496. <li>replied</li>
  2497. </ul>
  2498. </div>
  2499.  
  2500. <div class="tex">{answer}</div>
  2501. </div>
  2502. {/block:Answerer}
  2503.  
  2504. {block:NotReblog}
  2505. <div class="answer">
  2506. <div class="as">
  2507. <div class="icon">
  2508. <img src="{portraiturl-64}">
  2509. </div>
  2510.  
  2511. <ul>
  2512. <li data-name="answerer"><a href="{permalink}">{name}</a>
  2513. <li>replied</li>
  2514. </ul>
  2515.  
  2516. </div>
  2517.  
  2518. <div class="tex">{replies}</div>
  2519. </div>
  2520. {/block:NotReblog}
  2521.  
  2522. {block:RebloggedFrom}
  2523. {block:Reblogs}
  2524. <div class="answer">
  2525. <div class="as">
  2526. <div class="icon">
  2527. <img src="{portraiturl-64}">
  2528. </div>
  2529.  
  2530. <ul>
  2531. <li data-name="answerer"><a href="{permalink}">{username}</a>
  2532. <li>commented</li>
  2533. </ul>
  2534.  
  2535. </div>
  2536. <div class="tex">{body}</div>
  2537. </div>
  2538. {/block:Reblogs}
  2539. {/block:RebloggedFrom}
  2540. {/block:Answer}
  2541.  
  2542. <!----- post footer ----->
  2543. {block:date}
  2544.  
  2545. <div class="post-footer">
  2546. {block:RebloggedFrom}
  2547. <ul>
  2548. <li class="post-origin not-original">
  2549. <a href="{ReblogRootURL}" target="_blank">
  2550. {ReblogRootName}
  2551. </a>
  2552.  
  2553. <a href="{reblogparenturl}" class="reblog-parent">
  2554. {ReblogParentName}
  2555. </a>
  2556. </li>
  2557.  
  2558. <li class="notecount">
  2559. <a href="{permalink}" data-type="note">{NoteCountWithLabel}</a>
  2560. <a href="/day/{year}/{MonthNumberWithZero}/{DayOfMonthWithZero}" data-type="time">{timestamp}</a>
  2561. </li>
  2562. </ul>
  2563. {/block:RebloggedFrom}
  2564.  
  2565. {block:NotReblog}
  2566. <ul>
  2567. <li class="post-origin original">
  2568. <a href="{permalink}">
  2569. {text:blog username}
  2570. </a>
  2571. </li>
  2572.  
  2573. <li class="notecount">
  2574. <a href="{permalink}" data-type="note">{NoteCountWithLabel}</a>
  2575. <a href="/day/{year}/{MonthNumberWithZero}/{DayOfMonthWithZero}" data-type="time">{timestamp}</a>
  2576. </li>
  2577. </ul>
  2578. {/block:NotReblog}
  2579.  
  2580. {block:indexpage}
  2581. {block:PinnedPostLabel}
  2582. <span class="pin" title="{PinnedPostLabel}">
  2583. <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  2584. viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve">
  2585. <path d="M140.1,74.1c2.3-2.3,2.3-6.1,0-8.5c-2.3-2.3-6.1-2.3-8.5,0l-62.9,62.9c-7.5,7.5-7.5,19.8,0,27.3c7.5,7.5,19.8,7.5,27.3,0
  2586. l65.9-65.9c0.6-0.3,1.2-0.7,1.8-1.2c8.8-8.8,32.2-32.2,9.7-54.7c-8.6-8.6-18.9-11.9-29.8-9.5c-8.9,1.9-18.1,7.6-27.3,16.8
  2587. l-71.4,71.4c-8.5,8.5-13,20.3-12.5,33.2c0.5,12.3,5.6,24.3,14.1,32.8c8.5,8.5,20.3,13.4,32.5,13.7c0.3,0,0.6,0,1,0
  2588. c12.2,0,23.4-4.6,31.7-12.9l70.4-70.4c2.3-2.3,2.3-6.1,0-8.5c-2.3-2.3-6.1-2.3-8.5,0l-70.4,70.4c-6.2,6.2-14.7,9.5-24,9.4
  2589. c-9.1-0.2-17.9-3.9-24.2-10.2c-13.5-13.5-14.2-36.4-1.6-49l71.4-71.4c7.4-7.4,14.8-12.1,21.3-13.5c6.9-1.5,13.1,0.5,18.8,6.3
  2590. c5.6,5.6,7.2,10.8,5.2,17.1c-1.4,4.5-4.6,9.5-10,15.5c-0.4,0.3-0.9,0.6-1.2,0.9l-71.3,71.3c-2.8,2.8-7.5,2.8-10.3,0
  2591. c-2.8-2.8-2.8-7.5,0-10.3L140.1,74.1z"/>
  2592. </svg>
  2593.  
  2594. </span>
  2595. {/block:PinnedPostLabel}
  2596. {/block:indexpage}
  2597. </div>
  2598. {block:date}
  2599. </div>
  2600.  
  2601. <!----- posts tags ----->
  2602. {block:date}
  2603. {block:hastags}
  2604. <div class="tags">
  2605. <div class="post_tags draggable">
  2606. <div class="post_tags_inner">
  2607. {block:Tags}
  2608. <a href="{TagUrl}">#{Tag}</a>
  2609. {/block:Tags}
  2610. </div>
  2611. </div>
  2612. </div>
  2613. {/block:hasTags}
  2614. {/block:date}
  2615.  
  2616. <!----- posts buttons ----->
  2617. {block:date}
  2618. <div class="when">
  2619.  
  2620. <a href="#" class="like">
  2621. {LikeButton size="100"}
  2622. <span class="like-icon">
  2623. <i data-feather="heart"></i>
  2624. </span>
  2625.  
  2626. <span class="like-label">like</span>
  2627. </a>
  2628.  
  2629. <a href="{ReblogURL}" target="_blank">
  2630. <span class="reblog-icon">
  2631. <i data-feather="refresh-ccw"></i>
  2632. </span>
  2633.  
  2634. <span class="reblog-label">reblog</span>
  2635. </a>
  2636.  
  2637. {block:ContentSource}
  2638. <a href="{SourceURL}" title="source" target="_blank" class="source-link">
  2639. <span class="source-icon">
  2640. <i data-feather="external-link"></i>
  2641. </span>
  2642.  
  2643. <span class="source-label">source</span>
  2644. </a>
  2645. {/block:ContentSource}
  2646.  
  2647. </div>
  2648. {/block:date}
  2649.  
  2650. </article>
  2651.  
  2652. <!----- posts notes ----->
  2653. {block:permalinkpage}
  2654. {block:PostNotes}
  2655. <article class="post pagenotes">
  2656. <div class="title">{notecountwithlabel}</div>
  2657. {PostNotes-64}
  2658. </article>
  2659. {/block:PostNotes}
  2660.  
  2661. {/block:permalinkpage}
  2662.  
  2663. {/block:Posts}
  2664. </section> <!-- posts -->
  2665.  
  2666. </main>
  2667.  
  2668. <!--============================== pagination ==============================-->
  2669.  
  2670. {block:Pagination}
  2671. <nav id="pagination">
  2672. {block:PreviousPage}
  2673. <a href="{PreviousPage}" data-page="prev">
  2674. <span class="page-label">previous</span>
  2675. <span class="page-icon">
  2676. <i data-feather="chevron-left"></i>
  2677. </span>
  2678. </a>
  2679. {/block:PreviousPage}
  2680.  
  2681. <span class="current_page">{CurrentPage}</span>
  2682.  
  2683. {block:NextPage}
  2684. <a href="{NextPage}" data-page="next">
  2685. <span class="page-icon">
  2686. <i data-feather="chevron-right"></i>
  2687. </span>
  2688. <span class="page-label">next</span>
  2689. </a>
  2690. {/block:NextPage}
  2691. </nav>
  2692. {/block:Pagination}
  2693.  
  2694. {block:DayPagination}
  2695. <nav id="pagination">
  2696. {block:NextDayPage}
  2697. <a href="{NextDayPage}" data-page="next">
  2698. <span class="page-icon">
  2699. <i data-feather="chevron-right"></i>
  2700. </span>
  2701. <span class="page-label">next</span>
  2702. </a>
  2703. {/block:NextDayPage}
  2704.  
  2705. {block:PreviousDayPage}
  2706. <a href="{PreviousDayPage}" data-page="prev">
  2707. <span class="page-label">previous</span>
  2708. <span class="page-icon">
  2709. <i data-feather="chevron-left"></i>
  2710. </span>
  2711. </a>
  2712. {/block:PreviousDayPage}
  2713.  
  2714. </nav>
  2715. {/block:DayPagination}
  2716.  
  2717. <!----- tumblr controls button ----->
  2718. <span class="open-controls" title="tumblr controls">
  2719. <i data-feather="settings" class="open"></i>
  2720. <i data-feather="x" class="close"></i>
  2721. </span>
  2722.  
  2723. <!----- back to top button ----->
  2724. <span id="back" style="display:none;">
  2725. <i data-feather="arrow-up"></i>
  2726. </span>
  2727.  
  2728. <!----- credits / don't touch ----->
  2729. <a href="//kosmique.tumblr.com" target="_blank" class="credits">
  2730. <i data-feather="star"></i>
  2731. </a>
  2732.  
  2733. <script>
  2734. $(document).ready(function(){
  2735. var $container = $('#posts');
  2736.  
  2737. //shorten notes counter
  2738. $('.post-footer').find(".notecount a[data-type='note']").each(function(){
  2739. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  2740. if (n > 999) {
  2741. n = Math.floor(n / 100) / 10;
  2742. $(this).text(n + 'k notes');
  2743. }
  2744. });
  2745.  
  2746. // photoset
  2747. $('.photo-slideshow').pxuPhotoset({
  2748. lightbox: true,
  2749. rounded: false,
  2750. gutter: '1px',
  2751. borderRadius: '0px',
  2752. photoset: '.photo-slideshow',
  2753. photoWrap: '.photo-data',
  2754. photo: '.pxu-photo'
  2755. });
  2756.  
  2757. // feathericons
  2758. feather.replace();
  2759.  
  2760. // flexible frames
  2761. function flexFrame() {
  2762. $(".captions").each(function() {
  2763. $(this).find("iframe:not(#submit_form)").wrap("<div class='capframe'></div>"); // wrap iframe
  2764. flexibleFrames($(".capframe"));
  2765. });
  2766. flexibleFrames($(".video"));
  2767. }
  2768.  
  2769. $(document).ready(flexFrame);
  2770.  
  2771. // tooltips
  2772. tippy("[title]", {
  2773. theme: "kosmique",
  2774. duration: 300,
  2775. allowHTML: true,
  2776. arrow: true,
  2777. followCursor: true,
  2778. interactive: false,
  2779. inlinePositioning: false,
  2780. maxWidth: 300,
  2781. offset: [0, 20],
  2782. zIndex: 99999999999999999999999999999999999999,
  2783. placement: "top",
  2784. content(reference) {
  2785. const title = reference.getAttribute("title");
  2786. reference.removeAttribute("title");
  2787. return title
  2788. },
  2789. });
  2790.  
  2791. $('aside nav a span, .tags a').bind('mouseenter', function(){
  2792. var $this = $(this);
  2793.  
  2794. if(this.offsetWidth < this.scrollWidth && !$this.attr('title')){
  2795. $this.attr('title', $this.text());
  2796. tippy("[title]", {
  2797. theme: "kosmique",
  2798. duration: 300,
  2799. allowHTML: true,
  2800. arrow: true,
  2801. followCursor: true,
  2802. interactive: false,
  2803. inlinePositioning: false,
  2804. maxWidth: 300,
  2805. offset: [0, 20],
  2806. placement: "top",
  2807. content(reference) {
  2808. const title = reference.getAttribute("title");
  2809. reference.removeAttribute("title");
  2810. return title
  2811. },
  2812. });
  2813. }
  2814. });
  2815.  
  2816. // remove blank captions
  2817. $('.captions').each(function() {
  2818. var $this = $(this);
  2819. if($this.html().replace(/\s|&nbsp;/g, '').length == 0)
  2820. $this.remove();
  2821. });
  2822.  
  2823. //back to top
  2824. $(document).scroll(function() {
  2825. var y = $(this).scrollTop();
  2826. if (y > 200) {$('#back').fadeIn();}
  2827. else {$('#back').fadeOut();}
  2828. });
  2829. $("#back").click(function() {$("html, body").animate({scrollTop: 0}, 1000);});
  2830.  
  2831. //sidebar
  2832. {block:IfSidebar}$("aside").stick_in_parent({offset_top: 30});{/block:IfSidebar}
  2833. {block:IfSidebar}
  2834. {block:ifHeader}
  2835. {block:indexpage}
  2836. $(document).scroll(function() {
  2837. var scroll = $(document).scrollTop();
  2838. var threshold = $('header').offset().top + $('header').height();
  2839.  
  2840. if (scroll >= threshold) {
  2841. $("main").addClass("active");
  2842. $('aside').fadeIn(150);
  2843. $('#top').addClass('active');
  2844. } else {
  2845. $("main").removeClass("active");
  2846. $('aside').fadeOut(150);
  2847. $('#top').removeClass('active');
  2848. }
  2849. });
  2850. {/block:indexpage}
  2851. {/block:ifHeader}
  2852. {/block:IfSidebar}
  2853.  
  2854. $('.open-menu').click(function(){
  2855. $(this).toggleClass('active');
  2856. $('.menu-icon,.tumblr-controls').toggle();
  2857. $('#menu').slideToggle();
  2858. });
  2859.  
  2860. // tumblr controls
  2861. $('.open-controls').click(function(){
  2862. $(this).toggleClass('active')
  2863. $('.tmblr-iframe').toggleClass('active');
  2864. });
  2865.  
  2866. // custom audio
  2867. customAudio({
  2868. post: ".post",
  2869. default: false,
  2870. pauseAll: true,
  2871. playButton: "<i data-feather='play'></i>",
  2872. pauseButton: "<i data-feather='pause'></i>",
  2873. errorIcon: "<i data-feather='x'></i>",
  2874. hideInfoIfError: true,
  2875. callAfterLoad: () => {feather.replace();},
  2876. });
  2877.  
  2878. //tags
  2879. $(".post_tags_inner").draggable({
  2880. axis : "x",
  2881. scroll: false,
  2882. stop: function() {
  2883. var __left = $(this).css("left").replace(/[^-\d\.]/g, '');
  2884. if(__left > 0){
  2885. $(this).animate({left: 0}, 400, 'easeOutExpo');
  2886. }
  2887. var __width = $(this).outerWidth();
  2888. var __parentWidth = $(".post_tags.draggable").outerWidth();
  2889. if(__width > __parentWidth) {
  2890. if(__left < __parentWidth-__width){
  2891. $(this).animate({left: __parentWidth-__width}, 400, 'easeOutExpo');
  2892. }
  2893. } else {
  2894. $(this).animate({left: 0}, 400, 'easeOutExpo');
  2895. }
  2896. }
  2897. });
  2898.  
  2899. // chat
  2900. $('.chat .label, p.npf_chat > b').each(function() {
  2901. var comma = $(this).text();
  2902. $(this).text(comma.replace(':', ''));
  2903. });
  2904.  
  2905. $('.tex .npf_chat').wrapAll('<div class="chat"></div>');
  2906.  
  2907. $('.post').each(function(){
  2908. if ($(this).find('.tex .chat').length) {
  2909. $(this).addClass('has-chat');
  2910. }
  2911. });
  2912.  
  2913. // time ago plugin
  2914. $('.notecount a[data-type="time"]').timeAgo({
  2915. time: "word", // can be "letter" "short" or "word"
  2916. spaces: true, // adds spaces between words and numbers
  2917. words: false, // turns numbers to words
  2918. prefix: "", // adds a prefix to the outputted string. could be "~" or "about"
  2919. suffix: " ago", // adds a suffix to the outputted string. could be "ago"
  2920. });
  2921.  
  2922. //read more
  2923. $('.post').each(function() {$(this).find('a.read_more').parent('p').addClass('read-more');});
  2924.  
  2925. });
  2926.  
  2927. // remove tumblr's redirects
  2928. function noHrefLi(){
  2929. var linkSet = document.querySelectorAll('a[href*="href.li/?"]');
  2930. Array.prototype.forEach.call(linkSet,function(el,i){
  2931. var theLink = linkSet[i].getAttribute('href').split("href.li/?")[1];
  2932. linkSet[i].setAttribute("href",theLink);
  2933. });
  2934. }
  2935. noHrefLi();
  2936.  
  2937. </script>
  2938. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!