API tools faq
paste
Advertisement
seiche

theme one: celandine

seiche
Aug 1st, 2019 (edited)
7,587
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 38.83 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  5.  
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  9. <meta charset="utf-8">
  10.  
  11. <!---
  12.  
  13. CELANDINE THEME BY SEYCHE.TUMBLR.COM
  14.  
  15. CREDITS:
  16. -feather icons by Cole Bemis
  17. -pxu photosets by pixel union / with modifications by bychloethemes
  18. -npf photosets by codematurgy
  19. -tippy.js tooltips by atomiks
  20. -video resizing by nouvae
  21. -masonry by david desandro
  22. -remove redirects by magnusthemes
  23. (full list of credits @ seyche.tumblr.com/credits)
  24.  
  25. --->
  26.  
  27. <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700|Lora:400,400i,700,700i|Merriweather:400,400i,700,700i|PT+Serif:400,400i,700,700i" rel="stylesheet">
  28.  
  29. <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,700,700i|Heebo:400,700|Lato:400,400i,700,700i|Montserrat:400,400i,700,700i|Nunito+Sans:400,400i,700,700i" rel="stylesheet">
  30.  
  31. <!----- PHOTOSETS ----->
  32.  
  33. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  34.  
  35. <link href="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosetstyle.css" rel="stylesheet" type="text/css">
  36.  
  37. <!---- VARIABLES ----->
  38.  
  39. <meta name="color:Background" content="#ffffff"/>
  40. <meta name="color:Posts" content="#f2f2f2"/>
  41. <meta name="color:Text" content="#888888"/>
  42. <meta name="color:Link" content="#555555"/>
  43. <meta name="color:Accent" content="#e2d1bd"/>
  44. <meta name="color:Title"content="#212121"/>
  45. <meta name="color:Borders" content="#e0e0e0"/>
  46.  
  47. <meta name="select:Body Font" content="Lora" title="Lora"/>
  48. <meta name="select:Body Font" content="Libre Baskerville" title="Libre Baskerville"/>
  49. <meta name="select:Body Font" content="Georgia" title="Georgia"/>
  50. <meta name="select:Body Font" content="Merriweather" title="Merriweather"/>
  51. <meta name="select:Body Font" content="PT Serif" title="PT Serif"/>
  52. <meta name="select:Body Font" content="Lato" title="Lato"/>
  53. <meta name="select:Body Font" content="Fira Sans" title="Fira Sans"/>
  54. <meta name="select:Body Font" content="Heebo" title="Heebo"/>
  55. <meta name="select:Body Font" content="Nunito Sans" title="Nunito Sans"/>
  56.  
  57. <meta name="select:Title Font" content="Lato" title="Lato"/>
  58. <meta name="select:Title Font" content="Montserrat" title="Montserrat"/>
  59. <meta name="select:Title Font" content="Fira Sans" title="Fira Sans"/>
  60. <meta name="select:Title Font" content="Lora" title="Lora"/>
  61. <meta name="select:Title Font" content="Libre Baskerville" title="Libre Baskerville"/>
  62. <meta name="select:Title Font" content="Georgia" title="Georgia"/>
  63. <meta name="select:Title Font" content="Merriweather" title="Merriweather"/>
  64. <meta name="select:Title Font" content="PT Serif" title="PT Serif"/>
  65.  
  66. <meta name="select:Posts Width" content="540px" title="540px"/>
  67. <meta name="select:Posts Width" content="350px" title="350px"/>
  68. <meta name="select:Posts Width" content="400px" title="400px"/>
  69. <meta name="select:Posts Width" content="450px" title="450px"/>
  70. <meta name="select:Posts Width" content="500px" title="500px"/>
  71. <meta name="select:Posts Width" content="600px" title="600px"/>
  72. <meta name="select:Posts Width" content="650px" title="650px"/>
  73. <meta name="select:Posts Width" content="700px" title="700px"/>
  74.  
  75. <meta name="select:Photoset Gutter" content="1" title="1px"/>
  76. <meta name="select:Photoset Gutter" content="2" title="2px"/>
  77. <meta name="select:Photoset Gutter" content="3" title="3px"/>
  78. <meta name="select:Photoset Gutter" content="4" title="4px"/>
  79.  
  80. <meta name="if:Grid" content="0"/>
  81. <meta name="if:Icon" content="1"/>
  82. <meta name="if:Hide Caption" content="0"/>
  83. <meta name="if:Hide Tags" content="0"/>
  84. <meta name="if:Hide Note Count" content="1"/>
  85.  
  86. <meta name="select:Font Size" content="14px" title="14px"/>
  87. <meta name="select:Font Size" content="12px" title="12px"/>
  88. <meta name="select:Font Size" content="13px" title="13px"/>
  89. <meta name="select:Font Size" content="15px" title="15px"/>
  90. <meta name="select:Font Size" content="16px" title="16px"/>
  91. <meta name="select:Font Size" content="17px" title="17px"/>
  92. <meta name="select:Font Size" content="18px" title="18px"/>
  93.  
  94. <meta name="text:Post Margin" content="140"/>
  95.  
  96. <meta name="text:Home Link" content="home"/>
  97. <meta name="text:Ask Link" content="message"/>
  98. <meta name="text:Archive Link" content="history"/>
  99. <meta name="text:Link 1 URL" content="" />
  100. <meta name="text:Link 1" content="" />
  101. <meta name="text:Link 2 URL" content="" />
  102. <meta name="text:Link 2" content="" />
  103. <meta name="text:Link 3 URL" content="" />
  104. <meta name="text:Link 3" content="" />
  105.  
  106. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  107.  
  108. <script src="https://unpkg.com/feather-icons"></script>
  109.  
  110. <!----- LOAD IN ----->
  111.  
  112. <script>
  113. $(document).ready(function(){
  114. $(function() {
  115. $('body').removeClass('load-in');
  116. });
  117. });
  118. </script>
  119.  
  120. <style type="text/css">
  121.  
  122. @keyframes lazyload {
  123. 0% {opacity: 0;}
  124. 100% {opacity: 1;}
  125. }
  126.  
  127. @-webkit-keyframes lazyload {
  128. 0% {opacity: 0;}
  129. 100% {opacity: 1;}
  130. }
  131.  
  132. @-moz-keyframes lazyload {
  133. 0% {opacity: 0;}
  134. 100% {opacity: 1;}
  135. }
  136.  
  137. @-o-keyframes lazyload {
  138. 0% {opacity: 0;}
  139. 100% {opacity: 1;}
  140. }
  141.  
  142. body {
  143. font-family: '{select:body font}', serif;
  144. font-size: {select:font size};
  145. color: {color:text};
  146. background-color: {color:background};
  147. text-align: left;
  148. line-height: 160%;
  149. word-wrap: break-word;
  150. letter-spacing: 0.2px;
  151. margin: 0;
  152. padding: 0;
  153. -webkit-transition: 2s opacity;
  154. -moz-transition: 2s opacity;
  155. -ms-transition: 2s opacity;
  156. -o-transition: 2s opacity;
  157. transition: 2s opacity;
  158. }
  159.  
  160. body.load-in {
  161. opacity: 0;
  162. -webkit-transition: none;
  163. -moz-transition: none;
  164. -ms-transition: none;
  165. -o-transition: none;
  166. transition: none;
  167. }
  168.  
  169. a {
  170. text-decoration: none;
  171. color: {color:link};
  172. -webkit-transition: all 0.3s;
  173. -moz-transition: all 0.3s;
  174. -ms-transition: all 0.3s;
  175. -o-transition: all 0.3s;
  176. transition: all 0.3s;
  177. }
  178.  
  179. a:hover {
  180. color: {color:accent};
  181. -webkit-transition: all 0.3s;
  182. -moz-transition: all 0.3s;
  183. -ms-transition: all 0.3s;
  184. -o-transition: all 0.3s;
  185. transition: all 0.3s;
  186. }
  187.  
  188. p a, li a {border-bottom: 2px solid rgba({RGBcolor:accent}, 0.6);}
  189. p a:hover, li a:hover {border-bottom: 2px solid rgba({RGBcolor:accent}, 1.0);}
  190.  
  191. h1, h2, h3, h4, h5 {
  192. font-family: '{select:title font}', sans-serif;
  193. color: {color:title};
  194. letter-spacing: 2px;
  195. line-height: 160%;
  196. text-transform: uppercase;
  197. }
  198.  
  199. h1 a, h2 a, h3 a, h4 a, h5 a {color: {color:title};}
  200. h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover {color: {color:accent}}
  201. h1 {font-size: 1.25em;}
  202. h2 {font-size: 1.2em;}
  203. h3 {font-size: 1.1em;}
  204. h4 {font-size: 1em;}
  205. h5 {font-size: 0.9em;}
  206.  
  207. small {font-size: 0.9em;}
  208. big {font-size: 1.1em;}
  209. b, bold, strong {color: {color:title};}
  210. b a:hover, bold a:hover, strong a:hover {color: {color:accent};}
  211.  
  212. hr {
  213. height: 1px;
  214. border: none;
  215. background-color: {color:borders};
  216. }
  217.  
  218. ul {list-style-type: circle;}
  219. ol {list-style-type: decimal;}
  220. li {max-width: 100%;}
  221.  
  222. blockquote {
  223. padding: 0 0 0 1.25em;
  224. border-left: 1px solid {color:borders};
  225. margin: 1.25em 0 1.25em 1.25em;
  226. }
  227.  
  228. .tippy-tooltip.custom-theme {
  229. background-color: {color:title};
  230. color: {color:background};
  231. text-align: center;
  232. font-family: '{select:title font}', sans-serif;
  233. font-weight: normal;
  234. text-transform: uppercase;
  235. letter-spacing: 1px;
  236. font-style: normal;
  237. padding: 0.25em;
  238. margin: 20px auto auto 10px;
  239. font-size: 0.8em;
  240. border-radius: 0;
  241. }
  242.  
  243. ::-webkit-scrollbar {
  244. width: 17px;
  245. height: 17px;
  246. background-color: {color:background};
  247. }
  248.  
  249. ::-webkit-scrollbar-track {border: 8px solid {color:background}; background-color: {color:borders};}
  250.  
  251. ::-webkit-scrollbar-thumb {
  252. border: 6px solid {color:background};
  253. background-color: {color:title};
  254. min-height: 24px;
  255. min-width: 24px;
  256. }
  257.  
  258. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  259. z-index: 999999999!important;
  260. opacity: 0.6;
  261. transform: scale(0.8);
  262. transform-origin: 100% 0;
  263. -webkit-transform: scale(0.8);
  264. -webkit-transform-origin: 100% 0;
  265. -o-transform: scale(0.8);
  266. -o-transform-origin: 100% 0;
  267. -moz-transform: scale(0.8);
  268. -moz-transform-origin: 100% 0;
  269. -ms-transform: scale(0.8);
  270. -ms-transform-origin: 100% 0;
  271. -webkit-transition: all 0.4s;
  272. -moz-transition: all 0.4s;
  273. -ms-transition: all 0.4s;
  274. -o-transition: all 0.4s;
  275. transition: all 0.4s;
  276. }
  277.  
  278. .tmblr-iframe-compact .tmblr-iframe--unified-controls:hover {
  279. opacity: 1.0;
  280. -webkit-transition: all 0.4s;
  281. -moz-transition: all 0.4s;
  282. -ms-transition: all 0.4s;
  283. -o-transition: all 0.4s;
  284. transition: all 0.4s;
  285. }
  286.  
  287. .tmblr-iframe--app-cta-button {display: none!important;}
  288.  
  289. /*----- HEADER -----*/
  290.  
  291. #mainheader {
  292. width: calc({select:posts width} + 50px);
  293. height: auto;
  294. position: relative;
  295. margin: 100px auto 50px auto;
  296. }
  297.  
  298. #mainheader h1 {margin: 0;}
  299.  
  300. #navi {
  301. border-bottom: 1px solid {color:borders};
  302. padding-bottom: 2em;
  303. margin-top: 0.25em;
  304. }
  305.  
  306. nav a {margin-right: 0.5em;}
  307. #description {margin-top: 2.5em;}
  308.  
  309. .find {
  310. display: inline-block;
  311. background-color: {color:background};
  312. margin-left: 0.5em;
  313. }
  314.  
  315. .find input {
  316. border: 0;
  317. outline: none;
  318. display: inline-block;
  319. background: inherit;
  320. margin: 0;
  321. padding: 0;
  322. color: {color:link};
  323. font-size: 0.9em;
  324. text-align: left;
  325. width: calc(({select:post width} + 50px) / 2);
  326. font-family: '{select:title font}', sans-serif;
  327. }
  328.  
  329. .find input[type=text] {color: {color:link};}
  330. input::-webkit-input-placeholder {color: {color:link};}
  331. input::-moz-placeholder {color: {color:link};}
  332. input:-moz-placeholder {color: {color:link};}
  333. input:-ms-input-placeholder {color: {color:link};}
  334.  
  335. #topnav {
  336. position: fixed;
  337. top: 0;
  338. right: 0;
  339. left: 0;
  340. padding: 1.5em 0;
  341. text-align: center;
  342. z-index: 100;
  343. background-color: {color:background};
  344. width: 100%;
  345. display: none;
  346. border-bottom: 1px solid {color:borders};
  347. }
  348.  
  349. {block:ifIcon}
  350. .icon {
  351. border-radius: 50%;
  352. position: absolute;
  353. margin: 0 0 0 -75px;
  354. height: 50px;
  355. width: 50px;
  356. }
  357.  
  358. .smallicon {
  359. border-radius: 50%;
  360. display: inline;
  361. vertical-align: middle;
  362. margin-right: 15px;
  363. width: 25px;
  364. height: 25px;
  365. }
  366. {/block:ifIcon}
  367.  
  368. /*----- COMMON -----*/
  369.  
  370. .title {
  371. color: {color:title};
  372. font-size: 1.25em;
  373. font-weight: bold;
  374. letter-spacing: 2px;
  375. line-height: 160%;
  376. font-family: '{select:title font}', sans-serif;
  377. text-transform: uppercase;
  378. }
  379.  
  380. .title a {color: {color:title};}
  381. .title a:hover {color: {color:accent};}
  382.  
  383. .subtitle {
  384. font-family: '{select:title font}', sans-serif;
  385. text-transform: uppercase;
  386. letter-spacing: 1px;
  387. font-size: 0.9em;
  388. font-weight: bold;
  389. color: {color:title};
  390. }
  391.  
  392. .subtitle a {color: {color:title};}
  393. .subtitle a:hover {color: {color:accent};}
  394.  
  395. .upper {text-transform: uppercase; letter-spacing: 1px;}
  396.  
  397. /*----- POSTS -----*/
  398.  
  399. .container {
  400. margin: auto;
  401. width: calc({select:posts width} + 50px);
  402. position: relative;
  403. }
  404.  
  405. article {
  406. position: relative;
  407. margin: {text:post margin}px auto;
  408. }
  409.  
  410. .posts {
  411. width: calc({select:posts width} + 50px);
  412. {block:ifGrid}
  413. float: left;
  414. margin: 80px auto;
  415. display: block;
  416. {/block:ifGrid}
  417. }
  418.  
  419. {block:ifGrid}
  420. .clearfix:before, .clearfix:after {content: ''; display: table;}
  421. .clearfix:after {clear: both;}
  422. .clearfix {zoom: 1;}
  423. {/block:ifGrid}
  424.  
  425. .main {
  426. background-color: {color:posts};
  427. padding: 25px;
  428. box-sizing: border-box;
  429. }
  430.  
  431. .tumblr_video_container {max-height: 540px!important; overflow: hidden!important; max-width: 100%;}
  432. .posts li, .posts blockquote, .posts img, figure, video, .video, .video iframe, iframe {max-width: 100%;}
  433. .postsource {display: none;}
  434. .video iframe {width: 100%;}
  435.  
  436. /*----- CAPTION -----*/
  437.  
  438. .caption {margin: 2em 0 0 0; list-style-type: none;}
  439.  
  440. .caption p {margin: 1em 0;}
  441. .caption p:last-of-type {margin-bottom: 0;}
  442. .ogcap p:first-of-type {margin-top: 0;}
  443. .body:first-of-type {margin-top: 0;}
  444. .caption iframe, .caption img {max-width: 100%;}
  445.  
  446. p.tmblr-attribution {margin-top: 1em !important;}
  447.  
  448. {block:ifHideCaption}
  449. .hidecap {display: none;}
  450. {/block:ifHideCaption}
  451.  
  452. .username {
  453. margin-bottom: 0;
  454. display: inline-block;
  455. background-color: {color:background};
  456. padding-right: 1em;
  457. z-index: 1;
  458. line-height: 100%;
  459. }
  460.  
  461. .username::after {
  462. content: '';
  463. height: 1px;
  464. width: 100%;
  465. background-color: {color:borders};
  466. position: absolute;
  467. left: 0;
  468. margin-top: 0.5em;
  469. z-index: -5;
  470. }
  471.  
  472. .username a, .username a:hover {border-bottom: none;}
  473. .deactive {text-decoration: line-through;}
  474.  
  475. /*----- TEXT -----*/
  476.  
  477. pre {
  478. line-height: inherit;
  479. font-size: inherit;
  480. white-space: pre-wrap;
  481. white-space: -moz-pre-wrap;
  482. white-space: -pre-wrap;
  483. white-space: -o-pre-wrap;
  484. word-wrap: break-word;
  485. background-color: {color:background};
  486. box-sizing: border-box;
  487. padding: 1.5em;
  488. border: 1px solid {color:borders};
  489. }
  490.  
  491. @font-face {
  492. font-family: Calluna;
  493. src: url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.eot?3=&v=f685dc881c60c298ea22a73fe505b88a");
  494. src: url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.eot?3%3F=&v=f685dc881c60c298ea22a73fe505b88a#iefix") format("embedded-opentype"),url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.woff?3=&v=760a50f4d098e59aebaf0f0e58ae2cc8") format("woff"),url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.ttf?3=&v=5ace789439bff3b27f8d4112725531da") format("truetype"),url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.svg?3=&v=5b95c481dd7411c6e112143d6646bd9b#_.regular") format("svg");
  495. font-weight: 700;
  496. font-style: italic
  497. }
  498.  
  499. @font-face {
  500. font-family: Fairwater;
  501. src: url("https://assets.tumblr.com/fonts/fairwater/fairwater_script_regular-webfont.woff2?v=b7ab7a58cded3365889a447bfd9e9c45") format("woff2"),url("https://assets.tumblr.com/fonts/fairwater/fairwater_script_regular-webfont.woff?v=96e975b7468359e6f67086305577e43e") format("woff");
  502. font-weight: 400;
  503. font-style: normal
  504. }
  505.  
  506. p.npf_quirky {font-family: Fairwater; font-size: 20px;}
  507.  
  508. .npf_color_joey {color: #e57373;}
  509. .npf_color_monica {color: #ff8a65;}
  510. .npf_color_phoebe {color: #ffee58;}
  511. .npf_color_ross {color: #81c784;}
  512. .npf_color_rachel {color: #4fc3f7;}
  513. .npf_color_chandler {color: #9575cd;}
  514. .npf_color_niles {color: #f06292;}
  515.  
  516. a.read_more {
  517. text-transform: uppercase;
  518. letter-spacing: 1px;
  519. font-weight: bold;
  520. color: {color:title};
  521. }
  522.  
  523. a.read_more:hover {color: {color:accent};}
  524. p.read_more_container {margin: 1.5em 0; text-align: center;}
  525.  
  526. #k {
  527. position: fixed;
  528. bottom: 20px;
  529. right: 20px;
  530. font-size: 15px;
  531. background-color: {color:background};
  532. padding: 5px 8px;
  533. border-radius: 3px;
  534. }
  535.  
  536. #k:hover {background-color: {color:accent}; color: {color:background};}
  537.  
  538. #m {
  539. text-align: center;
  540. display: none;
  541. margin: 1em auto 50px auto;
  542. font-family: '{select:title font}', sans-serif;
  543. }
  544.  
  545. /*----- LINK -----*/
  546.  
  547. .linkp {
  548. border: 1px solid {color:borders};
  549. color: {color:link};
  550. background-color: {color:background};
  551. -webkit-transition: all 0.5s;
  552. -moz-transition: all 0.5s;
  553. -ms-transition: all 0.5s;
  554. -o-transition: all 0.5s;
  555. transition: all 0.5s;
  556. }
  557.  
  558. .linkp:hover {
  559. background-color: {color:posts};
  560. -webkit-transition: all 0.5s;
  561. -moz-transition: all 0.5s;
  562. -ms-transition: all 0.5s;
  563. -o-transition: all 0.5s;
  564. transition: all 0.5s;
  565. }
  566.  
  567. .thumbnail {max-width: 100%;}
  568. .link {padding: 2em;}
  569. .linktxt, .linkhost {margin-top: 1em;}
  570. .linkhost {font-style: italic;}
  571.  
  572. .npf-link-block {
  573. margin-top: 1.25em;
  574. border-radius: 0;
  575. -webkit-transition: all 0.3s;
  576. -moz-transition: all 0.3s;
  577. -ms-transition: all 0.3s;
  578. -o-transition: all 0.3s;
  579. transition: all 0.3s;
  580. }
  581.  
  582. .npf-link-block .poster .title {background-color: initial; padding: 30px;}
  583. .npf-link-block .title {font-size: 1.25em; border-bottom: none;}
  584. .npf-link-block .bottom {padding: 30px !important; color: {color:text};}
  585.  
  586. .npf-link-block .bottom .site-name {
  587. font-size: 0.9em;
  588. color: {color:text};
  589. font-weight: normal;
  590. letter-spacing: 1px;
  591. }
  592.  
  593. /*----- PHOTO -----*/
  594.  
  595. img {
  596. margin: 0;
  597. display: block;
  598. height: auto;
  599. max-width: 100%;
  600. }
  601.  
  602. .photo img {width: 100%;}
  603. .vignette, #vignette {opacity: 0;}
  604. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(60, 60, 60, .8) !important;}
  605.  
  606. .lightbox-image, #tumblr_lightbox img {
  607. box-shadow: none !important;
  608. border-radius: 0 !important;
  609. max-width: none;
  610. }
  611.  
  612. /*----- PHOTOSETS -----*/
  613.  
  614. .caption figure {margin: 1em 0;}
  615. .caption figure .tmblr-full {margin-top: {select:photoset gutter}px;}
  616. .tmblr-full:hover {cursor: pointer;}
  617. .npf_image, .tmblr-full {border: none; outline: none;}
  618.  
  619. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  620. margin-left: 0 !important;
  621. margin-right: 0 !important;
  622. }
  623.  
  624. /*----- QUOTE -----*/
  625.  
  626. .quote {
  627. font-size: 1.25em;
  628. line-height: 160%;
  629. color: {color:title};
  630. }
  631.  
  632. .source {
  633. margin-top: 20px;
  634. text-align: right;
  635. font-style: italic;
  636. }
  637.  
  638. /*----- CHAT -----*/
  639.  
  640. .chat {padding: 0; margin: 0;}
  641. .chat li {list-style-type: none;}
  642. .line {margin-top: 0.5em;}
  643. .line:first-of-type {margin-top: 0;}
  644.  
  645. p.npf_chat {
  646. font-family: inherit;
  647. background-color: {color:posts};
  648. padding: 2em;
  649. margin-top: 0.5em;
  650. }
  651.  
  652. p.npf_chat b {
  653. font-family: '{select:title font}', sans-serif;
  654. text-transform: uppercase;
  655. letter-spacing: 1px;
  656. font-size: 0.9em;
  657. }
  658.  
  659. p.npf_chat:first-of-type {margin-top: 1em;}
  660.  
  661. /*----- ASK -----*/
  662.  
  663. .question {margin-top: 1em;}
  664. .question p:first-of-type {margin-top: 0;}
  665. .question p:last-of-type {margin-bottom: 0;}
  666.  
  667. /*----- AUDIO -----*/
  668.  
  669. .audiopost {min-height: 120px;}
  670.  
  671. .albumart {
  672. float: left;
  673. width: 70px;
  674. height: 70px;
  675. z-index: -5;
  676. }
  677.  
  678. .button {
  679. width: 30px;
  680. height: 30px;
  681. overflow: hidden;
  682. position: relative;
  683. z-index: 10;
  684. margin: 8px 7px 6px 7px;
  685. }
  686.  
  687. .audiobox {
  688. background-color: #f2f2f2;
  689. z-index: 50;
  690. position: absolute;
  691. margin: 13px 0 0 13px;
  692. border-radius: 50%;
  693. opacity: 0.3;
  694. -webkit-transition: all 0.7s;
  695. -moz-transition: all 0.7s;
  696. -ms-transition: all 0.7s;
  697. -o-transition: all 0.7s;
  698. transition: all 0.7s;
  699. }
  700.  
  701. .audioinfo {
  702. width: calc(100% - 72px);
  703. height: 70px;
  704. display: flex;
  705. justify-content: center;
  706. flex-direction: column;
  707. }
  708.  
  709. .flexy {padding-left: 2em; box-sizing: border-box;}
  710. .track {font-size: 1.1em;}
  711.  
  712. .audiopost:hover .audiobox {
  713. opacity: 0.9;
  714. -webkit-transition: all 0.7s;
  715. -moz-transition: all 0.7s;
  716. -ms-transition: all 0.7s;
  717. -o-transition: all 0.7s;
  718. transition: all 0.7s;
  719. }
  720.  
  721. /*----- INFO -----*/
  722.  
  723. .info {
  724. margin-top: 2em;
  725. border-top: 1px solid {color:borders};
  726. padding-top: 1.5em;
  727. }
  728.  
  729. .perma {
  730. font-family: '{select:title font}', sans-serif;
  731. margin-right: 1px;
  732. font-size: 0.9em;
  733. }
  734.  
  735. .type {font-weight: bold; color: {color:title};}
  736. .type:hover {color: {color:accent};}
  737.  
  738. {block:ifHideNoteCount}
  739. #hidenote {display: none;}
  740. {/block:ifHideNoteCount}
  741.  
  742. .tags {
  743. margin-left: 0.5em;
  744. font-style: italic;
  745. text-transform: lowercase;
  746. {block:IndexPage}{block:ifHideTags}
  747. display: none;
  748. {/block:ifHideTags}{/block:IndexPage}
  749. }
  750.  
  751. .tags a {margin-right: 0.75em; display: inline-block;}
  752. .tags a:first-of-type {margin-left: 0.5em;}
  753.  
  754. .taghead {width: calc({select:posts width} + 50px);}
  755.  
  756. .pin-post {text-align: center; margin-bottom: 1.5em;}
  757.  
  758. .pin-post svg {
  759. font-size: 1.25em;
  760. color: {color:accent};
  761. display: inline-block;
  762. vertical-align: middle;
  763. margin-right: 0.75em;
  764. }
  765.  
  766. /*----- POST NOTES -----*/
  767.  
  768. #notetitle {
  769. margin-top: 80px;
  770. border-bottom: 1px solid {color:borders};
  771. padding-bottom: 1.5em;
  772. }
  773.  
  774. ol.notes {
  775. list-style-type: none;
  776. width: calc({select:posts width} + 50px);
  777. padding: 0;
  778. margin: 2em 0 0 0;
  779. }
  780.  
  781. ol.notes li.note {display: block; padding: 0.15em;}
  782. ol.notes li.note img.avatar {display: none;}
  783.  
  784. a.more_notes_link {
  785. text-transform: uppercase;
  786. letter-spacing: 1px;
  787. font-size: 0.9em;
  788. font-family: '{select:title font}', sans-serif;
  789. font-weight: bold;
  790. padding-top: 1.5em;
  791. }
  792.  
  793. /*----- PAGINATION -----*/
  794.  
  795. .pg {
  796. font-family: '{select:title font}', sans-serif;
  797. border-top: 1px solid {color:borders};
  798. padding-top: 2em;
  799. text-align: center;
  800. width: calc({select:posts width} + 50px);
  801. position: relative;
  802. margin: {text:post margin}px auto 200px auto;
  803. }
  804.  
  805. .pg a {margin: 0 0.5em;}
  806.  
  807. .currentpg {
  808. font-weight: bold;
  809. color: {color:title};
  810. margin: 0 0.5em;
  811. }
  812.  
  813. #btop {
  814. position: fixed;
  815. right: 28px;
  816. bottom: 50px;
  817. }
  818.  
  819. /*----- MOBILE CONTROLS -----*/
  820.  
  821. .mobile-controls {
  822. position: fixed;
  823. right: 15px;
  824. top: 1.25em;
  825. z-index: 150;
  826. display: none;
  827. }
  828.  
  829. .mobile-controls a svg {
  830. font-size: 1.25em;
  831. display: inline-block;
  832. vertical-align: middle;
  833. }
  834.  
  835. .mobile-controls a {margin-left: 0.5em;}
  836.  
  837. /*----- RESPONSIVE -----*/
  838.  
  839. @media only screen and (max-width: 1023px) {
  840. body {overflow-x: hidden;}
  841.  
  842. #mainheader .icon {display: none;}
  843.  
  844. .container {width: 100vw;}
  845. article, .posts, #taghead, #mainheader {width: 80vw;}
  846.  
  847. #k, #btop {display: none;}
  848. #m {display: block;}
  849.  
  850. .tmblr-iframe-compact .tmblr-iframe--unified-controls {display: none;}
  851. .mobile-controls {display: block;}
  852. }
  853.  
  854. {CustomCSS}
  855.  
  856. </style>
  857. </head>
  858.  
  859. <body class="load-in">
  860.  
  861. <!----- MOBILE CONTROLS ----->
  862.  
  863. <div class="mobile-controls">
  864. <a href="https://www.tumblr.com/follow/{Name}" title="follow"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>
  865. <a href="https://www.tumblr.com/message/{Name}" title="message">
  866. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg></a>
  867. <a href="https://www.tumblr.com/dashboard" title="dashboard"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-compass"><circle cx="12" cy="12" r="10"></circle><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon></svg></a>
  868. </div>
  869.  
  870. <!----- HIDDEN NAV ----->
  871.  
  872. <header class="topbar">
  873. <nav id="topnav">
  874. {block:ifIcon}<img src="{PortraitURL-30}" class="smallicon">{/block:ifIcon}
  875. {block:ifHomeLink}<a href="/" title="{text:Home Link}" target="_self">001.</a>{/block:ifHomeLink}
  876. {block:ifAskLink}<a href="/ask" title="{text:Ask Link}" target="_self">002.</a>{/block:ifAskLink}
  877. {block:ifArchiveLink}<a href="/archive" title="{text:Archive Link}" target="_self">003.</a>{/block:ifArchiveLink}
  878. {block:ifLink1}<a href="{text:Link 1 URL}" title="{text:Link 1}" target="_self">004.</a>{/block:ifLink1}
  879. {block:ifLink2}<a href="{text:Link 2 URL}" title="{text:Link 2}" target="_self">005.</a>{/block:ifLink2}
  880. {block:ifLink3}<a href="{text:Link 3 URL}" title="{text:Link 3}" target="_self">006.</a>{/block:ifLink3}
  881. </nav>
  882. </header>
  883.  
  884. <!----- HEADER ----->
  885.  
  886. <header id="mainheader">
  887. {block:ifIcon}<img src="{PortraitURL-64}" class="icon">{/block:ifIcon}
  888. <h1><a href="/">{Title}</a></h1>
  889. <nav id="navi">
  890. {block:ifHomeLink}<a href="/" title="{text:Home Link}" target="_self">001.</a>{/block:ifHomeLink}
  891. {block:ifAskLink}<a href="/ask" title="{text:Ask Link}" target="_self">002.</a>{/block:ifAskLink}
  892. {block:ifArchiveLink}<a href="/archive" title="{text:Archive Link}" target="_self">003.</a>{/block:ifArchiveLink}
  893. {block:ifLink1}<a href="{text:Link 1 URL}" title="{text:Link 1}" target="_self">004.</a>{/block:ifLink1}
  894. {block:ifLink2}<a href="{text:Link 2 URL}" title="{text:Link 2}" target="_self">005.</a>{/block:ifLink2}
  895. {block:ifLink3}<a href="{text:Link 3 URL}" title="{text:Link 3}" target="_self">006.</a>{/block:ifLink3}/
  896. <form action="/search" method="get" class="find upper" name="sform">
  897. <input type="text" name="q" placeholder="search" value="{SearchQuery}" class="upper"/>
  898. </form>
  899. </nav>
  900. <div id="description" class="main">{Description}</div>
  901. </header>
  902.  
  903. {block:TagPage}
  904. <article class="taghead main">
  905. Showing posts filed under <span class="subtitle">#{Tag}</span>
  906. </article>
  907. {/block:TagPage}
  908.  
  909. {block:DayPage}
  910. <article class="taghead main">
  911. Showing posts made on <span class="subtitle">{Month} {DayOfMonth}, {Year}</span>
  912. </article>
  913. {/block:DayPage}
  914.  
  915. <section class="container">
  916.  
  917. <!----- POSTS ----->
  918.  
  919. {block:Posts inlineMediaWidth="1280"}
  920. <article class="posts" id="{PostID}">
  921.  
  922. {block:PinnedPostLabel}
  923. <div class="pin-post">
  924. <a href="{Permalink}" class="subtitle"><i data-feather="map-pin" aria-hidden="true"></i>{PinnedPostLabel}</a>
  925. </div>
  926. {/block:PinnedPostLabel}
  927.  
  928. {block:Text}
  929. <div class="text-post" id="{PostID}">
  930. {block:Title}<h1><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  931. {block:NotReblog}
  932. <li class="caption body ogcap">
  933. {Body}
  934. </li>
  935. {/block:NotReblog}
  936. {block:RebloggedFrom}{block:Reblogs}
  937. <li class="caption rbcap">
  938. <div class="username subtitle {block:IsDeactivated}deactive" title="blog deactivated{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  939. {Body}
  940. </li>
  941. {/block:Reblogs}{/block:RebloggedFrom}
  942. </div>
  943. {/block:Text}
  944.  
  945. {block:Link}
  946. <div class="main">
  947. <a href="{URL}"><div class="linkp">
  948. {block:Thumbnail}<img src="{Thumbnail-HighRes}" class="thumbnail">{/block:Thumbnail}
  949. <div class="link">
  950. <div class="title">{Name}</div>
  951. {block:Excerpt}<div class="linktxt">{Excerpt}</div>{/block:Excerpt}
  952. {block:Host}<div class="linkhost">by {Host}</div>{/block:Host}
  953. </div>
  954. </div></a>
  955. </div>
  956. {block:Description}
  957. {block:NotReblog}
  958. <li class="caption ogcap {block:IndexPage}{block:ifHideCaption}hidecap{/block:ifHideCaption}{/block:IndexPage}">
  959. {Description}
  960. </li>
  961. {/block:NotReblog}
  962. {/block:Description}
  963. {block:RebloggedFrom}{block:Reblogs}
  964. <li class="caption rbcap {block:IndexPage}{block:ifHideCaption}hidecap{/block:ifHideCaption}{/block:IndexPage}">
  965. <div class="username subtitle {block:IsDeactivated}deactive" title="blog deactivated{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  966. {Body}
  967. </li>
  968. {/block:Reblogs}{/block:RebloggedFrom}
  969. {/block:Link}
  970.  
  971. {block:Photo}
  972. <div class="photo main">
  973. {LinkOpenTag}<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"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>{LinkCloseTag}
  974. </div>
  975. {block:Caption}
  976. {block:NotReblog}
  977. <li class="caption ogcap {block:IndexPage}{block:ifHideCaption}hidecap{/block:ifHideCaption}{/block:IndexPage}">
  978. {Caption}
  979. </li>
  980. {/block:NotReblog}
  981. {block:Reblogs}
  982. <li class="caption rbcap {block:IndexPage}{block:ifHideCaption}hidecap{/block:ifHideCaption}{/block:IndexPage}">
  983. <div class="username subtitle {block:IsDeactivated}deactive" title="blog deactivated{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  984. {Body}
  985. </li>
  986. {/block:Reblogs}
  987. {/block:Caption}
  988. {/block:Photo}
  989.  
  990. {block:Photoset}
  991. <div class="photo-slideshow main" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" alt="{PhotoAlt}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  992. {block:Caption}
  993. {block:NotReblog}
  994. <li class="caption ogcap {block:IndexPage}{block:ifHideCaption}hidecap{/block:ifHideCaption}{/block:IndexPage}">
  995. {Caption}
  996. </li>
  997. {/block:NotReblog}
  998. {block:Reblogs}
  999. <li class="caption rbcap {block:IndexPage}{block:ifHideCaption}hidecap{/block:ifHideCaption}{/block:IndexPage}">
  1000. <div class="username subtitle {block:IsDeactivated}deactive" title="blog deactivated{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1001. {Body}
  1002. </li>
  1003. {/block:Reblogs}
  1004. {/block:Caption}
  1005. {/block:Photoset}
  1006.  
  1007. {block:Video}
  1008. <div class="video">{Video-500}</div>
  1009. {block:Caption}
  1010. {block:NotReblog}
  1011. <li class="caption ogcap {block:IndexPage}{block:ifHideCaption}hidecap{/block:ifHideCaption}{/block:IndexPage}">
  1012. {Caption}
  1013. </li>
  1014. {/block:NotReblog}
  1015. {block:Reblogs}
  1016. <li class="caption rbcap {block:IndexPage}{block:ifHideCaption}hidecap{/block:ifHideCaption}{/block:IndexPage}">
  1017. <div class="username subtitle {block:IsDeactivated}deactive" title="blog deactivated{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1018. {Body}
  1019. </li>
  1020. {/block:Reblogs}
  1021. {/block:Caption}
  1022. {/block:Video}
  1023.  
  1024. {block:Quote}
  1025. <div class="quote main">{Quote}</div>
  1026. {block:Source}<div class="source">{Source}</div>{/block:Source}
  1027. {/block:Quote}
  1028.  
  1029. {block:Chat}
  1030. {block:Title}<h1><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1031. <ul class="chat">{block:Lines}
  1032. <li class="line main">
  1033. {block:Label}<div class="subtitle">{Label}</div>{/block:Label} {Line}
  1034. </li>
  1035. {/block:Lines}</ul>
  1036. {/block:Chat}
  1037.  
  1038. {block:Answer}
  1039. <span class="ask-label username subtitle">{Asker} said</span>
  1040. <div class="question main">{Question}</div>
  1041. {block:Answerer}
  1042. <li class="caption rbcap">
  1043. <div class="username subtitle {block:IsDeactivated}deactive" title="blog deactivated{/block:IsDeactivated}">{Answerer}</a></div>
  1044. {Answer}
  1045. </li>
  1046. {/block:Answerer}
  1047. {block:NotReblog}
  1048. <li class="caption ogcap">
  1049. {Replies}
  1050. </li>
  1051. {/block:NotReblog}
  1052. {block:RebloggedFrom}{block:Reblogs}
  1053. <li class="caption rbcap">
  1054. <div class="username subtitle {block:IsDeactivated}deactive" title="blog deactivated{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1055. {Body}
  1056. </li>
  1057. {/block:Reblogs}{/block:RebloggedFrom}
  1058. {/block:Answer}
  1059.  
  1060. {block:Audio}
  1061. <div class="audiopost main">
  1062. <div class="audio-left">
  1063. <div class="audiobox"><div class="button">
  1064. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  1065. </div></div>
  1066. {block:AlbumArt}
  1067. <img src="{AlbumArtURL}" class="albumart">
  1068. {/block:AlbumArt}
  1069. </div>
  1070. <div class="audioinfo">
  1071. <div class="flexy">
  1072. {block:TrackName}<div class="subtitle track">{TrackName}</div>{/block:TrackName}
  1073. {block:Artist}{Artist}{/block:Artist}
  1074. </div>
  1075. </div>
  1076. </div>
  1077. {block:Caption}
  1078. {block:NotReblog}
  1079. <li class="caption ogcap {block:IndexPage}{block:ifHideCaption}hidecap{/block:ifHideCaption}{/block:IndexPage}">
  1080. {Caption}
  1081. </li>
  1082. {/block:NotReblog}
  1083. {block:Reblogs}
  1084. <li class="caption rbcap {block:IndexPage}{block:ifHideCaption}hidecap{/block:ifHideCaption}{/block:IndexPage}">
  1085. <div class="username subtitle {block:IsDeactivated}deactive" title="blog deactivated{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1086. {Body}
  1087. </li>
  1088. {/block:Reblogs}
  1089. {/block:Caption}
  1090. {/block:Audio}
  1091.  
  1092. <!----- INFO ----->
  1093.  
  1094. {block:Date}
  1095. <div class="info">
  1096. <span class="upper perma">
  1097. <a href="{Permalink}" class="type" {block:ifHideNoteCount}id="hidenote"{/block:ifHideNoteCount}>{NoteCount} n</a>
  1098. {block:ifHideNoteCount}<a href="{Permalink}" class="type">{PostType}</a>{/block:ifHideNoteCount}
  1099. on {block:IndexPage}<a href="{Permalink}" {block:ifHideNoteCount}title="{NoteCountWithLabel}"{/block:ifHideNoteCount}>
  1100. {ShortMonth} {DayOfMonthWithZero}
  1101. </a>{/block:IndexPage}
  1102. {block:PermalinkPage}{Month} {DayOfMonthWithZero}, {Year}{/block:PermalinkPage}
  1103. </span>
  1104. {block:HasTags}
  1105. <span class="tags">/ {block:Tags}<a href="{TagURL}">{Tag}.</a>{/block:Tags}</span>
  1106. {/block:HasTags}
  1107. {block:PermalinkPage}{block:RebloggedFrom}
  1108. <div id="viasrc">from <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a> / origin <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a></div>
  1109. {/block:RebloggedFrom}{/block:PermalinkPage}
  1110. </div>
  1111. {/block:Date}
  1112.  
  1113. <!----- SOURCE ----->
  1114.  
  1115. <div class="postsource">
  1116. {block:ContentSource}<a href="{SourceURL}">{lang:Source}:{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo}</a>{/block:ContentSource}
  1117. </div>
  1118.  
  1119. <!----- POST NOTES ----->
  1120.  
  1121. {block:Date}{block:PermalinkPage}
  1122. <div class="notes">
  1123. {block:NoteCount}<div class="title" id="notetitle">{NoteCountWithLabel}</div>{/block:NoteCount}
  1124. {block:PostNotes}
  1125. {PostNotes}
  1126. {/block:PostNotes}
  1127. </div>
  1128. {/block:PermalinkPage}{/block:Date}
  1129.  
  1130. </article>
  1131. {/block:Posts}
  1132.  
  1133. </section>
  1134.  
  1135. <!----- PAGINATION ----->
  1136.  
  1137. {block:Pagination}
  1138. <footer class="pg upper">
  1139. {block:PreviousPage}<a href="{PreviousPage}" class="back" target="_self">back</a>{/block:PreviousPage}
  1140. {block:JumpPagination length="5"}
  1141. {block:CurrentPage}<span class="currentpg">{PageNumber}</span>{/block:CurrentPage}
  1142. {block:JumpPage}<a class="jumppg" href="{URL}" target="_self">{PageNumber}</a>{/block:JumpPage}
  1143. {/block:JumpPagination}
  1144. {block:NextPage}<a href="{NextPage}" class="next" target="_self">next</a>{/block:NextPage}
  1145. </footer>
  1146. {/block:Pagination}
  1147.  
  1148. <div id="btop">
  1149. <a href="#top" title="back to top" target="_self"><i data-feather="chevron-up"></i></span></a>
  1150. </div>
  1151.  
  1152. <a href="https://seyche.tumblr.com" title="celandine theme by seyche" id="k">&.</a>
  1153.  
  1154. <a href="https://seyche.tumblr.com" id="m" class="upper">celandine theme by seyche</a>
  1155.  
  1156. <!----- TOOLTIPS ----->
  1157.  
  1158. <script src="https://unpkg.com/popper.js@1"></script>
  1159. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1160.  
  1161. <!----- PHOTOSETS ----->
  1162.  
  1163. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  1164. <script src="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosets.js"></script>
  1165.  
  1166. <!----- MASONRY ----->
  1167.  
  1168. <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
  1169. <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
  1170.  
  1171. <!----- VIDEO RESIZING ----->
  1172.  
  1173. <script src="https://seyche.github.io/external-files-hosting/plugins/flexframes-modified.js"></script>
  1174.  
  1175. <!----- JQUERY ----->
  1176.  
  1177. <script>
  1178. $(document).ready(function(){
  1179. $('.photo-slideshow').pxuPhotoset({
  1180. lightbox: true,
  1181. rounded: false,
  1182. gutter: '{select:photoset gutter}px',
  1183. borderRadius: '0px',
  1184. photoset: '.photo-slideshow',
  1185. photoWrap: '.photo-data',
  1186. photo: '.pxu-photo'
  1187. });
  1188.  
  1189. npfPhotosets(".posts", {
  1190. rowClass:"npf_row",
  1191. imageContainerClass:"tmblr-full",
  1192. generatedPhotosetContainerClass:"npf_photoset",
  1193. imageClass:"npf_image",
  1194. includeCommonPhotosets: false,
  1195. useTumblrLightbox: true,
  1196. insertGalleryIndicator: false,
  1197. galleryIndicatorClass: "npf_gallery_indicator",
  1198. galleryIndicatorContent: "<img src='image_url'>",
  1199. photosetMargins:"{select:photoset gutter}"
  1200. });
  1201.  
  1202. /// TOOLTIPS
  1203.  
  1204. tippy('[title]', {
  1205. theme: 'custom',
  1206. arrow: false,
  1207. followCursor: true,
  1208. delay: 100,
  1209. placement: 'bottom-start',
  1210. zIndex: 9999999999,
  1211. maxWidth: 400,
  1212.  
  1213. content(reference) {
  1214. const title = reference.getAttribute('title');
  1215. reference.removeAttribute('title');
  1216. return title;
  1217. },
  1218. });
  1219.  
  1220. /// FADE IN NAV
  1221.  
  1222. window.addEventListener("scroll", function() {
  1223. if (window.scrollY > 300) {
  1224. $('#topnav').fadeIn(500);
  1225. }
  1226. else {
  1227. $('#topnav').fadeOut(500);
  1228. }
  1229. },false);
  1230.  
  1231. });
  1232.  
  1233. /// MASONRY
  1234.  
  1235. {block:ifGrid}{block:IndexPage}
  1236. $(document).ready(function(){
  1237. var $grid = $(".container").masonry({
  1238. itemSelector: ".posts",
  1239. initLayout: 1
  1240. });
  1241. $grid.on("layoutComplete", function(o, r) {
  1242. console.log(r.length)
  1243. }), $grid.masonry({
  1244. fitWidth: true,
  1245. horizontalOrder: 1,
  1246. gutter: 120,
  1247. resize: 1
  1248. }), $grid.imagesLoaded().progress(function() {
  1249. $grid.masonry("layout")
  1250. });
  1251. });
  1252.  
  1253. function function1(){
  1254. window.scrollTo(0,5);
  1255. }
  1256. function function2(){
  1257. window.scroll(0,2);
  1258. }
  1259. {/block:IndexPage}{/block:ifGrid}
  1260.  
  1261. /// SCROLL TO TOP
  1262.  
  1263. $(document).ready(function(){
  1264. $('#btop').click(function(){
  1265. $('html, body').animate({scrollTop : 0},800);
  1266. return false;
  1267. });
  1268. });
  1269.  
  1270. /// REMOVE REDIRECTS
  1271.  
  1272. $(document).ready(function(){
  1273. //remove tumblr redirects script by magnusthemes@tumblr
  1274. $('a[href*="t.umblr.com/redirect"]').each(function(){
  1275. var originalURL = $(this).attr("href").split("?z=")[1].split("&t=")[0];
  1276. var replaceURL = decodeURIComponent(originalURL);
  1277. $(this).attr("href", replaceURL);
  1278. });
  1279. });
  1280.  
  1281. /// VIDEO RESIZING
  1282.  
  1283. function flexFrame() {
  1284. $(".caption").each(function() {
  1285. $(this).find("iframe").wrap("<div class='capframe'></div>");
  1286. flexibleFrames($(".capframe"));
  1287. });
  1288. flexibleFrames($(".video"));
  1289. }
  1290. $(document).ready(flexFrame);
  1291.  
  1292. feather.replace()
  1293.  
  1294. </script>
  1295.  
  1296. </body>
  1297. </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!