API tools faq
paste
Advertisement
kosmique

theme: lunar

kosmique
Nov 27th, 2022 (edited)
8,015
1
Never
1
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 104.36 KB | None | 1 0
raw download clone embed print report
  1. <!--
  2.  
  3. lunar 1.1v by kosmique.tumblr.com
  4.  
  5. ✧･ﾟ: *✧･ﾟ:*ﾟ✧*:･ﾟ✧
  6.  
  7. * tumblr ajax notes: https://matthewbuchanan.name/tumblr/ajax-notes/
  8.  
  9. * base code by sorrism
  10. * flexible frames by nouvae (modified by seyche)
  11. * pxu photoset and lightboxes by shythemes
  12.  
  13. full credits list at kosmique.tumblr.com/credits
  14.  
  15. ✧･ﾟ: *✧･ﾟ:*ﾟ✧*:･ﾟ✧
  16.  
  17. [NEW]
  18.  
  19. * post author picture
  20. * optional message section
  21. * optional post date on index
  22. * optional post notes on index
  23. * optional toggleable tags
  24.  
  25. [NOTES]
  26.  
  27. * dark mode colors are not directly editable from the panel. however, if you want to modify the colors, just search for /*----- dark mode -----*/
  28. > decimal format only.
  29.  
  30. * to find the about section faster, search for - about -
  31. * to find the message section faster, search for - message -
  32. * message section is only available if askbox is enabled
  33. -->
  34.  
  35. <!DOCTYPE html>
  36. <html>
  37. <head>
  38.  
  39. <title>
  40. {block:PostSummary}{PostSummary} : {/block:PostSummary}
  41. {block:TagPage}#{Tag} : {/block:TagPage}
  42. {block:SearchPage}{SearchQuery} : {/block:SearchPage}
  43. {block:DayPage}{MonthNumberWithZero}/{DayOfMonthWithZero}/{Year} : {/block:DayPage}
  44. {Title}
  45. </title>
  46.  
  47. <link rel="shortcut icon" href="{favicon}">
  48. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  49.  
  50. {block:Description}
  51. <meta name="description" content="{MetaDescription}" />
  52. {/block:Description}
  53.  
  54. <meta charset="utf-8"/>
  55. <meta name="viewport" content="width=device-width, initial-scale=1">
  56.  
  57. <!--============================== variables ==============================-->
  58.  
  59. <!----- images ----->
  60.  
  61. <meta name="image:Header image" content=""/>
  62. <meta name="image:Background image" content=""/>
  63. <meta name="image:About image" content=""/>
  64.  
  65. <!----- booleans ----->
  66. <meta name="if:Dark controls" content="1"/>
  67. <meta name="if:Header image" content="1"/>
  68. <meta name="if:Full width header" content="0"/>
  69. <meta name="if:Background image" content="0"/>
  70. <meta name="if:About section" content="1"/>
  71. <meta name="if:Message section" content="1"/>
  72. <meta name="if:Toggle tags" content="1"/>
  73. <meta name="if:Post date" content="0"/>
  74. <meta name="if:Post notes" content="1"/>
  75.  
  76. <!----- colors ----->
  77. <meta name="color:Background gradient 1" content="#faf2f9"/>
  78. <meta name="color:Background gradient 2" content="#f4f9fb"/>
  79. <meta name="color:Text" content="#696969"/>
  80. <meta name="color:Link" content="#000000"/>
  81. <meta name="color:Accent" content="#9384bd"/>
  82. <meta name="color:Title" content="#000000"/>
  83. <meta name="color:Boxes" content="#ffffff"/>
  84. <meta name="color:Inner boxes" content="#f7f7f7"/>
  85. <meta name="color:Borders" content="#f0f0f0"/>
  86. <meta name="color:Header color" content="#c8c1db"/>
  87. <meta name="color:Header gradient 1" content="#f2c7f9"/>
  88. <meta name="color:Header gradient 2" content="#cbe6ee"/>
  89.  
  90. <!----- selections ----->
  91. <meta name="select:Border width" content="0px"/>
  92. <meta name="select:Border width" content="1px"/>
  93. <meta name="select:Border width" content="2px"/>
  94. <meta name="select:Border width" content="3px"/>
  95.  
  96. <meta name="select:Sidebar direction" content="left"/>
  97. <meta name="select:Sidebar direction" content="right"/>
  98.  
  99. <meta name="select:Posts width" content="400px"/>
  100. <meta name="select:Posts width" content="450px"/>
  101. <meta name="select:Posts width" content="500px"/>
  102. <meta name="select:Posts width" content="540px"/>
  103.  
  104. <meta name="select:Background size" content="cover"/>
  105. <meta name="select:Background size" content="contain"/>
  106.  
  107. <meta name="select:Background position" content="top"/>
  108. <meta name="select:Background position" content="bottom"/>
  109. <meta name="select:Background position" content="center"/>
  110. <meta name="select:Background position" content="left"/>
  111. <meta name="select:Background position" content="right"/>
  112.  
  113. <meta name="select:Background repetition" content="repeat"/>
  114. <meta name="select:Background repetition" content="no-repeat" title="no repetition"/>
  115.  
  116. <!----- texts ----->
  117. <meta name="text:Font" content="Nunito"/>
  118. <meta name="text:Font size" content="15px"/>
  119. <meta name="text:Border radius" content="7px"/>
  120.  
  121. <meta name="text:Sidebar description" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit diam nec quam consequat tristique. Nam posuere finibus nisl at rutrum."/>
  122.  
  123. <meta name="text:Link one title" content="link title"/>
  124. <meta name="text:Link one URL" content="/"/>
  125. <meta name="text:Link two title" content="link title"/>
  126. <meta name="text:Link two URL" content="/"/>
  127. <meta name="text:Link three title" content="link title"/>
  128. <meta name="text:Link three URL" content="/"/>
  129. <meta name="text:Link four title" content="link title"/>
  130. <meta name="text:Link four URL" content="/"/>
  131. <meta name="text:Link five title" content="link title"/>
  132. <meta name="text:Link five URL" content="/"/>
  133.  
  134. <!--============================== links ==============================-->
  135. <link rel="preconnect" href="https://fonts.googleapis.com">
  136. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  137. <link href="https://fonts.googleapis.com/css2?family={text:Font}:wght@400;700&display=swap" rel="stylesheet">
  138. <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_o5hd5vvqpoqiwwmi.css"/>
  139. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/iconfont/tabler-icons.min.css">
  140. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  141. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  142.  
  143. <!--============================== scripts ==============================-->
  144. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  145. <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
  146. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  147. <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
  148. <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
  149. <script src="https://seyche.github.io/external-files-hosting/plugins/flexframes-modified.js"></script>
  150. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.js"></script>
  151. <script src="//npf-images-v3.github.io/script.js"></script>
  152. <script src="https://static.tumblr.com/0podkko/aZZqe4033/customaudio.min.js"></script>
  153.  
  154. <!--============================== css ==============================-->
  155.  
  156. <style type="text/css">
  157.  
  158. *{box-sizing:border-box}
  159.  
  160. *:not(a),
  161. ::before,
  162. ::after{transition:background .3s, border .3s}
  163.  
  164. :root{
  165. --Link:{RGBcolor:link};
  166. --Title:{RGBcolor:title};
  167. --Text:{RGBcolor:text};
  168. --Boxes:{RGBcolor:boxes};
  169. --Borders:{RGBcolor:borders};
  170. --Accent:{RGBcolor:accent};
  171. --Scrollbar:var(--Accent);
  172. --Inner-boxes:{RGBcolor:inner boxes};
  173. --Header-color:{RGBcolor:header color};
  174. --Header-gradient:radial-gradient(circle, rgba({RGBcolor:header gradient 1},1) 0%, rgba({RGBcolor:header gradient 2},1) 100%);
  175. --Background-gradient:radial-gradient(circle, rgba({RGBcolor:background gradient 1},1) 0%, rgba({RGBcolor:background gradient 2},1) 100%);
  176.  
  177. --Font-size:{text:Font size};
  178. --Main-font:'{text:font}';
  179.  
  180. --Main-gap:50px;
  181. --Posts-gap:50px;
  182. --Border-width:{select:border width};
  183. --Posts-width:{select:posts width};
  184. --Border-radius:{text:border radius};
  185. --Main-width:calc(245px + var(--Main-gap) + var(--Posts-width));
  186.  
  187. --NPF-Image-Spacing:1px;
  188. --NPF-Caption-Spacing:35px;
  189. }
  190.  
  191. /*----- dark mode -----*/
  192. body.dark-mode{
  193. --Boxes:24,24,24;
  194. --Link:255,255,255;
  195. --Text:195,195,195;
  196. --Borders:32,32,32;
  197. --Title:255,255,255;
  198. --Inner-boxes:32,32,32;
  199. --Background-gradient:radial-gradient(circle, rgba(16,16,16,1) 0%, rgba(16,16,16,1) 100%);
  200. }
  201.  
  202. body{
  203. margin:0;
  204. padding:0;
  205. opacity:0;
  206. height:100%;
  207. overflow-x:hidden;
  208. word-break:break-word;
  209. color:rgb(var(--Text));
  210. {block:ifBackgroundImage}
  211. background-size:{select:background size};
  212. background-repeat:{select:background repetition};
  213. background-position:{select:background position};
  214. {/block:ifBackgroundImage}
  215. background-attachment:fixed!important;
  216. background-image:{block:ifBackgroundImage}url("{image:background image}"),{/block:ifBackgroundImage} var(--Background-gradient);
  217. font:400 var(--Font-size)/1.6 var(--Main-font), sans-serif;
  218. }
  219.  
  220. body.loaded{opacity:1;}
  221.  
  222. :focus{
  223. border:0;
  224. outline:0;
  225. }
  226.  
  227. a:not(.back),
  228. a:hover{
  229. cursor:pointer;
  230. transition:ease .3s;
  231. text-decoration:none;
  232. -moz-transition:ease .3s;
  233. -webkit-transition:ease .3s;
  234. }
  235.  
  236. a{color:rgb(var(--Link))}
  237.  
  238. .tex a:not(.read_more):not(.post_media_photo_anchor),
  239. .source a{
  240. font-weight:700;
  241. border-bottom:2px dotted rgba(var(--Accent),.75);
  242. }
  243.  
  244. b,
  245. strong{font-weight:700;}
  246.  
  247. b,
  248. i,
  249. u,
  250. s,
  251. strike{color:rgb(var(--Accent));}
  252.  
  253. u{
  254. text-decoration:none;
  255. border-bottom:2px dotted;
  256. }
  257.  
  258. small,
  259. sub,
  260. sup{font-size:.7em;}
  261.  
  262. big{font-size:1.1em;}
  263.  
  264. p {margin:.7em 0;}
  265. p:first-of-type {margin-top:0;}
  266. p:last-of-type {margin-bottom:0;}
  267.  
  268. h1,
  269. h2,
  270. h3,
  271. h4 {
  272. margin:1em 0;
  273. font-weight:700;
  274. font-size:1.05em;
  275. }
  276.  
  277. blockquote{
  278. padding:15px;
  279. margin:.5em 0;
  280. border-radius:var(--Border-radius);
  281. border:1px dotted rgba(var(--Accent),.75);
  282. }
  283.  
  284. pre{
  285. padding:15px;
  286. margin:.5em 0;
  287. display:block;
  288. user-select:all;
  289. position:relative;
  290. font-family:inherit;
  291. -ms-user-select:all;
  292. white-space:pre-wrap;
  293. -webkit-user-select:all;
  294. background:rgba(var(--Accent),.25);
  295. border-radius:var(--Border-radius);
  296. border:1px solid rgba(var(--Accent),.5);
  297. }
  298.  
  299. pre::before{
  300. top:5px;
  301. left:5px;
  302. content:'';
  303. position:absolute;
  304. pointer-events:none;
  305. width:calc(100% - 12px);
  306. height:calc(100% - 12px);
  307. border-radius:var(--Border-radius);
  308. border:1px dotted rgba(var(--Accent),.5);
  309. }
  310.  
  311. code{
  312. margin:0;
  313. display:inline;
  314. border-radius:5px;
  315. padding:.25em .5em;
  316. font-family:inherit;
  317. background:rgba(var(--Accent),.25);
  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,
  326. ol{
  327. margin:0;
  328. padding:0;
  329. }
  330.  
  331. ul{list-style:none;}
  332.  
  333. ol{list-style:lower-alpha;}
  334.  
  335. ol li::marker{color:rgb(var(--Accent));}
  336.  
  337. .post .captions ul{padding-left:35px!important;}
  338.  
  339. .post .captions ol{padding-left:calc(35px + 1em)!important;}
  340.  
  341. .post .captions ul li::before{
  342. width:5px;
  343. height:5px;
  344. content:"";
  345. margin-right:1em;
  346. position:relative;
  347. display:inline-block;
  348. vertical-align:middle;
  349. background:rgb(var(--Accent));
  350. }
  351.  
  352. hr {
  353. width:100%;
  354. height:1px;
  355. border:none;
  356. box-shadow:0;
  357. margin:15px auto;
  358. background:rgb(var(--Borders));
  359. }
  360.  
  361. svg{
  362. width:1em;
  363. height:1em;
  364. }
  365.  
  366. a.read_more{
  367. line-height:1;
  368. padding:5px 1em;
  369. font-weight:700;
  370. border-radius:30px;
  371. text-transform:lowercase;
  372. border:1px solid rgb(var(--Borders));
  373. }
  374.  
  375. a.credits,
  376. {block:ifNotFullWidthHeader}
  377. a.night,
  378. a.open-controls,
  379. {/block:ifNotFullWidthHeader}
  380. a.back{
  381. width:30px;
  382. height:30px;
  383. display:grid;
  384. line-height:0;
  385. border-radius:5px;
  386. place-items:center;
  387. background:rgb(var(--Boxes));
  388. border:2px solid rgb(var(--Borders))!important;
  389. }
  390.  
  391. /*credits*/
  392.  
  393. a.credits{
  394. z-index:9;
  395. right:20px;
  396. bottom:20px;
  397. position:fixed;
  398. }
  399.  
  400. a.credits svg{
  401. transition:ease .3s;
  402. -moz-transition:ease .3s;
  403. -webkit-transition:ease .3s;
  404. }
  405.  
  406. a.credits:hover svg{
  407. fill:rgb(255, 249, 64);
  408. color:rgb(255, 249, 64);
  409. filter:drop-shadow(0 0 4px rgb(255, 249, 64));
  410. }
  411.  
  412. /*mode button*/
  413. {block:ifNotFullWidthHeader}
  414. a.night{
  415. top:70px;
  416. z-index:9;
  417. right:20px;
  418. cursor:copy;
  419. position:fixed;
  420. text-decoration:none;
  421. }
  422. {/block:ifNotFullWidthHeader}
  423.  
  424. a.night .sun,
  425. body.dark-mode a.night .moon{display:none;}
  426.  
  427. body.dark-mode a.night .sun{display:initial;}
  428.  
  429. a.night .sun{
  430. fill:rgb(255, 249, 64);
  431. color:rgb(255, 249, 64);
  432. filter:drop-shadow(0 0 4px rgb(255, 249, 64));
  433. }
  434.  
  435. /*back to top button*/
  436.  
  437. a.back{
  438. z-index:9;
  439. right:20px;
  440. bottom:70px;
  441. cursor:copy;
  442. position:fixed;
  443. text-decoration:none;
  444. }
  445.  
  446. /*selection*/
  447. ::selection {
  448. color:rgb(var(--Accent));
  449. background-color:rgb(var(--Background-color));
  450. }
  451.  
  452. ::-moz-selection {
  453. color:rgb(var(--Accent));
  454. background-color:rgb(var(--Background-color));
  455. }
  456.  
  457. /*tumblr controls*/
  458.  
  459. .iframe-controls--desktop{
  460. display:block;
  461. {block:ifDarkControls}filter:invert(1);{/block:ifDarkControls}
  462.  
  463. {block:ifNotFullWidthHeader}
  464. top:20px!important;
  465. right:70px!important;
  466. {/block:ifNotFullWidthHeader}
  467.  
  468. {block:ifFullWidthHeader}
  469. {block:ifHeaderImage}
  470. top:20px!important;
  471. {/block:ifHeaderImage}
  472.  
  473. {block:ifNotHeaderImage}
  474. top:85px!important;
  475. {/block:ifNotHeaderImage}
  476. right:20px!important;
  477. {/block:ifFullWidthHeader}
  478. position:fixed!important;
  479. z-index:9999999999999999999999999999999999!important;
  480. }
  481.  
  482. {block:ifFullWidthHeader}
  483. {block:ifHeaderImage}
  484. .iframe-controls--desktop.stuck{top:85px!important;}
  485. {/block:ifHeaderImage}
  486. {block:ifFullWidthHeader}
  487.  
  488. .tmblr-iframe{
  489. opacity:0;
  490. visibility:hidden;
  491. transition:ease .3s;
  492. -moz-transition:ease .3s;
  493. transform-origin:right top;
  494. -webkit-transition:ease .3s;
  495. transform:scale(0.7)!important;
  496. -moz-transform:scale(0.7)!important;
  497. -webkit-transform:scale(0.7)!important;
  498. }
  499.  
  500. .tmblr-iframe.active{
  501. opacity:1;
  502. visibility:visible;
  503. }
  504.  
  505. .tmblr-iframe--follow-teaser,
  506. .tmblr-iframe--app-cta-button{display:none !important;}
  507.  
  508. .open-controls{cursor:copy!important;}
  509.  
  510. {block:ifNotFullWidthHeader}
  511. .open-controls{
  512. top:20px;
  513. z-index:9;
  514. right:20px;
  515. position:fixed;
  516. }
  517. {/block:ifNotFullWidthHeader}
  518.  
  519. /*tooltip*/
  520.  
  521. .tippy-box[data-theme~='kosmique'] {
  522. font-size:.85em;
  523. border-radius:30px;
  524. color:rgb(var(--Text));
  525. backdrop-filter:blur(10px);
  526. background:rgba(var(--Boxes),.75);
  527. border:1px solid rgb(var(--Borders));
  528. }
  529.  
  530. [data-tippy-root]{z-index:99999999999999999999999999;}
  531.  
  532. .tippy-content{padding:5px 1em;}
  533.  
  534. /*scrollbar*/
  535.  
  536. ::-webkit-scrollbar{
  537. width:14px;
  538. height:14px;
  539. padding:5px;
  540. border:6px solid rgba(var(--Boxes));
  541. background-color:rgb(var(--Borders));
  542. outline:2px solid rgb(var(--Borders));
  543. }
  544.  
  545. ::-webkit-scrollbar-thumb {
  546. border-radius:10px;
  547. background-clip:padding-box;
  548. border:5px solid transparent;
  549. background-color:rgb(var(--Scrollbar));
  550. }
  551.  
  552. /*-============================== header ==============================-*/
  553.  
  554. header{flex-wrap:wrap}
  555.  
  556. {block:ifNotFullWidthHeader}
  557. .header-image{
  558. height:300px;
  559. margin:50px auto 0;
  560. width:var(--Main-width);
  561. background-image:var(--Header-gradient);
  562. background-color:rgb(var(--Header-color));
  563. border:var(--Border-width) solid rgb(var(--Borders));
  564. border-radius:var(--Border-radius) var(--Border-radius) 0 0;
  565. }
  566.  
  567. .header-image img{
  568. width:100%;
  569. height:100%;
  570. object-fit:cover;
  571. object-position:center;
  572. border-radius:var(--Border-radius) var(--Border-radius) 0 0;
  573. }
  574.  
  575. header{
  576. top:0;
  577. z-index:99;
  578. display:flex;
  579. padding:15px;
  580. position:sticky;
  581. align-items:center;
  582. width:var(--Main-width);
  583. background:rgb(var(--Boxes));
  584. justify-content:space-between;
  585. }
  586.  
  587. {block:ifHeaderImage}
  588. header{
  589. margin:-1px auto 0;
  590. border-top:0!important;
  591. border:var(--Border-width) solid rgb(var(--Borders));
  592. border-radius:0 0 var(--Border-radius) var(--Border-radius);
  593. }
  594. {/block:ifHeaderImage}
  595.  
  596. {block:ifNotHeaderImage}
  597. header{
  598. margin:50px auto;
  599. border-radius:var(--Border-radius);
  600. border:var(--Border-width) solid rgb(var(--Borders));
  601. }
  602.  
  603. header[stuck]{
  604. border-top-color:transparent;
  605. border:var(--Border-width) solid rgb(var(--Borders));
  606. border-radius:0 0 var(--Border-radius) var(--Border-radius);
  607. }
  608. {/block:ifNotHeaderImage}
  609.  
  610. header a.night{position:none;}
  611. {/block:ifNotFullWidthHeader}
  612.  
  613. {block:ifFullWidthHeader}
  614. .header-image{
  615. width:100%;
  616. height:300px;
  617. background-image:var(--Header-gradient);
  618. background-color:rgb(var(--Header-color));
  619. }
  620.  
  621. .header-image img{
  622. width:100%;
  623. height:100%;
  624. object-fit:cover;
  625. object-position:center;
  626. }
  627.  
  628. header{
  629. top:0;
  630. width:100%;
  631. z-index:99;
  632. display:flex;
  633. padding:15px;
  634. align-items:center;
  635. background:rgb(var(--Boxes));
  636. justify-content:space-between;
  637. border:var(--Border-width) solid rgb(var(--Borders));
  638. border-radius:0 0 var(--Border-radius) var(--Border-radius);
  639. }
  640.  
  641. {block:ifHeaderImage}
  642. header{
  643. position:sticky;
  644. margin:-1px auto 0;
  645. border-top-color:transparent;
  646. }
  647. {/block:ifHeaderImage}
  648.  
  649. {block:ifNotHeaderImage}
  650. header{
  651. position:fixed;
  652. border:var(--Border-width) solid rgb(var(--Borders));
  653. }
  654. {/block:ifNotHeaderImage}
  655. {/block:ifFullWidthHeader}
  656.  
  657. .blog-icon{
  658. width:30px;
  659. height:30px;
  660. border-radius:5px;
  661. }
  662.  
  663. .blog-title{
  664. height:30px;
  665. line-height:1;
  666. border-radius:5px;
  667. letter-spacing:1px;
  668. padding:.5rem .75em;
  669. background:rgb(var(--Inner-boxes));
  670. }
  671.  
  672. header nav{
  673. gap:10px;
  674. display:flex;
  675. }
  676.  
  677. header nav a{
  678. width:30px;
  679. height:30px;
  680. display:grid;
  681. line-height:0;
  682. border-radius:5px;
  683. place-items:center;
  684. border:2px solid rgb(var(--Borders))!important;
  685. }
  686.  
  687. header nav svg{
  688. width:18px;
  689. height:18px;
  690. }
  691.  
  692. header a[class^="open-"]{cursor:copy;}
  693.  
  694. a.open-about svg.icon-tabler-x,
  695. a.open-about.active svg.icon-tabler-user,
  696. a.open-message svg.icon-tabler-x,
  697. a.open-message.active svg.icon-tabler-mail,
  698. a.open-controls svg.icon-tabler-x,
  699. a.open-controls.active svg.icon-tabler-tool,
  700. a.open-menu svg.icon-tabler-x,
  701. a.open-menu.active svg.icon-tabler-menu-2,
  702. a.open-tags svg.icon-tabler-x,
  703. a.open-tags.active svg.icon-tabler-hash{display:none;}
  704.  
  705. a.open-about.active svg.icon-tabler-x,
  706. a.open-message.active svg.icon-tabler-x,
  707. a.open-controls.active svg.icon-tabler-x,
  708. a.open-menu.active svg.icon-tabler-x,
  709. a.open-tags.active svg.icon-tabler-x{display:initial;}
  710.  
  711. header .dropdown{
  712. width:100%;
  713. margin-top:15px;
  714. }
  715.  
  716. header .dropdown ul{
  717. opacity:0;
  718. display:flex;
  719. flex-wrap:wrap;
  720. padding-top:15px;
  721. border-top:2px dotted rgb(var(--Borders));
  722. }
  723.  
  724. header .dropdown ul.active{opacity:1;}
  725.  
  726. header .dropdown ul li{line-height:1;}
  727.  
  728. header .dropdown li + li::before{
  729. width:1px;
  730. content:'';
  731. height:20px;
  732. margin-inline:15px;
  733. display:inline-block;
  734. vertical-align:middle;
  735. transform:rotate(15deg);
  736. background:rgb(var(--Borders));
  737. }
  738.  
  739. header .dropdown a:hover{
  740. border-radius:3px;
  741. color:rgb(var(--Accent));
  742. background:rgba(var(--Accent),.15);
  743. box-shadow:0 0 0 5px rgba(var(--Accent),.15);
  744. }
  745. /*-============================== main ==============================-*/
  746.  
  747. main{
  748. display:grid;
  749. margin:50px auto;
  750. align-items:start;
  751. width:var(--Main-width);
  752. column-gap:var(--Main-gap);
  753. {block:ifFullWidthHeader}
  754. {block:ifNotHeaderImage}
  755. margin-top:115px!important;
  756. {/block:ifNotHeaderImage}
  757. {/block:ifFullWidthHeader}
  758. min-height:calc(100vh - 248px);
  759. }
  760.  
  761. main[layout="left"]{grid-template-columns:245px var(--Posts-width);}
  762. main[layout="right"]{grid-template-columns:var(--Posts-width) 245px;}
  763.  
  764. /*-============================== aside ==============================-*/
  765.  
  766. main[layout="right"] aside{
  767. grid-row-start:1;
  768. grid-column-start:2;
  769. }
  770.  
  771. aside{
  772. top:105px;
  773. position:sticky;
  774. }
  775.  
  776. aside > section{
  777. padding:15px;
  778. margin-bottom:45px;
  779. background:rgb(var(--Boxes));
  780. border-radius:var(--Border-radius);
  781. border:var(--Border-width) solid rgb(var(--Borders));
  782. }
  783.  
  784. /*blog title*/
  785.  
  786. .blog{
  787. gap:10px;
  788. display:flex;
  789. align-items:center;
  790. color:rgb(var(--Title));
  791. }
  792.  
  793. span.small-icon{
  794. width:22px;
  795. height:22px;
  796. display:grid;
  797. line-height:0;
  798. border-radius:5px;
  799. place-items:center;
  800. background:rgb(var(--Borders));
  801. }
  802.  
  803. span.blog-user{font-weight:700;}
  804.  
  805. /*description*/
  806.  
  807. aside .description{
  808. margin-top:15px;
  809. padding-top:15px;
  810. border-top:2px dotted rgb(var(--Borders));
  811. }
  812.  
  813. /*-============================== posts ==============================-*/
  814.  
  815. main[layout="right"] #posts,
  816. main[layout="right"] #about{grid-column-start:1;}
  817.  
  818. #posts,
  819. #about{width:var(--Posts-width);}
  820.  
  821. .post{
  822. overflow:hidden;
  823. background:rgb(var(--Boxes));
  824. margin-bottom:var(--Posts-gap);
  825. border-radius:var(--Border-radius);
  826. border:var(--Border-width) solid rgb(var(--Borders));
  827. }
  828.  
  829. .post:last-of-type{margin-bottom:0;}
  830.  
  831. /*photo*/
  832.  
  833. .photo {
  834. overflow:hidden;
  835. position:relative;
  836. border-radius:var(--Border-radius) var(--Border-radius) 0 0;
  837. }
  838.  
  839. .photo a{cursor:zoom-in;}
  840.  
  841. .photo img,
  842. .tex > .tmblr-full img{
  843. width:100%;
  844. display:block;
  845. }
  846.  
  847. .tex > .tmblr-full img,
  848. .npf_inst{
  849. padding:15px;
  850. overflow:hidden;
  851. border-radius:var(--Border-radius);
  852. border:2px dotted rgb(var(--Borders));
  853. }
  854.  
  855. .tex > .tmblr-full img + p,
  856. .npf_inst + p{margin-top:15px;}
  857.  
  858. /*lightboxes*/
  859.  
  860. img{
  861. height:auto;
  862. display:block;
  863. max-width:100%;
  864. }
  865.  
  866. iframe,
  867. .tmblr-full > video{display:block;}
  868.  
  869. .vignette,
  870. #vignette {opacity:0;}
  871.  
  872. .lightbox-image,
  873. #tumblr_lightbox img {
  874. max-width:none;
  875. padding:10px!important;
  876. box-shadow:none !important;
  877. background:rgb(var(--Boxes))!important;
  878. border-radius:var(--Border-radius)!important;
  879. border:4px double rgb(var(--Borders))!important;
  880. }
  881.  
  882. .tmblr-lightbox,
  883. #tumblr_lightbox {
  884. cursor:zoom-out;
  885. background:rgb(var(--Background-color))!important;
  886. }
  887.  
  888. .lightbox-caption,
  889. #tumblr_lightbox_caption {visibility:hidden;}
  890.  
  891. .npf_row figure{cursor:pointer;}
  892.  
  893. .npf_row figure:focus{outline:0;}
  894.  
  895. /*titles*/
  896.  
  897. .post-title{
  898. padding:15px;
  899. font-weight:700;
  900. color:rgb(var(--Title));
  901. border-bottom:2px dotted rgb(var(--Borders));
  902. }
  903.  
  904. /*captions*/
  905.  
  906. .comment {
  907. padding:25px;
  908. list-style:none;
  909. }
  910.  
  911. .comment + .comment,
  912. .photo + .captions,
  913. .link + .captions{border-top:3px double rgb(var(--Borders));}
  914.  
  915. a.user,
  916. span.user{
  917. gap:10px;
  918. display:flex;
  919. align-items:center;
  920. margin-bottom:15px;
  921. padding-bottom:15px;
  922. color:rgb(var(--Link));
  923. border-bottom:2px dotted rgb(var(--Borders));
  924. }
  925.  
  926. a.user img,
  927. span.user img{
  928. width:26px;
  929. height:26px;
  930. border-radius:5px;
  931. }
  932.  
  933. a.user span,
  934. span.user span{font-weight:700;}
  935.  
  936. span.deactivated span::after{
  937. opacity:0;
  938. line-height:1;
  939. font-size:.7em;
  940. padding:5px 1em;
  941. font-weight:700;
  942. margin-left:10px;
  943. border-radius:30px;
  944. pointer-events:none;
  945. content:'deactivated';
  946. vertical-align:middle;
  947. color:rgb(var(--Text));
  948. transition:opacity .4s;
  949. text-transform:lowercase;
  950. border:1px solid rgb(var(--Borders));
  951. }
  952.  
  953. span.deactivated:hover span::after{opacity:1;}
  954.  
  955. /*quote*/
  956.  
  957. .quote{
  958. display:grid;
  959. padding:15px;
  960. column-gap:15px;
  961. grid-template-columns:30px 1fr;
  962. }
  963.  
  964. .quote > svg{
  965. width:30px;
  966. height:30px;
  967. padding:5px;
  968. display:grid;
  969. line-height:0;
  970. flex-shrink:0;
  971. border-radius:5px;
  972. place-items:center;
  973. color:rgb(var(--Accent));
  974. background:rgba(var(--Accent),.25);
  975. }
  976.  
  977. .q{
  978. list-style:none;
  979. min-height:30px;
  980. font-weight:700;
  981. padding:6.5px 1em;
  982. border-radius:30px;
  983. color:rgb(var(--Link));
  984. text-transform:lowercase;
  985. border:1px solid rgb(var(--Borders));
  986. }
  987.  
  988. .q::first-line{line-height:1;}
  989.  
  990. .source{
  991. margin-top:15px;
  992. padding-top:15px;
  993. grid-column:span 2;
  994. border-top:2px dotted rgb(var(--Borders));
  995. }
  996.  
  997. /*link*/
  998.  
  999. .npf-link-block{font:inherit;}
  1000.  
  1001. .link{
  1002. display:block;
  1003. overflow:hidden;
  1004. border-radius:var(--Border-radius) var(--Border-radius) 0 0;
  1005. }
  1006.  
  1007. .npf-link-block{
  1008. display:block;
  1009. overflow:hidden;
  1010. border-radius:var(--Border-radius);
  1011. border:1px solid rgb(var(--Borders))!important;
  1012. }
  1013.  
  1014. .link-info,
  1015. .npf-link-block .bottom{padding:30px;}
  1016.  
  1017. div.npf-link-block .bottom .description{
  1018. padding:15px;
  1019. max-height:none!important;
  1020. border-radius:var(--Border-radius);
  1021. border:2px dotted rgb(var(--Borders))!important;
  1022. }
  1023.  
  1024. div.npf-link-block a{
  1025. border-bottom:0!important;
  1026. font-weight:normal!important;
  1027. }
  1028.  
  1029. .npf-link-block .title + .bottom {padding-top:15px;}
  1030.  
  1031. .link-name,
  1032. .npf-link-block .title{
  1033. font-size:1.3em;
  1034. font-weight:700;
  1035. }
  1036.  
  1037. .npf-link-block .title {padding:30px 30px 0!important;}
  1038.  
  1039. .npf-link-block .title {
  1040. overflow:inherit;
  1041. max-height:inherit;
  1042. line-height:inherit;
  1043. }
  1044.  
  1045. .host,
  1046. .npf-link-block .bottom .site-name {
  1047. padding:5px 1em;
  1048. margin-top:10px;
  1049. border-radius:30px;
  1050. opacity:1!important;
  1051. display:inline-block;
  1052. line-height:1!important;
  1053. font-weight:700!important;
  1054. font-size:inherit!important;
  1055. color:rgb(var(--Link))!important;
  1056. text-transform:inherit!important;
  1057. border:1px solid rgb(var(--Borders));
  1058. }
  1059.  
  1060. .host,
  1061. .npf-link-block .bottom .site-name{}
  1062.  
  1063. .host::before,
  1064. .npf-link-block .bottom .site-name::before{
  1065. content:'\eade';
  1066. margin-right:15px;
  1067. vertical-align:middle;
  1068. font-family:'tabler-icons';
  1069. }
  1070.  
  1071. /*audio*/
  1072.  
  1073. .audio {padding:15px;}
  1074.  
  1075. .audio-time {
  1076. display:flex;
  1077. font-size:.8em;
  1078. margin-top:10px;
  1079. padding-top:10px;
  1080. border-top:2px dotted rgb(var(--Borders));
  1081. }
  1082.  
  1083. .audio_info{
  1084. gap:15px;
  1085. display:grid;
  1086. grid-template-columns:90px 1fr;
  1087. }
  1088.  
  1089. .album-art{border-radius:5px;}
  1090.  
  1091. .time_left::before {content:"/";}
  1092.  
  1093. .track{
  1094. font-weight:700;
  1095. color:rgb(var(--Title));
  1096. }
  1097.  
  1098. .player-controls {
  1099. gap:15px;
  1100. display:flex;
  1101. line-height:0;
  1102. margin-top:15px;
  1103. align-items:center;
  1104. border-radius:30px;
  1105. justify-content:center;
  1106. border:1px solid rgb(var(--Borders));
  1107. }
  1108.  
  1109. .error_icon svg {stroke:red;}
  1110.  
  1111. .player{
  1112. padding:15px;
  1113. border-inline:1px solid rgb(var(--Borders));
  1114. }
  1115.  
  1116. .player svg{
  1117. width:30px;
  1118. height:30px;
  1119. padding:5px;
  1120. line-height:0;
  1121. border-radius:5px;
  1122. place-items:center;
  1123. display:inline-grid;
  1124. vertical-align:middle;
  1125. color:rgb(var(--Accent));
  1126. background:rgba(var(--Accent),.25);
  1127. }
  1128.  
  1129. .icon-tabler-repeat,
  1130. .icon-tabler-arrows-shuffle{width:.85em;}
  1131.  
  1132. /*asks*/
  1133.  
  1134. .question{padding:15px;}
  1135.  
  1136. .answer{padding:15px;}
  1137.  
  1138. .question + .answer{border-top:3.5px double rgb(var(--Borders));}
  1139.  
  1140. .answer + .answer{border-top:2px dotted rgb(var(--Borders));}
  1141.  
  1142. .question .tex,
  1143. .answer .tex{
  1144. padding:15px;
  1145. margin-top:15px;
  1146. margin-left:45px;
  1147. border-radius:var(--Border-radius);
  1148. border:2px dotted rgb(var(--Borders));
  1149. }
  1150.  
  1151. .as{
  1152. gap:15px;
  1153. display:grid;
  1154. grid-template-columns:30px 1fr 30px;
  1155. }
  1156.  
  1157. .as .user{
  1158. flex:1;
  1159. line-height:1;
  1160. font-weight:700;
  1161. padding:6.5px 1em;
  1162. border-radius:5px;
  1163. color:rgb(var(--Link));
  1164. text-transform:lowercase;
  1165. border:1px solid rgb(var(--Borders));
  1166. }
  1167.  
  1168. .as img{
  1169. width:30px;
  1170. height:30px;
  1171. border-radius:5px;
  1172. }
  1173.  
  1174. .as svg{
  1175. width:30px;
  1176. height:30px;
  1177. padding:5px;
  1178. display:grid;
  1179. line-height:0;
  1180. flex-shrink:0;
  1181. border-radius:5px;
  1182. place-items:center;
  1183. color:rgb(var(--Accent));
  1184. background:rgba(var(--Accent),.25);
  1185. }
  1186.  
  1187.  
  1188. /*chat*/
  1189.  
  1190. .chat{
  1191. }
  1192.  
  1193. .tex .npf_chat{margin-bottom:15px;}
  1194.  
  1195. .l{
  1196. padding:15px;
  1197. border-bottom:2px dotted rgb(var(--Borders));
  1198. }
  1199.  
  1200. .l:last-of-type{border-bottom:0;}
  1201.  
  1202. .tex .npf_chat {font: inherit;}
  1203.  
  1204. .label,
  1205. .npf_chat b{
  1206. font-weight:700;
  1207. color:rgb(var(--Accent));
  1208. }
  1209.  
  1210. .l:last-of-type,
  1211. .tex .npf_chat:last-of-type{margin-bottom:0;}
  1212.  
  1213. /*post header*/
  1214.  
  1215. .post-header{
  1216. display:flex;
  1217. margin-bottom:2em;
  1218. align-items:center;
  1219. text-transform:lowercase;
  1220. }
  1221.  
  1222. .post-header img{
  1223. width:35px;
  1224. height:35px;
  1225. margin-right:1.5em;
  1226. border-radius:100%;
  1227. }
  1228.  
  1229. .post-origin{font-weight:700;}
  1230. .post-origin a{color:rgb(var(--Title));}
  1231.  
  1232. /*post info*/
  1233.  
  1234. .when {
  1235. gap:15px;
  1236. display:flex;
  1237. padding:25px;
  1238. {block:ifPostDate}flex-wrap:wrap;{/block:ifPostDate}
  1239. align-items:center;
  1240. border-top:3px double rgb(var(--Borders));
  1241. }
  1242.  
  1243. .when a{
  1244. display:flex;
  1245. overflow:hidden;
  1246. position:relative;
  1247. align-items:center;
  1248. }
  1249.  
  1250. .when svg{
  1251. width:26px;
  1252. height:26px;
  1253. padding:5px;
  1254. display:grid;
  1255. line-height:0;
  1256. border-radius:5px;
  1257. place-items:center;
  1258. background:rgb(var(--Inner-boxes));
  1259. }
  1260.  
  1261. a.notecount,
  1262. span.post-date{
  1263. gap:10px;
  1264. display:flex;
  1265. line-height:1;
  1266. font-weight:700;
  1267. overflow:hidden;
  1268. position:relative;
  1269. align-items:center;
  1270. text-transform:lowercase;
  1271. }
  1272.  
  1273. span.post-date{
  1274. width:100%;
  1275. color:rgb(var(--Link));
  1276. }
  1277.  
  1278. {block:ifPostDate}a.notecount{margin-right:auto;}{/block:ifPostDate}
  1279.  
  1280. {block:ifPostNotes}
  1281. a.notecount{
  1282. {block:indexpage}cursor:copy;{/block:indexpage}
  1283. {block:permalinkpage}cursor:text;{/block:permalinkpage}
  1284. }
  1285. {/block:ifPostNotes}
  1286.  
  1287. .pin{
  1288. gap:15px;
  1289. display:flex;
  1290. padding:15px;
  1291. border-bottom:2px dotted rgb(var(--Borders));
  1292. }
  1293.  
  1294. .pin + .photo,
  1295. .pin + .link{border-radius:0;}
  1296.  
  1297. .pin svg{
  1298. width:26px;
  1299. height:26px;
  1300. padding:5px;
  1301. display:grid;
  1302. line-height:0;
  1303. flex-shrink:0;
  1304. border-radius:5px;
  1305. place-items:center;
  1306. color:rgb(var(--Accent));
  1307. background:rgba(var(--Accent),.25);
  1308. }
  1309.  
  1310. .pin span{
  1311. line-height:1;
  1312. padding:5px 1em;
  1313. font-weight:700;
  1314. border-radius:30px;
  1315. color:rgb(var(--Accent));
  1316. text-transform:lowercase;
  1317. border:1px solid rgb(var(--Borders));
  1318. }
  1319.  
  1320. {block:ifNotPostDate}.like-button{margin-left:auto;}{/block:ifNotPostDate}
  1321.  
  1322. .liked ~ svg,
  1323. a.reblog-button:visited{color:rgb(var(--Accent))}
  1324.  
  1325. .when .like-button .like_button {position:relative;}
  1326.  
  1327. .when .like-button .like_button iframe {
  1328. right:0;
  1329. bottom:0;
  1330. top:-30px;
  1331. z-index:2;
  1332. opacity:0;
  1333. left:-30px;
  1334. position:absolute;
  1335. }
  1336.  
  1337. /*permalink info*/
  1338.  
  1339. .perma-info{
  1340. padding:15px;
  1341. list-style:none;
  1342. }
  1343.  
  1344. .perma-info li:not(:last-of-type){
  1345. margin-bottom:15px;
  1346. padding-bottom:15px;
  1347. border-bottom:2px dotted rgb(var(--Borders));
  1348. }
  1349.  
  1350. .perma-info a{
  1351. font-weight:700;
  1352. text-transform:lowercase;
  1353. border-bottom:2px dotted rgba(var(--Accent),.75);
  1354. }
  1355.  
  1356. .perma-info svg{
  1357. width:26px;
  1358. height:26px;
  1359. padding:5px;
  1360. line-height:0;
  1361. margin-right:15px;
  1362. border-radius:5px;
  1363. place-items:center;
  1364. display:inline-grid;
  1365. vertical-align:middle;
  1366. color:rgb(var(--Accent));
  1367. background:rgba(var(--Accent),.25);
  1368. }
  1369.  
  1370. /*notes*/
  1371.  
  1372. .pagenotes .post-title{
  1373. gap:15px;
  1374. display:flex;
  1375. align-items:center;
  1376. }
  1377.  
  1378. .pagenotes .post-title svg{
  1379. width:26px;
  1380. height:26px;
  1381. padding:5px;
  1382. display:grid;
  1383. line-height:0;
  1384. border-radius:5px;
  1385. place-items:center;
  1386. color:rgb(var(--Accent));
  1387. background:rgba(var(--Accent),.25);
  1388. }
  1389.  
  1390. ol.notes {
  1391. margin:0px;
  1392. padding:15px;
  1393. text-transform:lowercase;
  1394. }
  1395.  
  1396. ol.notes li.note:not(:last-of-type){
  1397. margin-bottom:15px;
  1398. padding-bottom:15px;
  1399. border-bottom:2px dotted rgb(var(--Borders));
  1400. }
  1401.  
  1402. ol.notes li.note {
  1403. gap:15px;
  1404. display:flex;
  1405. flex-wrap:wrap;
  1406. align-items:start;
  1407. }
  1408.  
  1409. ol.notes span.action{
  1410. flex:1;
  1411. min-height:30px;
  1412. padding-block:0.5rem;
  1413. }
  1414.  
  1415. ol.notes span.action::first-line{line-height:1;}
  1416.  
  1417. ol.notes span.action a{font-weight:700;}
  1418.  
  1419. a.avatar_frame{
  1420. flex-shrink:0;
  1421. position:relative;
  1422. }
  1423.  
  1424. li.note a.avatar_frame::before{
  1425. width:15px;
  1426. right:-5px;
  1427. bottom:-5px;
  1428. height:15px;
  1429. display:grid;
  1430. line-height:0;
  1431. font-size:10px;
  1432. position:absolute;
  1433. border-radius:3px;
  1434. place-items:center;
  1435. box-sizing:border-box;
  1436. color:rgb(255,255,255);
  1437. font-family:"tabler-icons";
  1438. }
  1439.  
  1440. li.note.reblog a.avatar_frame::before{
  1441. content:'\eb72';
  1442. background:rgb(38, 189, 96);
  1443. }
  1444.  
  1445. li.note.like a.avatar_frame::before{
  1446. content:'\eabe';
  1447. background:rgb(189, 38, 61);
  1448. }
  1449.  
  1450. li.note.reply a.avatar_frame::before{
  1451. content:'\eaec';
  1452. background:rgb(38, 119, 189);
  1453. }
  1454.  
  1455. li.note.reblog.original_post a.avatar_frame::before{
  1456. content: "\eb4d";
  1457. background:rgb(189, 38, 186);
  1458. }
  1459.  
  1460. a.avatar_frame img.avatar{
  1461. width:30px;
  1462. height:30px;
  1463. border-radius:5px;
  1464. }
  1465.  
  1466. ol.notes blockquote{
  1467. width:100%;
  1468. margin:5px 15px 0 45px!important;
  1469. }
  1470.  
  1471. a.more_notes_link{
  1472. gap:15px;
  1473. display:flex;
  1474. font-weight:700;
  1475. align-items:center;
  1476. }
  1477.  
  1478. a.more_notes_link::before,
  1479. span.notes_loading::before{
  1480. width:30px;
  1481. height:30px;
  1482. line-height:0;
  1483. flex-shrink:0;
  1484. font-size:18px;
  1485. content:'\ebb5';
  1486. border-radius:5px;
  1487. font-weight:normal;
  1488. place-items:center;
  1489. display:inline-grid;
  1490. font-family:'tabler-icons';
  1491. background:rgb(var(--Borders));
  1492. }
  1493.  
  1494. span.notes_loading{
  1495. font-weight:700;
  1496. color:rgb(var(--Link));
  1497. }
  1498.  
  1499. span.notes_loading::before{
  1500. margin-right:15px;
  1501. vertical-align:middle;
  1502. }
  1503.  
  1504. .notes-content{border-top:3px double rgb(var(--Borders));}
  1505.  
  1506. .notes-content ol.notes{
  1507. overflow:auto;
  1508. max-height:300px;
  1509. }
  1510.  
  1511. .loading {
  1512. gap:20px;
  1513. width:100%;
  1514. height:100%;
  1515. display:flex;
  1516. align-items:center;
  1517. margin-bottom:15px;
  1518. justify-content:center;
  1519. }
  1520.  
  1521. .loading div {
  1522. width:10px;
  1523. height:10px;
  1524. border-radius:100%;
  1525. background:rgb(var(--Accent));
  1526. animation:.9s bounce infinite alternate;
  1527. }
  1528.  
  1529. .loading div:nth-child(2) {animation-delay: 0.3s;}
  1530.  
  1531. .loading div:nth-child(3) {animation-delay: 0.6s;}
  1532.  
  1533. @keyframes bounce {
  1534. to {opacity: 0.3;}
  1535. }
  1536.  
  1537. /*tags*/
  1538.  
  1539. .result{
  1540. padding:25px;
  1541. background:rgb(var(--Boxes));
  1542. margin-bottom:var(--Posts-gap);
  1543. border-radius:var(--Border-radius);
  1544. border:var(--Border-width) solid rgb(var(--Borders));
  1545. }
  1546.  
  1547. .result span{
  1548. gap:15px;
  1549. display:flex;
  1550. margin-top:15px;
  1551. font-weight:700;
  1552. padding-top:15px;
  1553. align-items:center;
  1554. color:rgb(var(--Title));
  1555. text-transform:lowercase;
  1556. border-top:2px dotted rgb(var(--Borders));
  1557. }
  1558.  
  1559. .result span::before{
  1560. width:26px;
  1561. height:26px;
  1562. display:grid;
  1563. line-height:0;
  1564. flex-shrink:0;
  1565. border-radius:5px;
  1566. place-items:center;
  1567. font-weight:normal;
  1568. color:rgb(var(--Accent));
  1569. font-family:'tabler-icons';
  1570. background:rgba(var(--Accent),.25);
  1571. }
  1572.  
  1573. .result span.tag::before{content:'\eabc';}
  1574.  
  1575. .result span.search_query::before{content:'\eb1c';}
  1576.  
  1577. .result span.date::before{content:'\ee21';}
  1578.  
  1579. .tags{
  1580. gap:15px;
  1581. display:flex;
  1582. padding:25px;
  1583. border-top:2px dotted rgb(var(--Borders));
  1584. }
  1585.  
  1586. .tags > div{
  1587. gap:15px;
  1588. display:flex;
  1589. flex-wrap:wrap;
  1590. }
  1591.  
  1592. .tags svg{
  1593. width:26px;
  1594. height:26px;
  1595. padding:5px;
  1596. display:grid;
  1597. line-height:0;
  1598. flex-shrink:0;
  1599. border-radius:5px;
  1600. place-items:center;
  1601. color:rgb(var(--Accent));
  1602. background:rgba(var(--Accent),.25);
  1603. }
  1604.  
  1605. .tags a {
  1606. line-height:1;
  1607. padding:5px 1em;
  1608. font-weight:700;
  1609. border-radius:30px;
  1610. border:1px solid rgb(var(--Borders));
  1611. }
  1612.  
  1613. /*-============================== footer ==============================-*/
  1614.  
  1615. footer{
  1616. display:flex;
  1617. padding:20px;
  1618. font-size:.85em;
  1619. align-items:center;
  1620. letter-spacing:1px;
  1621. text-transform:uppercase;
  1622. background:rgb(var(--Boxes));
  1623. justify-content:space-around;
  1624. border-top:var(--Border-width) solid rgb(var(--Borders));
  1625. }
  1626.  
  1627. /*pagination*/
  1628.  
  1629. #pagination a + a::before,
  1630. #pagination a + span::before,
  1631. #pagination span + a::before{
  1632. content:'/';
  1633. margin:0 10px;
  1634. pointer-events:none;
  1635. color:rgba(var(--Text),.3);
  1636. }
  1637.  
  1638. #pagination a:not(.active){
  1639. cursor:text;
  1640. color:rgb(var(--Text));
  1641. }
  1642.  
  1643. /*search bar*/
  1644.  
  1645. .search form{
  1646. gap:10px;
  1647. padding:10px;
  1648. display:flex;
  1649. align-items:center;
  1650. border-radius:var(--Border-radius);
  1651. border:1px solid rgb(var(--Borders));
  1652. }
  1653.  
  1654. .search input{
  1655. border:0;
  1656. padding:0;
  1657. width:100%;
  1658. color:inherit;
  1659. font-family:inherit;
  1660. background:transparent;
  1661. }
  1662.  
  1663. .search input::placeholder {
  1664. color:inherit;
  1665. font-size:.85em;
  1666. letter-spacing:1px;
  1667. transition:opacity .3s;
  1668. text-transform:uppercase;
  1669. -moz-transition:opacity .3s;
  1670. -webkit-transition:opacity .3s
  1671. }
  1672.  
  1673. .search input:focus::-webkit-input-placeholder{opacity:0;}
  1674. .search input:focus:-moz-placeholder{opacity:0;}
  1675. .search input:focus::-moz-placeholder{opacity:0;}
  1676. .search input:focus:-ms-input-placeholder{opacity:0;}
  1677.  
  1678. /*-============================== about ==============================-*/
  1679.  
  1680. #about,
  1681. #message{
  1682. gap:50px;
  1683. display:grid;
  1684. }
  1685.  
  1686. .about-image{
  1687. width:100%;
  1688. padding:5px;
  1689. height:125px;
  1690. object-fit:cover;
  1691. object-position:center;
  1692. background:rgb(var(--Boxes));
  1693. border-radius:var(--Border-radius);
  1694. border:var(--Border-width) solid rgb(var(--Borders));
  1695. }
  1696.  
  1697. #about > div,
  1698. #message > div{
  1699. background:rgb(var(--Boxes));
  1700. border-radius:var(--Border-radius);
  1701. border:var(--Border-width) solid rgb(var(--Borders));
  1702. }
  1703.  
  1704. #about > div{padding:15px;}
  1705.  
  1706. .main-info{list-style:none;}
  1707.  
  1708. .main-info li:not(:last-of-type){
  1709. margin-bottom:15px;
  1710. padding-bottom:15px;
  1711. border-bottom:2px dotted rgb(var(--Borders));
  1712. }
  1713.  
  1714. .main-info li{
  1715. gap:15px;
  1716. display:flex;
  1717. align-items:center;
  1718. }
  1719.  
  1720. .main-info li::before{
  1721. width:30px;
  1722. height:30px;
  1723. display:grid;
  1724. line-height:0;
  1725. flex-shrink:0;
  1726. font-size:18px;
  1727. border-radius:5px;
  1728. place-items:center;
  1729. font-family:'tabler-icons';
  1730. background:rgb(var(--Borders));
  1731. }
  1732.  
  1733. .main-info li.name::before{content:'\eee0';}
  1734. .main-info li.pronouns::before{content:'\eb4d';}
  1735. .main-info li.location::before{content:'\eae8';}
  1736. .main-info li.likes::before{content:'\eb3c';}
  1737. .main-info li.dislikes::before{content:'\eb3b';}
  1738.  
  1739. .about-links,
  1740. .about-tags{
  1741. display:grid;
  1742. column-gap:15px;
  1743. grid-template-columns:30px 1fr;
  1744. }
  1745.  
  1746. .about-links svg,
  1747. .about-tags svg{
  1748. width:30px;
  1749. height:30px;
  1750. padding:5px;
  1751. display:grid;
  1752. line-height:0;
  1753. flex-shrink:0;
  1754. border-radius:5px;
  1755. place-items:center;
  1756. background:rgba(var(--Borders));
  1757. }
  1758.  
  1759. .about-tags{
  1760. margin-top:15px;
  1761. padding-top:15px;
  1762. border-top:2px dotted rgb(var(--Borders));
  1763. }
  1764.  
  1765. .about-links a,
  1766. .about-tags a{
  1767. line-height:1;
  1768. padding:5px 1em;
  1769. font-weight:700;
  1770. border-radius:30px;
  1771. border:1px solid rgb(var(--Borders));
  1772. }
  1773.  
  1774. .about-links > div,
  1775. .about-tags > div{
  1776. gap:10px;
  1777. display:flex;
  1778. flex-wrap:wrap;
  1779. }
  1780.  
  1781. /*-============================== message ==============================-*/
  1782.  
  1783. .faq{counter-reset:faq}
  1784.  
  1785. .faq ul{
  1786. display:grid;
  1787. padding:15px;
  1788. column-gap:15px;
  1789. align-items:center;
  1790. grid-template-columns:30px 1fr;
  1791. border-bottom:3px double rgb(var(--Borders));
  1792. }
  1793.  
  1794. .faq ul:last-of-type{border-bottom:0;}
  1795.  
  1796. .faq ul::before{
  1797. width:30px;
  1798. height:30px;
  1799. display:grid;
  1800. line-height:0;
  1801. flex-shrink:0;
  1802. font-size:18px;
  1803. border-radius:5px;
  1804. place-items:center;
  1805. content:counter(faq);
  1806. counter-increment:faq;
  1807. background:rgb(var(--Borders));
  1808. }
  1809.  
  1810. .faq-question{
  1811. cursor:help;
  1812. font-weight:700;
  1813. color:rgb(var(--Title));
  1814. }
  1815.  
  1816. .faq-answer{
  1817. display:none;
  1818. margin-top:15px;
  1819. padding-top:15px;
  1820. grid-column-start:2;
  1821. border-top:2px dotted rgb(var(--Borders));
  1822. }
  1823.  
  1824. .askbox{padding:20px;}
  1825.  
  1826. .askbox .title{
  1827. font-weight:700;
  1828. margin-bottom:15px;
  1829. padding-bottom:15px;
  1830. color:rgb(var(--Title));
  1831. border-bottom:2px dotted rgb(var(--Borders));
  1832. }
  1833.  
  1834. /*-============================== queries ==============================-*/
  1835.  
  1836. @media (max-width:450px){
  1837. a.blog span.blog-title{display:none;}
  1838. }
  1839.  
  1840. @media (max-width:1023px){
  1841. header,
  1842. .header-image{
  1843. margin:0;
  1844. width:100%;
  1845. }
  1846.  
  1847. .header-image,
  1848. .header-image img{border-radius:0;}
  1849.  
  1850. main{display:block;}
  1851.  
  1852. aside,
  1853. a.open-controls,
  1854. body > a.night,
  1855. .tmblr-iframe{display:none!important;}
  1856.  
  1857. header a.night{position:initial;}
  1858.  
  1859. main,
  1860. #posts,
  1861. #about,
  1862. #message{
  1863. width:75vw;
  1864. margin-inline:auto;
  1865. }
  1866. }
  1867.  
  1868.  
  1869. /*custom css*/
  1870. {CustomCSS}
  1871.  
  1872. </style>
  1873.  
  1874. </head>
  1875.  
  1876. <body>
  1877.  
  1878. <!--============================== header ==============================-->
  1879.  
  1880. {block:ifHeaderImage}
  1881. <div class="header-image">
  1882. <img src="{image:Header image}">
  1883. </div>
  1884. {/block:ifHeaderImage}
  1885.  
  1886. <header>
  1887. <a href="{blogurl}" class="blog">
  1888. <img src="{portraiturl-48}" class="blog-icon">
  1889. <span class="blog-title">{title}</span>
  1890. </a>
  1891.  
  1892. <nav>
  1893. <a href="{blogurl}" title="home">
  1894. <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">
  1895. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1896. <polyline points="5 12 3 12 12 3 21 12 19 12"></polyline>
  1897. <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>
  1898. <rect x="10" y="12" width="4" height="4"></rect>
  1899. </svg>
  1900. </a>
  1901.  
  1902. {block:AskEnabled}
  1903. {block:ifNotMessageSection}
  1904. <a href="/ask" title="message">
  1905. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mailbox" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  1906. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1907. <path d="M10 21v-6.5a3.5 3.5 0 0 0 -7 0v6.5h18v-6a4 4 0 0 0 -4 -4h-10.5"></path>
  1908. <path d="M12 11v-8h4l2 2l-2 2h-4"></path>
  1909. <path d="M6 15h1"></path>
  1910. </svg>
  1911. </a>
  1912. {/block:ifNotMessageSection}
  1913. {/block:AskEnabled}
  1914. <a class="open-menu" title="menu">
  1915. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-menu-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  1916. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1917. <line x1="4" y1="6" x2="20" y2="6"></line>
  1918. <line x1="4" y1="12" x2="20" y2="12"></line>
  1919. <line x1="4" y1="18" x2="20" y2="18"></line>
  1920. </svg>
  1921.  
  1922. <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="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  1923. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1924. <line x1="18" y1="6" x2="6" y2="18"></line>
  1925. <line x1="6" y1="6" x2="18" y2="18"></line>
  1926. </svg>
  1927. </a>
  1928.  
  1929. {block:homepage}
  1930. {block:ifAboutSection}
  1931. <a class="open-about" title="about">
  1932. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  1933. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1934. <circle cx="12" cy="7" r="4"></circle>
  1935. <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
  1936. </svg>
  1937.  
  1938. <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="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  1939. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1940. <line x1="18" y1="6" x2="6" y2="18"></line>
  1941. <line x1="6" y1="6" x2="18" y2="18"></line>
  1942. </svg>
  1943. </a>
  1944. {/block:ifAboutSection}
  1945.  
  1946. {block:ifMessageSection}
  1947. <a class="open-message" title="message">
  1948. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  1949. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1950. <path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z"></path>
  1951. <path d="M3 7l9 6l9 -6"></path>
  1952. </svg>
  1953.  
  1954. <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="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  1955. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1956. <line x1="18" y1="6" x2="6" y2="18"></line>
  1957. <line x1="6" y1="6" x2="18" y2="18"></line>
  1958. </svg>
  1959. </a>
  1960. {/block:ifMessageSection}
  1961. {/block:homepage}
  1962.  
  1963. <a href="/archive" title="history">
  1964. <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">
  1965. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1966. <polyline points="12 8 12 12 14 14"></polyline>
  1967. <path d="M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5"></path>
  1968. </svg>
  1969. </a>
  1970.  
  1971. {block:ifNotFullWidthHeader}
  1972. <a class="night" onclick="themeToggle()" title="dark mode">
  1973. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-sun sun" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  1974. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1975. <circle cx="12" cy="12" r="4"></circle>
  1976. <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path>
  1977. </svg>
  1978.  
  1979. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-moon-stars moon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  1980. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1981. <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path>
  1982. <path d="M17 4a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2"></path>
  1983. <path d="M19 11h2m-1 -1v2"></path>
  1984. </svg>
  1985. </a>
  1986. {block:ifNotFullWidthHeader}
  1987.  
  1988. {block:ifFullWidthHeader}
  1989. <a class="open-controls" title="open controls">
  1990. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-tool" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  1991. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1992. <path d="M7 10h3v-3l-3.5 -3.5a6 6 0 0 1 8 8l6 6a2 2 0 0 1 -3 3l-6 -6a6 6 0 0 1 -8 -8l3.5 3.5"></path>
  1993. </svg>
  1994.  
  1995. <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="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  1996. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  1997. <line x1="18" y1="6" x2="6" y2="18"></line>
  1998. <line x1="6" y1="6" x2="18" y2="18"></line>
  1999. </svg>
  2000. </a>
  2001.  
  2002. <a class="night" onclick="themeToggle()" title="dark mode">
  2003. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-sun sun" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  2004. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2005. <circle cx="12" cy="12" r="4"></circle>
  2006. <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path>
  2007. </svg>
  2008.  
  2009. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-moon-stars moon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  2010. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2011. <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path>
  2012. <path d="M17 4a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2"></path>
  2013. <path d="M19 11h2m-1 -1v2"></path>
  2014. </svg>
  2015. </a>
  2016.  
  2017. {/block:ifFullWidthHeader}
  2018. </nav>
  2019.  
  2020. <div class="dropdown" style="display:none;">
  2021. <ul>
  2022. {block:ifLinkOneTitle}
  2023. <li><a href="{text:link one url}">{text:link one title}</a></li>
  2024. {/block:ifLinkOneTitle}
  2025.  
  2026. {block:ifLinkTwoTitle}
  2027. <li><a href="{text:link two url}">{text:link two title}</a></li>
  2028. {/block:ifLinkTwoTitle}
  2029.  
  2030. {block:ifLinkThreeTitle}
  2031. <li><a href="{text:link three url}">{text:link three title}</a></li>
  2032. {/block:ifLinkThreeTitle}
  2033.  
  2034. {block:ifLinkFourTitle}
  2035. <li><a href="{text:link four url}">{text:link four title}</a></li>
  2036. {/block:ifLinkFourTitle}
  2037.  
  2038. {block:ifLinkFiveTitle}
  2039. <li><a href="{text:link five url}">{text:link five title}</a></li>
  2040. {/block:ifLinkFiveTitle}
  2041.  
  2042. {block:HasPages}
  2043. {block:Pages}
  2044. <li><a href="{URL}">{Label}</a></li>
  2045. {/block:Pages}
  2046. {/block:HasPages}
  2047. </ul>
  2048. </div>
  2049. </header>
  2050.  
  2051. <!--============================== content ==============================-->
  2052.  
  2053. <main layout="{select:Sidebar direction}">
  2054.  
  2055. <!--------------------------------- sidebar --------------------------------->
  2056. <aside>
  2057.  
  2058. <section>
  2059. <div class="blog">
  2060. <span class="small-icon">
  2061. <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">
  2062. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2063. <circle cx="12" cy="12" r="4"></circle>
  2064. <path d="M16 12v1.5a2.5 2.5 0 0 0 5 0v-1.5a9 9 0 1 0 -5.5 8.28"></path>
  2065. </svg>
  2066. </span>
  2067.  
  2068. <span class="blog-user">{name}</span>
  2069. </div>
  2070.  
  2071. {block:ifSidebarDescription}
  2072. <div class="description">{text:Sidebar description}</div>
  2073. {/block:ifSidebarDescription}
  2074. </section>
  2075. </aside>
  2076.  
  2077. <!--------------------------------- posts --------------------------------->
  2078. <section id="posts">
  2079.  
  2080. {block:SearchPage}
  2081. <article class="result">
  2082. <!----- no search result callback ----->
  2083. {block:NoSearchResults}
  2084. {lang:No search results for SearchQuery 2}
  2085. {/block:NoSearchResults}
  2086.  
  2087. <!----- search result ----->
  2088. {lang:SearchResultCount results for SearchQuery 2}
  2089. </article>
  2090. {/block:SearchPage}
  2091.  
  2092. <!----- no posts callback ----->
  2093. {block:NoPosts}
  2094. <article class="result">
  2095. {lang:This minimalist Tumblr has no posts}
  2096. </article>
  2097. {/block:NoPosts}
  2098.  
  2099. <!----- tag counter result ----->
  2100. {block:TagPage}
  2101. <article class="result">
  2102. {lang:TagResultCount posts tagged Tag 2}
  2103. </article>
  2104. {/block:TagPage}
  2105.  
  2106. <!----- day page result ----->
  2107. {block:DayPage}
  2108. <article class="result">
  2109. {lang:Posted on DayOfWeek DayOfMonth Month Year 2}
  2110. </article>
  2111. {/block:DayPage}
  2112.  
  2113. <!----- entries ----->
  2114. {block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  2115.  
  2116. <article post-type="{posttype}" class="post {block:caption}captioned{/block:caption} {block:PinnedPostLabel}pinned{/block:PinnedPostLabel}" id="{postid}">
  2117.  
  2118. <!----- pinned posts indicator ----->
  2119. {block:indexpage}
  2120. {block:PinnedPostLabel}
  2121. <div class="pin">
  2122. <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="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  2123. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2124. <path d="M15 4.5l-4 4l-4 1.5l-1.5 1.5l7 7l1.5 -1.5l1.5 -4l4 -4"></path>
  2125. <line x1="9" y1="15" x2="4.5" y2="19.5"></line>
  2126. <line x1="14.5" y1="4" x2="20" y2="9.5"></line>
  2127. </svg>
  2128.  
  2129. <span>{PinnedPostLabel}</span>
  2130. </div>
  2131. {/block:PinnedPostLabel}
  2132. {/block:indexpage}
  2133.  
  2134. <!----- quote posts ----->
  2135. {block:Quote}
  2136. <div class="quote">
  2137. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-blockquote" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  2138. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2139. <path d="M6 15h15"></path>
  2140. <path d="M21 19h-15"></path>
  2141. <path d="M15 11h6"></path>
  2142. <path d="M21 7h-6"></path>
  2143. <path d="M9 9h1a1 1 0 1 1 -1 1v-2.5a2 2 0 0 1 2 -2"></path>
  2144. <path d="M3 9h1a1 1 0 1 1 -1 1v-2.5a2 2 0 0 1 2 -2"></path>
  2145. </svg>
  2146.  
  2147. <div class="q">{quote}</div>
  2148.  
  2149. {block:Source}
  2150. <div class="source">{source}</div>
  2151. {/block:Source}
  2152. </div>
  2153.  
  2154. {/block:Quote}
  2155.  
  2156. <!----- text posts ----->
  2157. {block:Text}
  2158. {block:Title}
  2159. <div class="post-title">{title}</div>
  2160. {/block:Title}
  2161.  
  2162. {block:RebloggedFrom}
  2163. <div class="captions">
  2164. {block:Reblogs}
  2165. <li class="comment">
  2166. {block:IsActive}
  2167. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">
  2168. <img src="{portraiturl-64}"/>
  2169. <span>{username}</span>
  2170. </a>
  2171. {/block:IsActive}
  2172.  
  2173. {block:IsDeactivated}
  2174. <span class="user deactivated">
  2175. <img src="{portraiturl-64}"/>
  2176. <span>{username}</span>
  2177. </span>
  2178. {/block:IsDeactivated}
  2179. <div class="tex">{body}</div>
  2180. </li>
  2181. {/block:Reblogs}
  2182. </div>
  2183. {/block:RebloggedFrom}
  2184.  
  2185. {block:NotReblog}
  2186. <div class="captions">
  2187. <li class="comment">
  2188. <div class="tex">{body}</div>
  2189. </li>
  2190. </div>
  2191. {/block:NotReblog}
  2192. {/block:Text}
  2193.  
  2194. <!----- link posts ----->
  2195. {block:Link}
  2196. <a href="{URL}" {Target} class="link">
  2197. {block:Thumbnail}
  2198. <img src="{Thumbnail-HighRes}" class="thumbnail"/>
  2199. {/block:Thumbnail}
  2200.  
  2201. <div class="link-info">
  2202. <div class="link-name">{name}</div>
  2203.  
  2204. {block:Host}
  2205. <div class="host">{Host}</div>
  2206. {/block:Host}
  2207. </div>
  2208.  
  2209. </a>
  2210.  
  2211. {block:RebloggedFrom}
  2212. <div class="captions">
  2213. {block:Reblogs}
  2214. <li class="comment">
  2215. {block:IsActive}
  2216. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">
  2217. <img src="{portraiturl-64}"/>
  2218. <span>{username}</span>
  2219. </a>
  2220. {/block:IsActive}
  2221.  
  2222. {block:IsDeactivated}
  2223. <span class="user deactivated">
  2224. <img src="{portraiturl-64}"/>
  2225. <span>{username}</span>
  2226. </span>
  2227. {/block:IsDeactivated}
  2228. <div class="tex">{body}</div>
  2229. </li>
  2230. {/block:Reblogs}
  2231. </div>
  2232. {/block:RebloggedFrom}
  2233.  
  2234. {block:Description}
  2235. {block:NotReblog}
  2236. <div class="captions">
  2237. <li class="comment">
  2238. <div class="tex">{description}</div>
  2239. </li>
  2240. </div>
  2241. {/block:NotReblog}
  2242. {/block:Description}
  2243. {/block:Link}
  2244.  
  2245. <!----- chat posts ----->
  2246. {block:Chat}
  2247. {block:Title}
  2248. <div class="post-title">{title}</div>
  2249. {/block:Title}
  2250.  
  2251. <ol class="chat">
  2252. {block:lines}
  2253. <li class="l {Alt}">
  2254. {block:label}<span class="label">{label}</span>{/block:label} {line}
  2255. </li>
  2256. {/block:lines}
  2257. </ol>
  2258. {/block:Chat}
  2259.  
  2260. <!----- photo posts ----->
  2261. {block:Photo}
  2262. <div class="photo">
  2263. {linkopentag}
  2264. <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">
  2265. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}">
  2266. </a>
  2267. {linkclosetag}
  2268. </div>
  2269.  
  2270. {block:caption}
  2271. <div class="captions">
  2272. {block:Reblogs}
  2273. <li class="comment">
  2274. {block:IsActive}
  2275. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">
  2276. <img src="{portraiturl-64}"/>
  2277. <span>{username}</span>
  2278. </a>
  2279. {/block:IsActive}
  2280.  
  2281. {block:IsDeactivated}
  2282. <span class="user deactivated">
  2283. <img src="{portraiturl-64}"/>
  2284. <span>{username}</span>
  2285. </span>
  2286. {/block:IsDeactivated}
  2287. <div class="tex">{body}</div>
  2288. </li>
  2289. {/block:Reblogs}
  2290.  
  2291. {block:NotReblog}
  2292. <li class="comment">
  2293. <div class="tex">{caption}</div>
  2294. </li>
  2295. {/block:NotReblog}
  2296. </div>
  2297. {/block:caption}
  2298. {/block:Photo}
  2299.  
  2300. <!----- photoset posts ----->
  2301. {block:Photoset}
  2302. <div class="photo">
  2303. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  2304. {block:Photos}
  2305. <div class="photo-data">
  2306. <div class="pxu-photo">
  2307. <img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" alt="{PhotoAlt}">
  2308. </div>
  2309. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  2310. </div>
  2311. {/block:Photos}
  2312.  
  2313. </div>
  2314. </div>
  2315.  
  2316. {block:caption}
  2317. <div class="captions">
  2318. {block:Reblogs}
  2319. <li class="comment">
  2320. {block:IsActive}
  2321. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">
  2322. <img src="{portraiturl-64}"/>
  2323. <span>{username}</span>
  2324. </a>
  2325. {/block:IsActive}
  2326.  
  2327. {block:IsDeactivated}
  2328. <span class="user deactivated">
  2329. <img src="{portraiturl-64}"/>
  2330. <span>{username}</span>
  2331. </span>
  2332. {/block:IsDeactivated}
  2333. <div class="tex">{body}</div>
  2334. </li>
  2335. {/block:Reblogs}
  2336.  
  2337. {block:NotReblog}
  2338. <li class="comment">
  2339. <div class="tex">{caption}</div>
  2340. </li>
  2341. {/block:NotReblog}
  2342. </div>
  2343. {/block:caption}
  2344. {/block:Photoset}
  2345.  
  2346. <!----- panorama posts ----->
  2347. {block:Panorama}
  2348. <div class="photo">
  2349. {LinkOpenTag}
  2350. <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">
  2351. <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" />
  2352. </a>
  2353. {LinkCloseTag}
  2354. </div>
  2355.  
  2356. {block:caption}
  2357. <div class="captions">
  2358. {block:Reblogs}
  2359. <li class="comment">
  2360. {block:IsActive}
  2361. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">
  2362. <img src="{portraiturl-64}"/>
  2363. <span>{username}</span>
  2364. </a>
  2365. {/block:IsActive}
  2366.  
  2367. {block:IsDeactivated}
  2368. <span class="user deactivated">
  2369. <img src="{portraiturl-64}"/>
  2370. <span>{username}</span>
  2371. </span>
  2372. {/block:IsDeactivated}
  2373. <div class="tex">{body}</div>
  2374. </li>
  2375. {/block:Reblogs}
  2376.  
  2377. {block:NotReblog}
  2378. <li class="comment">
  2379. <div class="tex">{caption}</div>
  2380. </li>
  2381. {/block:NotReblog}
  2382. </div>
  2383. {/block:caption}
  2384. {/block:Panorama}
  2385.  
  2386. <!----- video posts ----->
  2387. {block:Video}
  2388. <div class="photo video">{video-500}</div>
  2389.  
  2390. {block:caption}
  2391. <div class="captions">
  2392. {block:Reblogs}
  2393. <li class="comment">
  2394. {block:IsActive}
  2395. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">
  2396. <img src="{portraiturl-64}"/>
  2397. <span>{username}</span>
  2398. </a>
  2399. {/block:IsActive}
  2400.  
  2401. {block:IsDeactivated}
  2402. <span class="user deactivated">
  2403. <img src="{portraiturl-64}"/>
  2404. <span>{username}</span>
  2405. </span>
  2406. {/block:IsDeactivated}
  2407. <div class="tex">{body}</div>
  2408. </li>
  2409. {/block:Reblogs}
  2410.  
  2411. {block:NotReblog}
  2412. <li class="comment">
  2413. <div class="tex">{caption}</div>
  2414. </li>
  2415. {/block:NotReblog}
  2416. </div>
  2417. {/block:caption}
  2418. {/block:Video}
  2419.  
  2420. <!----- audio posts ----->
  2421. {block:Audio}
  2422. <div class="audio">
  2423. {block:AudioPlayer}
  2424. <div class="audio_info">
  2425. {block:AlbumArt}
  2426. <img src="{AlbumArtURL}" class="album-art"/>
  2427. {/block:AlbumArt}
  2428.  
  2429. <ul>
  2430. {block:TrackName}
  2431. <li class="track">
  2432. {TrackName}
  2433. </li>
  2434. {/block:TrackName}
  2435.  
  2436. {block:Artist}
  2437. <li class="artist">
  2438. {Artist}
  2439. </li>
  2440. {/block:Artist}
  2441.  
  2442. <li class="audio-time">
  2443. {audio:CurrentPlayTime}
  2444. {audio:PlayTimeLeft}
  2445. </li>
  2446. </ul>
  2447. </div>
  2448.  
  2449. <div class="player-controls">
  2450.  
  2451. <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">
  2452. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2453. <path d="M4 12v-3a3 3 0 0 1 3 -3h13m-3 -3l3 3l-3 3"></path>
  2454. <path d="M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3 -3l3 -3"></path>
  2455. </svg>
  2456.  
  2457. <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">
  2458. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2459. <path d="M20 5v14l-12 -7z"></path>
  2460. <line x1="4" y1="5" x2="4" y2="19"></line>
  2461. </svg>
  2462.  
  2463. <div class="player">
  2464. {AudioPlayer}
  2465. {audio:AudioButtons}
  2466. </div>
  2467.  
  2468. <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">
  2469. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2470. <path d="M4 5v14l12 -7z"></path>
  2471. <line x1="20" y1="5" x2="20" y2="19"></line>
  2472. </svg>
  2473.  
  2474. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrows-shuffle" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  2475. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2476. <path d="M18 4l3 3l-3 3"></path>
  2477. <path d="M18 20l3 -3l-3 -3"></path>
  2478. <path d="M3 7h3a5 5 0 0 1 5 5a5 5 0 0 0 5 5h5"></path>
  2479. <path d="M21 7h-5a4.978 4.978 0 0 0 -2.998 .998m-4.002 8.003a4.984 4.984 0 0 1 -3 .999h-3"></path>
  2480. </svg>
  2481. </div>
  2482.  
  2483. {/block:AudioPlayer}
  2484. </div>
  2485.  
  2486. {block:caption}
  2487. <div class="captions">
  2488. {block:Reblogs}
  2489. <li class="comment">
  2490. {block:IsActive}
  2491. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">
  2492. <img src="{portraiturl-64}"/>
  2493. <span>{username}</span>
  2494. </a>
  2495. {/block:IsActive}
  2496.  
  2497. {block:IsDeactivated}
  2498. <span class="user deactivated">
  2499. <img src="{portraiturl-64}"/>
  2500. <span>{username}</span>
  2501. </span>
  2502. {/block:IsDeactivated}
  2503. <div class="tex">{body}</div>
  2504. </li>
  2505. {/block:Reblogs}
  2506.  
  2507. {block:NotReblog}
  2508. <li class="comment">
  2509. <div class="tex">{caption}</div>
  2510. </li>
  2511. {/block:NotReblog}
  2512. </div>
  2513. {/block:caption}
  2514. {/block:Audio}
  2515.  
  2516. <!----- answer posts ----->
  2517. {block:Answer}
  2518. <div class="question">
  2519. <div class="as">
  2520. <img src="{askerportraiturl-64}" class="icon">
  2521.  
  2522. <div class="user">{asker}</div>
  2523.  
  2524. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-question-mark" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  2525. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2526. <path d="M8 8a3.5 3 0 0 1 3.5 -3h1a3.5 3 0 0 1 3.5 3a3 3 0 0 1 -2 3a3 4 0 0 0 -2 4"></path>
  2527. <line x1="12" y1="19" x2="12" y2="19.01"></line>
  2528. </svg>
  2529. </div>
  2530.  
  2531. <div class="tex">{question}</div>
  2532. </div>
  2533.  
  2534. {block:Answerer}
  2535. <div class="answer">
  2536. <div class="as">
  2537. <img src="{answererportraiturl-64}" class="icon">
  2538.  
  2539. <div class="user">{answerer}</div>
  2540.  
  2541. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail-opened" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  2542. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2543. <polyline points="3 9 12 15 21 9 12 3 3 9"></polyline>
  2544. <path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10"></path>
  2545. <line x1="3" y1="19" x2="9" y2="13"></line>
  2546. <line x1="15" y1="13" x2="21" y2="19"></line>
  2547. </svg>
  2548. </div>
  2549.  
  2550. <div class="tex">{answer}</div>
  2551. </div>
  2552. {/block:Answerer}
  2553.  
  2554. {block:NotReblog}
  2555. <div class="answer">
  2556. <div class="as">
  2557. <img src="{portraiturl-64}" class="icon">
  2558.  
  2559. <div class="user"><a href="{permalink}">{name}</a></div>
  2560.  
  2561. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail-opened" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  2562. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2563. <polyline points="3 9 12 15 21 9 12 3 3 9"></polyline>
  2564. <path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10"></path>
  2565. <line x1="3" y1="19" x2="9" y2="13"></line>
  2566. <line x1="15" y1="13" x2="21" y2="19"></line>
  2567. </svg>
  2568. </div>
  2569.  
  2570. <div class="tex">{replies}</div>
  2571. </div>
  2572. {/block:NotReblog}
  2573.  
  2574. {block:RebloggedFrom}
  2575. {block:Reblogs}
  2576. <div class="answer">
  2577. <div class="as">
  2578. <img src="{portraiturl-64}" class="icon">
  2579.  
  2580. <div class="user"><a href="{permalink}">{username}</a></div>
  2581. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail-opened" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  2582. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2583. <polyline points="3 9 12 15 21 9 12 3 3 9"></polyline>
  2584. <path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10"></path>
  2585. <line x1="3" y1="19" x2="9" y2="13"></line>
  2586. <line x1="15" y1="13" x2="21" y2="19"></line>
  2587. </svg>
  2588. </div>
  2589.  
  2590. <div class="tex">{body}</div>
  2591. </div>
  2592. {/block:Reblogs}
  2593. {/block:RebloggedFrom}
  2594. {/block:Answer}
  2595.  
  2596. <!----- posts footer ----->
  2597. {block:date}
  2598.  
  2599. {block:hastags}
  2600. <div class="tags" {block:ifToggleTags}style="display:none;"{/block:ifToggleTags}>
  2601. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-tags" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  2602. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2603. <path d="M7.859 6h-2.834a2.025 2.025 0 0 0 -2.025 2.025v2.834c0 .537 .213 1.052 .593 1.432l6.116 6.116a2.025 2.025 0 0 0 2.864 0l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-6.117 -6.116a2.025 2.025 0 0 0 -1.431 -.593z"></path>
  2604. <path d="M17.573 18.407l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-7.117 -7.116"></path>
  2605. <path d="M6 9h-.01"></path>
  2606. </svg>
  2607.  
  2608. <div>
  2609. {block:Tags}
  2610. <a href="{TagUrl}">#{Tag}</a>
  2611. {/block:Tags}
  2612. </div>
  2613.  
  2614. </div>
  2615. {/block:hasTags}
  2616.  
  2617.  
  2618. <div class="when">
  2619. {block:NoteCount}
  2620. <a {block:ifPostNotes}{block:indexpage}href="{postNotesURL}" rel="{postID}" title="open notes"{/block:indexpage}{/block:ifPostNotes} {block:ifNotPostNotes}href="{permalink}"{/block:ifNotPostNotes}class="{block:ifPostNotes}notes-button{/block:ifPostNotes} notecount">
  2621. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-activity" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  2622. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2623. <path d="M3 12h4l3 8l4 -16l3 8h4"></path>
  2624. </svg>
  2625. <span>{NoteCountWithLabel}</span>
  2626. </a>
  2627. {/block:NoteCount}
  2628.  
  2629. <a href="#" class="like-button" title="like">
  2630. {LikeButton size="100"}
  2631. <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">
  2632. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2633. <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
  2634. </svg>
  2635. </a>
  2636.  
  2637. <a href="{ReblogURL}" class="reblog-button" title="reblog">
  2638. <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">
  2639. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2640. <path d="M4 12v-3a3 3 0 0 1 3 -3h13m-3 -3l3 3l-3 3"></path>
  2641. <path d="M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3 -3l3 -3"></path>
  2642. </svg>
  2643. </a>
  2644.  
  2645. <a href="{permalink}" title="permalink">
  2646. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bookmark" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  2647. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2648. <path d="M9 4h6a2 2 0 0 1 2 2v14l-5 -3l-5 3v-14a2 2 0 0 1 2 -2"></path>
  2649. </svg>
  2650. </a>
  2651.  
  2652. {block:ifToggleTags}
  2653. {block:HasTags}
  2654. <a href="#" title="tags" class="open-tags">
  2655. <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.75" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  2656. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2657. <path d="M5 9l14 0"></path>
  2658. <path d="M5 15l14 0"></path>
  2659. <path d="M11 4l-4 16"></path>
  2660. <path d="M17 4l-4 16"></path>
  2661. </svg>
  2662.  
  2663. <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="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  2664. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2665. <line x1="18" y1="6" x2="6" y2="18"></line>
  2666. <line x1="6" y1="6" x2="18" y2="18"></line>
  2667. </svg>
  2668. </a>
  2669. {block:HasTags}
  2670. {/block:ifToggleTags}
  2671.  
  2672. {block:ContentSource}
  2673. <a href="{SourceURL}" title="source" target="_blank" class="source-button">
  2674. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  2675. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2676. <circle cx="12" cy="7" r="4"></circle>
  2677. <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
  2678. </svg>
  2679. </a>
  2680. {/block:ContentSource}
  2681.  
  2682. {block:ifPostDate}
  2683. <span class="post-date">
  2684. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar-time" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  2685. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2686. <path d="M11.795 21h-6.795a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4"></path>
  2687. <circle cx="18" cy="18" r="4"></circle>
  2688. <path d="M15 3v4"></path>
  2689. <path d="M7 3v4"></path>
  2690. <path d="M3 11h16"></path>
  2691. <path d="M18 16.496v1.504l1 1"></path>
  2692. </svg>
  2693. {Month} {DayOfMonthWithZero}{DayOfMonthSuffix}
  2694. </span>
  2695. {/block:ifPostDate}
  2696. </div>
  2697.  
  2698. {block:indexpage}
  2699. <div class="notes-container" id="notes-{postID}" style="display:none;">
  2700. <div class="loading">
  2701. <div></div>
  2702. <div></div>
  2703. <div></div>
  2704. </div>
  2705.  
  2706. <div class="notes-content">
  2707. <div class="notes-loader">
  2708. </div>
  2709. </div>
  2710. </div>
  2711. {/block:indexpage}
  2712.  
  2713. {/block:date}
  2714.  
  2715. </article>
  2716.  
  2717. <!----- posts notes ----->
  2718. {block:permalinkpage}
  2719. <!-----posts info ----->
  2720. {block:Date}
  2721.  
  2722. <article class="post perma-info">
  2723. <li class="posted">
  2724. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar-time" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  2725. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2726. <path d="M11.795 21h-6.795a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4"></path>
  2727. <circle cx="18" cy="18" r="4"></circle>
  2728. <path d="M15 3v4"></path>
  2729. <path d="M7 3v4"></path>
  2730. <path d="M3 11h16"></path>
  2731. <path d="M18 16.496v1.504l1 1"></path>
  2732. </svg>
  2733.  
  2734. posted on <a href="/day/{year}/{MonthNumberWithZero}/{DayOfMonthWithZero}">{Month} {DayOfMonthWithZero}{DayOfMonthSuffix} {Year}</a>
  2735. </li>
  2736.  
  2737. {block:RebloggedFrom}
  2738. <li class="via-blog">
  2739. <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">
  2740. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2741. <path d="M4 12v-3a3 3 0 0 1 3 -3h13m-3 -3l3 3l-3 3"></path>
  2742. <path d="M20 12v3a3 3 0 0 1 -3 3h-13m3 3l-3 -3l3 -3"></path>
  2743. </svg>
  2744.  
  2745. reblogged from <a href="{reblogparenturl}">{reblogparentname}</a>
  2746. </li>
  2747.  
  2748. <li class="source-blog">
  2749. <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">
  2750. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2751. <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5"></path>
  2752. <line x1="10" y1="14" x2="20" y2="4"></line>
  2753. <polyline points="15 4 20 4 20 9"></polyline>
  2754. </svg>
  2755.  
  2756. original post by <a href="{reblogrooturl}">{reblogrootname}</a>
  2757. </li>
  2758. {block:RebloggedFrom}
  2759.  
  2760. {block:NotReblog}
  2761.  
  2762. <li class="original-post">
  2763. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  2764. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2765. <circle cx="12" cy="7" r="4"></circle>
  2766. <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
  2767. </svg>
  2768.  
  2769. original post
  2770. </li>
  2771. {/block:NotReblog}
  2772. </article>
  2773. {/block:Date}
  2774.  
  2775. <!----- notes ----->
  2776. {block:PostNotes}
  2777. <article class="post pagenotes">
  2778. {block:NoteCount}
  2779. <div class="post-title">
  2780. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-activity" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  2781. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2782. <path d="M3 12h4l3 8l4 -16l3 8h4"></path>
  2783. </svg>
  2784. {NoteCountWithLabel}
  2785. </div>
  2786. {/block:NoteCount}
  2787. {PostNotes-64}
  2788. </article>
  2789. {/block:PostNotes}
  2790.  
  2791. {/block:permalinkpage}
  2792.  
  2793. {/block:Posts}
  2794. </section> <!-- #posts -->
  2795.  
  2796. <!--------------------------------- about --------------------------------->
  2797. {block:homepage}
  2798. {block:ifAboutSection}
  2799. <section id="about" style="display:none;">
  2800. <img src="{image:About image}" class="about-image">
  2801.  
  2802. <!---------- your info ---------->
  2803. <div class="main-info">
  2804.  
  2805. <!----- your name ----->
  2806. <li class="name">
  2807. sasa
  2808. </li>
  2809.  
  2810. <!----- your pronouns ----->
  2811. <li class="pronouns">
  2812. she/her
  2813. </li>
  2814.  
  2815. <!----- your location ----->
  2816. <li class="location">
  2817. solar system
  2818. </li>
  2819.  
  2820. <!----- your likes ----->
  2821. <li class="likes">
  2822. acai bowl, barbecue, kpop, action movies
  2823. </li>
  2824.  
  2825. <!----- your dislikes ----->
  2826. <li class="dislikes">
  2827. chocolate, terror movies, gore, fish
  2828. </li>
  2829. </div>
  2830.  
  2831. <!---------- about text ---------->
  2832. <div class="about-text">
  2833. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae turpis ac mi condimentum vehicula. Fusce diam arcu, vulputate ac tincidunt ac, cursus at leo. Nullam sit amet gravida leo. Morbi egestas sapien vitae lectus aliquam, eu pharetra justo ultricies. Vestibulum luctus metus nisl, sit amet hendrerit velit tempor vitae. In convallis nisl vitae libero rhoncus mollis. Etiam ultrices arcu sed arcu mattis interdum. Donec non porttitor tellus, non cursus sapien. Maecenas accumsan tellus arcu, eget interdum massa ullamcorper sed. Morbi pharetra ipsum sed diam convallis, in blandit nulla condimentum. Integer eget dolor et magna pretium porttitor.
  2834. </div>
  2835.  
  2836. <!---------- links and tags ---------->
  2837. <div class="link-tag">
  2838. <!----- links ----->
  2839. <nav class="about-links">
  2840. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  2841. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2842. <path d="M9 15l6 -6"></path>
  2843. <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464"></path>
  2844. <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463"></path>
  2845. </svg>
  2846.  
  2847. <div>
  2848. <a href="">link title</a>
  2849. <a href="">link title</a>
  2850. <a href="">link title</a>
  2851. <a href="">link title</a>
  2852. <a href="">link title</a>
  2853. </div>
  2854. </nav>
  2855.  
  2856. <!----- tags ----->
  2857. <nav class="about-tags">
  2858. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-tags" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  2859. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2860. <path d="M7.859 6h-2.834a2.025 2.025 0 0 0 -2.025 2.025v2.834c0 .537 .213 1.052 .593 1.432l6.116 6.116a2.025 2.025 0 0 0 2.864 0l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-6.117 -6.116a2.025 2.025 0 0 0 -1.431 -.593z"></path>
  2861. <path d="M17.573 18.407l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-7.117 -7.116"></path>
  2862. <path d="M6 9h-.01"></path>
  2863. </svg>
  2864.  
  2865. <div>
  2866. <a href="">link title</a>
  2867. <a href="">link title</a>
  2868. <a href="">link title</a>
  2869. <a href="">link title</a>
  2870. <a href="">link title</a>
  2871. </div>
  2872. </nav>
  2873. </div>
  2874. </section>
  2875. {/block:ifAboutSection}
  2876.  
  2877. <!--------------------------------- message --------------------------------->
  2878. {block:ifMessageSection}
  2879. <section id="message" style="display:none;">
  2880. <div class="faq">
  2881. <!---------- first question block ---------->
  2882. <ul>
  2883. <!----- question ----->
  2884. <li class="faq-question">
  2885. ask a question
  2886. </li>
  2887.  
  2888. <!----- answer ----->
  2889. <li class="faq-answer">
  2890. and answer it
  2891. </li>
  2892. </ul>
  2893.  
  2894. <!---------- second question block ---------->
  2895. <ul>
  2896. <!----- question ----->
  2897. <li class="faq-question">
  2898. ask a question
  2899. </li>
  2900.  
  2901. <!----- answer ----->
  2902. <li class="faq-answer">
  2903. and answer it
  2904. </li>
  2905. </ul>
  2906.  
  2907. <!---------- third question block ---------->
  2908. <ul>
  2909. <!----- question ----->
  2910. <li class="faq-question">
  2911. ask a question
  2912. </li>
  2913.  
  2914. <!----- answer ----->
  2915. <li class="faq-answer">
  2916. and answer it
  2917. </li>
  2918. </ul>
  2919.  
  2920. <!---------- fourth question block ---------->
  2921. <ul>
  2922. <!----- question ----->
  2923. <li class="faq-question">
  2924. ask a question
  2925. </li>
  2926.  
  2927. <!----- answer ----->
  2928. <li class="faq-answer">
  2929. and answer it
  2930. </li>
  2931. </ul>
  2932. </div>
  2933.  
  2934. {block:AskEnabled}
  2935. <div class="askbox">
  2936. <div class="title">{asklabel}</div>
  2937.  
  2938. <iframe frameborder="0" height="149" id="ask_form" scrolling="no" src="//www.tumblr.com/ask_form/{name}.tumblr.com" width="100%" style="background-color: transparent; overflow: hidden;"></iframe>
  2939. </div>
  2940. {/block:AskEnabled}
  2941. </section>
  2942. {/block:ifMessageSection}
  2943. {/block:homepage}
  2944. </main>
  2945.  
  2946. <!--============================== footer ==============================-->
  2947. <footer>
  2948. {block:Pagination}
  2949. <nav id="pagination">
  2950.  
  2951. <div>
  2952. <a {block:PreviousPage}class="active" href="{PreviousPage}"{/block:PreviousPage}>
  2953. previous
  2954. </a>
  2955.  
  2956. <span class="current_page">{CurrentPage} of {totalpages}</span>
  2957.  
  2958. <a {block:NextPage}class="active" href="{NextPage}"{/block:NextPage}>
  2959. next
  2960. </a>
  2961. </div>
  2962. </nav>
  2963. {/block:Pagination}
  2964.  
  2965. {block:DayPagination}
  2966. <nav id="pagination">
  2967. <div>
  2968. <a {block:PreviousPage}class="active" href="{PreviousPage}"{/block:PreviousPage}>
  2969. previous
  2970. </a>
  2971.  
  2972. <a {block:NextPage}class="active" href="{NextPage}"{/block:NextPage}>
  2973. next
  2974. </a>
  2975. </div>
  2976.  
  2977. </nav>
  2978. {/block:DayPagination}
  2979.  
  2980. <div class="search">
  2981. <form action="/search" method="get">
  2982. <input type="text" name="q" id="search" value="{SearchQuery}" placeholder="type here"/>
  2983.  
  2984. <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">
  2985. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  2986. <circle cx="10" cy="10" r="7"></circle>
  2987. <line x1="21" y1="21" x2="15" y2="15"></line>
  2988. </svg>
  2989. </form>
  2990.  
  2991. </div>
  2992.  
  2993. </footer>
  2994.  
  2995. {block:ifNotFullWidthHeader}
  2996. <!--============================== tumblr controls button ==============================-->
  2997. <a class="open-controls" title="open controls">
  2998. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-tool" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  2999. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  3000. <path d="M7 10h3v-3l-3.5 -3.5a6 6 0 0 1 8 8l6 6a2 2 0 0 1 -3 3l-6 -6a6 6 0 0 1 -8 -8l3.5 3.5"></path>
  3001. </svg>
  3002.  
  3003. <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="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  3004. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  3005. <line x1="18" y1="6" x2="6" y2="18"></line>
  3006. <line x1="6" y1="6" x2="18" y2="18"></line>
  3007. </svg>
  3008. </a>
  3009.  
  3010. <!--============================== mode button ==============================-->
  3011. <a class="night" onclick="themeToggle()" title="dark mode">
  3012. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-sun sun" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  3013. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  3014. <circle cx="12" cy="12" r="4"></circle>
  3015. <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path>
  3016. </svg>
  3017.  
  3018. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-moon-stars moon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  3019. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  3020. <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path>
  3021. <path d="M17 4a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2"></path>
  3022. <path d="M19 11h2m-1 -1v2"></path>
  3023. </svg>
  3024. </a>
  3025. {/block:ifNotFullWidthHeader}
  3026.  
  3027. <!--============================== back to top ==============================-->
  3028. <a class="back" style="display:none;" title="back to top">
  3029. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-big-top" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  3030. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  3031. <path d="M9 20v-8h-3.586a1 1 0 0 1 -.707 -1.707l6.586 -6.586a1 1 0 0 1 1.414 0l6.586 6.586a1 1 0 0 1 -.707 1.707h-3.586v8a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path>
  3032. </svg>
  3033. </a>
  3034.  
  3035. <!--============================== credits / don't touch ==============================-->
  3036. <a href="//kosmique.tumblr.com" target="_blank" class="credits" title="by kosmique">
  3037. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-star" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  3038. <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
  3039. <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path>
  3040. </svg>
  3041. </a>
  3042.  
  3043. <!--============================== scripts ==============================-->
  3044. <script>
  3045. $(document).ready(function(){
  3046.  
  3047. $('body').addClass('loaded', 1000);
  3048.  
  3049. //shorten notes counter - modified by kosmique
  3050. $('article').find('.notecount span').each(function(){
  3051. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  3052. if (n > 999 && n <= 999999) {
  3053. n = Math.floor(n / 100) / 10;
  3054. $(this).text(n + 'k notes');
  3055. }
  3056.  
  3057. if (n > 999999) {
  3058. n = Math.floor(n / 100000) / 10;
  3059. $(this).text(n + 'kk notes');
  3060. }
  3061. });
  3062.  
  3063. // photoset
  3064. $('.photo-slideshow').pxuPhotoset({
  3065. lightbox: true,
  3066. rounded: false,
  3067. gutter: '1px',
  3068. borderRadius: '0px',
  3069. photoset: '.photo-slideshow',
  3070. photoWrap: '.photo-data',
  3071. photo: '.pxu-photo'
  3072. });
  3073.  
  3074. // flexible frames
  3075. function flexFrame() {
  3076. $(".captions").each(function() {
  3077. $(this).find("iframe").wrap("<div class='capframe'></div>"); // wrap iframe
  3078. flexibleFrames($(".capframe"));
  3079. });
  3080. flexibleFrames($(".video"));
  3081. }
  3082.  
  3083. $(document).ready(flexFrame);
  3084.  
  3085. /// tooltips
  3086. tippy("[title]", {
  3087. theme: "kosmique",
  3088. duration: 300,
  3089. allowHTML: true,
  3090. arrow: false,
  3091. followCursor: true,
  3092. interactive: false,
  3093. inlinePositioning: false,
  3094. maxWidth: 300,
  3095. offset: [0, 20],
  3096. zIndex: 99999999999999999999999999999999999999,
  3097. placement: "top",
  3098. content(reference) {
  3099. const title = reference.getAttribute("title");
  3100. reference.removeAttribute("title");
  3101. return title
  3102. },
  3103. });
  3104.  
  3105. // remove blank captions
  3106. $('.captions').each(function() {
  3107. var $this = $(this);
  3108. if($this.html().replace(/\s|&nbsp;/g, '').length == 0)
  3109. $this.remove();
  3110. });
  3111.  
  3112. //back to top
  3113. $(document).scroll(function() {
  3114. var y = $(this).scrollTop();
  3115. if (y > 200) {$('.back').fadeIn();}
  3116. else {$('.back').fadeOut();}
  3117.  
  3118. if (y > 290) {$('.iframe-controls--desktop').addClass('stuck', 50);}
  3119. else {$('.iframe-controls--desktop').removeClass('stuck', 50);}
  3120.  
  3121. {block:ifNotHeaderImage}
  3122. if(y >= $('header').offset().top){$('header').attr('stuck','');}
  3123. else{$('header').removeAttr('stuck');}
  3124. {/block:ifNotHeaderImage}
  3125. });
  3126.  
  3127. $(".back").click(function() {
  3128. $("html, body").animate({scrollTop: 0}, 2500);
  3129. return false;
  3130. });
  3131.  
  3132. // tumblr controls
  3133. $('.open-controls').click(function(){
  3134. $(this).toggleClass('active')
  3135. $('.tmblr-iframe').toggleClass('active');
  3136. return false
  3137. }),
  3138. $('.open-tags').click(function(){
  3139. $(this).toggleClass('active')
  3140. $('.tags').slideToggle();
  3141. return false
  3142. }),
  3143. $('.faq-question').click(function(){
  3144. $(this).next('.faq-answer').slideToggle();
  3145. return false
  3146. }),
  3147. {block:homepage}
  3148. $('.open-about').click(function(){
  3149. $(this).toggleClass('active');
  3150. {block:ifHeaderImage}
  3151. {block:ifNotFullWidthHeader}$("html, body").animate({scrollTop: 350},250);{/block:ifNotFullWidthHeader}
  3152. {block:ifFullWidthHeader}$("html, body").animate({scrollTop: 300},250);{/block:ifFullWidthHeader}
  3153. {/block:ifHeaderImage}
  3154.  
  3155. {block:ifNotHeaderImage}
  3156. {block:ifNotFullWidthHeader}$("html, body").animate({scrollTop: 50},250);{block:ifNotFullWidthHeader}
  3157. {block:ifFullWidthHeader}$("html, body").animate({scrollTop: 0},250);{block:ifFullWidthHeader}
  3158. {/block:ifNotHeaderImage}
  3159.  
  3160. if($(this).hasClass("active")){
  3161. $('#posts,#message').delay(500).fadeOut();
  3162. $('#about').fadeIn(500);
  3163. $('.open-message').removeClass('active');
  3164. } else{500
  3165. $('#about').delay(500).fadeOut();
  3166. $('#posts').fadeIn(500);
  3167. }
  3168. return false
  3169. }),
  3170. $('.open-message').click(function(){
  3171. $(this).toggleClass('active');
  3172. {block:ifHeaderImage}
  3173. {block:ifNotFullWidthHeader}$("html, body").animate({scrollTop: 350},250);{/block:ifNotFullWidthHeader}
  3174. {block:ifFullWidthHeader}$("html, body").animate({scrollTop: 300},250);{/block:ifFullWidthHeader}
  3175. {/block:ifHeaderImage}
  3176.  
  3177. {block:ifNotHeaderImage}
  3178. {block:ifNotFullWidthHeader}$("html, body").animate({scrollTop: 50},250);{block:ifNotFullWidthHeader}
  3179. {block:ifFullWidthHeader}$("html, body").animate({scrollTop: 0},250);{block:ifFullWidthHeader}
  3180. {/block:ifNotHeaderImage}
  3181.  
  3182. if($(this).hasClass("active")){
  3183. $('#posts,#about').delay(500).fadeOut();
  3184. $('#message').fadeIn(500);
  3185. $('.open-about').removeClass('active');
  3186. } else{500
  3187. $('#message').delay(500).fadeOut();
  3188. $('#posts').fadeIn(500);
  3189. }
  3190. return false
  3191. }),
  3192. {/block:homepage}
  3193. $('.open-menu').click(function(){
  3194. $(this).toggleClass('active');
  3195. if($(this).hasClass("active")){
  3196. $('.dropdown').slideDown();
  3197. $('.dropdown ul').delay(500).addClass('active', 500);
  3198. } else{500
  3199. $('.dropdown').delay(500).slideUp();
  3200. $('.dropdown ul').removeClass('active', 500);
  3201. }
  3202. return false;
  3203. });
  3204.  
  3205. // custom audio
  3206. customAudio({
  3207. post: ".post",
  3208. default: false,
  3209. pauseAll: true,
  3210. 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>",
  3211. 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>",
  3212. 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>",
  3213. hideInfoIfError: true,
  3214. });
  3215.  
  3216. {block:indexpage}
  3217. //ajax notes
  3218. $("a.notes-button").each(function() {
  3219. var noteCount = $(this).html();
  3220. if (noteCount.indexOf(" ") != -1) {noteCount = parseInt(noteCount.substring(0,noteCount.indexOf(" ")));}
  3221. else {noteCount = parseInt(noteCount);}
  3222. if (noteCount > 0) {$(this).show();}
  3223. });
  3224.  
  3225. $("a.notes-button").click(function(event) {
  3226. event.preventDefault();
  3227. var node = $("#notes-"+$(this).attr("rel"));
  3228. $("#notes-"+$(this).attr("rel")).slideToggle();
  3229. $.ajax({ url: $(this).attr("href"), success: function(data){
  3230. node.find(".loading").hide();
  3231. node.find(".notes-loader").html(data)
  3232. } });
  3233. });
  3234.  
  3235. {/block:indexpage}
  3236. });
  3237.  
  3238. // remove tumblr's redirects
  3239. function noHrefLi(){
  3240. var linkSet = document.querySelectorAll('a[href*="href.li/?"]');
  3241. Array.prototype.forEach.call(linkSet,function(el,i){
  3242. var theLink = linkSet[i].getAttribute('href').split("href.li/?")[1];
  3243. linkSet[i].setAttribute("href",theLink);
  3244. });
  3245. }
  3246. noHrefLi();
  3247.  
  3248. // dark mode
  3249. (function() {
  3250. let onpageLoad = localStorage.getItem("body") || "";
  3251. let element = document.body;
  3252. element.classList.add(onpageLoad);
  3253. document.getElementsByTagName('body').textContent =
  3254. localStorage.getItem("body") || "light";
  3255. })();
  3256.  
  3257. function themeToggle() {
  3258. let element = document.body;
  3259. element.classList.toggle("dark-mode");
  3260.  
  3261. let theme = localStorage.getItem("body");
  3262. if (theme && theme === "dark-mode") {
  3263. localStorage.setItem("body", "");
  3264. } else {
  3265. localStorage.setItem("body", "dark-mode");
  3266. }
  3267.  
  3268. document.getElementsByTagName('body').textContent = localStorage.getItem("body");
  3269. }
  3270.  
  3271. </script>
  3272. </body></html>
Advertisement
Comments
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!