API tools faq
paste
seiche

theme four: moonflower

seiche
Sep 29th, 2019 (edited)
5,210
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 47.63 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. <meta name="viewport" content="width=device-width, initial-scale=1">
  12.  
  13. <!---
  14.  
  15. MOONFLOWER THEME BY SEYCHE.TUMBLR.COM
  16.  
  17. CREDITS:
  18. -feather icons by Cole Bemis
  19. -pxu photosets by pixel union / with modifications by bychloethemes
  20. -npf photosets by codematurgy
  21. -tippy.js by atomiks
  22. -responsive video resizing by nouvae
  23. -remove redirects by magnusthemes
  24. -notecount shortening by shythemes
  25. (full list of credits @ seyche.tumblr.com/credits)
  26.  
  27. --->
  28.  
  29. <link href="https://fonts.googleapis.com/css?family=ABeeZee:400,400i|Frank+Ruhl+Libre:400,700|Karla:400,400i,700,700i|Lato:400,400i,700,700i|Lora:400,400i,700,700i|Maven+Pro:400,700|Muli:400,400i,700,700i|Nunito+Sans:400,400i,700,700i|Open+Sans:400,400i,700,700i|Overpass:400,400i,700,700i|Literata:400,400i,700,700i|Poppins:400,400i,700,700i&display=swap" 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="#fafafa"/>
  40. <meta name="color:Posts" content="#ffffff"/>
  41. <meta name="color:Text" content="#9a9a9a"/>
  42. <meta name="color:Link" content="#555555"/>
  43. <meta name="color:Accent" content="#dcdeed"/>
  44. <meta name="color:Title"content="#212121"/>
  45. <meta name="color:Borders" content="#e0e0e0"/>
  46. <meta name="color:Info Background" content="#f7f7f7"/>
  47. <meta name="color:Info Text" content="#9a9a9a"/>
  48. <meta name="color:Info Link" content="#555555"/>
  49.  
  50. <meta name="select:Font" content="Overpass" title="Overpass"/>
  51. <meta name="select:Font" content="Karla" title="Karla"/>
  52. <meta name="select:Font" content="ABeeZee" title="ABeeZee"/>
  53. <meta name="select:Font" content="Lato" title="Lato"/>
  54. <meta name="select:Font" content="Maven Pro" title="Maven Pro"/>
  55. <meta name="select:Font" content="Muli" title="Muli"/>
  56. <meta name="select:Font" content="Nunito Sans" title="Nunito Sans"/>
  57. <meta name="select:Font" content="Open Sans" title="Open Sans"/>
  58. <meta name="select:Font" content="Poppins" title="Poppins"/>
  59. <meta name="select:Font" content="Georgia" title="Georgia"/>
  60. <meta name="select:Font" content="Frank Ruhl Libre" title="Frank Ruhl Libre"/>
  61. <meta name="select:Font" content="Lora" title="Lora"/>
  62. <meta name="select:Font" content="Literata" title="Literata"/>
  63.  
  64. <meta name="select:Font Size" content="15px" title="15px"/>
  65. <meta name="select:Font Size" content="12px" title="12px"/>
  66. <meta name="select:Font Size" content="13px" title="13px"/>
  67. <meta name="select:Font Size" content="14px" title="14px"/>
  68. <meta name="select:Font Size" content="16px" title="16px"/>
  69. <meta name="select:Font Size" content="17px" title="17px"/>
  70. <meta name="select:Font Size" content="18px" title="18px"/>
  71.  
  72. <meta name="select:Post Width" content="360px" title="360px"/>
  73. <meta name="select:Post Width" content="400px" title="400px"/>
  74. <meta name="select:Post Width" content="450px" title="450px"/>
  75. <meta name="select:Post Width" content="500px" title="500px"/>
  76. <meta name="select:Post Width" content="540px" title="540px"/>
  77.  
  78. <meta name="select:Photoset Gutter" content="1" title="1px"/>
  79. <meta name="select:Photoset Gutter" content="2" title="2px"/>
  80. <meta name="select:Photoset Gutter" content="3" title="3px"/>
  81. <meta name="select:Photoset Gutter" content="4" title="4px"/>
  82.  
  83. <meta name="if:One Column" content="0"/>
  84. <meta name="if:Hide Caption" content="0"/>
  85. <meta name="if:Hide Tags" content="0"/>
  86.  
  87. <meta name="text:Post Margin" content="180"/>
  88.  
  89. <meta name="text:Link 1 URL" content=""/>
  90. <meta name="text:Link 1" content=""/>
  91. <meta name="text:Link 2 URL" content=""/>
  92. <meta name="text:Link 2" content=""/>
  93. <meta name="text:Link 3 URL" content=""/>
  94. <meta name="text:Link 3" content=""/>
  95. <meta name="text:Link 4 URL" content=""/>
  96. <meta name="text:Link 4" content=""/>
  97. <meta name="text:Link 5 URL" content=""/>
  98. <meta name="text:Link 5" content=""/>
  99. <meta name="text:Link 6 URL" content=""/>
  100. <meta name="text:Link 6" content=""/>
  101.  
  102. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  103.  
  104. <script src="https://unpkg.com/feather-icons"></script>
  105.  
  106. <!----- LOAD IN ----->
  107.  
  108. <script>
  109. $(document).ready(function(){
  110. $(function() {
  111. $('body').removeClass('load-in');
  112. });
  113. });
  114. </script>
  115.  
  116.  
  117. <style type="text/css">
  118.  
  119. body {
  120. font-family: '{select:font}', sans-serif;
  121. font-size: {select:font size};
  122. color: {color:text};
  123. background-color: {color:background};
  124. text-align: left;
  125. line-height: 160%;
  126. word-wrap: break-word;
  127. letter-spacing: 0.2px;
  128. margin: 0;
  129. padding: 0;
  130. -webkit-transition: 2s opacity;
  131. -moz-transition: 2s opacity;
  132. -ms-transition: 2s opacity;
  133. -o-transition: 2s opacity;
  134. transition: 2s opacity;
  135. }
  136.  
  137. body.load-in {
  138. opacity: 0;
  139. -webkit-transition: none;
  140. -moz-transition: none;
  141. -ms-transition: none;
  142. -o-transition: none;
  143. transition: none;
  144. }
  145.  
  146. a {
  147. text-decoration: none;
  148. color: {color:link};
  149. -webkit-transition: all 0.3s;
  150. -moz-transition: all 0.3s;
  151. -ms-transition: all 0.3s;
  152. -o-transition: all 0.3s;
  153. transition: all 0.3s;
  154. }
  155.  
  156. a:hover {
  157. color: {color:accent};
  158. -webkit-transition: all 0.3s;
  159. -moz-transition: all 0.3s;
  160. -ms-transition: all 0.3s;
  161. -o-transition: all 0.3s;
  162. transition: all 0.3s;
  163. }
  164.  
  165. p a, li a {border-bottom: 2px solid rgba({RGBcolor:accent}, 0.6);}
  166. p a:hover, li a:hover {border-bottom: 2px solid rgba({RGBcolor:accent}, 1.0);}
  167.  
  168. h1, h2, h3, h4, h5 {
  169. text-transform: uppercase;
  170. letter-spacing: 2px;
  171. color: {color:title};
  172. line-height: 140%;
  173. }
  174.  
  175. h1 a, h2 a, h3 a, h4 a, h5 a {color: {color:title};}
  176. h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover {color: {color:accent}}
  177. h1 {font-size: 1.1em;}
  178. h2 {font-size: 1em;}
  179. h3 {font-size: 0.9em;}
  180. h4 {font-size: 1em; font-weight: normal;}
  181. h5 {font-size: 0.9em; font-weight: normal;}
  182.  
  183. small {font-size: 0.9em;}
  184. big {font-size: 1.1em;}
  185. b, strong {color: {color:title};}
  186. b a, bold a, strong a {color: {color:link};}
  187. b a:hover, bold a:hover, strong a:hover {color: {color:accent};}
  188.  
  189. hr {
  190. height: 1px;
  191. border: none;
  192. background-color: {color:borders};
  193. }
  194.  
  195. blockquote {
  196. padding: 0 0 0 1.25em;
  197. border-left: 1px solid {color:borders};
  198. margin: 1.25em 0 1.25em 1.25em;
  199. }
  200.  
  201. ul {list-style-type: circle;}
  202. ol {list-style-type: decimal;}
  203. li {max-width: 100%;}
  204.  
  205. .tippy-tooltip.custom-theme {
  206. background-color: {color:posts};
  207. color: {color:title};
  208. border: 1px solid {color:borders};
  209. text-align: center;
  210. font-family: inherit;
  211. font-weight: normal;
  212. text-transform: uppercase;
  213. letter-spacing: 1px;
  214. font-style: normal;
  215. padding: 0.25em;
  216. margin: 20px auto auto 10px;
  217. font-size: 0.8em;
  218. border-radius: 0;
  219. }
  220.  
  221. ::-webkit-scrollbar {
  222. width: 17px;
  223. height: 17px;
  224. background-color: {color:background};
  225. }
  226.  
  227. ::-webkit-scrollbar-track {border: 8px solid {color:background}; background-color: {color:borders};}
  228.  
  229. ::-webkit-scrollbar-thumb {
  230. border: 6px solid {color:background};
  231. background-color: {color:title};
  232. min-height: 24px;
  233. min-width: 24px;
  234. }
  235.  
  236. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  237. z-index: 999999999!important;
  238. margin-top: 0.5em;
  239. opacity: 0.6;
  240. transform: scale(0.8);
  241. transform-origin: 100% 0;
  242. -webkit-transform: scale(0.8);
  243. -webkit-transform-origin: 100% 0;
  244. -o-transform: scale(0.8);
  245. -o-transform-origin: 100% 0;
  246. -moz-transform: scale(0.8);
  247. -moz-transform-origin: 100% 0;
  248. -ms-transform: scale(0.8);
  249. -ms-transform-origin: 100% 0;
  250. -webkit-transition: all 0.4s;
  251. -moz-transition: all 0.4s;
  252. -ms-transition: all 0.4s;
  253. -o-transition: all 0.4s;
  254. transition: all 0.4s;
  255. }
  256.  
  257. .tmblr-iframe-compact .tmblr-iframe--unified-controls:hover {
  258. opacity: 1.0;
  259. -webkit-transition: all 0.4s;
  260. -moz-transition: all 0.4s;
  261. -ms-transition: all 0.4s;
  262. -o-transition: all 0.4s;
  263. transition: all 0.4s;
  264. }
  265.  
  266. .tmblr-iframe--app-cta-button {display: none!important;}
  267.  
  268. /*----- HEADER -----*/
  269.  
  270. header {
  271. position: relative;
  272. top: 0;
  273. left: 0;
  274. width: 100%;
  275. margin: 0 auto;
  276. text-align: center;
  277. border-bottom: 1px solid {color:borders};
  278. background: {color:posts};
  279. }
  280.  
  281. #headercontent {padding: 50px 0 70px 0; max-width: 70%; margin: auto;}
  282. #description {margin-top: 1.25em;}
  283.  
  284. .icon {
  285. border-radius: 50%;
  286. width: 80px;
  287. height: 80px;
  288. }
  289.  
  290. nav {
  291. position: absolute;
  292. margin: -40px auto auto auto;
  293. text-transform: uppercase;
  294. letter-spacing: 1px;
  295. font-size: 0.9em;
  296. display: flex;
  297. align-items: center;
  298. justify-content: center;
  299. left: calc(50% - (80px * 2.5));
  300. z-index: 100;
  301. }
  302.  
  303. nav a {
  304. display: inline-block;
  305. vertical-align: middle;
  306. margin: 0 13px;
  307. }
  308.  
  309. .links a {
  310. border-radius: 50%;
  311. width: 46px;
  312. height: 46px;
  313. box-sizing: border-box;
  314. text-align: center;
  315. vertical-align: middle;
  316. padding: 12px;
  317. background-color: {color:accent};
  318. }
  319.  
  320. .links .feather {
  321. width: 20px;
  322. height: 20px;
  323. color: {color:posts};
  324. -webkit-transition: all 0.3s;
  325. -moz-transition: all 0.3s;
  326. -ms-transition: all 0.3s;
  327. -o-transition: all 0.3s;
  328. transition: all 0.3s;
  329. }
  330.  
  331. .links a:hover {background-color: {color:title};}
  332.  
  333. .links a:hover .feather {
  334. -webkit-transition: all 0.3s;
  335. -moz-transition: all 0.3s;
  336. -ms-transition: all 0.3s;
  337. -o-transition: all 0.3s;
  338. transition: all 0.3s;
  339. }
  340.  
  341. .dropbutton {cursor: help;}
  342. .dropdown {display: none; margin-top: 1.25em;}
  343.  
  344. .dropdown a::before {
  345. content: '';
  346. display: inline-block;
  347. vertical-align: middle;
  348. background: {color:accent};
  349. width: 5px;
  350. height: 5px;
  351. border-radius: 50%;
  352. margin: 0 0.75em 0.25em 0.75em;
  353. }
  354.  
  355. .dropdown a:first-of-type::before {display: none;}
  356.  
  357. /*----- POSTS -----*/
  358.  
  359. .container {
  360. margin: auto;
  361. width: {select:post width};
  362. position: relative;
  363. padding: 70px 0;
  364. }
  365.  
  366. #timeline {
  367. position: absolute;
  368. width: 1px;
  369. height: 100%;
  370. background-color: {color:borders};
  371. left: 50%;
  372. top: 0;
  373. bottom: 0;
  374. }
  375.  
  376. article {
  377. position: relative;
  378. width: {select:post width};
  379. display: block;
  380. background-color: {color:posts};
  381. border: 1px solid {color:borders};
  382. }
  383.  
  384. .posts {margin: {text:post margin}px 0; z-index: 2;}
  385.  
  386. {block:IndexPage}
  387. .posts:nth-child(odd) {margin-left: calc(-{select:post width} / 2 - 100px);}
  388. .posts:nth-child(even) {margin-left: calc({select:post width} / 2 + 100px);}
  389. {/block:IndexPage}
  390.  
  391. {block:PermalinkPage}
  392. .posts {margin: 100px auto;}
  393. {/block:PermalinkPage}
  394.  
  395. .tumblr_video_container {max-height: 500px!important; overflow: hidden!important;}
  396. .posts li, .posts blockquote, .posts img, figure, video, iframe, .video, .video iframe {max-width: 100%;}
  397. .postsource {display: none;}
  398.  
  399. /*----- COMMON -----*/
  400.  
  401. .title {
  402. color: {color:title};
  403. font-size: 1.1em;
  404. letter-spacing: 2px;
  405. font-weight: bold;
  406. text-transform: uppercase;
  407. line-height: 140%;
  408. }
  409.  
  410. .title a {color: {color:title};}
  411. .title a:hover {color: {color:accent};}
  412.  
  413. .subtitle {
  414. text-transform: uppercase;
  415. letter-spacing: 1px;
  416. font-size: 0.9em;
  417. color: {color:title};
  418. }
  419.  
  420. .subtitle a {color: {color:title};}
  421. .subtitle a:hover {color: {color:accent};}
  422.  
  423. .upper {
  424. text-transform: uppercase;
  425. letter-spacing: 1px;
  426. font-size: 0.9em;
  427. }
  428.  
  429. .padding {padding: 25px;}
  430.  
  431. header::before, footer::after {
  432. content: '';
  433. width: 100%;
  434. height: 8px;
  435. background-color: {color:accent};
  436. position: fixed;
  437. left: 0;
  438. right: 0;
  439. z-index: 9999999;
  440. }
  441.  
  442. header::before {top: 0;}
  443. footer::after {bottom: 0;}
  444.  
  445. /*----- CAPTION -----*/
  446.  
  447. .caption {
  448. padding: 25px;
  449. border-bottom: 1px solid {color:borders};
  450. margin: 0;
  451. list-style-type: none;
  452. }
  453.  
  454. .caption:last-of-type {border-bottom: none;}
  455. .caption p {margin: 1em 0 0 0;}
  456. .ogcap p:first-of-type {margin-top: 0;}
  457. .captop:first-of-type {border-top: 1px solid {color:borders};}
  458. .caption iframe {max-width: 100%;}
  459.  
  460. {block:ifHideCaption}
  461. {block:IndexPage}
  462. .hidecap {display: none;}
  463. {/block:IndexPage}
  464. {/block:ifHideCaption}
  465.  
  466. .capicon {
  467. width: 20px;
  468. height: 20px;
  469. display: inline-block;
  470. vertical-align: middle;
  471. border-radius: 50%;
  472. }
  473.  
  474. .username {display: inline-block; margin-left: 1em; vertical-align: middle;}
  475. .username a, .username a:hover {border-bottom: none;}
  476.  
  477. .deactive:hover {color: {color:text};}
  478.  
  479. .deactive::after {
  480. content: '(deactivated)';
  481. margin-left: 1em;
  482. opacity: 0;
  483. color: {color:text};
  484. -webkit-transition: all 0.5s;
  485. -moz-transition: all 0.5s;
  486. -ms-transition: all 0.5s;
  487. -o-transition: all 0.5s;
  488. transition: all 0.5s;
  489. }
  490.  
  491. .deactive:hover::after {
  492. opacity: 0.8;
  493. -webkit-transition: all 0.5s;
  494. -moz-transition: all 0.5s;
  495. -ms-transition: all 0.5s;
  496. -o-transition: all 0.5s;
  497. transition: all 0.5s;
  498. }
  499.  
  500. p.tmblr-attribution {margin-top: 1em !important;}
  501.  
  502. /*----- TEXT -----*/
  503.  
  504. .posts .title, .notes .title {
  505. padding: 25px;
  506. border-bottom: 1px solid {color:borders};
  507. background-color: {color:info background};
  508. color: {color:info link};
  509. }
  510.  
  511. .posts .title a:hover, .notes .title a:hover {color: {color:accent};}
  512.  
  513. pre {
  514. line-height: inherit;
  515. font-size: inherit;
  516. white-space: pre-wrap;
  517. white-space: -moz-pre-wrap;
  518. white-space: -pre-wrap;
  519. white-space: -o-pre-wrap;
  520. word-wrap: break-word;
  521. background-color: {color:info background};
  522. color: {color:info text};
  523. padding: 25px;
  524. border: 1px solid {color:borders};
  525. border-radius: 4px;
  526. }
  527.  
  528. a.read_more {
  529. text-transform: uppercase;
  530. letter-spacing: 1px;
  531. color: {color:title};
  532. font-weight: bold;
  533. }
  534.  
  535. a.read_more:hover {color: {color:accent};}
  536. p.read_more_container {margin-top: 1.5em; text-align: center;}
  537.  
  538. @font-face {
  539. font-family: Calluna;
  540. src: url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.eot?3=&v=f685dc881c60c298ea22a73fe505b88a");
  541. 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");
  542. font-weight: 700;
  543. font-style: italic
  544. }
  545.  
  546. @font-face {
  547. font-family: Fairwater;
  548. 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");
  549. font-weight: 400;
  550. font-style: normal
  551. }
  552.  
  553. p.npf_quirky {font-family: Fairwater; font-size: 20px;}
  554.  
  555. .npf_color_joey {color: #e57373;}
  556. .npf_color_monica {color: #ff8a65;}
  557. .npf_color_phoebe {color: #ffee58;}
  558. .npf_color_ross {color: #81c784;}
  559. .npf_color_rachel {color: #4fc3f7;}
  560. .npf_color_chandler {color: #9575cd;}
  561. .npf_color_niles {color: #f06292;}
  562.  
  563. #k {
  564. position: fixed;
  565. bottom: 20px;
  566. right: 20px;
  567. font-size: 15px;
  568. background-color: transparent;
  569. padding: 5px 8px;
  570. border-radius: 3px;
  571. }
  572.  
  573. #k:hover {background-color: {color:accent}; color: {color:background};}
  574.  
  575. #m {
  576. text-align: center;
  577. display: none;
  578. margin: 1em auto;
  579. }
  580.  
  581. /*----- LINK -----*/
  582.  
  583. .linkp {
  584. color: {color:text};
  585. -webkit-transition: all 0.3s;
  586. -moz-transition: all 0.3s;
  587. -ms-transition: all 0.3s;
  588. -o-transition: all 0.3s;
  589. transition: all 0.3s;
  590. }
  591.  
  592. .linkp:hover {
  593. background-color: {color:info background};
  594. color: {color:info text};
  595. -webkit-transition: all 0.3s;
  596. -moz-transition: all 0.3s;
  597. -ms-transition: all 0.3s;
  598. -o-transition: all 0.3s;
  599. transition: all 0.3s;
  600. }
  601.  
  602. .link h1 {margin-top: 0;}
  603. .thumbnail {width: {select:post width}; max-width: 100%;}
  604. .linkhost {margin-top: 1em; font-style: italic;}
  605.  
  606. .npf-link-block {
  607. margin-top: 15px;
  608. border-radius: 0;
  609. -webkit-transition: all 0.3s;
  610. -moz-transition: all 0.3s;
  611. -ms-transition: all 0.3s;
  612. -o-transition: all 0.3s;
  613. transition: all 0.3s;
  614. }
  615.  
  616. .npf-link-block:hover {
  617. background-color: {color:info background};
  618. color: {color:info text};
  619. -webkit-transition: all 0.3s;
  620. -moz-transition: all 0.3s;
  621. -ms-transition: all 0.3s;
  622. -o-transition: all 0.3s;
  623. transition: all 0.3s;
  624. }
  625.  
  626. .npf-link-block .poster .title {background-color: initial; padding: 25px;}
  627. .npf-link-block.no-poster .title {padding: 25px 25px 0 25px;}
  628. .npf-link-block .title {font-size: 1.2em; border-bottom: none;}
  629. .npf-link-block .bottom {padding: 25px !important; color: {color:text};}
  630.  
  631. .npf-link-block .bottom .site-name {
  632. text-transform: lowercase;
  633. font-size: inherit;
  634. color: {color:text};
  635. font-style: italic;
  636. }
  637.  
  638. /*----- PHOTO -----*/
  639.  
  640. img {
  641. margin: 0;
  642. display: block;
  643. height: auto;
  644. }
  645.  
  646. .photo img {width: 100%; max-width: 100%;}
  647. .vignette, #vignette {opacity: 0;}
  648. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(60, 60, 60, .8) !important;}
  649.  
  650. .lightbox-image, #tumblr_lightbox img {
  651. box-shadow: none !important;
  652. border-radius: 0 !important;
  653. max-width: none;
  654. }
  655.  
  656. /*----- PHOTOSET -----*/
  657.  
  658. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  659. margin-left: 0 !important;
  660. margin-right: 0 !important;
  661. }
  662.  
  663. .captext figure {margin: 1em 0;}
  664. .captext figure .tmblr-full {margin-top: {select:photoset gutter}px;}
  665. .tmblr-full:hover {cursor: pointer;}
  666. .npf_image, .tmblr-full {border: none; outline: none;}
  667.  
  668. .text-post .photo-slideshow.processed {border-bottom: 2px solid {color:borders};}
  669.  
  670. /*----- QUOTE -----*/
  671.  
  672. .quote, p.npf_quote {
  673. text-transform: uppercase;
  674. letter-spacing: 1px;
  675. color: {color:title};
  676. line-height: 185%;
  677. }
  678.  
  679. .quote p:first-of-type {margin-top: 0;}
  680. .quote p:last-of-type {margin-bottom: 0;}
  681. p.npf_quote {font-family: inherit; margin-bottom: 1em;}
  682.  
  683. .source {
  684. font-style: italic;
  685. border-bottom: 1px solid {color:borders};
  686. background-color: {color:info background};
  687. color: {color:info text};
  688. }
  689.  
  690. .source a {color: {color:info link};}
  691. .source a:hover {color: {color:accent};}
  692.  
  693. /*----- CHAT -----*/
  694.  
  695. .chat {padding: 0; margin: 0;}
  696. .chat li {list-style-type: none;}
  697. .line {padding: 25px; border-bottom: 1px solid {color:borders};}
  698. .line:last-of-type {border-bottom: none;}
  699. .chatter {color: {color:title}; font-weight: bold;}
  700. p.npf_chat {font-family: inherit; margin-top: 1.25em;}
  701.  
  702. p.npf_chat b {
  703. color: {color:title};
  704. text-transform: uppercase;
  705. letter-spacing: 1px;
  706. }
  707.  
  708. /*----- ANSWER -----*/
  709.  
  710. .askicon {
  711. display: inline-block;
  712. border-radius: 50%;
  713. margin-top: 0.5em;
  714. width: 40px;
  715. height: 40px;
  716. float: left;
  717. }
  718.  
  719. .askpost .subtitle {color: {color:info link};}
  720. .askpost a:hover {color: {color:accent};}
  721. .answericon {float: right;}
  722. .askpost p:first-of-type {margin-top: 0;}
  723. .askpost p:last-of-type {margin-bottom: 0;}
  724.  
  725. .askpost .reply .subtitle {text-align: right;}
  726. .question .subtitle {margin-bottom: 0.5em;}
  727. .question {margin-left: calc(40px + 1em); text-align: left;}
  728. .reply {margin-right: calc(40px + 1em); text-align: right;}
  729.  
  730. .box {
  731. background-color: {color:info background};
  732. color: {color:info text};
  733. padding: 25px;
  734. box-sizing: border-box;
  735. border-radius: 4px;
  736. border: 1px solid {color:borders};
  737. }
  738.  
  739. .box a {color: {color:info link};}
  740. .box a:hover {color: {color:accent};}
  741.  
  742. /*----- AUDIO -----*/
  743.  
  744. .button {
  745. width: 30px;
  746. height: 30px;
  747. overflow: hidden;
  748. position: relative;
  749. z-index: 10;
  750. margin: 8px 7px 6px 7px;
  751. }
  752.  
  753. .audiobox {
  754. background-color: #f2f2f2;
  755. z-index: 50;
  756. border-radius: 50%;
  757. position: absolute;
  758. margin: 0;
  759. }
  760.  
  761. .audiopost {
  762. text-align: right;
  763. border-top: 1px solid {color:borders};
  764. background-color: {color:info background};
  765. }
  766.  
  767. .audioinfo {
  768. display: inline-block;
  769. max-width: calc({select:post width} - 90px);
  770. color: {color:info text};
  771. }
  772.  
  773. .audioinfo li {list-style-type: none;}
  774. .audioinfo .subtitle {color: {color:info link};}
  775. .track {font-size: 1.1em;}
  776.  
  777. /*----- INFO -----*/
  778.  
  779. {block:IndexPage}
  780. {block:ifNotOneColumn}
  781. .posts:nth-child(odd) .posticon {margin-left: calc({select:post width} + 100px - 20px);}
  782. .posts:nth-child(even) .posticon {margin-left: -120px;}
  783.  
  784. .posts:nth-child(odd)::before,
  785. .posts:nth-child(even)::before,
  786. .posts:nth-child(odd) .info::after,
  787. .posts:nth-child(even) .info::after {
  788. content: '';
  789. position: absolute;
  790. width: 100px;
  791. height: 1px;
  792. background-color: {color:borders};
  793. z-index: -1;
  794. top: 50%;
  795. {block:PermalinkPage}display: none;{/block:PermalinkPage}
  796. }
  797.  
  798. .posts:nth-child(odd)::before {margin-left: {select:post width};}
  799. .posts:nth-child(even)::before {margin-left: -100px;}
  800. .posts:nth-child(odd) .info::after {margin-left: -250px;}
  801. .posts:nth-child(even) .info::after {margin-left: 150px;}
  802. {/block:ifNotOneColumn}
  803. {/block:IndexPage}
  804.  
  805. .posticon {
  806. width: 40px;
  807. height: 40px;
  808. position: absolute;
  809. z-index: 1000;
  810. background-color: {color:accent};
  811. padding: 11px;
  812. border-radius: 50%;
  813. color: {color:posts};
  814. top: calc(50% - 20px);
  815. box-sizing: border-box;
  816. line-height: 100%;
  817. {block:PermalinkPage}
  818. top: calc(100% - 15px);
  819. left: calc(50% - 20px);
  820. {/block:PermalinkPage}
  821. }
  822.  
  823. .posticon .feather {width: 18px; height: 18px;}
  824.  
  825. .posticon:hover {color: {color:posts}; background-color: {color:link};}
  826.  
  827. {block:PermalinkPage}
  828. .posts:nth-child(odd) .posticon, .posts:nth-child(even) .posticon {margin: auto;}
  829. {/block:PermalinkPage}
  830.  
  831. .info {
  832. z-index: 2;
  833. text-align: center;
  834. {block:IndexPage}
  835. {block:ifNotOneColumn}
  836. position: absolute;
  837. width: 300px;
  838. border: 1px solid {color:borders};
  839. box-sizing: border-box;
  840. background-color: {color:posts};
  841. top: 50%;
  842. transform: translateY(-50%);
  843. {/block:ifNotOneColumn}
  844. {/block:IndexPage}
  845. {block:PermalinkPage}
  846. margin: auto;
  847. border-top: 1px solid {color:borders};
  848. text-align: left;
  849. {/block:PermalinkPage}
  850. }
  851.  
  852. {block:IndexPage}
  853. .posts:nth-child(odd) .info {margin-left: calc({select:post width} + 200px);}
  854. .posts:nth-child(even) .info {margin-left: -500px;}
  855. {/block:IndexPage}
  856.  
  857. .pin-post a {color: {color:accent}; display: block;}
  858.  
  859. .pin-post a svg {
  860. width: 1.25em;
  861. height: 1.25em;
  862. margin-right: 0.75em;
  863. display: inline-block;
  864. vertical-align: middle;
  865. }
  866.  
  867. {block:ifOneColumn}
  868. .one-flex {
  869. display: flex;
  870. flex-direction: row;
  871. justify-content: space-between;
  872. align-items: center;
  873. }
  874. {/block:ifOneColumn}
  875.  
  876. .date {font-weight: bold; color: {color:title};}
  877. .lirb a, .and {display: inline-block; vertical-align: middle; line-height: 1em;}
  878. .and {margin: 0 0.15em;}
  879.  
  880. {block:PermalinkPage}
  881. .lirb {float: right; text-align: right; display: inline-block;}
  882. {/block:PermalinkPage}
  883.  
  884. .like-b {
  885. position: relative;
  886. display: inline-block;
  887. height: 1em;
  888. line-height: 1em;
  889. vertical-align: middle;
  890. margin-bottom: -0.5px;
  891. }
  892.  
  893. .like-b .like_button iframe {
  894. position: absolute;
  895. top: 0;
  896. left: 0;
  897. bottom: 0;
  898. right: 0;
  899. z-index: 2;
  900. opacity: 0;
  901. }
  902.  
  903. .like_button iframe {width: 100% !important; height: 100% !important;}
  904. .like-b .liked + .b {color: {color:accent};}
  905. .like-b .liked + .b:after {content: 'd';}
  906.  
  907. /*----- TAGS -----*/
  908.  
  909. .tags {
  910. border-top: 1px solid {color:borders};
  911. background-color: {color:info background};
  912. color: {color:info text};
  913. text-transform: lowercase;
  914. text-align: center;
  915. {block:IndexPage}{block:ifHideTags}
  916. display: none;
  917. {/block:ifHideTags}{/block:IndexPage}
  918. }
  919.  
  920. .tags a {display: inline-block; color: {color:info link};}
  921. .tags a:hover {color: {color:accent};}
  922. .slash {margin: 0 0.5em;}
  923. .slash:last-of-type {display: none;}
  924.  
  925. article.td-page {
  926. padding: 25px;
  927. margin: {text:post margin}px auto;
  928. box-sizing: border-box;
  929. text-align: center;
  930. }
  931.  
  932. article.td-page .subtitle {color: {color:accent};}
  933.  
  934. /*----- POST NOTES -----*/
  935.  
  936. ol.notes {
  937. list-style-type: none;
  938. width: {select:post width};
  939. padding: 25px;
  940. margin: 0;
  941. box-sizing: border-box;
  942. }
  943.  
  944. ol.notes li.note {display: block; margin: 0.75em 0;}
  945.  
  946. ol.notes li.note img.avatar {
  947. border-radius: 50%;
  948. width: 20px;
  949. height: 20px;
  950. margin-right: 1em;
  951. display: inline-block;
  952. vertical-align: middle;
  953. }
  954.  
  955. ol.notes a {
  956. border-bottom: none;
  957. text-transform: uppercase;
  958. letter-spacing: 1px;
  959. font-size: 0.9em;
  960. }
  961.  
  962. /*----- ONE COLUMN -----*/
  963.  
  964. {block:ifOneColumn}
  965. .posts:nth-child(odd), .posts:nth-child(even) {margin: {text:post margin}px auto;}
  966. .posticon {top: calc(100% - 15px); left: calc(50% - 20px);}
  967. .posts:nth-child(odd) .posticon, .posts:nth-child(even) .posticon {margin: auto;}
  968.  
  969. .info {
  970. position: static;
  971. margin: auto;
  972. width: {select:post width};
  973. border: none;
  974. border-top: 1px solid {color:borders};
  975. transform: none;
  976. text-align: left;
  977. }
  978.  
  979. .posts:nth-child(odd) .info, .posts:nth-child(even) .info {
  980. margin: auto;
  981. }
  982.  
  983. .posts:nth-child(odd)::before,
  984. .posts:nth-child(even)::before,
  985. .posts:nth-child(odd) .info::after,
  986. .posts:nth-child(even) .info::after {
  987. display: none;
  988. }
  989.  
  990. .tags {text-align: center;}
  991. .lirb {float: right; display: inline-block;}
  992. {/block:ifOneColumn}
  993.  
  994. /*----- PAGINATION -----*/
  995.  
  996. footer {
  997. position: relative;
  998. background-color: {color:posts};
  999. border-top: 1px solid {color:borders};
  1000. padding: 80px 10px;
  1001. width: 100%;
  1002. bottom: 0;
  1003. left: 0;
  1004. right: 0;
  1005. box-sizing: border-box;
  1006. }
  1007.  
  1008. .pg {
  1009. margin: auto;
  1010. text-align: center;
  1011. color: {color:title};
  1012. font-size: 1em;
  1013. }
  1014.  
  1015. .pg .feather {
  1016. display: inline;
  1017. vertical-align: middle;
  1018. margin: 0 7px;
  1019. width: 20px;
  1020. height: 20px;
  1021. background-color: {color:accent};
  1022. color: {color:background};
  1023. padding: 10px;
  1024. border-radius: 50%;
  1025. -webkit-transition: all 0.3s;
  1026. -moz-transition: all 0.3s;
  1027. -ms-transition: all 0.3s;
  1028. -o-transition: all 0.3s;
  1029. transition: all 0.3s;
  1030. }
  1031.  
  1032. .pg .feather:hover {
  1033. background-color: {color:link};
  1034. -webkit-transition: all 0.3s;
  1035. -moz-transition: all 0.3s;
  1036. -ms-transition: all 0.3s;
  1037. -o-transition: all 0.3s;
  1038. transition: all 0.3s;
  1039. }
  1040.  
  1041. #btop {
  1042. position: fixed;
  1043. right: 28px;
  1044. bottom: 50px;
  1045. }
  1046.  
  1047. #k, #btop {z-index: 500;}
  1048.  
  1049. /*----- MOBILE CONTROLS -----*/
  1050.  
  1051. .mobile-controls {
  1052. position: fixed;
  1053. right: 15px;
  1054. top: 1.25em;
  1055. z-index: 150;
  1056. display: none;
  1057. }
  1058.  
  1059. .mobile-controls a svg {
  1060. font-size: 1.25em;
  1061. display: inline-block;
  1062. vertical-align: middle;
  1063. }
  1064.  
  1065. .mobile-controls a {margin-left: 0.75em;}
  1066.  
  1067. /*----- RESPONSIVE -----*/
  1068.  
  1069. @media only screen and (min-width: 1024px) {
  1070. {block:PermalinkPage}
  1071. footer {display: none;}
  1072. {/block:PermalinkPage}
  1073. }
  1074.  
  1075. @media only screen and (max-width: 1365px) and (min-width: 1280px) {
  1076. {block:IndexPage}
  1077. {block:ifNotOneColumn}
  1078. .posts:nth-child(odd) {margin-left: calc(-{select:post width} / 2 - 50px);}
  1079. .posts:nth-child(even) {margin-left: calc({select:post width} / 2 + 50px);}
  1080.  
  1081. .posts:nth-child(odd) .info {margin-left: calc({select:post width} + 100px);}
  1082. .posts:nth-child(even) .info {margin-left: -400px;}
  1083.  
  1084. .posts:nth-child(odd) .posticon {margin-left: calc({select:post width} - 20px + 50px);}
  1085. .posts:nth-child(even) .posticon {margin-left: -70px;}
  1086. {/block:ifNotOneColumn}
  1087. {/block:IndexPage}
  1088. }
  1089.  
  1090. @media only screen and (max-width: 1279px) {
  1091.  
  1092. .posts:nth-child(odd), .posts:nth-child(even) {margin: {text:post margin}px auto;}
  1093. .posticon {top: calc(100% - 15px); left: calc(50% - 20px);}
  1094.  
  1095. .posts:nth-child(odd) .posticon, .posts:nth-child(even) .posticon,
  1096. .posts:nth-child(odd) .info, .posts:nth-child(even) .info {
  1097. margin: auto;
  1098. }
  1099.  
  1100. .info {
  1101. position: static;
  1102. width: {select:post width};
  1103. border: none;
  1104. box-sizing: border-box;
  1105. transform: none;
  1106. border-top: 1px solid {color:borders};
  1107. text-align: left;
  1108. }
  1109.  
  1110. .tags {text-align: center;}
  1111. .lirb {float: right; display: inline-block;}
  1112.  
  1113. .posts:nth-child(odd)::before,
  1114. .posts:nth-child(even)::before,
  1115. .posts:nth-child(odd) .info::after,
  1116. .posts:nth-child(even) .info::after {
  1117. display: none;
  1118. }
  1119.  
  1120. }
  1121.  
  1122. @media only screen and (max-width: 1023px) {
  1123. body {overflow-x: hidden;}
  1124. .mobile-controls, #m {display: block;}
  1125. #k {display: none;}
  1126. .tmblr-iframe-compact .tmblr-iframe--unified-controls {display: none;}
  1127. }
  1128.  
  1129. @media only screen and (max-width: 599px) {
  1130. .container {width: 100vw;}
  1131. article, .info {width: 90vw;}
  1132. nav {left: calc(50vw - (80px * 2.5));}
  1133. .notes {margin: auto;}
  1134. #k, #btop {display: none;}
  1135. }
  1136.  
  1137. @media only screen and (max-width: 423px) {
  1138. .mobile {display: none;}
  1139. nav {left: calc(50vw - (80px * 1.5) - 5px);}
  1140. }
  1141.  
  1142. @media only screen and (max-width: 349px) {
  1143. .mdate {display: none;}
  1144. }
  1145.  
  1146. {CustomCSS}
  1147.  
  1148. </style>
  1149. </head>
  1150.  
  1151. <body class="load-in">
  1152.  
  1153. <!----- MOBILE CONTROLS ----->
  1154.  
  1155. <div class="mobile-controls">
  1156. <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>
  1157. <a href="https://www.tumblr.com/message/{Name}" title="message">
  1158. <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>
  1159. <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>
  1160. </div>
  1161.  
  1162. <!----- HEADER ----->
  1163.  
  1164. <header>
  1165. <div id="headercontent">
  1166. <a href="/" class="title">{Title}</a>
  1167. <div id="description">{Description}</div>
  1168. <div class="dropdown upper">
  1169. {block:ifLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:ifLink1}{block:ifLink2}<a href="{text:Link 2 URL}">{text:Link 2}</a>{/block:ifLink2}{block:ifLink3}<a href="{text:Link 3 URL}">{text:Link 3}</a>{/block:ifLink3}{block:ifLink4}<a href="{text:Link 4 URL}">{text:Link 4}</a>{/block:ifLink4}{block:ifLink5}<a href="{text:Link 5 URL}">{text:Link 5}</a>{/block:ifLink5}{block:ifLink6}<a href="{text:Link 6 URL}">{text:Link 6}</a>{/block:ifLink6}{block:HasPages}{block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}
  1170. </div>
  1171. </div>
  1172. <nav>
  1173. <span class="links">
  1174. <a href="/" title="home" class="mobile"><i data-feather="home" aria-hidden="true"></i></a>
  1175. <a href="/ask" title="message"><i data-feather="mail" aria-hidden="true"></i></a>
  1176. </span>
  1177. <a href="/"><img src="{PortraitURL-128}" class="icon"></a>
  1178. <span class="links">
  1179. <a href="/archive" title="archive" class="mobile"><i data-feather="grid" aria-hidden="true"></i></a>
  1180. <a class="dropbutton" title="links"><i data-feather="menu" aria-hidden="true"></i></a>
  1181. </span>
  1182. </nav>
  1183.  
  1184. </header>
  1185.  
  1186. <section class="container">
  1187.  
  1188. <!----- INFO ----->
  1189.  
  1190. <div id="timeline"></div>
  1191.  
  1192. <!----- TAG AND DAY PAGES ----->
  1193.  
  1194. {block:TagPage}
  1195. <article class="td-page">
  1196. Viewing posts filed under <span class="subtitle">#{Tag}</span>
  1197. </article>
  1198. {/block:TagPage}
  1199.  
  1200. {block:DayPage}
  1201. <article class="td-page">
  1202. Viewing posts made on <span class="subtitle">{Month} {DayOfMonth}, {Year}</span>
  1203. </article>
  1204. {/block:DayPage}
  1205.  
  1206. {block:Posts inlineMediaWidth="1280"}
  1207. <article class="posts" id="{PostID}">
  1208.  
  1209. <!----- POSTS ----->
  1210.  
  1211. {block:Text}
  1212. {block:Date}<a href="{Permalink}" class="posticon"><i data-feather="type" aria-hidden="true"></i></a>{/block:Date}
  1213.  
  1214. <div class="text-post" id="{PostID}">
  1215. {block:Title}<div class="title"><a href="{Permalink}">{Title}</a></div>{/block:Title}
  1216. {block:NotReblog}
  1217. <li class="caption ogcap">
  1218. <div class="captext">{Body}</div>
  1219. </li>
  1220. {/block:NotReblog}
  1221. {block:RebloggedFrom}{block:Reblogs}
  1222. <li class="caption">
  1223. <img src="{PortraitURL-64}" class="capicon">
  1224. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1225. <div class="captext">{Body}</div>
  1226. </li>
  1227. {/block:Reblogs}{/block:RebloggedFrom}
  1228. </div>
  1229. {/block:Text}
  1230.  
  1231. {block:Link}
  1232. {block:Date}<a href="{Permalink}" class="posticon"><i data-feather="link" aria-hidden="true"></i></a>{/block:Date}
  1233. <a href="{URL}"><div class="linkp">
  1234. {block:Thumbnail}<img src="{Thumbnail-HighRes}" class="thumbnail">{/block:Thumbnail}
  1235. <div class="link padding">
  1236. <div class="linktitle"><h1>{Name}</h1></div>
  1237. {block:Excerpt}<div class="linktxt">{Excerpt}</div>{/block:Excerpt}
  1238. {block:Host}<div class="linkhost">by {Host}</div>{/block:Host}
  1239. </div>
  1240. </div></a>
  1241. {block:Description}
  1242. {block:NotReblog}
  1243. <li class="caption captop ogcap {block:ifHideCaption}hidecap{/block:ifHideCaption}">
  1244. <div class="captext">{Description}</div>
  1245. </li>
  1246. {/block:NotReblog}
  1247. {/block:Description}
  1248. {block:RebloggedFrom}{block:Reblogs}
  1249. <li class="caption captop {block:ifHideCaption}hidecap{/block:ifHideCaption}">
  1250. <img src="{PortraitURL-64}" class="capicon">
  1251. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1252. <div class="captext">{Body}</div>
  1253. </li>
  1254. {/block:Reblogs}{/block:RebloggedFrom}
  1255. {/block:Link}
  1256.  
  1257. {block:Photo}
  1258. {block:Date}<a href="{Permalink}" class="posticon"><i data-feather="image" aria-hidden="true"></i></a>{/block:Date}
  1259. <div class="photo">
  1260. {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}
  1261. </div>
  1262. {block:Caption}
  1263. {block:NotReblog}
  1264. <li class="caption captop ogcap {block:ifHideCaption}hidecap{/block:ifHideCaption}">
  1265. <div class="captext">{Caption}</div>
  1266. </li>
  1267. {/block:NotReblog}
  1268. {block:Reblogs}
  1269. <li class="caption captop {block:ifHideCaption}hidecap{/block:ifHideCaption}">
  1270. <img src="{PortraitURL-64}" class="capicon">
  1271. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1272. <div class="captext">{Body}</div>
  1273. </li>
  1274. {/block:Reblogs}
  1275. {/block:Caption}
  1276. {/block:Photo}
  1277.  
  1278. {block:Photoset}
  1279. {block:Date}<a href="{Permalink}" class="posticon"><i data-feather="image" aria-hidden="true"></i></a>{/block:Date}
  1280. <div class="photo-slideshow" 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}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a></div>{/block:Photos}</div>
  1281. {block:Caption}
  1282. {block:NotReblog}
  1283. <li class="caption captop ogcap {block:ifHideCaption}hidecap{/block:ifHideCaption}">
  1284. <div class="captext">{Caption}</div>
  1285. </li>
  1286. {/block:NotReblog}
  1287. {block:Reblogs}
  1288. <li class="caption captop {block:ifHideCaption}hidecap{/block:ifHideCaption}">
  1289. <img src="{PortraitURL-64}" class="capicon">
  1290. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1291. <div class="captext">{Body}</div>
  1292. </li>
  1293. {/block:Reblogs}
  1294. {/block:Caption}
  1295. {/block:Photoset}
  1296.  
  1297. {block:Video}
  1298. {block:Date}<a href="{Permalink}" class="posticon"><i data-feather="video" aria-hidden="true"></i></a>{/block:Date}
  1299. <div class="video">{Video-700}</div>
  1300. {block:Caption}
  1301. {block:NotReblog}
  1302. <li class="caption ogcap {block:ifHideCaption}hidecap{/block:ifHideCaption}">
  1303. <div class="captext">{Caption}</div>
  1304. </li>
  1305. {/block:NotReblog}
  1306. {block:Reblogs}
  1307. <li class="caption {block:ifHideCaption}hidecap{/block:ifHideCaption}">
  1308. <img src="{PortraitURL-64}" class="capicon">
  1309. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1310. <div class="captext">{Body}</div>
  1311. </li>
  1312. {/block:Reblogs}
  1313. {/block:Caption}
  1314. {/block:Video}
  1315.  
  1316. {block:Quote}
  1317. {block:Date}<a href="{Permalink}" class="posticon"><i data-feather="bookmark" aria-hidden="true"></i></a>{/block:Date}
  1318. {block:Source}<div class="source padding">{Source}</div>{/block:Source}
  1319. <div class="quote padding">{Quote}</div>
  1320. {/block:Quote}
  1321.  
  1322. {block:Chat}
  1323. {block:Date}<a href="{Permalink}" class="posticon"><i data-feather="message-circle" aria-hidden="true"></i></a>{/block:Date}
  1324. {block:Title}<div class="title"><a href="{Permalink}">{Title}</a></div>{/block:Title}
  1325. <ul class="chat">{block:Lines}
  1326. <li class="line">
  1327. {block:Label}<div class="chatter subtitle">{Label}</div>{/block:Label}
  1328. {Line}
  1329. </li>
  1330. {/block:Lines}</ul>
  1331. {/block:Chat}
  1332.  
  1333. {block:Answer}
  1334. {block:Date}<a href="{Permalink}" class="posticon"><i data-feather="mail" aria-hidden="true"></i></a>{/block:Date}
  1335. <div class="padding">
  1336. <img src="{AskerPortraitURL-40}" class="askicon" id="asker">
  1337. <div class="askpost question box">
  1338. <div class="subtitle">{Asker}</div>
  1339. {Question}
  1340. </div>
  1341. </div>
  1342. {block:Answerer}
  1343. <li class="caption captop">
  1344. <img src="{AnswererPortraitURL-40}" class="askicon answericon">
  1345. <div class="askpost box reply">
  1346. <div class="subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Answerer}</a></div>
  1347. <div class="captext">{Answer}</div>
  1348. </div>
  1349. </li>
  1350. {/block:Answerer}
  1351. {block:NotReblog}
  1352. <li class="caption captop">
  1353. <img src="{PortraitURL-64}" class="askicon answericon">
  1354. <div class="askpost box reply">
  1355. <div class="subtitle">{Name}</div>
  1356. <div class="captext">{Replies}</div>
  1357. </div>
  1358. </li>
  1359. {/block:NotReblog}
  1360. {block:RebloggedFrom}{block:Reblogs}
  1361. <li class="caption">
  1362. <img src="{PortraitURL-64}" class="capicon">
  1363. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1364. <div class="captext">{Body}</div>
  1365. </li>
  1366. {/block:Reblogs}{/block:RebloggedFrom}
  1367. {/block:Answer}
  1368.  
  1369. {block:Audio}
  1370. {block:Date}<a href="{Permalink}" class="posticon"><i data-feather="music" aria-hidden="true"></i></a>{/block:Date}
  1371. {block:AlbumArt}
  1372. <div style="background-image: url('{AlbumArtURL}'); max-width: 100%; height: 150px; background-size: 100%; background-position: center;"></div>
  1373. {/block:AlbumArt}
  1374. <div class="audiopost padding">
  1375. <div class="audiobox"><div class="button">
  1376. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  1377. </div></div>
  1378. <div class="audioinfo">
  1379. {block:TrackName}<li class="subtitle track">{TrackName}</li>{/block:TrackName}
  1380. <li>{block:Artist}{Artist}{/block:Artist}{block:Album} / {Album}{/block:Album}</li>
  1381. </div>
  1382. </div>
  1383. {block:Caption}
  1384. {block:NotReblog}
  1385. <li class="caption captop ogcap {block:ifHideCaption}hidecap{/block:ifHideCaption}">
  1386. <div class="captext">{Caption}</div>
  1387. </li>
  1388. {/block:NotReblog}
  1389. {block:Reblogs}
  1390. <li class="caption captop {block:ifHideCaption}hidecap{/block:ifHideCaption}">
  1391. <img src="{PortraitURL-64}" class="capicon">
  1392. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1393. <div class="captext">{Body}</div>
  1394. </li>
  1395. {/block:Reblogs}
  1396. {/block:Caption}
  1397. {/block:Audio}
  1398.  
  1399. <!----- SOURCE ----->
  1400.  
  1401. <div class="postsource">
  1402. {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}
  1403. </div>
  1404.  
  1405. <!----- INFO ----->
  1406.  
  1407. {block:Date}
  1408. <div class="info">
  1409. <div class="padding">
  1410. {block:PinnedPostLabel}<div class="pin-post"><a href="{Permalink}" class="upper"><i data-feather="map-pin" aria-hidden="true"></i>{PinnedPostLabel}</a></div>{/block:PinnedPostLabel}
  1411.  
  1412. <div class="one-flex">
  1413. <div class="info-left">
  1414. <a href="{Permalink}" class="date subtitle">
  1415. {block:IndexPage}{ShortMonth}{/block:IndexPage}{block:PermalinkPage}{Month}{/block:PermalinkPage} {DayOfMonth}{block:PermalinkPage}, {Year}{/block:PermalinkPage}
  1416. {block:IndexPage}{block:NoteCount}<span class="mdate"> with <span class="notecount">{NoteCount} notes</span></span>{/block:NoteCount}{/block:IndexPage}
  1417. </a>
  1418. {block:PermalinkPage}{block:RebloggedFrom}
  1419. <br><a href="{ReblogParentURL}" class="upper" title="{ReblogParentName}">reblogged via</a>
  1420. {/block:RebloggedFrom}{/block:PermalinkPage}
  1421. </div>
  1422.  
  1423. <div class="lirb upper">
  1424. <a href="{ReblogURL}" target="_blank">reblog</a>
  1425. <span class="and">&</span>
  1426. <a class="like-b" href="#">{LikeButton}<span class="b">like</span></a>
  1427. {block:PermalinkPage}{block:RebloggedFrom}
  1428. <div class="root"><a href="{ReblogRootURL}" title="{ReblogRootName}">source</a></div>
  1429. {/block:RebloggedFrom}{/block:PermalinkPage}
  1430. </div>
  1431. </div>
  1432. </div>
  1433.  
  1434. {block:HasTags}
  1435. <div class="tags padding">
  1436. {block:Tags}<a href="{TagURL}">#{Tag}</a><span class="slash">/</span>{/block:Tags}
  1437. </div>
  1438. {/block:HasTags}
  1439. </div>
  1440. {/block:Date}
  1441.  
  1442. </article>
  1443.  
  1444. <!----- POST NOTES ----->
  1445.  
  1446. {block:Date}{block:PermalinkPage}{block:NoteCount}
  1447. <article class="notes">
  1448. <div class="title" id="notetitle">{NoteCountWithLabel}</div>
  1449. {block:PostNotes}
  1450. <div id="pnotes">{PostNotes}</div>
  1451. {/block:PostNotes}
  1452. </article>
  1453. {/block:NoteCount}{/block:PermalinkPage}{/block:Date}
  1454.  
  1455. {/block:Posts}
  1456.  
  1457. </section>
  1458.  
  1459. <!----- FOOTER ----->
  1460.  
  1461. <div id="btop">
  1462. <a href="#top" title="back to top" target="_self"><i data-feather="chevron-up"></i></span></a>
  1463. </div>
  1464.  
  1465. <footer>
  1466. {block:Pagination}
  1467. <div class="pg subtitle">
  1468. {block:PreviousPage}
  1469. <a href="{PreviousPage}" title="back"><i data-feather="chevron-left"></i></a>
  1470. {/block:PreviousPage}
  1471. page {CurrentPage} of {TotalPages}
  1472. {block:NextPage}
  1473. <a href="{NextPage}" title="next"><i data-feather="chevron-right"></i></a>
  1474. {/block:NextPage}
  1475. </div>
  1476. {/block:Pagination}
  1477.  
  1478. <a href="https://seyche.tumblr.com" title="moonflower theme by seyche" id="k">&.</a>
  1479.  
  1480. <a href="https://seyche.tumblr.com" id="m" class="upper">moonflower theme by seyche</a>
  1481. </footer>
  1482.  
  1483. <!----- PHOTOSETS ----->
  1484.  
  1485. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  1486.  
  1487. <script src="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosets.js"></script>
  1488.  
  1489. <!----- TOOLTIPS ----->
  1490.  
  1491. <script src="https://unpkg.com/popper.js@1"></script>
  1492. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1493.  
  1494. <!----- VIDEO RESIZING ----->
  1495.  
  1496. <script src="https://seyche.github.io/external-files-hosting/plugins/flexframes-modified.js"></script>
  1497.  
  1498. <!----- SCRIPTS ----->
  1499.  
  1500. <script>
  1501.  
  1502. /// photosets
  1503.  
  1504. $(document).ready(function(){
  1505. $('.photo-slideshow').pxuPhotoset({
  1506. lightbox: true,
  1507. rounded: false,
  1508. gutter: '{select:photoset gutter}px',
  1509. borderRadius: '0px',
  1510. photoset: '.photo-slideshow',
  1511. photoWrap: '.photo-data',
  1512. photo: '.pxu-photo'
  1513. });
  1514.  
  1515. npfPhotosets(".posts", {
  1516. rowClass:"npf_row",
  1517. imageContainerClass:"tmblr-full",
  1518. generatedPhotosetContainerClass:"npf_photoset",
  1519. imageClass:"npf_image",
  1520. includeCommonPhotosets: false,
  1521. useTumblrLightbox: true,
  1522. insertGalleryIndicator: false,
  1523. galleryIndicatorClass: "npf_gallery_indicator",
  1524. galleryIndicatorContent: "<img src='image_url'>",
  1525. photosetMargins:"{select:photoset gutter}"
  1526. });
  1527.  
  1528. /// TOOLTIPS
  1529.  
  1530. tippy('[title]', {
  1531. theme: 'custom',
  1532. arrow: false,
  1533. followCursor: true,
  1534. delay: 100,
  1535. placement: 'bottom-start',
  1536. zIndex: 9999999999,
  1537. maxWidth: 400,
  1538.  
  1539. content(reference) {
  1540. const title = reference.getAttribute('title');
  1541. reference.removeAttribute('title');
  1542. return title;
  1543. },
  1544. });
  1545.  
  1546. /// DROPDOWN
  1547.  
  1548. $('.dropdown').hide();
  1549. $('.dropbutton').click(function(){
  1550. $('.dropdown').slideToggle(500);
  1551. });
  1552.  
  1553. /// NOTECOUNT
  1554.  
  1555. $('article').find('.notecount').each(function(){
  1556. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  1557. if (n > 999) {
  1558. n = Math.floor(n / 100) / 10;
  1559. $(this).text(n + 'k notes');
  1560. }
  1561. });
  1562.  
  1563. /// VIDEO RESIZING
  1564.  
  1565. function flexFrame() {
  1566. $(".caption").each(function() {
  1567. $(this).find("iframe").wrap("<div class='capframe'></div>");
  1568. flexibleFrames($(".capframe"));
  1569. });
  1570. flexibleFrames($(".video"));
  1571. }
  1572. $(document).ready(flexFrame);
  1573.  
  1574. /// REMOVE REDIRECTS
  1575.  
  1576. $('a[href*="t.umblr.com/redirect"]').each(function(){
  1577. var originalURL = $(this).attr("href").split("?z=")[1].split("&t=")[0];
  1578. var replaceURL = decodeURIComponent(originalURL);
  1579. $(this).attr("href", replaceURL);
  1580. });
  1581.  
  1582. /// SCROLL TO TOP
  1583.  
  1584. $('#btop').click(function(){
  1585. $('html, body').animate({scrollTop : 0},800);
  1586. return false;
  1587. });
  1588.  
  1589. });
  1590.  
  1591. feather.replace()
  1592.  
  1593. </script>
  1594.  
  1595.  
  1596. </body>
  1597. </html>
Advertisement
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!