API tools faq
paste
Advertisement
kosmique

theme: terra

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