API tools faq
paste
kosmique

theme: polaris

kosmique
Apr 28th, 2021 (edited)
3,587
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 65.24 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. polaris by kosmique.tumblr.com
  4.  
  5. ✧･ﾟ: *✧･ﾟ:*ﾟ✧*:･ﾟ✧
  6.  
  7. * rainbow links on hover: http://jsfiddle.net/tovic/RjyHm/
  8. * time ago plugin by bychloethemes
  9. * customaudio.js by annasthms
  10.  
  11. * base code by sorrism
  12. * flexible frames by nouvae
  13. * pxu photoset and lightboxes by shythemes
  14.  
  15. full credits list at kosmique.tumblr.com/credits
  16.  
  17. -->
  18.  
  19. <!DOCTYPE html>
  20. <html>
  21. <head>
  22.  
  23. <title>{block:PostSummary}{PostSummary} : {/block:PostSummary}{Title}</title>
  24.  
  25. <link rel="shortcut icon" href="{favicon}">
  26.  
  27. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  28. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  29.  
  30. <meta name="viewport" content="width=device-width, initial-scale=1">
  31.  
  32. <!--Default Variables-->
  33. <meta name="if:Dark controls" content="1"/>
  34. <meta name="if:Update tab" content="1"/>
  35. <meta name="if:Update section one" content="1"/>
  36. <meta name="if:Update section two" content="1"/>
  37. <meta name="if:Rainbow links" content="1"/>
  38.  
  39. <meta name="select:Sidebar position" content="left"/>
  40. <meta name="select:Sidebar position" content="right"/>
  41. <meta name="select:Menu position" content="left"/>
  42. <meta name="select:Menu position" content="right"/>
  43. <meta name="select:Menu position" content="top"/>
  44. <meta name="select:Menu position" content="bottom"/>
  45. <meta name="select:Font size" content="13px"/>
  46. <meta name="select:Font size" content="14px"/>
  47. <meta name="select:Font size" content="15px"/>
  48. <meta name="select:Font size" content="16px"/>
  49. <meta name="select:Body font" content="Barlow Semi Condensed"/>
  50. <meta name="select:Body font" content="Barlow"/>
  51. <meta name="select:Body font" content="Roboto Condensed"/>
  52. <meta name="select:Body font" content="Roboto"/>
  53. <meta name="select:Body font" content="PT Sans Narrow"/>
  54. <meta name="select:Body font" content="PT Sans"/>
  55. <meta name="select:Body font" content="Asap Condensed"/>
  56. <meta name="select:Body font" content="Asap"/>
  57. <meta name="select:Body font" content="Scada"/>
  58. <meta name="select:Sidebar username font" content="Arapey"/>
  59. <meta name="select:Sidebar username font" content="Rasa"/>
  60. <meta name="select:Sidebar username font" content="Playfair Display"/>
  61. <meta name="select:Sidebar username font" content="Lora"/>
  62. <meta name="select:Sidebar username font" content="PT Serif"/>
  63. <meta name="select:Sidebar username font" content="Crimson Text"/>
  64. <meta name="select:Sidebar username font" content="Cormorant"/>
  65.  
  66. <meta name="color:Background" content="#ffffff"/>
  67. <meta name="color:Text" content="#646464"/>
  68. <meta name="color:Link" content="#000000"/>
  69. <meta name="color:Title" content="#000000"/>
  70. <meta name="color:Borders" content="#f0f0f0"/>
  71. <meta name="color:Accent" content="#ccbae6"/>
  72. <meta name="color:Sub accent" content="#ffe0a8"/>
  73. <meta name="color:Sub text" content="#ffffff"/>
  74. <meta name="color:Gradient color one" content="#fadf78"/>
  75. <meta name="color:Gradient color two" content="#bef9c3"/>
  76. <meta name="color:Gradient color three" content="#94c8e0"/>
  77. <meta name="color:Gradient color four" content="#f3c4d4"/>
  78. <meta name="color:Gradient color five" content="#f26760"/>
  79. <meta name="color:Menu background" content="#1e1e1e"/>
  80. <meta name="color:Menu link color" content="#ffffff"/>
  81. <meta name="color:Sidebar background" content="#f8f8f8"/>
  82. <meta name="color:Sidebar username background" content="#1e1e1e"/>
  83. <meta name="color:Sidebar username color" content="#ffffff"/>
  84. <meta name="color:Sidebar description background" content="#f0f0f0"/>
  85. <meta name="color:Posts captions background" content="#f8f8f8"/>
  86. <meta name="color:Posts notes background" content="#1e1e1e"/>
  87. <meta name="color:Posts notes color" content="#ffffff"/>
  88. <meta name="color:Updates background" content="#ffffff"/>
  89.  
  90. <meta name="text:Blog username" content="username"/>
  91. <meta name="text:Home title" content="home"/>
  92. <meta name="text:Ask title" content="message"/>
  93. <meta name="text:Archive title" content="archive"/>
  94. <meta name="text:Link one title" content="link title"/>
  95. <meta name="text:Link one url" content="/"/>
  96. <meta name="text:Link two title" content="link title"/>
  97. <meta name="text:Link two url" content="/"/>
  98. <meta name="text:Link three title" content="link title"/>
  99. <meta name="text:Link three url" content="/"/>
  100. <meta name="text:Link four title" content="link title"/>
  101. <meta name="text:Link four url" content="/"/>
  102. <meta name="text:Update title" content="update title"/>
  103. <meta name="text:Update description" content="update description"/>
  104. <meta name="text:Update item one" content="item one"/>
  105. <meta name="text:Update bar one" content="33%"/>
  106. <meta name="text:Update item two" content="item two"/>
  107. <meta name="text:Update bar two" content="67%"/>
  108. <meta name="text:Update item three" content="item three"/>
  109. <meta name="text:Update bar three" content="100%"/>
  110.  
  111. <!--Scripts-->
  112. <link rel="preconnect" href="https://fonts.gstatic.com">
  113. <link href="https://fonts.googleapis.com/css2?family=Arapey:ital@1&family=Asap+Condensed:ital,wght@0,400;0,600;0,700;1,400;1,700&family=Asap:ital,wght@0,400;0,600;0,700;1,400;1,700&family=Barlow+Semi+Condensed:ital,wght@0,400;0,600;0,700;1,400;1,700&family=Barlow:ital,wght@0,400;0,600;0,700;1,400;1,700&family=Cormorant:ital@1&family=Crimson+Text:ital@1&family=Lora:ital@1&family=PT+Sans+Narrow:wght@400;700&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=PT+Serif:ital@1&family=Playfair+Display:ital@1&family=Rasa&family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Scada:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  114.  
  115. <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_o5hd5vvqpoqiwwmi.css"/>
  116. <link href="//dl.dropbox.com/s/bnoj86mka0bkplb/npf-override.css" rel="stylesheet">
  117. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  118.  
  119. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  120. <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
  121. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  122. <script src="https://static.tumblr.com/dj2anrv/ZVmq8svlk/jquery.style-my-tooltips.js"></script>
  123. <script src="https://seyche.github.io/external-files-hosting/plugins/flexframes-modified.js"></script>
  124. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.js"></script>
  125. <script type="text/javascript" src="https://static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script>
  126. <script src="//dl.dropbox.com/s/vwrm94pcg4c9e71/npf-evenize.js"></script>
  127. <script src="https://static.tumblr.com/0podkko/aZZqe4033/customaudio.min.js"></script>
  128.  
  129. <!--CSS customization here. -->
  130.  
  131. <style type="text/css">
  132.  
  133. *{box-sizing:border-box}
  134.  
  135. :root{
  136.  
  137. --NPF-Image-Spacing:1px;
  138. --NPF-Bottom-Gap-From-Captions:2em;
  139. }
  140.  
  141. .icon {
  142. speak:none;
  143. line-height:1;
  144. font-style:normal;
  145. font-weight:normal;
  146. font-variant:normal;
  147. text-transform:none;
  148. font-family:'feather' !important;
  149. -webkit-font-smoothing:antialiased;
  150. -moz-osx-font-smoothing:grayscale;
  151. }
  152.  
  153. body{
  154. margin:0;
  155. width:100%;
  156. height:100%;
  157. overflow-x:hidden;
  158. word-break:break-word;
  159. color:rgb({RGBcolor:text});
  160. background-color:rgb({RGBcolor:Background});
  161. font:400 {select:Font Size}/1.6 '{select:Body font}', sans-serif;
  162. }
  163.  
  164. body::before{
  165. top:0;
  166. left:0;
  167. width:100%;
  168. height:3px;
  169. content:'';
  170. z-index:999;
  171. position:fixed;
  172. background-image:linear-gradient(62deg, rgb({RGBcolor:Gradient color one}), rgb({RGBcolor:Gradient color two}), rgb({RGBcolor:Gradient color three}), rgb({RGBcolor:Gradient color four}), rgb({RGBcolor:Gradient color five}));
  173. }
  174.  
  175. :focus{
  176. border:0;
  177. outline:0;
  178. }
  179.  
  180. a,
  181. a:hover{
  182. cursor:pointer;
  183. transition:ease .3s;
  184. text-decoration:none;
  185. -moz-transition:ease .3s;
  186. -webkit-transition:ease .3s;
  187. }
  188.  
  189. a{color:rgb({RGBcolor:Link})}
  190.  
  191. {block:ifRainbowLinks}
  192. a:hover{
  193. animation:rainbow 2s linear infinite alternate;
  194. -o-animation:rainbow 2s linear infinite alternate;
  195. -ms-animation:rainbow 2s linear infinite alternate;
  196. -moz-animation:rainbow 2s linear infinite alternate;
  197. -webkit-animation:rainbow 2s linear infinite alternate;
  198. }
  199.  
  200. @-webkit-keyframes rainbow {
  201. 0% {color:red; }
  202. 10% {color:orange; }
  203. 20% {color:gold; }
  204. 30% {color:yellow; }
  205. 40% {color:yellowgreen;}
  206. 50% {color:green; }
  207. 60% {color:cyan; }
  208. 70% {color:blue; }
  209. 80% {color:violet; }
  210. 90% {color:magenta; }
  211. 100% {color:indigo; }
  212. }
  213. @-moz-keyframes rainbow {
  214. 0% {color:red; }
  215. 10% {color:orange; }
  216. 20% {color:gold; }
  217. 30% {color:yellow; }
  218. 40% {color:yellowgreen;}
  219. 50% {color:green; }
  220. 60% {color:cyan; }
  221. 70% {color:blue; }
  222. 80% {color:violet; }
  223. 90% {color:magenta; }
  224. 100% {color:indigo; }
  225. }
  226. @-ms-keyframes rainbow {
  227. 0% {color:red; }
  228. 10% {color:orange; }
  229. 20% {color:gold; }
  230. 30% {color:yellow; }
  231. 40% {color:yellowgreen;}
  232. 50% {color:green; }
  233. 60% {color:cyan; }
  234. 70% {color:blue; }
  235. 80% {color:violet; }
  236. 90% {color:magenta; }
  237. 100% {color:indigo; }
  238. }
  239. @-o-keyframes rainbow {
  240. 0% {color:red; }
  241. 10% {color:orange; }
  242. 20% {color:gold; }
  243. 30% {color:yellow; }
  244. 40% {color:yellowgreen;}
  245. 50% {color:green; }
  246. 60% {color:cyan; }
  247. 70% {color:blue; }
  248. 80% {color:violet; }
  249. 90% {color:magenta; }
  250. 100% {color:indigo; }
  251. }
  252. @keyframes rainbow {
  253. 0% {color:red; }
  254. 10% {color:orange; }
  255. 20% {color:gold; }
  256. 30% {color:yellow; }
  257. 40% {color:yellowgreen;}
  258. 50% {color:green; }
  259. 60% {color:cyan; }
  260. 70% {color:blue; }
  261. 80% {color:violet; }
  262. 90% {color:magenta; }
  263. 100% {color:indigo; }
  264. }
  265. {/block:ifRainbowLinks}
  266.  
  267. b,
  268. strong{font-weight:700;}
  269.  
  270. small,
  271. sub,
  272. sup{font-size:.7em;}
  273.  
  274. big{font-size:1.1em;}
  275.  
  276. p {margin:.7em 0;}
  277. p:first-of-type {margin-top:0;}
  278. p:last-of-type {margin-bottom:0;}
  279.  
  280. h1,
  281. h2,
  282. h3,
  283. h4 {
  284. margin:1em 0;
  285. font-weight:700;
  286. font-size:1.05em;
  287. }
  288.  
  289. blockquote{
  290. padding:1em;
  291. margin:.5em 0;
  292. font-style:italic;
  293. border-radius:5px;
  294. background:rgb({RGBcolor:Borders});
  295. border-left:2px solid rgb({RGBcolor:Sub accent});
  296. }
  297.  
  298. pre{
  299. padding:1em;
  300. margin:.5em 0;
  301. display:block;
  302. user-select:all;
  303. border-radius:5px;
  304. font-family:inherit;
  305. -ms-user-select:all;
  306. white-space:pre-wrap;
  307. -webkit-user-select:all;
  308. background:rgb({RGBcolor:Sub accent});
  309. }
  310.  
  311. code{
  312. margin:0;
  313. display:inline;
  314. border-radius:5px;
  315. padding:.25em .5em;
  316. font-family:inherit;
  317. background:rgb({RGBcolor:Sub accent});
  318. }
  319.  
  320. h1:first-of-type,
  321. h2:first-of-type,
  322. h3:first-of-type,
  323. h4:first-of-type {margin-top:0;}
  324.  
  325. ul,ol{
  326. padding:0;
  327. margin:0;
  328. list-style:none;
  329. }
  330.  
  331. .post .captions ul,
  332. .post .captions ol{padding-left:1em!important;}
  333.  
  334. .post .captions ul li::before,
  335. .post .captions ol li::before{
  336. width:5px;
  337. height:5px;
  338. content:"";
  339. margin-right:1em;
  340. position:relative;
  341. display:inline-block;
  342. vertical-align:middle;
  343. background:rgb({RGBcolor:Accent});
  344. }
  345.  
  346. hr {
  347. width:100%;
  348. height:1px;
  349. border:none;
  350. box-shadow:0;
  351. margin:1em auto;
  352. background:rgb({RGBcolor:Borders});
  353. }
  354.  
  355. svg{
  356. width:1em;
  357. height:1em;
  358. }
  359.  
  360. a.read_more{
  361. font-weight:600;
  362. padding:.5em 1em;
  363. border-radius:5px;
  364. text-transform:lowercase;
  365. color:rgb({RGBcolor:Sub text});
  366. background:rgb({RGBcolor:Accent});
  367. }
  368.  
  369. a.credits,
  370. body > #back{
  371. z-index:9;
  372. width:40px;
  373. right:20px;
  374. height:40px;
  375. display:flex;
  376. position:fixed;
  377. border-radius:5px;
  378. align-items:center;
  379. justify-content:center;
  380. color:rgb({RGBcolor:Menu link color});
  381. background:rgb({RGBcolor:Menu background});
  382. }
  383.  
  384. a.credits svg{
  385. transition:ease .3s;
  386. -moz-transition:ease .3s;
  387. -webkit-transition:ease .3s;
  388. }
  389.  
  390. a.credits:hover svg{
  391. fill:rgb(255, 249, 64);
  392. color:rgb(255, 249, 64);
  393. filter:drop-shadow(0 0 4px rgb(255, 249, 64));
  394. }
  395.  
  396. a.credits{bottom:20px;}
  397.  
  398. body > #back{
  399. bottom:80px;
  400. cursor:pointer;
  401. }
  402.  
  403. body > #back svg{
  404. width:1.1em;
  405. height:1.1em;
  406. }
  407.  
  408. /*selection*/
  409. ::selection {
  410. color:rgb({RGBcolor:Accent});
  411. background-color:rgb({RGBcolor:Background});
  412. }
  413.  
  414. ::-moz-selection {
  415. color:rgb({RGBcolor:Accent});
  416. background-color:rgb({RGBcolor:Background});
  417. }
  418.  
  419. /*tumblr controls*/
  420.  
  421. .iframe-controls--desktop {
  422. display:block;
  423. top:0!important;
  424. margin-top:25px;
  425. {block:ifDarkControls}filter:invert(1);{/block:ifDarkControls}
  426. z-index:-1!important;
  427. z-index:12!important;
  428. position:fixed!important;
  429. }
  430.  
  431. .tmblr-iframe{
  432. opacity:0;
  433. visibility:hidden;
  434. transition:ease .3s;
  435. -moz-transition:ease .3s;
  436. -webkit-transition:ease .3s;
  437. transform:scale(0.7)!important;
  438. -moz-transform:scale(0.7)!important;
  439. -webkit-transform:scale(0.7)!important;
  440. }
  441.  
  442. .tmblr-iframe.active{
  443. opacity:1;
  444. visibility:visible;
  445. }
  446.  
  447. .tmblr-iframe--follow-teaser,
  448. .tmblr-iframe--app-cta-button{display:none !important;}
  449.  
  450. .open-controls,
  451. body > .open-updates{
  452. z-index:9;
  453. width:40px;
  454. right:20px;
  455. height:40px;
  456. display:flex;
  457. cursor:pointer;
  458. position:fixed;
  459. border-radius:5px;
  460. align-items:center;
  461. justify-content:center;
  462. color:rgb({RGBcolor:Menu link color});
  463. background:rgb({RGBcolor:Menu background});
  464. }
  465.  
  466. .open-controls{top:20px;}
  467. body > .open-updates{top:80px;}
  468.  
  469. .open-controls .close,
  470. .open-updates .close,
  471. .open-controls.active .open,
  472. .open-updates.active .open{display:none;}
  473.  
  474. .open-controls.active .close,
  475. .open-updates.active .close{display:initial;}
  476.  
  477. /*footer credits*/
  478.  
  479. footer.credits{
  480. display:none;
  481. margin-top:100px;
  482. text-align:center;
  483. }
  484.  
  485. footer.credits a{font-weight:600;}
  486. footer.credits div{margin-top:2em;}
  487. footer.credits a:not(#back){position:relative;}
  488.  
  489. footer.credits a:not(#back)::before{
  490. left:0;
  491. width:100%;
  492. height:1px;
  493. content:'';
  494. bottom:-2px;
  495. position:absolute;
  496. background-image:linear-gradient(62deg, rgb({RGBcolor:Gradient color one}), rgb({RGBcolor:Gradient color two}), rgb({RGBcolor:Gradient color three}), rgb({RGBcolor:Gradient color four}), rgb({RGBcolor:Gradient color five}));
  497. }
  498.  
  499. /*lightboxes*/
  500.  
  501. img{
  502. height:auto;
  503. display:block;
  504. max-width:100%;
  505. }
  506.  
  507. iframe{display:block;}
  508.  
  509. .vignette,
  510. #vignette {opacity:0;}
  511.  
  512. .lightbox-image,
  513. #tumblr_lightbox img {
  514. box-shadow:none !important;
  515. border-radius:0 !important;
  516. max-width:none;
  517. }
  518.  
  519. .tmblr-lightbox,
  520. #tumblr_lightbox {background:rgba({RGBcolor:Background},.9) !important;}
  521.  
  522. .lightbox-caption,
  523. #tumblr_lightbox_caption {visibility:hidden;}
  524.  
  525. .npf_row figure{cursor:pointer;}
  526.  
  527. .npf_row figure:focus{outline:0;}
  528.  
  529. /*tooltip*/
  530.  
  531. #s-m-t-tooltip{
  532. z-index:9999999;
  533. max-width:300px;
  534. position:relative;
  535. border-radius:5px;
  536. padding:.5em 1.25em;
  537. margin:0 14px 7px 30px;
  538. -moz-border-radius:5px;
  539. color:rgb({RGBcolor:Text});
  540. text-transform:lowercase;
  541. -webkit-border-radius:5px;
  542. border:1px solid rgb({RGBcolor:Borders});
  543. background:rgba({RGBcolor:Background},.8);
  544. }
  545.  
  546. /*scrollbar*/
  547.  
  548. ::-webkit-scrollbar{
  549. width:5px;
  550. height:5px;
  551. background-color:rgb({RGBcolor:Background});
  552. }
  553.  
  554. ::-webkit-scrollbar-thumb {
  555. border-radius:5px;
  556. background-image:linear-gradient(62deg, rgb({RGBcolor:Gradient color one}), rgb({RGBcolor:Gradient color two}), rgb({RGBcolor:Gradient color three}), rgb({RGBcolor:Gradient color four}), rgb({RGBcolor:Gradient color five}));
  557. }
  558.  
  559. /*pagination*/
  560.  
  561. #pagination {
  562. gap:0 1em;
  563. display:flex;
  564. margin-top:100px;
  565. align-items:center;
  566. justify-content:center;
  567. }
  568.  
  569. #pagination a,
  570. #pagination span{
  571. display:flex;
  572. line-height:1;
  573. min-width:55px;
  574. font-size:1.2em;
  575. min-height:55px;
  576. align-items:center;
  577. border-radius:30px;
  578. justify-content:center;
  579. text-transform:uppercase;
  580. color:rgb({RGBcolor:Sub text});
  581. background:rgb({RGBcolor:Accent});
  582. }
  583.  
  584. #pagination span{padding:0 20px;}
  585.  
  586. #pagination svg{
  587. width:1.3em;
  588. height:1.3em;
  589. }
  590.  
  591. /*menu*/
  592.  
  593. #left{
  594. gap:50px;
  595. z-index:9;
  596. padding:30px;
  597. display:flex;
  598. position:fixed;
  599. align-items:center;
  600. justify-content:center;
  601. background:rgb({RGBcolor:Menu background});
  602. }
  603.  
  604. #left a{
  605. display:flex;
  606. position:relative;
  607. align-items:center;
  608. justify-content:center;
  609. color:rgb({RGBcolor:Menu link color});
  610. }
  611.  
  612. #left:hover a{opacity:.6;}
  613. #left a:hover{opacity:1;}
  614.  
  615. #left a span{
  616. opacity:0;
  617. padding:1em;
  618. line-height:1;
  619. font-size:.85em;
  620. width:max-content;
  621. position:absolute;
  622. visibility:hidden;
  623. border-radius:5px;
  624. transition:ease .3s;
  625. text-transform:uppercase;
  626. -moz-transition:ease .3s;
  627. background:rgb({RGBcolor:Menu background});
  628. -webkit-transition:ease .3s;
  629. }
  630.  
  631. #left a:hover span{
  632. opacity:1;
  633. visibility:visible;
  634. }
  635.  
  636. #left .open-updates{
  637. display:none;
  638. cursor:pointer;
  639. position:relative;
  640. }
  641.  
  642. #left svg{
  643. width:1.3em;
  644. height:1.3em;
  645. display:block;
  646. }
  647.  
  648. /*updates tab*/
  649.  
  650. .updates{
  651. z-index:99;
  652. position:fixed;
  653. margin-top:-20px;
  654. }
  655.  
  656. .updates > section{
  657. padding:1em;
  658. width:220px;
  659. font-size:.85em;
  660. border-radius:5px;
  661. margin-bottom:1em;
  662. background:rgb({RGBcolor:Updates background});
  663. border:1px solid rgb({RGBcolor:Borders});
  664. }
  665.  
  666. .update-title{
  667. overflow:hidden;
  668. font-weight:600;
  669. white-space:nowrap;
  670. transition:ease .3s;
  671. margin-bottom:.25em;
  672. text-overflow:ellipsis;
  673. color:rgb({RGBcolor:Title});
  674. text-transform:uppercase;
  675. -moz-transition:ease .3s;
  676. -webkit-transition:ease .3s;
  677. }
  678.  
  679. .updates a{color:inherit;}
  680.  
  681. .updates a:hover .update-title{color:rgb({RGBcolor:Sub accent});}
  682.  
  683. .update-description{
  684. overflow:hidden;
  685. display:-webkit-box;
  686. -webkit-line-clamp:2;
  687. -webkit-box-orient:vertical;
  688. }
  689.  
  690. .updates li{list-style:none;}
  691.  
  692. .updates > section:nth-of-type(2){
  693. gap:1rem;
  694. display:grid;
  695. }
  696.  
  697. .update-bar{
  698. width:100%;
  699. height:5px;
  700. overflow:hidden;
  701. position:relative;
  702. border-radius:5px;
  703. border:1px solid rgb({RGBcolor:Borders});
  704. }
  705.  
  706. .update-bar span{
  707. height:100%;
  708. position:absolute;
  709. background:rgb({RGBcolor:Accent});
  710. }
  711.  
  712. /*sidebar*/
  713.  
  714. aside{
  715. width:280px;
  716. position:fixed;
  717. }
  718.  
  719. .blog-user{
  720. font-size:1.2em;
  721. padding:.75em 1em;
  722. border-radius:5px;
  723. font-style:italic;
  724. color:rgb({RGBcolor:Sidebar username color});
  725. background:rgb({RGBcolor:Sidebar username background});
  726. font-family:'{select:Sidebar username font}';
  727. }
  728.  
  729. .side{
  730. padding:1em;
  731. margin-top:1em;
  732. border-radius:5px;
  733. background:rgb({RGBcolor:Sidebar background});
  734. }
  735.  
  736. .blog-title{
  737. display:flex;
  738. font-size:.85em;
  739. font-weight:600;
  740. align-items:center;
  741. color:rgb({RGBcolor:Title});
  742. text-transform:uppercase;
  743. justify-content:flex-start;
  744. }
  745.  
  746. .blog-title img{
  747. width:30px;
  748. height:30px;
  749. margin-right:1em;
  750. border-radius:100%;
  751. }
  752.  
  753. .blog-title span{
  754. overflow:hidden;
  755. white-space:nowrap;
  756. text-overflow:ellipsis;
  757. }
  758.  
  759. .blog-description{
  760. padding:1em;
  761. margin-top:1em;
  762. border-radius:5px;
  763. background:rgb({RGBcolor:Sidebar description background});
  764. }
  765.  
  766. .search form{
  767. width:280px;
  768. display:flex;
  769. line-height:1;
  770. margin-top:1em;
  771. }
  772.  
  773. .search form::before{
  774. padding:.9rem;
  775. display:flex;
  776. content:'\e8bd';
  777. font-size:1.25em;
  778. margin-right:1em;
  779. border-radius:5px;
  780. align-items:center;
  781. font-family:'feather';
  782. justify-content:center;
  783. background:rgb({RGBcolor:Sidebar background});
  784. }
  785.  
  786. .search input{
  787. flex:1;
  788. border:0;
  789. padding:1em;
  790. font:inherit;
  791. color:inherit;
  792. overflow:hidden;
  793. border-radius:5px;
  794. background:rgb({RGBcolor:Sidebar background});
  795. }
  796.  
  797. .search input::placeholder{
  798. color:inherit;
  799. transition:ease .3s;
  800. -moz-transition:ease .3s;
  801. -webkit-transition:ease .3s;
  802. }
  803.  
  804. .search input:focus::-webkit-input-placeholder { color:transparent; }
  805. .search input:focus:-moz-placeholder { color:transparent; }
  806. .search input:focus::-moz-placeholder { color:transparent; }
  807. .search input:focus:-ms-input-placeholder { color:transparent; }
  808.  
  809. /*posts*/
  810.  
  811. #entries{
  812. margin:100px auto;
  813. width:calc(540px + 280px + 150px);
  814. }
  815.  
  816. #posts{width:540px;}
  817.  
  818. {block:indexpage}.post:not(:last-of-type){margin-bottom:100px;}{/block:indexpage}
  819. {block:permalinkpage}.post{margin-bottom:2em}{/block:permalinkpage}
  820.  
  821. /*photo*/
  822.  
  823. .photo {
  824. overflow:hidden;
  825. position:relative;
  826. border-radius:5px;
  827. }
  828.  
  829. .photo img,
  830. .tex > .tmblr-full img{
  831. width:100%;
  832. display:block;
  833. }
  834.  
  835. .tex > .tmblr-full img,
  836. .npf_inst{
  837. overflow:hidden;
  838. border-radius:5px;
  839. }
  840.  
  841. /*titles*/
  842.  
  843. .post-title{
  844. font-size:1.1em;
  845. font-weight:600;
  846. padding:0 2em 2em;
  847. color:rgb({RGBcolor:Title});
  848. }
  849.  
  850. /*captions*/
  851.  
  852. .photo + .captions,
  853. .audio + .captions,
  854. .link + .captions{margin-top:2em;}
  855.  
  856. .comment {
  857. list-style:none;
  858. padding-bottom:2em;
  859. }
  860.  
  861. .comment:last-of-type {padding-bottom:0!important;}
  862.  
  863. .comment .tex{
  864. padding:1.5em;
  865. overflow:hidden;
  866. position:relative;
  867. border-radius:5px;
  868. background:rgb({RGBcolor:Posts captions background});
  869. }
  870.  
  871. .tex a:not(.read_more){position:relative;}
  872.  
  873. .tex a:not(.read_more)::before{
  874. width:0;
  875. right:0;
  876. content:'';
  877. height:1px;
  878. bottom:-1px;
  879. display:block;
  880. position:absolute;
  881. transition:width .3s;
  882. background-image:linear-gradient(62deg, rgb({RGBcolor:Gradient color one}), rgb({RGBcolor:Gradient color two}), rgb({RGBcolor:Gradient color three}), rgb({RGBcolor:Gradient color four}), rgb({RGBcolor:Gradient color five}));
  883. }
  884.  
  885. .tex a:hover::before{
  886. left:0;
  887. width:100%;
  888. transition:width .3s;
  889. }
  890.  
  891. .user {
  892. display:flex;
  893. font-weight:600;
  894. margin-bottom:1em;
  895. align-items:center;
  896. }
  897.  
  898. .user img{
  899. width:25px;
  900. height:25px;
  901. margin-right:1em;
  902. border-radius:100%;
  903. }
  904.  
  905. /*quote*/
  906.  
  907. .quote{
  908. padding:1em;
  909. font-size:1.3em;
  910. font-weight:600;
  911. position:relative;
  912. border-radius:5px;
  913. color:rgb({RGBcolor:Title});
  914. border:1px solid rgb({RGBcolor:Accent});
  915. }
  916.  
  917. .source {
  918. right:1em;
  919. font-size:1rem;
  920. margin-top:5px;
  921. padding:.25em 1em;
  922. position:absolute;
  923. border-radius:5px;
  924. font-weight:initial;
  925. background:rgb({RGBcolor:Accent});
  926. }
  927.  
  928. .source a{color:inherit;}
  929.  
  930. /*link*/
  931.  
  932. .npf-link-block{font:inherit;}
  933.  
  934. .link,
  935. .npf-link-block{
  936. display:block;
  937. overflow:hidden;
  938. border-radius:5px;
  939. border:1px solid rgb({RGBcolor:Borders});
  940. }
  941.  
  942. .link-info,
  943. .npf-link-block .bottom{padding:30px;}
  944.  
  945. .npf-link-block .title + .bottom {padding-top:15px;}
  946.  
  947. .link-name,
  948. .npf-link-block .title{
  949. font-size:1.3em;
  950. font-weight:600;
  951. }
  952.  
  953. .thumbnail {display:none}
  954.  
  955. .npf-link-block .title {padding:30px 30px 0!important;}
  956.  
  957. .npf-link-block .title {
  958. overflow:inherit;
  959. max-height:inherit;
  960. line-height:inherit;
  961. }
  962.  
  963. .npf-link-block .bottom .site-name {
  964. color:inherit;
  965. font-size:inherit;
  966. font-weight:inherit;
  967. text-transform:inherit;
  968. }
  969.  
  970. .host,
  971. .npf-link-block .bottom .site-name{margin-top:5px;}
  972.  
  973. .host::before,
  974. .npf-link-block .bottom .site-name::before{
  975. content:'\e882';
  976. margin-right:15px;
  977. font-family:'feather';
  978. }
  979.  
  980. /*audio*/
  981.  
  982. .audio {
  983. gap:2em;
  984. padding:2em;
  985. display:grid;
  986. overflow:hidden;
  987. position:relative;
  988. text-align:center;
  989. border-radius:5px;
  990. place-items:center;
  991. grid-template-rows:repeat(2,1fr);
  992. border:1px solid rgb({RGBcolor:Borders});
  993. }
  994.  
  995. .player {
  996. width:45px;
  997. height:45px;
  998. display:flex;
  999. overflow:hidden;
  1000. align-items:center;
  1001. border-radius:100%;
  1002. justify-content:center;
  1003. color:rgb(255,255,255);
  1004. background:rgb({RGBcolor:Borders});
  1005. }
  1006.  
  1007. .audio_player > div {
  1008. margin-top:-3em;
  1009. position:absolute;
  1010. }
  1011.  
  1012. .current_time {left:1em;}
  1013. .time_left {right:1em;}
  1014.  
  1015. .audio_buttons {height:1.25em;}
  1016.  
  1017. .audio_buttons svg {
  1018. width:1.25em;
  1019. height:1.25em;
  1020. filter:drop-shadow(1px 1px 1px rgb(0,0,0,.1));
  1021. }
  1022.  
  1023. .error_icon svg {stroke:red;}
  1024.  
  1025. .audio_duration {display:inline;}
  1026.  
  1027. .audio_player {
  1028. left:0;
  1029. bottom:0;
  1030. width:100%;
  1031. display:flex;
  1032. position:absolute;
  1033. align-items:center;
  1034. }
  1035.  
  1036. .audio_player .seekbar {
  1037. bottom:0;
  1038. width:100%;
  1039. height:5px;
  1040. position:absolute;
  1041. background:rgb({RGBcolor:Borders});
  1042. }
  1043.  
  1044. .audio_player .seekbar_progress {
  1045. width:0;
  1046. height:100%;
  1047. background:rgb({RGBcolor:Accent});
  1048. }
  1049.  
  1050. .time_left::before {content:"-";}
  1051.  
  1052. .audio_info span {display:block;}
  1053.  
  1054. .track{
  1055. font-weight:600;
  1056. color:rgb({RGBcolor:Title});
  1057. }
  1058.  
  1059. /*asks*/
  1060.  
  1061. .question{
  1062. margin-left:80px;
  1063. border-radius:5px;
  1064. border:1px solid rgb({RGBcolor:Borders});
  1065. }
  1066.  
  1067. .answer{
  1068. margin-top:2em;
  1069. margin-right:80px;
  1070. border-radius:5px;
  1071. border:1px solid rgb({RGBcolor:Borders});
  1072. }
  1073.  
  1074. .question .tex,
  1075. .answer .tex{padding:2em;}
  1076.  
  1077. .as{
  1078. display:flex;
  1079. font-weight:600;
  1080. padding:1em 1.5em;
  1081. position:relative;
  1082. text-transform:uppercase;
  1083. border-radius:5px 5px 0 0;
  1084. color:rgb({RGBcolor:Sub text});
  1085. background:rgb({RGBcolor:Accent});
  1086. }
  1087.  
  1088. .as a{color:inherit;}
  1089.  
  1090. .question .as{justify-content:flex-start;}
  1091. .answer .as{justify-content:flex-end;}
  1092.  
  1093. .as img{
  1094. top:0;
  1095. width:50px;
  1096. height:50px;
  1097. position:absolute;
  1098. border-radius:100%;
  1099. }
  1100.  
  1101. .question .as img{left:-80px;}
  1102. .answer .as img{right:-80px;}
  1103.  
  1104. .question .as::before{
  1105. width:0;
  1106. height:0;
  1107. left:-10px;
  1108. content:'';
  1109. position:absolute;
  1110. border-style:solid;
  1111. border-width:10px 10px 10px 0;
  1112. border-color:transparent rgb({RGBcolor:Accent}) transparent transparent;
  1113. }
  1114.  
  1115. .answer .as::before{
  1116. width:0;
  1117. height:0;
  1118. content:'';
  1119. right:-10px;
  1120. position:absolute;
  1121. border-style:solid;
  1122. border-width:10px 0 10px 10px;
  1123. border-color:transparent transparent transparent rgb({RGBcolor:Accent});
  1124. }
  1125.  
  1126. /*chat*/
  1127.  
  1128. .chat{
  1129. padding:20px;
  1130. border-radius:5px;
  1131. background:rgb({RGBcolor:Posts captions background});
  1132. }
  1133.  
  1134. .l,
  1135. .tex .npf_chat{margin-bottom:15px;}
  1136.  
  1137. .tex .npf_chat {font: inherit;}
  1138.  
  1139. .label,
  1140. .npf_chat b{
  1141. font-weight:600;
  1142. color:rgb({RGBcolor:Accent});
  1143. }
  1144.  
  1145. .l:last-of-type,
  1146. .tex .npf_chat:last-of-type{margin-bottom:0;}
  1147.  
  1148. /*post header*/
  1149.  
  1150. .post-header{
  1151. display:flex;
  1152. margin-bottom:2em;
  1153. align-items:center;
  1154. text-transform:lowercase;
  1155. }
  1156.  
  1157. .post-header img{
  1158. width:35px;
  1159. height:35px;
  1160. margin-right:1.5em;
  1161. border-radius:100%;
  1162. }
  1163.  
  1164. .post-origin{font-weight:600;}
  1165. .post-origin a{color:rgb({RGBcolor:Title});}
  1166.  
  1167. /*post info*/
  1168.  
  1169. .when {
  1170. gap:1em;
  1171. display:flex;
  1172. margin-top:2em;
  1173. align-items:center;
  1174. }
  1175.  
  1176. .when a,
  1177. .pin{
  1178. height:45px;
  1179. display:flex;
  1180. overflow:hidden;
  1181. padding:.75em 1em;
  1182. position:relative;
  1183. border-radius:5px;
  1184. align-items:center;
  1185. color:rgb({RGBcolor:Posts notes color});
  1186. background:rgb({RGBcolor:Posts notes background});
  1187. }
  1188.  
  1189. .pin{padding:.75em 1.25em;}
  1190.  
  1191. a.notecount{
  1192. color:initial;
  1193. padding:.75em 1.25em;
  1194. background:rgb({RGBcolor:Sub accent});
  1195. }
  1196.  
  1197. span.pin{
  1198. color:rgb({RGBcolor:Sub text});
  1199. text-transform:lowercase;
  1200. background:rgb({RGBcolor:Accent});
  1201. }
  1202.  
  1203. .liked ~ svg{
  1204. fill:rgb({RGBcolor:Sub accent});
  1205. color:rgb({RGBcolor:Sub accent});
  1206. }
  1207.  
  1208. .when .like .like_button {position:relative;}
  1209.  
  1210. .when .like .like_button iframe {
  1211. right:0;
  1212. bottom:0;
  1213. top:-30px;
  1214. z-index:2;
  1215. opacity:0;
  1216. left:-30px;
  1217. position:absolute;
  1218. }
  1219.  
  1220. /*permalink info*/
  1221.  
  1222. .perma-info{
  1223. gap:1em;
  1224. display:grid;
  1225. padding:1.5em;
  1226. font-size:.85em;
  1227. border-radius:5px;
  1228. margin-bottom:100px;
  1229. text-transform:uppercase;
  1230. color:rgb({RGBcolor:Posts notes color});
  1231. background:rgb({RGBcolor:Posts notes background});
  1232. }
  1233.  
  1234. .perma-info a{
  1235. color:inherit;
  1236. position:relative;
  1237. }
  1238.  
  1239. .posted::before,
  1240. .via-blog::before,
  1241. .source-blog::before,
  1242. .original-post::before{
  1243. margin-right:1em;
  1244. font-family:'feather';
  1245. }
  1246.  
  1247. .posted::before{content:"\e84d";}
  1248. .via-blog::before{content:"\e8b6";}
  1249. .source-blog::before{content:"\e8e9";}
  1250. .original-post::before{content:"\e8cd";}
  1251.  
  1252. /*notes*/
  1253.  
  1254. .notes-title{
  1255. display:flex;
  1256. font-weight:600;
  1257. border-radius:5px;
  1258. align-items:center;
  1259. padding:0 1.5em 1em;
  1260. color:rgb({RGBcolor:Title});
  1261. }
  1262.  
  1263. .notes-title::before{
  1264. display:grid;
  1265. padding:.75em;
  1266. line-height:1;
  1267. content:'\e879';
  1268. margin-right:1em;
  1269. border-radius:100%;
  1270. place-items:center;
  1271. font-family:'feather';
  1272. color:rgb({RGBcolor:Sub text});
  1273. background:rgb({RGBcolor:Accent});
  1274. }
  1275.  
  1276. ol.notes {
  1277. margin:0px;
  1278. padding:30px;
  1279. border-radius:5px;
  1280. text-transform:lowercase;
  1281. color:rgb({RGBcolor:Posts notes color});
  1282. background:rgb({RGBcolor:Posts notes background});
  1283. }
  1284.  
  1285. ol.notes a{
  1286. color:inherit;
  1287. position:relative;
  1288. }
  1289.  
  1290. ol.notes a:not(.more_notes_link)::after,
  1291. .tag-result span::before,
  1292. .perma-info a::before{
  1293. left:0;
  1294. width:100%;
  1295. height:1px;
  1296. content:'';
  1297. bottom:-2px;
  1298. position:absolute;
  1299. background-image:linear-gradient(62deg, rgb({RGBcolor:Gradient color one}), rgb({RGBcolor:Gradient color two}), rgb({RGBcolor:Gradient color three}), rgb({RGBcolor:Gradient color four}), rgb({RGBcolor:Gradient color five}));
  1300. }
  1301.  
  1302. ol.notes li.note {margin:20px 0;}
  1303.  
  1304. ol.notes li.note:first-of-type {margin-top:0;}
  1305. ol.notes li.note:last-of-type {margin-bottom:0;}
  1306.  
  1307. li.note::before,
  1308. a.more_notes_link::before{
  1309. margin-right:20px;
  1310. font-family:'feather';
  1311. vertical-align:middle;
  1312. }
  1313.  
  1314. li.note.reblog::before{content:'\e8b6';}
  1315. li.note.like::before{content:'\e879';}
  1316. li.note.with_commentary::before{content: "\e8e7";}
  1317. li.note.reply::before{content:'\e890';}
  1318. li.note.original_post::before{content: "\e8e9";}
  1319. a.more_notes_link::before{content: "\e889";}
  1320.  
  1321. ol.notes .clear{clear:both;}
  1322.  
  1323. a.avatar_frame {display:none}
  1324.  
  1325. ol.notes blockquote{
  1326. margin:1em 2em!important;
  1327. background:rgba({RGBcolor:Borders},.05);
  1328. }
  1329.  
  1330. a.more_notes_link {
  1331. display:block;
  1332. text-align:left;
  1333. }
  1334.  
  1335. /*tags*/
  1336.  
  1337. .result{
  1338. padding:1em;
  1339. text-align:center;
  1340. border-radius:5px;
  1341. margin-bottom:75px;
  1342. background:rgb({RGBcolor:Posts captions background});
  1343. }
  1344.  
  1345. .result span{
  1346. font-weight:600;
  1347. position:relative;
  1348. color:rgb({RGBcolor:Title});
  1349. }
  1350.  
  1351. .tags {
  1352. gap:1em;
  1353. display:flex;
  1354. margin-top:2em;
  1355. flex-wrap:wrap;
  1356. }
  1357.  
  1358. .tags span{
  1359. padding:.5em 1em;
  1360. border-radius:5px;
  1361. color:rgb({RGBcolor:Sub text});
  1362. background:rgb({RGBcolor:Accent});
  1363. }
  1364.  
  1365. .tags span::before{
  1366. content:"\e8d2";
  1367. margin-right:1em;
  1368. font-family:'feather';
  1369. }
  1370.  
  1371. .tags a {
  1372. padding:.5em 1em;
  1373. border-radius:5px;
  1374. background:rgb({RGBcolor:Sub accent});
  1375. }
  1376.  
  1377. .open-tags.active{background:rgb({RGBcolor:Accent});}
  1378.  
  1379. /*------ positioning ------*/
  1380.  
  1381. /*sidebar*/
  1382.  
  1383. body[data-sidebar="left"] #posts{margin-left:calc(280px + 150px);}
  1384. body[data-sidebar="right"] aside{margin-left:calc(540px + 150px);}
  1385.  
  1386. /*--- menu ---*/
  1387.  
  1388. /* left and right */
  1389. body[data-menu="left"] #left,
  1390. body[data-menu="right"] #left{
  1391. top:3px;
  1392. height:100vh;
  1393. max-width:80px;
  1394. flex-direction:column;
  1395. }
  1396.  
  1397. body[data-menu="left"] #left{left:0;}
  1398. body[data-menu="right"] #left{right:0;}
  1399.  
  1400. body[data-menu="left"] #left a span{
  1401. top:0;
  1402. left:80px;
  1403. transform:translatex(-20px);
  1404. }
  1405.  
  1406. body[data-menu="right"] #left a span{
  1407. top:0;
  1408. right:80px;
  1409. transform:translatex(20px);
  1410. }
  1411.  
  1412.  
  1413. body[data-menu="left"] #left a:hover span,
  1414. body[data-menu="right"] #left a:hover span{transform:translatex(0);}
  1415.  
  1416. body[data-menu="left"] #left a span::before{
  1417. width:0;
  1418. height:0;
  1419. left:-5px;
  1420. content:'';
  1421. position:absolute;
  1422. border-style:solid;
  1423. top:calc(50% - 5px);
  1424. border-color:transparent;
  1425. border-width:5px 5px 5px 0;
  1426. border-right-color:rgb({RGBcolor:Menu background});
  1427. }
  1428.  
  1429. body[data-menu="right"] #left a span::before{
  1430. width:0;
  1431. height:0;
  1432. right:-5px;
  1433. content:'';
  1434. position:absolute;
  1435. border-style:solid;
  1436. top:calc(50% - 5px);
  1437. border-color:transparent;
  1438. border-width:5px 0 5px 5px;
  1439. border-left-color:rgb({RGBcolor:Menu background});
  1440. }
  1441.  
  1442. body[data-menu="left"] .open-controls,
  1443. body[data-menu="left"] > .open-updates,
  1444. body[data-menu="left"] > #back,
  1445. body[data-menu="left"] a.credits{right:20px;}
  1446.  
  1447. body[data-menu="right"] .open-controls,
  1448. body[data-menu="right"] .open-updates,
  1449. body[data-menu="right"] > #back,
  1450. body[data-menu="right"] a.credits{left:20px;}
  1451.  
  1452. body[data-menu="left"] .iframe-controls--desktop {
  1453. right:80px!important;
  1454. transform-origin:right top;
  1455. -moz-transform-origin:right top;
  1456. -webkit-transform-origin:right top;
  1457. }
  1458.  
  1459. body[data-menu="right"] .iframe-controls--desktop {
  1460. left:60px!important;
  1461. margin-top:20px!important;
  1462. transform-origin:left top;
  1463. -moz-transform-origin:left top;
  1464. -webkit-transform-origin:left top;
  1465. }
  1466.  
  1467. body[data-menu="left"] .updates{right:80px}
  1468. body[data-menu="right"] .updates{left:80px;}
  1469.  
  1470. /* top and bottom */
  1471.  
  1472. body[data-menu="top"] #entries{margin-top:calc(100px + 80px);}
  1473. body[data-menu="bottom"] #entries{margin-bottom:calc(100px + 80px);}
  1474.  
  1475. body[data-menu="top"] #left,
  1476. body[data-menu="bottom"] #left{
  1477. left:0;
  1478. width:100vw;
  1479. max-height:80px;
  1480. flex-direction:row;
  1481. }
  1482.  
  1483. body[data-menu="top"] #left{top:3px;}
  1484. body[data-menu="bottom"] #left{bottom:0;}
  1485.  
  1486. body[data-menu="top"] #left a span{
  1487. top:80px;
  1488. transform:translatey(-20px);
  1489. }
  1490.  
  1491. body[data-menu="bottom"] #left a span{
  1492. bottom:80px;
  1493. transform:translatey(20px);
  1494. }
  1495.  
  1496. body[data-menu="top"] #left a:hover span,
  1497. body[data-menu="bottom"] #left a:hover span{transform:translatey(0);}
  1498.  
  1499. body[data-menu="top"] #left a span::before{
  1500. width:0;
  1501. top:-5px;
  1502. height:0;
  1503. content:'';
  1504. position:absolute;
  1505. border-style:solid;
  1506. left:calc(50% - 5px);
  1507. border-color:transparent;
  1508. border-width:0px 5px 5px 5px;
  1509. border-bottom-color:rgb({RGBcolor:Menu background});
  1510. }
  1511.  
  1512. body[data-menu="bottom"] #left a span::before{
  1513. width:0;
  1514. height:0;
  1515. content:'';
  1516. bottom:-5px;
  1517. position:absolute;
  1518. border-style:solid;
  1519. left:calc(50% - 5px);
  1520. border-color:transparent;
  1521. border-width:5px 5px 0 5px;
  1522. border-top-color:rgb({RGBcolor:Menu background});
  1523. }
  1524.  
  1525. body[data-menu="top"] .open-controls{top:100px;}
  1526. body[data-menu="top"] > .open-updates{top:160px;}
  1527.  
  1528. body[data-menu="bottom"] a.credits{bottom:100px;}
  1529. body[data-menu="bottom"] > #back{bottom:160px;}
  1530.  
  1531. body[data-menu="top"] .updates,
  1532. body[data-menu="bottom"] .updates{right:80px;}
  1533.  
  1534. /*-------------------------------------------------------------------------*/
  1535.  
  1536. @media (max-width:480px){
  1537. #left svg{
  1538. width:1em;
  1539. height:1em;
  1540. }
  1541.  
  1542. .updates{
  1543. left:5vw;
  1544. width:90vw;
  1545. }
  1546.  
  1547. .updates > section{width:100%;}
  1548. }
  1549.  
  1550. @media (max-width:1023px){
  1551. body[data-menu="top"] #left,
  1552. body[data-menu="left"] #left,
  1553. body[data-menu="right"] #left,
  1554. body[data-menu="bottom"] #left{
  1555. left:0;
  1556. top:3px;
  1557. gap:2em;
  1558. width:100vw;
  1559. height:80px;
  1560. max-width:none;
  1561. overflow-x:auto;
  1562. flex-direction:row;
  1563. }
  1564.  
  1565. #left a span{display:none;}
  1566. #left .open-updates{display:flex;}
  1567. #left .open-updates .close,
  1568. #left .open-updates.active .open{display:none;}
  1569. #left .open-updates.active .close{display:initial;}
  1570.  
  1571. .updates{
  1572. top:100px;
  1573. margin-top:0;
  1574. right:20px!important;
  1575. }
  1576.  
  1577. .open-controls,
  1578. body > .open-updates,
  1579. a.credits,
  1580. body > #back{display:none!important}
  1581.  
  1582. #entries,
  1583. aside .search form{width:85vw}
  1584.  
  1585. aside{
  1586. width:85vw;
  1587. position:relative;
  1588. margin:180px auto 100px!important;
  1589. }
  1590.  
  1591. #posts{
  1592. width:85vw;
  1593. margin:auto!important;
  1594. }
  1595.  
  1596. footer.credits{display:block;}
  1597. }
  1598.  
  1599. @media (min-width:1024px) and (max-width:1280px){
  1600.  
  1601. #entries{width:80vw;}
  1602.  
  1603. aside,
  1604. aside .search form{width:25vw;}
  1605. body[data-sidebar="right"] aside{margin-left:55vw;}
  1606.  
  1607. #posts{width:45vw;}
  1608. body[data-sidebar="left"] #posts{margin-left:35vw;}
  1609. }
  1610.  
  1611.  
  1612.  
  1613. {CustomCSS}
  1614.  
  1615. </style>
  1616.  
  1617. </head>
  1618.  
  1619. <body data-sidebar='{select:Sidebar position}' data-menu='{select:Menu position}'>
  1620.  
  1621. <!--------------------------------- title --------------------------------->
  1622.  
  1623. <nav id="left">
  1624. <a href="{blogurl}">
  1625. <i data-feather="home"></i>
  1626. {block:ifHomeTitle}
  1627. <span>{text:Home title}</span>
  1628. {/block:ifHomeTitle}
  1629. </a>
  1630.  
  1631. <a href="/ask">
  1632. <i data-feather="message-square"></i>
  1633. {block:ifAskTitle}
  1634. <span>{text:Ask title}</span>
  1635. {/block:ifAskTitle}
  1636. </a>
  1637.  
  1638. <a href="/archive">
  1639. <i data-feather="grid"></i>
  1640. {block:ifArchiveTitle}
  1641. <span>{text:Archive title}</span>
  1642. {/block:ifArchiveTitle}
  1643. </a>
  1644.  
  1645. {block:ifLinkOneURL}
  1646. <a href="{text:Link one URL}">
  1647. <i data-feather="moon"></i>
  1648.  
  1649. {block:ifLinkOneTitle}
  1650. <span>{text:Link one title}</span>
  1651. {block:ifLinkOneTitle}
  1652. </a>
  1653. {/block:IfLinkOneURL}
  1654.  
  1655. {block:ifLinkTwoURL}
  1656. <a href="{text:Link two URL}">
  1657. <i data-feather="sun"></i>
  1658.  
  1659. {block:ifLinkTwoTitle}
  1660. <span>{text:Link two title}</span>
  1661. {block:ifLinkTwoTitle}
  1662. </a>
  1663. {/block:IfLinkTwoURL}
  1664.  
  1665. {block:ifLinkThreeURL}
  1666. <a href="{text:Link three URL}">
  1667. <i data-feather="cloud"></i>
  1668.  
  1669. {block:ifLinkThreeTitle}
  1670. <span>{text:Link three title}</span>
  1671. {block:ifLinkThreeTitle}
  1672. </a>
  1673. {/block:IfLinkThreeURL}
  1674.  
  1675. {block:ifLinkFourURL}
  1676. <a href="{text:Link four URL}">
  1677. <i data-feather="zap"></i>
  1678.  
  1679. {block:ifLinkFourTitle}
  1680. <span>{text:Link four title}</span>
  1681. {block:ifLinkFourTitle}
  1682. </a>
  1683. {/block:IfLinkFourURL}
  1684.  
  1685. {block:ifUpdateTab}
  1686. <a class="open-updates">
  1687. <i data-feather="bell" class="open"></i>
  1688. <i data-feather="bell-off" class="close"></i>
  1689.  
  1690. <span>updates</span>
  1691. </a>
  1692. {/block:ifUpdateTab}
  1693. </nav>
  1694.  
  1695. {block:ifUpdateTab}
  1696. <!--------------------------------- updates tab --------------------------------->
  1697. <div class="updates" style="display:none">
  1698. {block:ifUpdateSectionOne}
  1699. <section>
  1700. <a href="/">
  1701. {block:ifUpdateTitle}
  1702. <div class="update-title">{text:update title}</div>
  1703. {/block:ifUpdateTitle}
  1704.  
  1705. {block:ifUpdateDescription}
  1706. <div class="update-description">{text:update description}</div>
  1707. {/block:ifUpdateDescription}
  1708. </a>
  1709. </section>
  1710. {/block:ifUpdateSectionOne}
  1711.  
  1712. {block:ifUpdateSectionTwo}
  1713. <section>
  1714. {block:ifUpdateItemOne}
  1715. <li class="update-level">
  1716. <div class="update-title">{text:update item one}</div>
  1717.  
  1718. <div class="update-bar">
  1719. <span style="width:{text:update bar one}"></span>
  1720. </div>
  1721. </li>
  1722. {/block:ifUpdateItemOne}
  1723.  
  1724. {block:ifUpdateItemTwo}
  1725. <li class="update-level">
  1726. <div class="update-title">{text:update item two}</div>
  1727.  
  1728. <div class="update-bar">
  1729. <span style="width:{text:update bar two}"></span>
  1730. </div>
  1731. </li>
  1732. {/block:ifUpdateItemTwo}
  1733.  
  1734. {block:ifUpdateItemThree}
  1735. <li class="update-level">
  1736. <div class="update-title">{text:update item three}</div>
  1737.  
  1738. <div class="update-bar">
  1739. <span style="width:{text:update bar three}"></span>
  1740. </div>
  1741. </li>
  1742. {block:ifUpdateItemThree}
  1743. </section>
  1744. {/block:ifUpdateSectionTwo}
  1745. </div>
  1746. {/block:ifUpdateTab}
  1747.  
  1748. <!--------------------------------- content --------------------------------->
  1749.  
  1750. <section id="entries">
  1751.  
  1752. <!--------------------------------- header --------------------------------->
  1753.  
  1754. <aside>
  1755.  
  1756. <!----- username ----->
  1757. <div class="blog-user">
  1758. @{name}
  1759. </div>
  1760.  
  1761. <!----- title and description ----->
  1762. <div class="side">
  1763. <a href="{blogurl}" class="blog-title">
  1764. <img src="{portraiturl-48}">
  1765. <span>{title}</span>
  1766. </a>
  1767.  
  1768. {block:description}
  1769. <div class="blog-description">{description}</div>
  1770. {/block:description}
  1771. </div>
  1772.  
  1773. <!----- search ----->
  1774. <div class="search">
  1775. <form action="/search" method="get">
  1776. <input type="text" name="q" value="{SearchQuery}" placeholder="search"/>
  1777. </form>
  1778. </div>
  1779. </aside>
  1780.  
  1781. <!--------------------------------- posts --------------------------------->
  1782. <div id="posts">
  1783.  
  1784. <!----- no posts callback ----->
  1785. {block:NoPosts}
  1786. <div class="result">{lang:This minimalist Tumblr has no posts}</div>
  1787. {/block:NoPosts}
  1788.  
  1789. <!----- tag counter ----->
  1790. {block:TagPage}
  1791. <div class="result">{lang:TagResultCount posts tagged Tag 2}</div>
  1792. {/block:TagPage}
  1793.  
  1794. {block:posts}
  1795.  
  1796. <article post-type="{posttype}" class="post {block:caption}captioned{/block:caption} {block:PinnedPostLabel}pinned{/block:PinnedPostLabel}" id="{postid}">
  1797.  
  1798. <!----- post header ----->
  1799. {block:date}
  1800. <div class="post-header">
  1801. {block:RebloggedFrom}
  1802. <img src="{reblogRootPortraiturl-64}"/>
  1803. <ul>
  1804. <li class="post-origin not-original">
  1805. <a href="{ReblogRootURL}" target="_blank">
  1806. {ReblogRootName}
  1807. </a>
  1808. </li>
  1809.  
  1810. <li class="post-date">
  1811. <a href="/day/{year}/{MonthNumberWithZero}/{DayOfMonthWithZero}">
  1812. {timestamp}
  1813. </a>
  1814. </li>
  1815. </ul>
  1816. {/block:RebloggedFrom}
  1817.  
  1818. {block:NotReblog}
  1819. <img src="{portraiturl-64}"/>
  1820. <ul>
  1821. <li class="post-origin original">
  1822. <a href="{permalink}">
  1823. {text:blog username}
  1824. </a>
  1825. </li>
  1826.  
  1827. <li class="post-date">
  1828. <a href="/day/{year}/{MonthNumberWithZero}/{DayOfMonthWithZero}">
  1829. {timestamp}
  1830. </a>
  1831. </li>
  1832. </ul>
  1833. {/block:NotReblog}
  1834. </div>
  1835. {block:date}
  1836.  
  1837. <!----- quote posts ----->
  1838. {block:Quote}
  1839. <div class="quote">
  1840. {quote}
  1841.  
  1842. {block:Source}
  1843. <div class="source">{source}</div>
  1844. {/block:Source}
  1845. </div>
  1846.  
  1847. {/block:Quote}
  1848.  
  1849. <!----- text posts ----->
  1850. {block:Text}
  1851. {block:Title}
  1852. <div class="post-title">{title}</div>
  1853. {/block:Title}
  1854.  
  1855. {block:RebloggedFrom}
  1856. <div class="captions">
  1857. {block:Reblogs}
  1858. <li class="comment">
  1859. {block:IsNotOriginalEntry}
  1860. {block:IsActive}
  1861. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">
  1862. <img src="{portraiturl-64}" class="icon"/>
  1863. {username}
  1864. </a>
  1865. {/block:IsActive}
  1866.  
  1867. {block:IsDeactivated}
  1868. <span class="user deactivated">
  1869. <img src="{portraiturl-64}" class="icon"/>
  1870. {username}
  1871. </span>
  1872. {block:IsDeactivated}
  1873. {/block:IsNotOriginalEntry}
  1874. <div class="tex">{body}</div>
  1875. </li>
  1876. {/block:Reblogs}
  1877. </div>
  1878. {/block:RebloggedFrom}
  1879.  
  1880. {block:NotReblog}
  1881. <div class="captions">
  1882. <li class="comment">
  1883. <div class="tex">{body}</div>
  1884. </li>
  1885. </div>
  1886. {/block:NotReblog}
  1887. {/block:Text}
  1888.  
  1889. <!----- link posts ----->
  1890. {block:Link}
  1891. <a href="{URL}" {Target} class="link">
  1892. {block:Thumbnail}
  1893. <img src="{Thumbnail-HighRes}" class="thumbnail"/>
  1894. {/block:Thumbnail}
  1895.  
  1896. <div class="link-info">
  1897. <div class="link-name">{name}</div>
  1898.  
  1899. {block:Host}
  1900. <div class="host">{Host}</div>
  1901. {/block:Host}
  1902. </div>
  1903.  
  1904. </a>
  1905.  
  1906. {block:Description}
  1907. {block:NotReblog}
  1908. <div class="captions">
  1909. <li class="comment">
  1910. <div class="tex">{description}</div>
  1911. </li>
  1912. </div>
  1913. {/block:NotReblog}
  1914. {/block:Description}
  1915.  
  1916. {block:RebloggedFrom}
  1917. <div class="captions">
  1918. {block:Reblogs}
  1919. <li class="comment">
  1920. {block:IsNotOriginalEntry}
  1921. {block:IsActive}
  1922. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">
  1923. <img src="{portraiturl-64}" class="icon"/>
  1924. {username}
  1925. </a>
  1926. {/block:IsActive}
  1927.  
  1928. {block:IsDeactivated}
  1929. <span class="user deactivated">
  1930. <img src="{portraiturl-64}" class="icon"/>
  1931. {username}
  1932. </span>
  1933. {block:IsDeactivated}
  1934. {/block:IsNotOriginalEntry}
  1935. <div class="tex">{body}</div>
  1936. </li>
  1937. {/block:Reblogs}
  1938. </div>
  1939. {/block:RebloggedFrom}
  1940. {/block:Link}
  1941.  
  1942. <!----- chat posts ----->
  1943. {block:Chat}
  1944. {block:Title}
  1945. <div class="post-title">{title}</div>
  1946. {/block:Title}
  1947.  
  1948. <ol class="chat">
  1949. {block:lines}
  1950. <li class="l {Alt}">
  1951. {block:label}<span class="label">{label}</span>{/block:label} {line}
  1952. </li>
  1953. {/block:lines}
  1954. </ol>
  1955. {/block:Chat}
  1956.  
  1957. <!----- photo posts ----->
  1958. {block:Photo}
  1959. <div class="photo">
  1960. {linkopentag}
  1961. <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">
  1962. <img src="{PhotoURL-HighRes}">
  1963. </a>
  1964. {linkclosetag}
  1965. </div>
  1966.  
  1967. {block:caption}
  1968. <div class="captions">
  1969. {block:Reblogs}
  1970. <li class="comment">
  1971. {block:IsNotOriginalEntry}
  1972. {block:IsActive}
  1973. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">
  1974. <img src="{portraiturl-64}" class="icon"/>
  1975. {username}
  1976. </a>
  1977. {/block:IsActive}
  1978.  
  1979. {block:IsDeactivated}
  1980. <span class="user deactivated">
  1981. <img src="{portraiturl-64}" class="icon"/>
  1982. {username}
  1983. </span>
  1984. {block:IsDeactivated}
  1985. {/block:IsNotOriginalEntry}
  1986. <div class="tex">{body}</div>
  1987. </li>
  1988. {/block:Reblogs}
  1989.  
  1990. {block:NotReblog}
  1991. <li class="comment">
  1992. <div class="tex">{caption}</div>
  1993. </li>
  1994. {/block:NotReblog}
  1995. </div>
  1996. {/block:caption}
  1997. {/block:Photo}
  1998.  
  1999. <!----- photoset posts ----->
  2000. {block:Photoset}
  2001. <div class="photo">
  2002. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  2003. {block:Photos}
  2004. <div class="photo-data">
  2005. <div class="pxu-photo">
  2006. <img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
  2007. </div>
  2008. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  2009. </div>
  2010. {/block:Photos}
  2011.  
  2012. </div>
  2013. </div>
  2014.  
  2015. {block:caption}
  2016. <div class="captions">
  2017. {block:Reblogs}
  2018. <li class="comment">
  2019. {block:IsNotOriginalEntry}
  2020. {block:IsActive}
  2021. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">
  2022. <img src="{portraiturl-64}" class="icon"/>
  2023. {username}
  2024. </a>
  2025. {/block:IsActive}
  2026.  
  2027. {block:IsDeactivated}
  2028. <span class="user deactivated">
  2029. <img src="{portraiturl-64}" class="icon"/>
  2030. {username}
  2031. </span>
  2032. {block:IsDeactivated}
  2033. {/block:IsNotOriginalEntry}
  2034. <div class="tex">{body}</div>
  2035. </li>
  2036. {/block:Reblogs}
  2037.  
  2038. {block:NotReblog}
  2039. <li class="comment">
  2040. <div class="tex">{caption}</div>
  2041. </li>
  2042. {/block:NotReblog}
  2043. </div>
  2044. {/block:caption}
  2045. {/block:Photoset}
  2046.  
  2047. <!----- panorama posts ----->
  2048. {block:Panorama}
  2049. <div class="photo">
  2050. {LinkOpenTag}
  2051. <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">
  2052. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" />
  2053. </a>
  2054. {LinkCloseTag}
  2055. </div>
  2056.  
  2057. {block:caption}
  2058. <div class="captions">
  2059. {block:Reblogs}
  2060. <li class="comment">
  2061. {block:IsNotOriginalEntry}
  2062. {block:IsActive}
  2063. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">
  2064. <img src="{portraiturl-64}" class="icon"/>
  2065. {username}
  2066. </a>
  2067. {/block:IsActive}
  2068.  
  2069. {block:IsDeactivated}
  2070. <span class="user deactivated">
  2071. <img src="{portraiturl-64}" class="icon"/>
  2072. {username}
  2073. </span>
  2074. {block:IsDeactivated}
  2075. {/block:IsNotOriginalEntry}
  2076. <div class="tex">{body}</div>
  2077. </li>
  2078. {/block:Reblogs}
  2079.  
  2080. {block:NotReblog}
  2081. <li class="comment">
  2082. <div class="tex">{caption}</div>
  2083. </li>
  2084. {/block:NotReblog}
  2085. </div>
  2086. {/block:caption}
  2087. {/block:Panorama}
  2088.  
  2089. <!----- video posts ----->
  2090. {block:Video}
  2091. <div class="photo video">{video-500}</div>
  2092.  
  2093. {block:caption}
  2094. <div class="captions">
  2095. {block:Reblogs}
  2096. <li class="comment">
  2097. {block:IsNotOriginalEntry}
  2098. {block:IsActive}
  2099. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">
  2100. <img src="{portraiturl-64}" class="icon"/>
  2101. {username}
  2102. </a>
  2103. {/block:IsActive}
  2104.  
  2105. {block:IsDeactivated}
  2106. <span class="user deactivated">
  2107. <img src="{portraiturl-64}" class="icon"/>
  2108. {username}
  2109. </span>
  2110. {block:IsDeactivated}
  2111. {/block:IsNotOriginalEntry}
  2112. <div class="tex">{body}</div>
  2113. </li>
  2114. {/block:Reblogs}
  2115.  
  2116. {block:NotReblog}
  2117. <li class="comment">
  2118. <div class="tex">{caption}</div>
  2119. </li>
  2120. {/block:NotReblog}
  2121. </div>
  2122. {/block:caption}
  2123. {/block:Video}
  2124.  
  2125. <!----- audio posts ----->
  2126. {block:Audio}
  2127. <div class="audio">
  2128. {block:AudioPlayer}
  2129. <div class="player">
  2130. {AudioPlayer}
  2131. {audio:AudioButtons}
  2132. </div>
  2133.  
  2134. <div class="audio_info">
  2135. {block:TrackName}
  2136. <span class="track">
  2137. {TrackName}
  2138. </span>
  2139. {/block:TrackName}
  2140.  
  2141. {block:Artist}
  2142. <span class="artist">
  2143. {Artist}
  2144. </span>
  2145. {/block:Artist}
  2146. </div>
  2147.  
  2148. <div class="audio_player">
  2149. {audio:CurrentPlayTime}
  2150. {audio:Seekbar}
  2151. {audio:PlayTimeLeft}
  2152. </div>
  2153. {/block:AudioPlayer}
  2154. </div>
  2155.  
  2156. {block:caption}
  2157. <div class="captions">
  2158. {block:Reblogs}
  2159. <li class="comment">
  2160. {block:IsNotOriginalEntry}
  2161. {block:IsActive}
  2162. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">
  2163. <img src="{portraiturl-64}" class="icon"/>
  2164. {username}
  2165. </a>
  2166. {/block:IsActive}
  2167.  
  2168. {block:IsDeactivated}
  2169. <span class="user deactivated">
  2170. <img src="{portraiturl-64}" class="icon"/>
  2171. {username}
  2172. </span>
  2173. {block:IsDeactivated}
  2174. {/block:IsNotOriginalEntry}
  2175. <div class="tex">{body}</div>
  2176. </li>
  2177. {/block:Reblogs}
  2178.  
  2179. {block:NotReblog}
  2180. <li class="comment">
  2181. <div class="tex">{caption}</div>
  2182. </li>
  2183. {/block:NotReblog}
  2184. </div>
  2185. {/block:caption}
  2186. {/block:Audio}
  2187.  
  2188. <!----- answer posts ----->
  2189. {block:Answer}
  2190. <div class="question">
  2191. <div class="as">
  2192. <img src="{askerportraiturl-64}" class="icon">
  2193. {asker}
  2194. </div>
  2195.  
  2196. <div class="tex">{question}</div>
  2197. </div>
  2198.  
  2199. {block:Answerer}
  2200. <div class="answer">
  2201. <div class="as">
  2202. <img src="{answererportraiturl-64}" class="icon">
  2203. {answerer}
  2204. </div>
  2205.  
  2206. <div class="tex">{answer}</div>
  2207. </div>
  2208. {/block:Answerer}
  2209.  
  2210. {block:NotReblog}
  2211. <div class="answer">
  2212. <div class="as">
  2213. <img src="{portraiturl-64}" class="icon">
  2214. <span>{name}</span>
  2215. </div>
  2216.  
  2217. <div class="tex">{replies}</div>
  2218. </div>
  2219. {/block:NotReblog}
  2220.  
  2221. {block:RebloggedFrom}
  2222. {block:Reblogs}
  2223. <div class="answer">
  2224. <div class="as">
  2225. <img src="{portraiturl-64}" class="icon">
  2226. <span>
  2227. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} target="_blank">{username}</a>
  2228. </span>
  2229. </div>
  2230. <div class="tex">{body}</div>
  2231. </div>
  2232. {/block:Reblogs}
  2233. {/block:RebloggedFrom}
  2234. {/block:Answer}
  2235.  
  2236. <!----- posts footer ----->
  2237. {block:date}
  2238.  
  2239. {block:hastags}
  2240. <div class="tags" style="display:none">
  2241. <span>filed under</span>
  2242. {block:Tags}
  2243. <a href="{TagUrl}">#{Tag}</a>
  2244. {/block:Tags}
  2245. </div>
  2246. {/block:hasTags}
  2247.  
  2248.  
  2249. <div class="when">
  2250. {block:indexpage}
  2251. {block:PinnedPostLabel}
  2252. <span class="pin">
  2253. {PinnedPostLabel}
  2254. </span>
  2255. {/block:PinnedPostLabel}
  2256. {/block:indexpage}
  2257.  
  2258. <a href="{permalink}" class="notecount">{NoteCountWithLabel}</a>
  2259.  
  2260. <a href="#" class="like">
  2261. {LikeButton size="100"}
  2262. <i data-feather="heart"></i>
  2263. </a>
  2264.  
  2265. <a href="{ReblogURL}" target="_blank">
  2266. <i data-feather="refresh-ccw"></i>
  2267. </a>
  2268.  
  2269. {block:ContentSource}
  2270. <a href="{SourceURL}" title="source" target="_blank" class="source-link">
  2271. <i data-feather="external-link"></i>
  2272. </a>
  2273. {/block:ContentSource}
  2274.  
  2275. {block:hasTags}
  2276. <a class="open-tags">
  2277. <i data-feather="tag"></i>
  2278. </a>
  2279. {/block:hasTags}
  2280. </div>
  2281. {/block:date}
  2282.  
  2283. </article>
  2284.  
  2285. <!----- posts notes ----->
  2286. {block:permalinkpage}
  2287.  
  2288. <!-----posts info ----->
  2289. {block:Date}
  2290.  
  2291. <div class="perma-info">
  2292. <span class="posted">
  2293. posted on <a href="/day/{year}/{MonthNumberWithZero}/{DayOfMonthWithZero}">{Month} {DayOfMonthWithZero}{DayOfMonthSuffix} {Year}</a>
  2294. </span>
  2295.  
  2296. {block:RebloggedFrom}
  2297. <span class="via-blog">
  2298. reblogged from <a href="{reblogparenturl}">{reblogparentname}</a>
  2299. </span>
  2300.  
  2301. <span class="source-blog">
  2302. original post by <a href="{reblogrooturl}">{reblogrootname}</a>
  2303. </span>
  2304. {block:RebloggedFrom}
  2305.  
  2306. {block:NotReblog}
  2307. <span class="original-post">original post</span>
  2308. {/block:NotReblog}
  2309. </div>
  2310. {/block:Date}
  2311.  
  2312. <!----- notes ----->
  2313. {block:PostNotes}
  2314. <article class="post pagenotes">
  2315. <div class="notes-title">{NoteCountWithLabel}</div>
  2316. {PostNotes-64}
  2317. </article>
  2318. {/block:PostNotes}
  2319.  
  2320. {/block:permalinkpage}
  2321.  
  2322. {/block:Posts}
  2323. </div> <!-- posts -->
  2324.  
  2325. {block:Pagination}
  2326. <nav id="pagination">
  2327. {block:PreviousPage}
  2328. <a href="{PreviousPage}">
  2329. <i data-feather="arrow-left"></i>
  2330. </a>
  2331. {/block:PreviousPage}
  2332.  
  2333. <span class="current_page">page {CurrentPage}</span>
  2334.  
  2335. {block:NextPage}
  2336. <a href="{NextPage}">
  2337. <i data-feather="arrow-right"></i>
  2338. </a>
  2339. {/block:NextPage}
  2340. </nav>
  2341. {/block:Pagination}
  2342.  
  2343. {block:DayPagination}
  2344. <nav id="pagination">
  2345. {block:NextDayPage}
  2346. <a href="{NextDayPage}">
  2347. <i data-feather="arrow-left"></i>
  2348. </a>
  2349. {/block:NextDayPage}
  2350.  
  2351. {block:PreviousDayPage}
  2352. <a href="{PreviousDayPage}">
  2353. <i data-feather="arrow-right"></i>
  2354. </a>
  2355. {/block:PreviousDayPage}
  2356.  
  2357. </nav>
  2358. {/block:DayPagination}
  2359.  
  2360. <!----- mobile credits / don't touch ----->
  2361. <footer class="credits">
  2362. <a id="back">back to top</a>
  2363. <div>theme by <a href="//kosmique.tumblr.com" targeg="_blank">kosmique</a></div>
  2364. </footer>
  2365.  
  2366. </section>
  2367.  
  2368. <!----- tumblr controls button ----->
  2369. <span class="open-controls">
  2370. <i data-feather="settings" class="open"></i>
  2371. <i data-feather="x" class="close"></i>
  2372. </span>
  2373.  
  2374. {block:ifUpdateTab}
  2375. <!----- updates button ----->
  2376. <span class="open-updates">
  2377. <i data-feather="bell" class="open"></i>
  2378. <i data-feather="bell-off" class="close"></i>
  2379. </span>
  2380. {/block:ifUpdateTab}
  2381.  
  2382. <!----- back to top button ----->
  2383. <span id="back" style="display:none;">
  2384. <i data-feather="arrow-up"></i>
  2385. </span>
  2386.  
  2387. <!----- credits / don't touch ----->
  2388. <a href="//kosmique.tumblr.com" target="_blank" class="credits">
  2389. <i data-feather="star"></i>
  2390. </a>
  2391.  
  2392. <script>
  2393. $(document).ready(function(){
  2394. var $container = $('#posts');
  2395.  
  2396. //shorten notes counter
  2397. $container.find('.notecount').each(function(){
  2398. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  2399. if (n > 999) {
  2400. n = Math.floor(n / 100) / 10;
  2401. $(this).text(n + 'k notes');
  2402. }
  2403. });
  2404.  
  2405. // photoset
  2406. $('.photo-slideshow').pxuPhotoset({
  2407. lightbox: true,
  2408. rounded: false,
  2409. gutter: '1px',
  2410. borderRadius: '0px',
  2411. photoset: '.photo-slideshow',
  2412. photoWrap: '.photo-data',
  2413. photo: '.pxu-photo'
  2414. });
  2415.  
  2416. // feathericons
  2417. feather.replace();
  2418.  
  2419. // flexible frames
  2420. function flexFrame() {
  2421. $(".captions").each(function() {
  2422. $(this).find("iframe").wrap("<div class='capframe'></div>"); // wrap iframe
  2423. flexibleFrames($(".capframe"));
  2424. });
  2425. flexibleFrames($(".video"));
  2426. }
  2427.  
  2428. $(document).ready(flexFrame);
  2429.  
  2430. // tooltips
  2431. $("[title]").style_my_tooltips({
  2432. tip_follows_cursor:true,
  2433. tip_delay_time:100,
  2434. tip_fade_speed:100
  2435. });
  2436.  
  2437. // remove tumblr's redirects
  2438. $('a[href*="t.umblr.com/redirect"]').each(function(){
  2439. var originalURL = $(this).attr("href").split("?z=")[1].split("&t=")[0];
  2440. var replaceURL = decodeURIComponent(originalURL);
  2441. $(this).attr("href", replaceURL);
  2442. });
  2443.  
  2444. // remove blank captions
  2445. $('.captions').each(function() {
  2446. var $this = $(this);
  2447. if($this.html().replace(/\s|&nbsp;/g, '').length == 0)
  2448. $this.remove();
  2449. });
  2450.  
  2451. //back to top
  2452. $(document).scroll(function() {
  2453. var y = $(this).scrollTop();
  2454. if (y > 200) {
  2455. $('body > #back').fadeIn();
  2456. } else {
  2457. $('body > #back').fadeOut();
  2458. }
  2459. });
  2460. $("body > #back").click(function() {$("html, body").animate({scrollTop: 0}, 1000);});
  2461.  
  2462. // tags
  2463. $('.open-tags').click(function(){
  2464. $(this).toggleClass('active');
  2465. $('.tags').slideToggle();
  2466. });
  2467.  
  2468. // tumblr controls
  2469. $('.open-controls').click(function(){
  2470. $(this).toggleClass('active');
  2471. $('.tmblr-iframe').toggleClass('active');
  2472. });
  2473.  
  2474. {block:ifUpdateTab}
  2475. // updates
  2476. $('.open-updates').click(function(){
  2477. $('.open-updates').toggleClass('active');
  2478. $('.updates').fadeToggle();
  2479. });
  2480. {/block:ifUpdateTab}
  2481.  
  2482. // custom audio
  2483. customAudio({
  2484. post: ".post",
  2485. default: false,
  2486. pauseAll: true,
  2487. playButton: "<i data-feather='play'></i>",
  2488. pauseButton: "<i data-feather='pause'></i>",
  2489. errorIcon: "<i data-feather='x'></i>",
  2490. hideInfoIfError: true,
  2491. callAfterLoad: () => {feather.replace();},
  2492. });
  2493.  
  2494.  
  2495. // time ago plugin
  2496. $('.post-date a').timeAgo({
  2497. time: "letter", // can be "letter" "short" or "word"
  2498. spaces: false, // adds spaces between words and numbers
  2499. words: false, // turns numbers to words
  2500. prefix: "", // adds a prefix to the outputted string. could be "~" or "about"
  2501. suffix: " ago", // adds a suffix to the outputted string. could be "ago"
  2502. });
  2503. });
  2504.  
  2505. </script>
  2506. </body></html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!