API tools faq
paste
Advertisement
kosmique

theme: dione

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