API tools faq
paste
Advertisement
kosmique

theme: andrômeda

kosmique
Feb 8th, 2022 (edited)
6,093
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 62.79 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. andrômeda (updated) by kosmique.tumblr.com
  3.  
  4. ✧･ﾟ: *✧･ﾟ:*ﾟ✧*:･ﾟ✧
  5.  
  6. * base code by eggdesign
  7. * npf images fix by glenthemes
  8. * flexible frames by nouvae (modified by seyche)
  9. * pxu photoset and lightboxes by shythemes
  10. * customaudio.js by annasthms
  11.  
  12. full credits list at kosmique.tumblr.com/credits
  13.  
  14. -->
  15. <!DOCTYPE html>
  16. <html>
  17. <head>
  18.  
  19. <title>
  20. {block:PostSummary}{PostSummary} : {/block:PostSummary}
  21. {block:TagPage}#{Tag} : {/block:TagPage}
  22. {block:SearchPage}{SearchQuery} : {/block:SearchPage}
  23. {block:DayPage}{MonthNumberWithZero}/{DayOfMonthWithZero}/{Year} : {/block:DayPage}
  24. {Title}
  25. </title>
  26.  
  27. <link rel="shortcut icon" href="{favicon}">
  28. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  29.  
  30. {block:Description}
  31. <meta name="description" content="{MetaDescription}" />
  32. {/block:Description}
  33.  
  34. <meta charset="utf-8"/>
  35. <meta name="viewport" content="width=device-width, initial-scale=1">
  36.  
  37. {NewPostStyles}
  38. {block:Options}
  39. <!--============================== variables ==============================-->
  40.  
  41. <!----- images ----->
  42. <meta name="image:Sidebar image" content=""/>
  43. <!----- booleans ----->
  44.  
  45. <!----- selections ----->
  46. <meta name="select:Post width" content="450px"/>
  47. <meta name="select:Post width" content="500px"/>
  48. <meta name="select:Post width" content="540px"/>
  49.  
  50. <meta name="select:Sidebar position" content="left" title="Left"/>
  51. <meta name="select:Sidebar position" content="right" title="Right"/>
  52.  
  53. <!----- colors ----->
  54. <meta name="color:Background" content="#141518"/>
  55. <meta name="color:Text" content="#c0c0c0"/>
  56. <meta name="color:Link" content="#ffffff"/>
  57. <meta name="color:Title" content="#ffffff"/>
  58. <meta name="color:Sub text" content="#ffffff"/>
  59. <meta name="color:Borders" content="#292c33"/>
  60. <meta name="color:Main boxes" content="#1d1f24"/>
  61. <meta name="color:Inner boxes" content="#141518"/>
  62. <meta name="color:Shadows" content="#0f1012"/>
  63. <meta name="color:Accent" content="#ff99b8"/>
  64. <meta name="color:Details" content="#72b8e0"/>
  65. <meta name="color:Sidebar gradient one" content="#ff99b8"/>
  66. <meta name="color:Sidebar gradient two" content="#72b8e0"/>
  67.  
  68. <!----- texts ----->
  69. <meta name="text:Font" content="Libre Franklin"/>
  70.  
  71. <meta name="text:Description" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros metus, posuere sit amet feugiat eget, vestibulum viverra erat."/>
  72.  
  73. <meta name="text:Your name" content="your name"/>
  74. <meta name="text:Your birthday" content="your birthday"/>
  75. <meta name="text:Your zodiac" content="your zodiac"/>
  76. <meta name="text:Your location" content="your location"/>
  77. <meta name="text:Your pronouns" content="your pronouns"/>
  78. <meta name="text:Your song" content="your favorite song"/>
  79.  
  80. <meta name="text:Link one title" content="link title"/>
  81. <meta name="text:Link one url" content="/"/>
  82. <meta name="text:Link two title" content="link title"/>
  83. <meta name="text:Link two url" content="/"/>
  84. <meta name="text:Link three title" content="link title"/>
  85. <meta name="text:Link three url" content="/"/>
  86. <meta name="text:Link four title" content="link title"/>
  87. <meta name="text:Link four url" content="/"/>
  88. <meta name="text:Link five title" content="link title"/>
  89. <meta name="text:Link five url" content="/"/>
  90. <meta name="text:Link six title" content="link title"/>
  91. <meta name="text:Link six url" content="/"/>
  92.  
  93. {/block:Options}
  94.  
  95. <!--============================== links ==============================-->
  96. <link rel="preconnect" href="https://fonts.googleapis.com">
  97. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  98. <link href="https://fonts.googleapis.com/css2?family={text:Font}:wght@400;700&display=swap" rel="stylesheet">
  99. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  100. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  101. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/iconfont/tabler-icons.min.css">
  102. <link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet">
  103. <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  104.  
  105. <!--============================== scripts ==============================-->
  106. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  107. <script src="//npf-images-v3.github.io/script.js"></script>
  108. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  109. <script src="https://static.tumblr.com/dj2anrv/ZVmq8svlk/jquery.style-my-tooltips.js"></script>
  110. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.js"></script>
  111. <script src="https://seyche.github.io/external-files-hosting/plugins/flexframes-modified.js"></script>
  112. <script src="https://static.tumblr.com/0podkko/aZZqe4033/customaudio.min.js"></script>
  113. <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  114.  
  115. <!--============================== css ==============================-->
  116. <style>
  117.  
  118. *{box-sizing:border-box;}
  119. *:not(a),
  120. ::before,
  121. ::after{transition:background .3s, border .3s}
  122.  
  123. :root {
  124. /*colors*/
  125. --background-color:{RGBcolor:background};
  126.  
  127. --text:{RGBcolor:text};
  128. --link:{RGBcolor:link};
  129. --title:{RGBcolor:title};
  130. --sub-text:{RGBcolor:sub text};
  131.  
  132. --accent:{RGBcolor:accent};
  133. --details:{RGBcolor:details};
  134.  
  135. --borders:{RGBcolor:borders};
  136. --shadows:{RGBcolor:shadows};
  137. --scrollbar:var(--gradient);
  138.  
  139. --main-boxes:{RGBcolor:main boxes};
  140. --inner-boxes:{RGBcolor:inner boxes};
  141.  
  142. --side1:{RGBcolor:sidebar gradient one};
  143. --side2:{RGBcolor:sidebar gradient two};
  144.  
  145. --sidebar:linear-gradient(147deg, rgb(var(--side1)), rgb(var(--side2)));
  146. --gradient:linear-gradient(147deg, rgb(var(--accent)), rgb(var(--details)));
  147.  
  148. /*images*/
  149.  
  150. /*fonts*/
  151.  
  152. --main-font:'{text:Font}';
  153. --sub-font:'{text:sub font}';
  154. --font-size:16px;
  155.  
  156. /*npf set*/
  157. --NPF-Caption-Spacing:1em;
  158. --NPF-Image-Spacing:1px;
  159.  
  160. /*content adjustments*/
  161. --gap:50px;
  162. --posts-width:{select:post width};
  163. --sidebar-width:320px;
  164. --main-width:calc(var(--sidebar-width) + var(--gap) + var(--posts-width));
  165.  
  166. --border-radius:5px;
  167. --icon-radius:100%;
  168.  
  169. --border:1px solid rgb(var(--borders));
  170. --shadow:3px 3px 7px -3px rgba(var(--shadows));
  171. }
  172.  
  173. /*basic css*/
  174.  
  175. body{
  176. margin:0;
  177. padding:0;
  178. height:100%;
  179. overflow-x:hidden;
  180. word-break:break-word;
  181. color:rgb(var(--text));
  182. background-color:rgb(var(--background-color));
  183. font:400 var(--font-size)/1.6 var(--main-font), sans-serif;
  184. }
  185.  
  186. :focus{
  187. border:0;
  188. outline:0;
  189. }
  190.  
  191. a{
  192. text-decoration:none;
  193. color:rgb(var(--link));
  194. }
  195.  
  196. a:not([class]),
  197. a:hover{
  198. cursor:pointer;
  199. transition:ease .3s;
  200. text-decoration:none;
  201. -moz-transition:ease .3s;
  202. -webkit-transition:ease .3s;
  203. }
  204.  
  205. .tags nav a,
  206. .blog-description a,
  207. ol.notes span.action a,
  208. .original a:not([class]),
  209. .reblog-content a:not([class]){
  210. border-image-slice:1;
  211. border-bottom:1px solid;
  212. border-image-source:var(--gradient);
  213. }
  214.  
  215. .tags nav a:hover,
  216. .blog-description a:hover,
  217. ol.notes span.action a:hover,
  218. .original a:not([class]):hover,
  219. .reblog-content a:not([class]):hover{color:rgb(var(--link),.75)}
  220.  
  221. b,
  222. strong{font-weight:700;}
  223.  
  224. b,
  225. i,
  226. u,
  227. s,
  228. strike{color:rgb(var(--accent));}
  229.  
  230. small,
  231. sub,
  232. sup{font-size:.7em;}
  233.  
  234. big{font-size:1.1em;}
  235.  
  236. p {margin-block:.5em;}
  237.  
  238. h1,
  239. h2,
  240. h3,
  241. h4 {
  242. margin:1rem 0;
  243. font-weight:700;
  244. }
  245.  
  246. h1{font-size:1.25em;}
  247. h2{font-size:1.15em;}
  248. h3{font-size:1.05em;}
  249.  
  250. h4,
  251. h5,
  252. h6{font-size:1em;}
  253.  
  254. h1:first-of-type,
  255. h2:first-of-type,
  256. h3:first-of-type,
  257. h4:first-of-type {margin-top:0;}
  258.  
  259. blockquote{
  260. padding:15px;
  261. margin:.5em 0;
  262. border:var(--border);
  263. border-radius:var(--border-radius);
  264. }
  265.  
  266. pre{
  267. display:block;
  268. user-select:all;
  269. margin-block:.5em;
  270. -ms-user-select:all;
  271. white-space:pre-wrap;
  272. -webkit-user-select:all;
  273. }
  274.  
  275. code{
  276. margin:0;
  277. display:inline;
  278. }
  279.  
  280. ul,
  281. ol{
  282. margin-block:.5em;
  283. padding-left:20px;
  284. }
  285.  
  286. ol{list-style:lower-alpha;}
  287.  
  288. ul li::marker,
  289. ol li::marker{color:rgb(var(--accent));}
  290.  
  291. p:first-child,
  292. ul:first-child,
  293. ol:first-child,
  294. pre:first-child,
  295. blockquote:first-child{margin-top:0;}
  296.  
  297. p:last-child,
  298. ul:last-child,
  299. ol:last-child,
  300. pre:last-child,
  301. blockquote:last-child{margin-bottom:0;}
  302.  
  303. hr {
  304. width:100%;
  305. height:1px;
  306. border:none;
  307. box-shadow:0;
  308. margin-block:20px;
  309. background:rgb(var(--borders));
  310. }
  311.  
  312. /*buttons*/
  313.  
  314. a.fixed{
  315. z-index:9;
  316. width:35px;
  317. right:20px;
  318. height:35px;
  319. display:grid;
  320. position:fixed;
  321. place-items:center;
  322. border-radius:100%;
  323. border:var(--border);
  324. background:rgb(var(--main-boxes));
  325. }
  326.  
  327. a.fixed svg{
  328. width:18px;
  329. height:18px;
  330. }
  331.  
  332. body > a.credits{bottom:20px}
  333.  
  334. a.credits svg{
  335. transition:all .3s;
  336. -moz-transition:all .3s;
  337. -webkit-transition:all .3s;
  338. }
  339.  
  340. a.credits:hover svg{
  341. fill:rgb(255, 249, 64);
  342. color:rgb(255, 249, 64);
  343. filter:drop-shadow(0 0 4px rgb(255, 249, 64));
  344. }
  345.  
  346. a.back{bottom:75px;}
  347.  
  348. /*selection*/
  349. ::selection {
  350. color:rgb(var(--accent));
  351. background-color:rgb(var(--background-color));
  352. }
  353.  
  354. ::-moz-selection {
  355. color:rgb(var(--accent));
  356. background-color:rgb(var(--background-color));
  357. }
  358.  
  359. /*tumblr controls*/
  360.  
  361. .tmblr-iframe{
  362. opacity:0;
  363. visibility:hidden;
  364. top:25px!important;
  365. transition:ease .3s;
  366. right:25px!important;
  367. z-index:12!important;
  368. -moz-transition:ease .3s;
  369. transform-origin:right top;
  370. -webkit-transition:ease .3s;
  371. transform:scale(0.7)!important;
  372. -moz-transform:scale(0.7)!important;
  373. -webkit-transform:scale(0.7)!important;
  374. }
  375.  
  376. .tmblr-iframe.active{
  377. opacity:1;
  378. visibility:visible;
  379. }
  380.  
  381. .tmblr-iframe--follow-teaser,
  382. .tmblr-iframe--app-cta-button{display:none !important;}
  383.  
  384. /*tooltip*/
  385. #s-m-t-tooltip{
  386. font-size:11px;
  387. z-index:9999999;
  388. max-width:300px;
  389. font-weight:700;
  390. position:relative;
  391. border-radius:5px;
  392. letter-spacing:1px;
  393. padding:.5em 1.25em;
  394. margin:0 14px 7px 30px;
  395. -moz-border-radius:5px;
  396. color:rgb(255,255,255);
  397. text-transform:uppercase;
  398. -webkit-border-radius:5px;
  399. background:rgba(0,0,0,.85);
  400. }
  401.  
  402. /*scrollbar*/
  403. ::-webkit-scrollbar{
  404. width:15px;
  405. height:15px;
  406. padding:5px;
  407. outline-offset:-6px;
  408. outline:1px solid rgb(var(--borders));
  409. background-color:rgb(var(--background-color));
  410. }
  411.  
  412. ::-webkit-scrollbar-thumb {
  413. border-radius:10px;
  414. background-clip:padding-box;
  415. border:5px solid transparent;
  416. background-image:var(--scrollbar);
  417. }
  418.  
  419. /*lightboxes*/
  420. img{
  421. height:auto;
  422. display:block;
  423. max-width:100%;
  424. }
  425.  
  426. iframe{display:block;}
  427.  
  428. .vignette,
  429. #vignette {opacity:0;}
  430.  
  431. .lightbox-image,
  432. #tumblr_lightbox img {
  433. box-shadow:none !important;
  434. border-radius:0 !important;
  435. max-width:none;
  436. }
  437.  
  438. .tmblr-lightbox,
  439. #tumblr_lightbox {background:rgba(var(--background-color),.9) !important;}
  440.  
  441. .lightbox-caption,
  442. #tumblr_lightbox_caption {visibility:hidden;}
  443.  
  444. .npf_row figure{cursor:pointer;}
  445.  
  446. .npf_row figure:focus{outline:0;}
  447.  
  448. /*-============================== main ==============================-*/
  449.  
  450. main{
  451. display:grid;
  452. gap:var(--gap);
  453. align-items:start;
  454. margin:var(--gap) auto;
  455. width:var(--main-width);
  456. }
  457.  
  458. main[layout="left"]{grid-template-columns:var(--sidebar-width) var(--posts-width);}
  459. main[layout="right"]{grid-template-columns:var(--posts-width) var(--sidebar-width);}
  460.  
  461. /*-============================== header ==============================-*/
  462.  
  463. header{
  464. top:0;
  465. z-index:10;
  466. margin:auto;
  467. height:85px;
  468. padding:20px;
  469. display:flex;
  470. line-height:0;
  471. position:sticky;
  472. align-items:center;
  473. border:var(--border);
  474. border-top:0!important;
  475. width:var(--main-width);
  476. box-shadow:var(--shadow);
  477. justify-content:space-between;
  478. background-color:rgb(var(--main-boxes));
  479. border-radius:0 0 var(--border-radius) var(--border-radius);
  480. }
  481.  
  482. header a.credits{display:none;}
  483. /*search*/
  484.  
  485. .search{
  486. gap:10px;
  487. display:flex;
  488. padding:10px;
  489. align-items:center;
  490. border-radius:30px;
  491. border:var(--border);
  492. background:rgba(var(--inner-boxes));
  493. }
  494.  
  495. .search svg{
  496. width:18px;
  497. height:18px;
  498. }
  499.  
  500. .search input{
  501. flex:1;
  502. border:0;
  503. font:inherit;
  504. display:block;
  505. color:inherit;
  506. background:none;
  507. }
  508.  
  509. .search input::placeholder{
  510. transition:color .3s;
  511. color:rgb(var(--text));
  512. -moz-transition:color .3s;
  513. -webkit-transition:color .3s;
  514. }
  515.  
  516. .search input:focus::-webkit-input-placeholder { color:transparent; }
  517. .search input:focus:-moz-placeholder { color:transparent; }
  518. .search input:focus::-moz-placeholder { color:transparent; }
  519. .search input:focus:-ms-input-placeholder { color:transparent; }
  520.  
  521. /*menu*/
  522.  
  523. .open-controls.active{transform:rotate(45deg);}
  524.  
  525. header nav{
  526. gap:15px;
  527. display:flex;
  528. align-items:center;
  529. }
  530.  
  531. header nav svg{
  532. width:20px;
  533. height:20px;
  534. }
  535.  
  536. /*-============================== sidebar ==============================-*/
  537.  
  538. main[layout="right"] aside{
  539. grid-row-start:1;
  540. grid-column-start:2;
  541. }
  542.  
  543. aside{
  544. top:135px;
  545. padding:5px;
  546. position:sticky;
  547. border:var(--border);
  548. box-shadow:var(--shadow);
  549. background:rgb(var(--main-boxes));
  550. border-radius:var(--border-radius);
  551. }
  552.  
  553. .sidebar-image{
  554. overflow:hidden;
  555. min-height:170px;
  556. background-image:var(--sidebar);
  557. border-radius:var(--border-radius) var(--border-radius) 0 0;
  558. }
  559.  
  560. .sidebar-image img{
  561. width:100%;
  562. min-height:170px;
  563. object-fit:cover;
  564. }
  565.  
  566. .blog-icon{
  567. z-index:2;
  568. width:70px;
  569. height:70px;
  570. padding:5px;
  571. margin-top:-35px;
  572. margin-left:15px;
  573. position:relative;
  574. border-radius:var(--icon-radius);
  575. background:rgb(var(--main-boxes));
  576. }
  577.  
  578. .blog-info{padding:15px;}
  579.  
  580. .blog-title{
  581. display:block;
  582. font-weight:700;
  583. font-size:1.15em;
  584. color:rgb(var(--title));
  585. }
  586.  
  587. .blog-user{
  588. gap:5px;
  589. align-items:center;
  590. display:inline-flex;
  591. color:rgb(var(--text));
  592. }
  593.  
  594. .blog-user svg{
  595. width:1em;
  596. height:1em;
  597. color:rgb(var(--accent));
  598. }
  599.  
  600. .blog-description {
  601. padding:15px;
  602. margin-top:15px;
  603. border:var(--border);
  604. border-radius:var(--border-radius);
  605. }
  606.  
  607. /*============================== posts ==============================*/
  608.  
  609. .result,
  610. .post{
  611. border:var(--border);
  612. box-shadow:var(--shadow);
  613. margin-bottom:var(--gap);
  614. background:rgb(var(--main-boxes));
  615. border-radius:var(--border-radius);
  616. }
  617.  
  618. .post{position:relative;}
  619.  
  620. .post.pinned::after{
  621. top:-1.5px;
  622. content:'';
  623. z-index:-1;
  624. left:-1.5px;
  625. position:absolute;
  626. border-radius:inherit;
  627. width:calc(100% + 3px);
  628. height:calc(100% + 3px);
  629. background:var(--gradient);
  630. }
  631.  
  632. .post:last-of-type{margin:0;}
  633.  
  634. .result{
  635. gap:15px;
  636. display:flex;
  637. padding:20px;
  638. align-items:center;
  639. }
  640.  
  641. .tags svg,
  642. .result svg{
  643. width:35px;
  644. height:35px;
  645. padding:8px;
  646. display:grid;
  647. line-height:0;
  648. overflow:hidden;
  649. position:relative;
  650. place-items:center;
  651. border-radius:100%;
  652. color:rgb(var(--sub-text));
  653. background-image:var(--gradient);
  654. }
  655.  
  656. .result span{
  657. font-weight:700;
  658. margin-left:5px;
  659. color:rgb(var(--accent));
  660. }
  661.  
  662. /*captions*/
  663.  
  664. .audio + .caption,
  665. .npf-photos + .reblogs,
  666. .npf-photos + .original{border-top:1px solid rgb(var(--borders));}
  667.  
  668. .post-title{
  669. margin:0;
  670. padding:25px;
  671. font-weight:700;
  672. color:rgb(var(--title));
  673. border-bottom:var(--border);
  674. }
  675.  
  676. .reblogs,
  677. .original{padding:25px}
  678.  
  679. .reblogs{
  680. position:relative;
  681. padding-left:90px;
  682. }
  683.  
  684. .reblogs + .reblogs{border-top:1px solid rgb(var(--borders));}
  685.  
  686. .reblog-icon{
  687. width:40px;
  688. position:absolute;
  689. margin-left:-65px;
  690. height:calc(100% - 50px);
  691. }
  692.  
  693. .reblog-icon img{
  694. top:110px;
  695. width:40px;
  696. height:40px;
  697. position:sticky;
  698. border-radius:var(--icon-radius);
  699. }
  700.  
  701. .user,
  702. a.read_more{
  703. padding:5px 20px;
  704. border-radius:30px;
  705. display:inline-block;
  706. border:var(--border);
  707. background:rgb(var(--inner-boxes));
  708. }
  709.  
  710. .user{margin-bottom:15px;}
  711.  
  712. a.read_more{
  713. margin-top:15px;
  714. text-transform:lowercase;
  715. }
  716.  
  717. /*photo*/
  718.  
  719. .photo {
  720. overflow:hidden;
  721. position:relative;
  722. }
  723.  
  724. .photo img{width:100%;}
  725.  
  726. .npf_inst{
  727. overflow:hidden;
  728. border-radius:var(--border-radius);
  729. }
  730.  
  731. .npf-photos .npf_inst{border-radius:0;}
  732.  
  733. /*quote*/
  734.  
  735. .npf_quote,
  736. .quote{
  737. padding:40px;
  738. font-weight:700;
  739. font-size:1.15em;
  740. position:relative;
  741. border:var(--border);
  742. color:rgb(var(--title));
  743. background:rgb(var(--inner-boxes));
  744. border-radius:var(--border-radius);
  745. }
  746.  
  747. .source {
  748. margin-top:20px;
  749. font-size:initial;
  750. letter-spacing:1px;
  751. font-weight:initial;
  752. text-transform:uppercase;
  753. }
  754.  
  755. /*----- ask -----*/
  756.  
  757. .ask-content{padding:25px;}
  758.  
  759. /*question*/
  760.  
  761. .question{
  762. padding:25px;
  763. border:var(--border);
  764. background:rgb(var(--inner-boxes));
  765. border-radius:var(--border-radius);
  766. }
  767. .question .ask-header{
  768. gap:20px;
  769. display:flex;
  770. align-items:center;
  771. margin-bottom:25px;
  772. flex-direction:column;
  773. }
  774.  
  775. .question .ask-icon{
  776. width:80px;
  777. height:80px;
  778. padding:5px;
  779. position:relative;
  780. background:var(--gradient);
  781. border-radius:var(--icon-radius);
  782. }
  783.  
  784. .question .ask-icon::before{
  785. left:25px;
  786. bottom:-10px;
  787. z-index:1;
  788. width:30px;
  789. height:30px;
  790. display:grid;
  791. content:'\eae5';
  792. position:absolute;
  793. border-radius:100%;
  794. place-items:center;
  795. box-shadow:var(--shadow);
  796. color:rgb(var(--sub-text));
  797. font-family:'tabler-icons';
  798. background:var(--gradient);
  799. }
  800.  
  801. .question .ask-icon img{
  802. width:100%;
  803. height:100%;
  804. padding:2px;
  805. border-radius:var(--icon-radius);
  806. background-color:rgb(var(--inner-boxes));
  807. }
  808.  
  809. .question .ask-user{
  810. font-weight:700;
  811. font-size:1.15em;
  812. }
  813.  
  814. .question .ask-body{text-align:center;}
  815.  
  816. /*answer*/
  817.  
  818. .answer{margin-top:25px;}
  819.  
  820. .padding + .caption{border-top:var(--border);}
  821.  
  822. .answer .ask-header{
  823. gap:20px;
  824. display:flex;
  825. align-items:center;
  826. margin-bottom:25px;
  827. }
  828.  
  829. .answer .ask-icon{
  830. width:40px;
  831. height:40px;
  832. padding:3px;
  833. background:var(--gradient);
  834. border-radius:var(--icon-radius);
  835. }
  836.  
  837. .answer .ask-icon img{
  838. width:100%;
  839. height:100%;
  840. padding:2px;
  841. border-radius:var(--icon-radius);
  842. background-color:rgb(var(--inner-boxes));
  843. }
  844.  
  845. .answer .ask-user{font-weight:700;}
  846.  
  847. /*link*/
  848.  
  849. .link-post:not(.npf-post) div.npf-link-block{
  850. margin:0!important;
  851. border:0!important;
  852. border-radius:0!important;
  853. }
  854.  
  855. .link-post:not(.npf-post) div.npf-link-block > a{
  856. padding:25px;
  857. font-weight:700;
  858. font-size:1.15em;
  859. color:rgb(var(--link));
  860. border-bottom:var(--border);
  861. background:rgb(var(--inner-boxes));
  862. }
  863.  
  864. .link-post:not(.npf-post) div.npf-link-block > a:hover{
  865. color:rgb(var(--sub-text));
  866. background:rgb(var(--accent));
  867. border-bottom-color:rgb(var(--accent));
  868. }
  869.  
  870. /*audio*/
  871.  
  872.  
  873. .npf-audio-wrapper {
  874. --NPF-Audio-Buttons-Size:14px;
  875. --NPF-Audio-Buttons-Color:rgb(var(--details)); /* color of play & pause buttons */
  876. --NPF-Audio-Buttons-Spacing: 15px; /* space between buttons and song info */
  877.  
  878. --NPF-Audio-Image-Size:140px;
  879. --NPF-Audio-Image-Spacing:0; /* gap between player info and cover image */
  880. }
  881.  
  882. .npf-audio-wrapper{
  883. flex-direction:row-reverse;
  884. border:1px solid rgb(var(--borders));
  885. }
  886.  
  887. .npf-audio-background {
  888. padding:15px;
  889. background:rgb(var(--inner-boxes));
  890. }
  891.  
  892. .npf-audio-title{font-weight:700;}
  893.  
  894. .npf-audio-title,
  895. .npf-audio-artist,
  896. .npf-audio-album {color:rgb(var(--text));}
  897.  
  898. .npf-audio-buttons{
  899. width:35px;
  900. height:35px;
  901. padding:10px;
  902. display:flex;
  903. flex-shrink:0;
  904. overflow:hidden;
  905. align-items:center;
  906. transition:all .5s;
  907. border-radius:100%;
  908. justify-content:center;
  909. border:1px solid rgb(var(--borders));
  910. }
  911.  
  912. .npf-audio-pause svg path {fill:rgb(var(--accent))!important;}
  913.  
  914. .npf-audio-image{
  915. padding:15px;
  916. border-right:1px solid rgb(var(--borders));
  917. }
  918.  
  919. .npf-audio-wrapper + *{margin-top:20px;}
  920.  
  921. .audio {
  922. padding:40px;
  923. }
  924.  
  925. .audio-controls{
  926. padding:20px;
  927. position:relative;
  928. border:var(--border);
  929. box-shadow:var(--shadow);
  930. border-radius:var(--border-radius);
  931. background:rgba(var(--inner-boxes));
  932. }
  933.  
  934. .error_icon svg {stroke:red;}
  935.  
  936. .player{
  937. gap:10px;
  938. display:flex;
  939. margin-top:20px;
  940. align-items:center;
  941. }
  942.  
  943. .player svg{
  944. width:20px;
  945. height:20px;
  946. }
  947.  
  948. .audio_player {
  949. gap:5px;
  950. display:flex;
  951. line-height:1;
  952. align-items:center;
  953. color:rgba(var(--text),.65);
  954. }
  955.  
  956. .audio_buttons{line-height:0;}
  957.  
  958. .audio_duration {display:inline;}
  959.  
  960. .seekbar {
  961. bottom:0;
  962. width:100%;
  963. height:5px;
  964. overflow:hidden;
  965. border-radius:10px;
  966. background:rgb(var(--borders));
  967. }
  968.  
  969. .seekbar_progress {
  970. width:0;
  971. height:100%;
  972. background:var(--gradient);
  973. }
  974.  
  975. .audio_info{
  976. text-align:center;
  977. margin-bottom:40px;
  978. }
  979.  
  980. .album-art{
  981. width:120px;
  982. height:120px;
  983. margin:0 auto 40px;
  984. border-radius:10px;
  985. }
  986.  
  987. .audio_info span {display:block;}
  988.  
  989. .track{
  990. font-weight:700;
  991. color:rgb(var(--title));
  992. }
  993.  
  994. /*pool*/
  995. .poll-post {
  996. --Poll-Option-Spacing:10px;
  997. --Poll-Option-Padding:10px;
  998. --Poll-Option-Border-Size:1px;
  999. --Poll-Option-HOVER-Speed:0.4s;
  1000. --Poll-Option-Font-Size:var(--font-size);
  1001. --Poll-Question-Font-Size:var(--font-size);
  1002. --Poll-Option-Corner-Rounding:var(--border-radius);
  1003.  
  1004.  
  1005. --Poll-Option-Text-Color:rgb(var(--text));
  1006. --Poll-Option-Border-Color:rgb(var(--borders));
  1007. --Poll-Option-Background-Color:rgb(var(--inner-boxes));
  1008.  
  1009. --Poll-Option-HOVER-Text-Color:rgb(var(--sub-text));
  1010. --Poll-Option-HOVER-Border-Color:rgb(var(--accent));
  1011. --Poll-Option-HOVER-Background-Color:rgb(var(--accent));
  1012. }
  1013.  
  1014. .poll-post{font:inherit;}
  1015.  
  1016. .poll-post .poll-question{margin-bottom:.5em!important;}
  1017.  
  1018.  
  1019. /*post info*/
  1020.  
  1021. .post-footer,
  1022. .post-header{
  1023. padding:15px;
  1024. display:flex;
  1025. }
  1026.  
  1027. .post-header{
  1028. border-bottom:var(--border);
  1029. justify-content:space-between;
  1030. }
  1031.  
  1032. .post-footer{
  1033. gap:20px;
  1034. border-top:var(--border);
  1035. }
  1036.  
  1037. .date,
  1038. .note-count{
  1039. padding:5px 10px;
  1040. border-radius:5px;
  1041. border:var(--border);
  1042. background:rgba(var(--inner-boxes));
  1043. }
  1044.  
  1045. .info-buttons{display:flex;}
  1046.  
  1047. .info-buttons a{
  1048. width:35px;
  1049. height:35px;
  1050. padding:5px;
  1051. display:grid;
  1052. line-height:0;
  1053. overflow:hidden;
  1054. position:relative;
  1055. place-items:center;
  1056. border-radius:100%;
  1057. border:var(--border);
  1058. background:rgb(var(--inner-boxes));
  1059. }
  1060.  
  1061. .pin svg,
  1062. .info-buttons svg{
  1063. width:18px;
  1064. height:18px;
  1065. }
  1066.  
  1067. .like-button{overflow:hidden;}
  1068.  
  1069. .like-button .like_button,
  1070. .like-button{position:relative;}
  1071.  
  1072. .like-button .like_button iframe {
  1073. right:0;
  1074. bottom:0;
  1075. top:-20px;
  1076. z-index:2;
  1077. opacity:0;
  1078. left:-20px;
  1079. position:absolute;
  1080. }
  1081.  
  1082. .liked ~ svg,
  1083. a.reblog-button:visited{color:rgb(var(--accent))}
  1084.  
  1085. .pin{
  1086. width:35px;
  1087. height:35px;
  1088. padding:5px;
  1089. display:grid;
  1090. line-height:0;
  1091. overflow:hidden;
  1092. position:relative;
  1093. place-items:center;
  1094. border-radius:100%;
  1095. color:rgb(var(--sub-text));
  1096. background-image:var(--gradient);
  1097. }
  1098.  
  1099. .tags{
  1100. gap:15px;
  1101. display:flex;
  1102. padding:15px;
  1103. align-items:center;
  1104. border-top:var(--border);
  1105. }
  1106.  
  1107. .tags nav{
  1108. gap:10px;
  1109. display:flex;
  1110. line-height:1;
  1111. flex-wrap:wrap;
  1112. }
  1113.  
  1114. /*notes*/
  1115.  
  1116. ol.notes {
  1117. margin:0px;
  1118. padding:15px;
  1119. text-transform:lowercase;
  1120. }
  1121.  
  1122. ol.notes li.note {
  1123. gap:10px;
  1124. display:flex;
  1125. margin:15px 0;
  1126. flex-wrap:wrap;
  1127. align-items:start;
  1128. }
  1129.  
  1130. span.action{flex:1}
  1131.  
  1132. ol.notes li.note:first-of-type {margin-top:0;}
  1133. ol.notes li.note:last-of-type {margin-bottom:0;}
  1134.  
  1135. ol.notes blockquote{
  1136. width:100%;
  1137. margin:1em 2em!important;
  1138. }
  1139.  
  1140. .avatar_frame .avatar{display:none}
  1141.  
  1142. li.note::before{
  1143. width:30px;
  1144. height:30px;
  1145. display:grid;
  1146. place-items:center;
  1147. border-radius:100%;
  1148. border:var(--border);
  1149. font-family:'tabler-icons';
  1150. -webkit-background-clip:text;
  1151. background-image:var(--gradient);
  1152. -webkit-text-fill-color:transparent;
  1153. background-color:rgb(var(--inner-boxes));
  1154. }
  1155.  
  1156. li.note.reblog::before{content:'\eb72';}
  1157.  
  1158. li.note.like::before{content:'\eabe';}
  1159.  
  1160. li.note.reply::before{content:'\eaec';}
  1161.  
  1162. li.note.reblog.original_post::before{content: "\eb4d";}
  1163.  
  1164. li.note.more_notes_link_container::before{content:'\ebb5';}
  1165.  
  1166. /*-============================== footer ==============================-*/
  1167.  
  1168. /*pagination*/
  1169.  
  1170. #pagination {
  1171. gap:15px;
  1172. display:flex;
  1173. flex-wrap:wrap;
  1174. align-items:center;
  1175. margin-block:100px;
  1176. justify-content:center;
  1177. }
  1178.  
  1179. #pagination span,
  1180. #pagination a{
  1181. width:40px;
  1182. height:40px;
  1183. display:grid;
  1184. font-weight:700;
  1185. place-items:center;
  1186. border-radius:100%;
  1187. }
  1188.  
  1189. #pagination svg{
  1190. width:22px;
  1191. height:22px;
  1192. }
  1193.  
  1194. #pagination a{
  1195. border:var(--border);
  1196. background:rgb(var(--main-boxes));
  1197. }
  1198.  
  1199. #pagination a:not(.jump-page):not(.active){
  1200. cursor:text;
  1201. color:rgb(var(--text));
  1202. }
  1203.  
  1204. span.current-page{
  1205. color:rgb(var(--sub-text));
  1206. background:var(--gradient);
  1207. }
  1208.  
  1209. /*-============================== menu ==============================-*/
  1210.  
  1211. .overlay{
  1212. top:0;
  1213. left:0;
  1214. right:0;
  1215. bottom:0;
  1216. z-index:20;
  1217. position:fixed;
  1218. background:rgba(var(--background-color),.85);
  1219. }
  1220.  
  1221. #menu{
  1222. top:0;
  1223. left:0;
  1224. width:40vw;
  1225. z-index:21;
  1226. height:100vh;
  1227. padding:50px;
  1228. overflow:auto;
  1229. position:fixed;
  1230. transition:transform .5s;
  1231. box-shadow:var(--shadow);
  1232. border-right:var(--border);
  1233. transform:translatex(-100%);
  1234. background:rgb(var(--main-boxes));
  1235. }
  1236.  
  1237. #menu::-webkit-scrollbar{background-color:rgb(var(--main-boxes));}
  1238.  
  1239. #menu.active{transform:translatex(0);}
  1240.  
  1241. #menu .open-menu{
  1242. gap:15px;
  1243. align-items:center;
  1244. display:inline-flex;
  1245. }
  1246.  
  1247. #menu .open-menu svg{
  1248. width:35px;
  1249. height:35px;
  1250. padding:7px;
  1251. display:grid;
  1252. place-items:center;
  1253. border-radius:100%;
  1254. border:var(--border);
  1255. background:rgb(var(--inner-boxes));
  1256. }
  1257.  
  1258. #menu .search{
  1259. display:none;
  1260. margin-top:40px;
  1261. }
  1262.  
  1263. #menu > section{
  1264. margin-top:40px;
  1265. }
  1266.  
  1267. #menu > section + section{
  1268. padding-top:40px;
  1269. border-top:1px solid rgb(var(--borders));
  1270. }
  1271.  
  1272. #menu .blog{margin:20px 0 0;}
  1273.  
  1274. #menu .blog-icon{
  1275. padding:5px;
  1276. margin-left:0;
  1277. margin-top:20px;
  1278. border:var(--border);
  1279. border-radius:var(--icon-radius);
  1280. background:rgb(var(--main-boxes));
  1281. }
  1282.  
  1283. #menu .menu,
  1284. .personal-info{
  1285. gap:15px;
  1286. display:grid;
  1287. grid-template-columns:repeat(2,1fr)
  1288. }
  1289.  
  1290. .personal-info{padding:0;}
  1291.  
  1292. #menu .menu a:hover{
  1293. padding-left:10px;
  1294. border-left:3px solid rgb(var(--accent));
  1295. }
  1296.  
  1297. .personal-info li{
  1298. gap:10px;
  1299. display:flex;
  1300. align-items:center;
  1301. }
  1302.  
  1303. .personal-info li::before{
  1304. font-family:'tabler-icons';
  1305. color:rgb(var(--details));
  1306. }
  1307.  
  1308. .personal-info li.name::before{content:'\eb4d'}
  1309. .personal-info li.birthday::before{content:'\ef3a'}
  1310. .personal-info li.zodiac::before{content:'\ec08'}
  1311. .personal-info li.location::before{content:'\eae8'}
  1312. .personal-info li.pronouns::before{content:'\eabe'}
  1313. .personal-info li.song::before{content:'\eafc'}
  1314.  
  1315. /*-============================== queries ==============================-*/
  1316.  
  1317. @media (max-width:1020px){
  1318. header,
  1319. footer{
  1320. width:100vw;
  1321. border-radius:0;
  1322. }
  1323.  
  1324. header{
  1325. left:0;
  1326. justify-content:center;
  1327. }
  1328.  
  1329. main{
  1330. width:90vw;
  1331. display:block;
  1332. }
  1333.  
  1334. aside,
  1335. #posts{width:90vw}
  1336.  
  1337. aside{
  1338. top:0;
  1339. position:relative;
  1340. margin-bottom:var(--gap);
  1341. }
  1342.  
  1343. a.back{bottom:20px;}
  1344.  
  1345. .copyright{display:inline-block!important;}
  1346.  
  1347. body > a.credits,
  1348. header .search,
  1349. .open-controls,
  1350. .tmblr-controls{display:none!important;}
  1351.  
  1352. header a.credits,
  1353. footer:not(.has-pagination),
  1354. #menu .search{display:block!important;}
  1355.  
  1356. #menu{width:90vw;}
  1357.  
  1358. #menu .personal-info,
  1359. #menu .menu{grid-template-columns:none;}
  1360. }
  1361.  
  1362. {CustomCSS}
  1363. </style>
  1364. </head>
  1365.  
  1366. <body class="{block:homepage}home{/block:homepage}{block:tagpage}tag{/block:tagpage}{block:searchpage}search{/block:searchpage}{block:submitpage}submit{/block:submitpage}{block:AskPage}ask{/block:AskPage}-page">
  1367.  
  1368. <!--============================== header ==============================-->
  1369. <header>
  1370. <form action="/search" method="get" class="search">
  1371. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" 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 d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
  1372.  
  1373. <input type="text" name="q" id="search" value="{SearchQuery}" placeholder="search blog"/>
  1374. </form>
  1375.  
  1376. <nav>
  1377. <a href="{blogurl}" title="refresh">
  1378. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-home-2" 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 d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M10 12h4v4h-4z" /></svg>
  1379. </a>
  1380.  
  1381. {block:AskEnabled}
  1382. <a href="/ask" title="contact">
  1383. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-message-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9h8" /><path d="M8 13h6" /><path d="M9 18h-3a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-3l-3 3l-3 -3z" /></svg>
  1384. </a>
  1385. {/block:AskEnabled}
  1386.  
  1387. <a href="/archive" title="archive">
  1388. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-history" 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 d="M12 8l0 4l2 2" /><path d="M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5" /></svg>
  1389. </a>
  1390.  
  1391. <a class="open-menu" title="navigation">
  1392. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-category" 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 d="M4 4h6v6h-6z" /><path d="M14 4h6v6h-6z" /><path d="M4 14h6v6h-6z" /><path d="M17 17m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /></svg>
  1393. </a>
  1394.  
  1395. <a class="credits" title="by kosmique">
  1396. <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="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><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" /></svg>
  1397. </a>
  1398.  
  1399. <a class="open-controls" title="tumblr controls">
  1400. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-settings" 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 d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /></svg>
  1401. </a>
  1402. </nav>
  1403. </header>
  1404.  
  1405. <!--============================== content ==============================-->
  1406. <main layout="{select:sidebar position}">
  1407.  
  1408. <!--------------------------------- sidebar --------------------------------->
  1409. <aside>
  1410. <div class="sidebar-image">
  1411. <img src="{image:Sidebar image}"/>
  1412. </div>
  1413.  
  1414. <img src="{portraiturl-128}" class="blog-icon"/>
  1415.  
  1416. <div class="blog-info">
  1417. <a href="{blogurl}" class="blog">
  1418. <span class="blog-title">{title}</span>
  1419.  
  1420. <span class="blog-user">
  1421. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-at" 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 d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M16 12v1.5a2.5 2.5 0 0 0 5 0v-1.5a9 9 0 1 0 -5.5 8.28" /></svg>
  1422. {name}
  1423. </span>
  1424. </a>
  1425.  
  1426. {block:IfDescription}
  1427. <div class="blog-description">
  1428. {text:description}
  1429. </div>
  1430. {/block:IfDescription}
  1431. </div>
  1432. </aside>
  1433.  
  1434. <!--------------------------------- posts --------------------------------->
  1435. <section id="posts">
  1436.  
  1437. {block:SearchPage}
  1438. <article class="result">
  1439. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
  1440. <!----- no search result callback ----->
  1441. {block:NoSearchResults}
  1442. {lang:No search results for SearchQuery 2}
  1443. {/block:NoSearchResults}
  1444.  
  1445. <!----- search result ----->
  1446. {lang:SearchResultCount results for SearchQuery 2}
  1447. </article>
  1448. {/block:SearchPage}
  1449.  
  1450. <!----- no posts callback ----->
  1451. {block:NoPosts}
  1452. <article class="result">
  1453. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-columns-off" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 6h2" /><path d="M4 10h5.5" /><path d="M4 14h5.5" /><path d="M4 18h5.5" /><path d="M14.5 6h5.5" /><path d="M14.5 10h5.5" /><path d="M18 14h2" /><path d="M14.5 18h3.5" /><path d="M3 3l18 18" /></svg>
  1454. {lang:This minimalist Tumblr has no posts}
  1455. </article>
  1456. {/block:NoPosts}
  1457.  
  1458. <!----- tag counter result ----->
  1459. {block:TagPage}
  1460. <article class="result">
  1461. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-hash" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 9l14 0" /><path d="M5 15l14 0" /><path d="M11 4l-4 16" /><path d="M17 4l-4 16" /></svg>
  1462. {lang:TagResultCount posts tagged Tag 2}
  1463. </article>
  1464. {/block:TagPage}
  1465.  
  1466. <!----- day page result ----->
  1467. {block:DayPage}
  1468. <article class="result">
  1469. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar-event" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" /><path d="M16 3l0 4" /><path d="M8 3l0 4" /><path d="M4 11l16 0" /><path d="M8 15h2v2h-2z" /></svg>
  1470. {lang:Posted on DayOfWeek DayOfMonth Month Year 2}
  1471. </article>
  1472. {/block:DayPage}
  1473.  
  1474.  
  1475. {block:Posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  1476. <article post-type="{posttype}" id="post-{PostID}" class="{posttype}-post post{block:PinnedPostLabel} pinned{/block:PinnedPostLabel} ">
  1477.  
  1478. <!----- post info ----->
  1479. {block:Date}
  1480. <div class="post-header">
  1481. <a href="{permalink}" class="note-count">{NoteCountWithLabel}</a>
  1482.  
  1483. <div class="info-buttons">
  1484. <a href="#" title="like" class="like-button">
  1485. {LikeButton size="100"}
  1486. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  1487. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1488. <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
  1489. </svg>
  1490. </a>
  1491.  
  1492. <a href="{ReblogURL}" title="reblog" target="_blank" class="reblog-button">
  1493. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-repeat" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  1494. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1495. <path d="M4 12v-3a3 3 0 0 1 3 -3h13m-3 -3l3 3l-3 3"></path>
  1496. <path d="M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3 -3l3 -3"></path>
  1497. </svg>
  1498. </a>
  1499.  
  1500. {block:ContentSource}
  1501. <a href="{SourceURL}" title="source" target="_blank" class="source-button">
  1502. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-external-link" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  1503. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1504. <path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6"></path>
  1505. <path d="M11 13l9 -9"></path>
  1506. <path d="M15 4h5v5"></path>
  1507. </svg>
  1508. </a>
  1509. {/block:ContentSource}
  1510. </div>
  1511. </div>
  1512. {/block:Date}
  1513. <!----- media posts ----->
  1514. {block:Photo}
  1515. <div class="photo legacy-photo">
  1516. {linkopentag}
  1517. <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">
  1518. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">
  1519. </a>
  1520. {linkclosetag}
  1521. </div>
  1522. {/block:Photo}
  1523.  
  1524. {block:Photoset}
  1525. <div class="photo legacy-photoset">
  1526. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  1527. {block:Photos}
  1528. <div class="photo-data">
  1529. <div class="pxu-photo">
  1530. <img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" alt="{PhotoAlt}">
  1531. </div>
  1532. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  1533. </div>
  1534. {/block:Photos}
  1535.  
  1536. </div>
  1537. </div>
  1538. {/block:Photoset}
  1539.  
  1540. {block:Panorama}
  1541. <div class="photo legacy-photo">
  1542. {LinkOpenTag}
  1543. <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">
  1544. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" />
  1545. </a>
  1546. {LinkCloseTag}
  1547. </div>
  1548. {/block:Panorama}
  1549.  
  1550. {block:Video}
  1551. <div class="photo video"></div>{Video-500}
  1552. {/block:Video}
  1553.  
  1554. {block:Audio}
  1555. <div class="audio">
  1556. {block:AudioPlayer}
  1557.  
  1558. <div class="audio_info">
  1559. {block:AlbumArt}
  1560. <img src="{AlbumArtURL}" class="album-art">
  1561. {/block:AlbumArt}
  1562.  
  1563. {block:TrackName}
  1564. <span class="track">
  1565. {TrackName}
  1566. </span>
  1567. {/block:TrackName}
  1568.  
  1569. {block:Artist}
  1570. <span class="artist">
  1571. {Artist}
  1572. </span>
  1573. {/block:Artist}
  1574. </div>
  1575.  
  1576. <div class="audio-controls">
  1577. {audio:Seekbar}
  1578.  
  1579. <div class="player">
  1580. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-player-skip-back" 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 d="M20 5v14l-12 -7z" /><path d="M4 5l0 14" /></svg>
  1581.  
  1582. <div class="audio-play">
  1583. {AudioPlayer}
  1584. {audio:AudioButtons}
  1585. </div>
  1586.  
  1587. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-player-skip-forward" 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 d="M4 5v14l12 -7z" /><path d="M20 5l0 14" /></svg>
  1588.  
  1589. <div class="audio_player">
  1590. {audio:CurrentPlayTime}
  1591. /
  1592. {audio:PlayTimeLeft}
  1593. </div>
  1594.  
  1595. </div>
  1596. </div>
  1597. {/block:AudioPlayer}
  1598. </div>
  1599. {/block:Audio}
  1600.  
  1601. <!----- quote posts ----->
  1602. {block:Quote}
  1603. <div class="quote-content">
  1604. <div class="quote-body">{quote}</div>
  1605.  
  1606. {block:Source}
  1607. <div class="source">{source}</div>
  1608. {/block:Source}
  1609. </div>
  1610. {/block:Quote}
  1611.  
  1612. <!----- chat posts ----->
  1613. {block:Chat}
  1614. <ul class="chat">
  1615. {block:Lines}
  1616. <li>
  1617. {block:Label}{Label}{/block:Label}
  1618. {Line}
  1619. </li>
  1620. {/block:Lines}
  1621. </ul>
  1622. {/block:Chat}
  1623.  
  1624. <!----- link posts ----->
  1625. {block:link}
  1626. <div class="npf-link-block">
  1627. <a href="{URL}">
  1628. {Name}
  1629. </a>
  1630. </div>
  1631. {/block:link}
  1632.  
  1633. <!----- answer posts ----->
  1634. {block:Answer}
  1635. <div class="ask-content">
  1636. <div class="question">
  1637. <div class="ask-header">
  1638. <div class="ask-icon">
  1639. <img src="{askerportraiturl-128}">
  1640. </div>
  1641. <div class="ask-user">{Asker}</div>
  1642. </div>
  1643.  
  1644. <div class="ask-body">{Question}</div>
  1645. </div>
  1646.  
  1647. {block:Answerer}
  1648. <div class="answer">
  1649. <div class="ask-header">
  1650. <div class="ask-icon">
  1651. <img src="{answererportraiturl-128}">
  1652. </div>
  1653. <div class="ask-user">{Answerer}</div>
  1654. </div>
  1655.  
  1656. <div class="ask-body">{Answer}</div>
  1657. </div>
  1658. {/block:Answerer}
  1659.  
  1660. {block:NotReblog}
  1661. <div class="answer">
  1662. {Replies}
  1663. </div>
  1664. {/block:NotReblog}
  1665. </div>
  1666. {/block:Answer}
  1667.  
  1668. <!----- captions ----->
  1669. <div class="caption">
  1670. {block:Text}
  1671. {block:Title}<h2 class="post-title">{Title}</h2>{/block:Title}
  1672. {/block:Text}
  1673.  
  1674. {block:notreblog}
  1675. <div class="original">
  1676. {block:caption}{Caption}{/block:caption}
  1677. {block:Text}{body}{/block:Text}
  1678. </div>
  1679. {/block:notreblog}
  1680.  
  1681. {block:Rebloggedfrom}
  1682. {block:Reblogs}
  1683. <div class="reblogs">
  1684. <div class="reblog-icon">
  1685. <img src="{portraiturl-64}"/>
  1686. </div>
  1687.  
  1688. <div class="reblog-header">
  1689. {block:IsActive}
  1690. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">
  1691. {username}
  1692. </a>
  1693. {/block:IsActive}
  1694.  
  1695. {block:IsDeactivated}
  1696. <span class="user deactivated">
  1697. {username}
  1698. </span>
  1699. {/block:IsDeactivated}
  1700. </div>
  1701. <div class="reblog-content">
  1702. {Body}
  1703. </div>
  1704. </div>
  1705. {/block:Reblogs}
  1706. {/block:RebloggedFrom}
  1707. </div>
  1708.  
  1709. <!----- post info ----->
  1710. {block:Date}
  1711. {block:Hastags}
  1712. <div class="tags">
  1713. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-hash" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 9l14 0" /><path d="M5 15l14 0" /><path d="M11 4l-4 16" /><path d="M17 4l-4 16" /></svg>
  1714. <nav>
  1715. {block:Tags}
  1716. <a href="{TagURL}">#{Tag}</a>
  1717. {/block:Tags}
  1718. </nav>
  1719. </div>
  1720. {/block:Hastags}
  1721.  
  1722. <div class="post-footer">
  1723. {block:indexpage}
  1724. {block:PinnedPostLabel}
  1725. <span class="pin" title="{PinnedPostLabel}">
  1726. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-pin" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 4.5l-4 4l-4 1.5l-1.5 1.5l7 7l1.5 -1.5l1.5 -4l4 -4" /><path d="M9 15l-4.5 4.5" /><path d="M14.5 4l5.5 5.5" /></svg>
  1727. </span>
  1728. {/block:PinnedPostLabel}
  1729. {/block:indexpage}
  1730.  
  1731. <a href="{permalink}" class="date">
  1732. <span>{timeago}</span>
  1733. </a>
  1734. </div>
  1735.  
  1736. {block:RebloggedFrom}
  1737. {/block:RebloggedFrom}
  1738. {/block:Date}
  1739. </article>
  1740.  
  1741. <!----- post notes ----->
  1742. {block:PostNotes}
  1743. <article class="post pagenotes">
  1744. {PostNotes-64}
  1745. </article>
  1746. {/block:PostNotes}
  1747.  
  1748. {/block:Posts}
  1749. </section>
  1750.  
  1751. </main>
  1752.  
  1753. <!--============================== pagination ==============================-->
  1754. {block:Pagination}
  1755. <nav id="pagination">
  1756. <a {block:PreviousPage}class="active" href="{PreviousPage}"{/block:PreviousPage}}>
  1757. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-left" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l14 0" /><path d="M5 12l6 6" /><path d="M5 12l6 -6" /></svg>
  1758. </a>
  1759.  
  1760. {block:JumpPagination length="3"}
  1761. {block:CurrentPage}
  1762. <span class="current-page">{PageNumber}</span>
  1763. {/block:CurrentPage}
  1764.  
  1765. {block:JumpPage}
  1766. <a class="jump-page" href="{URL}">{PageNumber}</a>
  1767. {/block:JumpPage}
  1768. {/block:JumpPagination}
  1769.  
  1770. <a {block:NextPage}class="active" href="{NextPage}"{/block:NextPage}>
  1771. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l14 0" /><path d="M13 18l6 -6" /><path d="M13 6l6 6" /></svg>
  1772. </a>
  1773. </nav>
  1774. {/block:Pagination}
  1775.  
  1776. {block:DayPagination}
  1777. <nav id="pagination" class="day-pagination">
  1778.  
  1779. <a {block:NextDayPage}href="{NextDayPage}" class="active"{/block:NextDayPage}>
  1780. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-left" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l14 0" /><path d="M5 12l6 6" /><path d="M5 12l6 -6" /></svg>
  1781. </a>
  1782.  
  1783. <a {block:PreviousDayPage}href="{PreviousDayPage}" class="active"{/block:PreviousDayPage}>
  1784. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l14 0" /><path d="M13 18l6 -6" /><path d="M13 6l6 6" /></svg>
  1785. </a>
  1786. </nav>
  1787. {/block:DayPagination}
  1788.  
  1789. <!--============================== back to top ==============================-->
  1790. <a href="#" class="fixed back" style="display:none;" title="{lang:Back to top}">
  1791. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-up" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M18 11l-6 -6" /><path d="M6 11l6 -6" /></svg>
  1792. </a>
  1793.  
  1794. <!--============================== credits / don't touch ==============================-->
  1795. <a href="//kosmique.tumblr.com" target="_blank" class="fixed credits" title="by kosmique">
  1796. <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="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><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" /></svg>
  1797. </a>
  1798.  
  1799. <!--============================== menu ==============================-->
  1800.  
  1801. <div class="overlay" style="display:none;"></div>
  1802.  
  1803. <nav id="menu">
  1804. <a class="open-menu">
  1805. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
  1806. close
  1807. </a>
  1808.  
  1809. <!----- search bar ----->
  1810. <div class="search">
  1811. <form action="/search" method="get">
  1812. <input type="text" name="q" id="search" value="{SearchQuery}" placeholder="search blog"/>
  1813. </form>
  1814. </div>
  1815.  
  1816. <!----- blog info ----->
  1817. <section>
  1818. <img src="{portraiturl-128}" class="blog-icon"/>
  1819.  
  1820. <div class="blog">
  1821. <span class="blog-title">{title}</span>
  1822.  
  1823. <span class="blog-user">
  1824. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-at" 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 d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M16 12v1.5a2.5 2.5 0 0 0 5 0v-1.5a9 9 0 1 0 -5.5 8.28" /></svg>
  1825. {name}
  1826. </span>
  1827. </div>
  1828. </section>
  1829.  
  1830. <!----- personal info ----->
  1831. <section>
  1832. <ul class="personal-info">
  1833. {block:IfYourName}
  1834. <li class="name">
  1835. {text:your name}
  1836. </li>
  1837. {/block:IfYourName}
  1838.  
  1839. {block:IfYourBirthday}
  1840. <li class="birthday">
  1841. {text:your birthday}
  1842. </li>
  1843. {/block:IfYourBirthday}
  1844.  
  1845. {block:IfYourZodiac}
  1846. <li class="zodiac">
  1847. {text:your zodiac}
  1848. </li>
  1849. {/block:IfYourZodiac}
  1850.  
  1851. {block:ifYourLocation}
  1852. <li class="location">
  1853. {text:your location}
  1854. </li>
  1855. {/block:ifYourLocation}
  1856.  
  1857. {block:IfYourPronouns}
  1858. <li class="pronouns">
  1859. {text:your pronouns}
  1860. </li>
  1861. {/block:IfYourPronouns}
  1862.  
  1863. {block:IfYourSong}
  1864. <li class="song">
  1865. {text:your song}
  1866. </li>
  1867. {/block:IfYourSong}
  1868. </ul>
  1869. </section>
  1870.  
  1871. <!----- menu ----->
  1872. <section>
  1873. <nav class="menu">
  1874. {block:ifLinkOneTitle}
  1875. <a href="{text:link one url}">
  1876. {text:link one title}
  1877. </a>
  1878. {/block:ifLinkOneTitle}
  1879.  
  1880. {block:ifLinkTwoTitle}
  1881. <a href="{text:link two url}">
  1882. {text:link two title}
  1883. </a>
  1884. {/block:ifLinkTwoTitle}
  1885.  
  1886. {block:ifLinkThreeTitle}
  1887. <a href="{text:link three url}">
  1888. {text:link three title}
  1889. </a>
  1890. {/block:ifLinkThreeTitle}
  1891.  
  1892. {block:ifLinkFourTitle}
  1893. <a href="{text:link four url}">
  1894. {text:link four title}
  1895. </a>
  1896. {/block:ifLinkFourTitle}
  1897.  
  1898. {block:ifLinkFiveTitle}
  1899. <a href="{text:link five url}">
  1900. {text:link five title}
  1901. </a>
  1902. {/block:ifLinkFiveTitle}
  1903.  
  1904. {block:ifLinkSixTitle}
  1905. <a href="{text:link six url}">
  1906. {text:link six title}
  1907. </a>
  1908. {/block:ifLinkSixTitle}
  1909.  
  1910. {block:HasPages}
  1911. {block:Pages}
  1912. <a href="{URL}">{Label}</a>
  1913. {/block:Pages}
  1914. {/block:HasPages}
  1915. </nav>
  1916. </section>
  1917. </nav>
  1918.  
  1919. <!--============================== scripts ==============================-->
  1920. <script>
  1921. $(document).ready(function(){
  1922. // photoset
  1923. $('.photo-slideshow').pxuPhotoset({
  1924. lightbox: true,
  1925. rounded: false,
  1926. gutter: '1px',
  1927. borderRadius: '0px',
  1928. photoset: '.photo-slideshow',
  1929. photoWrap: '.photo-data',
  1930. photo: '.pxu-photo'
  1931. });
  1932.  
  1933. // tooltips
  1934. $("[title]").style_my_tooltips({
  1935. tip_follows_cursor:true,
  1936. tip_delay_time:100,
  1937. tip_fade_speed:100
  1938. });
  1939.  
  1940. // flexible frames
  1941. function flexFrame() {
  1942. $(".caption").each(function() {
  1943. $(this).find("iframe").wrap("<div class='capframe'></div>"); // wrap iframe
  1944. flexibleFrames($(".capframe"));
  1945. });
  1946. flexibleFrames($(".video"));
  1947. }
  1948.  
  1949. $(document).ready(flexFrame);
  1950.  
  1951. $('.open-controls').click(function(){
  1952. $(this).add('.tmblr-iframe').toggleClass('active');
  1953. return false
  1954. }),
  1955. $(".back").click(function() {
  1956. $("html, body").animate({scrollTop: 0}, 1000);
  1957. return false;
  1958. }),
  1959. $('.open-menu').click(function(){
  1960. $('header .open-menu').toggleClass('active');
  1961. if($(this).hasClass("active")){
  1962. $('.overlay').fadeIn();
  1963. window.setTimeout(function() {
  1964. $('#menu').addClass('active');
  1965. }, 500);
  1966. } else{500
  1967. $('.open-menu').removeClass('active');
  1968. $('#menu').removeClass('active')
  1969. $('.overlay').delay(500).fadeOut();
  1970. }
  1971. return false;
  1972. }),
  1973. $(window).click(function() {
  1974. $('.open-menu, #menu').removeClass('active')
  1975. $('.overlay').delay(500).fadeOut();
  1976. }),
  1977. $('#menu').click(function(event){event.stopPropagation();});
  1978. });
  1979.  
  1980. tumblr_npf_audio({
  1981. emptyTitleText: "Untitled track",
  1982. emptyArtistText: "Untitled artist",
  1983. emptyAlbumText: "",
  1984.  
  1985. titleLabel: "Track:",
  1986. artistLabel: "Artist:",
  1987. albumLabel: ""
  1988. });
  1989.  
  1990. // custom audio
  1991. customAudio({
  1992. post: ".post",
  1993. default: false,
  1994. pauseAll: true,
  1995. 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>",
  1996. 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>",
  1997. 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>",
  1998. hideInfoIfError: true,
  1999. });
  2000.  
  2001. $(document).scroll(function() {
  2002. var y = $(this).scrollTop();
  2003. if (y > 200) {
  2004. $('.back').fadeIn();
  2005. } else {
  2006. $('.back').fadeOut();
  2007. }
  2008. });
  2009.  
  2010. // remove empty p tags
  2011. for (const p of document.querySelectorAll('p')) {
  2012. if (p.innerHTML.trim() === '') {
  2013. p.remove()
  2014. }
  2015. }
  2016.  
  2017. //remove empty .caption
  2018. for (const cap of document.querySelectorAll('.original')) {
  2019. if (cap.innerHTML.trim() === '') {
  2020. cap.remove()
  2021. }
  2022. }
  2023.  
  2024. for (const cap of document.querySelectorAll('.reblogs')) {
  2025. if (cap.innerHTML.trim() === '') {
  2026. cap.remove()
  2027. }
  2028. }
  2029.  
  2030. // create posts array
  2031. let posts = []
  2032. {block:Posts}
  2033. posts.push({ npf: JSON.parse({JSNPF}), id: {JSPostId}})
  2034. {/block:Posts}
  2035.  
  2036. //function for updating post types
  2037. function updateTypes(type, article) {
  2038. article.classList.remove('text-post')
  2039. article.classList.add(`${ type }-post`, 'npf-post')
  2040. }
  2041.  
  2042. // loop through array to get each post
  2043. for (const post of posts) {
  2044. let npf = post.npf
  2045. let article = document.getElementById(`post-${post.id}`)
  2046. // select captions that have something in them
  2047. let caption = article.querySelector('.caption:is(:not(:empty))')
  2048. if (caption != null && article.classList.contains('text-post')) {
  2049. // if content exists
  2050. if (npf.trail.length || npf.content.length) {
  2051. // assign various post types based on NPF data
  2052. switch (npf.trail[0]?.content[0]?.type ?? npf.content[0].type) {
  2053. case 'image':
  2054. updateTypes('photos', article)
  2055. if (article.querySelector('.npf_row') == null) {
  2056. caption.prepend(article.querySelector('figure'))
  2057. }
  2058. break
  2059. case 'video':
  2060. updateTypes('video', article)
  2061. let video = article.querySelector('figure')
  2062. caption.prepend(video)
  2063. break
  2064. case 'link':
  2065. updateTypes('link', article)
  2066. case 'audio':
  2067. updateTypes('audio', article)
  2068. break
  2069. case 'quote':
  2070. updateTypes('quote', article)
  2071. }
  2072.  
  2073. // if there are photos
  2074. if (article.classList.contains('photos-post')) {
  2075. let photoset = document.createElement('div')
  2076. photoset.classList.add('npf-photos')
  2077. caption.prepend(photoset)
  2078. // find where a photoset would be split up by another content block
  2079. let photoBreak = article.querySelector('.reblog-content p, .reblog-content h1, .reblog-content h2')
  2080. let elements = []
  2081. if (photoBreak) {
  2082. let prevElement = photoBreak.parentNode.firstElementChild
  2083. while (prevElement !== photoBreak) {
  2084. elements.push(prevElement)
  2085. prevElement = prevElement.nextElementSibling
  2086. }
  2087. }
  2088. // if there is nothing that breaks up the photoset, select all rows
  2089. else {
  2090. elements = article.querySelectorAll('.npf_row')
  2091. }
  2092. // move each row to the top
  2093. for (const el of elements) {
  2094. photoset.append(el)
  2095. }
  2096. if (article.querySelectorAll('.npf_row').length > 1) {
  2097. updateTypes('photoset', article)
  2098. }
  2099. else {
  2100. updateTypes('photo', article)
  2101. }
  2102. }
  2103.  
  2104. // clean up any potential stray reblog headers
  2105. let reblogHeader = article.querySelector('.reblog-header')
  2106. let reblogContent = article.querySelector('.reblog-content')
  2107. if (reblogHeader?.nextElementSibling === reblogContent && reblogContent?.childElementCount === 0) {
  2108. reblogHeader.remove()
  2109. reblogContent.remove()
  2110. }
  2111. }
  2112. }
  2113. }
  2114. </script>
  2115. </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!