API tools faq
paste
kosmique

theme: cherryverse

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