API tools faq
paste
Advertisement
kosmique

theme: canopus

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