API tools faq
paste
seiche

theme three: wisteria

seiche
Aug 1st, 2019 (edited)
10,661
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 42.54 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. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.  
  12. <!---
  13.  
  14. WISTERIA THEME BY SEYCHE.TUMBLR.COM
  15.  
  16. CREDITS:
  17. -material icons from google
  18. -css photosets by annasthms and espoirthemes
  19. -tippy.js tooltips by atomiks
  20. -responsive videos by nouvae
  21. -remove redirects by magnusthemes
  22. -npf photosets by codematurgy
  23. (full list of credits @ seyche.tumblr.com/credits)
  24.  
  25. --->
  26.  
  27. <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Karla:ital,wght@0,400;0,700;1,400;1,700&family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Nunito+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Overpass:ital,wght@0,400;0,700;1,400;1,700&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  28.  
  29. <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Literata:ital,wght@0,400;0,700;1,400;1,700&family=Lora:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&family=Muli:ital,wght@0,400;0,700;1,400;1,700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  30.  
  31. <!----- PHOTOSETS ----->
  32.  
  33. <link href="https://static.tumblr.com/0podkko/xIbplezmo/modified_photosets.css" rel="stylesheet">
  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="image:Header" content=""/>
  40.  
  41. <meta name="color:Text" content="#5a5a5a"/>
  42. <meta name="color:Background" content="#fafafa"/>
  43. <meta name="color:Posts" content="#ffffff"/>
  44. <meta name="color:Accent" content="#b4aada"/>
  45. <meta name="color:Link" content="#9e9e9e"/>
  46. <meta name="color:Link Hover" content="#212121"/>
  47. <meta name="color:Borders" content="#e0e0e0"/>
  48. <meta name="color:Title" content="#212121"/>
  49. <meta name="color:Info Background" content="#f5f5f5"/>
  50. <meta name="color:Info Text" content="#5a5a5a"/>
  51. <meta name="color:Info Link" content="#9e9e9e"/>
  52.  
  53. <meta name="select:Body Font" content="PT Sans" title="PT Sans"/>
  54. <meta name="select:Body Font" content="Fira Sans" title="Fira Sans"/>
  55. <meta name="select:Body Font" content="Karla" title="Karla"/>
  56. <meta name="select:Body Font" content="Lato" title="Lato"/>
  57. <meta name="select:Body Font" content="Muli" title="Muli"/>
  58. <meta name="select:Body Font" content="Nunito Sans" title="Nunito Sans"/>
  59. <meta name="select:Body Font" content="Open Sans" title="Open Sans"/>
  60. <meta name="select:Body Font" content="Overpass" title="Overpass"/>
  61. <meta name="select:Body Font" content="Poppins" title="Poppins"/>
  62. <meta name="select:Body Font" content="Roboto" title="Roboto"/>
  63. <meta name="select:Body Font" content="Source Sans Pro" title="Source Sans Pro"/>
  64. <meta name="select:Body Font" content="PT Serif" title="PT Serif"/>
  65. <meta name="select:Body Font" content="Lora" title="Lora"/>
  66.  
  67. <meta name="select:Title Font" content="PT Serif" title="PT Serif"/>
  68. <meta name="select:Title Font" content="Libre Baskerville" title="Libre Baskerville"/>
  69. <meta name="select:Title Font" content="Literata" title="Literata"/>
  70. <meta name="select:Title Font" content="Lora" title="Lora"/>
  71. <meta name="select:Title Font" content="Montserrat" title="Montserrat"/>
  72. <meta name="select:Title Font" content="PT Sans" title="PT Sans"/>
  73. <meta name="select:Title Font" content="Poppins" title="Poppins"/>
  74. <meta name="select:Title Font" content="Lato" title="Lato"/>
  75. <meta name="select:Title Font" content="Karla" title="Karla"/>
  76. <meta name="select:Title Font" content="Playfair Display" title="Playfair Display"/>
  77.  
  78. <meta name="select:Font Size" content="14px" title="14px"/>
  79. <meta name="select:Font Size" content="12px" title="12px"/>
  80. <meta name="select:Font Size" content="13px" title="13px"/>
  81. <meta name="select:Font Size" content="15px" title="15px"/>
  82. <meta name="select:Font Size" content="16px" title="16px"/>
  83.  
  84. <meta name="select:Post Width" content="540px" title="540px"/>
  85. <meta name="select:Post Width" content="400px" title="400px"/>
  86. <meta name="select:Post Width" content="450px" title="450px"/>
  87. <meta name="select:Post Width" content="500px" title="500px"/>
  88. <meta name="select:Post Width" content="600px" title="600px"/>
  89.  
  90. <meta name="select:Photoset Gutter" content="4" title="4px"/>
  91. <meta name="select:Photoset Gutter" content="3" title="3px"/>
  92. <meta name="select:Photoset Gutter" content="2" title="2px"/>
  93. <meta name="select:Photoset Gutter" content="1" title="1px"/>
  94.  
  95. <meta name="if:Show Icon" content="1"/>
  96. <meta name="if:Search Bar" content="1"/>
  97. <meta name="if:Square Icons" content="0"/>
  98. <meta name="if:Hide Tags" content="0"/>
  99. <meta name="if:Hide Caption" content="0"/>
  100. <meta name="if:Rounded Post Corners" content="0"/>
  101.  
  102. <meta name="text:Post Margin" content="120"/>
  103.  
  104. <meta name="text:Home Title" content="home"/>
  105. <meta name="text:Ask Title" content="ask"/>
  106. <meta name="text:Archive Title" content="archive"/>
  107. <meta name="text:Link 1 URL" content="" />
  108. <meta name="text:Link 1" content="" />
  109. <meta name="text:Link 2 URL" content="" />
  110. <meta name="text:Link 2" content="" />
  111. <meta name="text:Link 3 URL" content="" />
  112. <meta name="text:Link 3" content="" />
  113. <meta name="text:Link 4 URL" content="" />
  114. <meta name="text:Link 4" content="" />
  115. <meta name="text:Link 5 URL" content="" />
  116. <meta name="text:Link 5" content="" />
  117. <meta name="text:Link 6 URL" content="" />
  118. <meta name="text:Link 6" content="" />
  119.  
  120. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  121.  
  122. <!----- LOAD IN ----->
  123.  
  124. <script>
  125. $(document).ready(function(){
  126. $(function() {
  127. $('body').removeClass('load-in');
  128. });
  129. });
  130. </script>
  131.  
  132. <style type="text/css">
  133.  
  134. body {
  135. font-family: '{select:body font}', sans-serif;
  136. font-size: {select:font size};
  137. color: {color:text};
  138. background-color: {color:background};
  139. text-align: left;
  140. letter-spacing: 0.03em;
  141. line-height: 160%;
  142. word-wrap: break-word;
  143. margin: 0;
  144. padding: 0;
  145. overflow-x: hidden;
  146. -webkit-transition: 2s opacity;
  147. -moz-transition: 2s opacity;
  148. -ms-transition: 2s opacity;
  149. -o-transition: 2s opacity;
  150. transition: 2s opacity;
  151. }
  152.  
  153. body.load-in {
  154. opacity: 0;
  155. -webkit-transition: none;
  156. -moz-transition: none;
  157. -ms-transition: none;
  158. -o-transition: none;
  159. transition: none;
  160. }
  161.  
  162. a {
  163. text-decoration: none;
  164. color: {color:link};
  165. -webkit-transition: all 0.4s;
  166. -moz-transition: all 0.4s;
  167. -ms-transition: all 0.4s;
  168. -o-transition: all 0.4s;
  169. transition: all 0.4s;
  170. }
  171.  
  172. a:hover {
  173. color: {color:link hover};
  174. -webkit-transition: all 0.4s;
  175. -moz-transition: all 0.4s;
  176. -ms-transition: all 0.4s;
  177. -o-transition: all 0.4s;
  178. transition: all 0.4s;
  179. }
  180.  
  181. p a, li a {border-bottom: 2px solid rgba({RGBcolor:accent}, 0.6);}
  182. p a:hover, li a:hover {border-bottom: 2px solid rgba({RGBcolor:accent}, 1.0);}
  183.  
  184. blockquote {
  185. padding: 0 0 0 1.25em;
  186. border-left: 1px solid {color:borders};
  187. margin: 1.25em 0 1.25em 1.25em;
  188. }
  189.  
  190. h1, h2, h3, h4, h5, .title {
  191. font-family: '{select:title font}', serif;
  192. color: {color:title};
  193. line-height: 150%;
  194. }
  195.  
  196. h1 a, h2 a, h3 a, h4 a, h5 a, .title a {color: {color:title};}
  197. h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, .title a:hover {color: {color:accent}}
  198. h1 {font-size: 1.5em;}
  199. h2 {font-size: 1.3em;}
  200. h3 {font-size: 1.25em;}
  201. h4 {font-size: 1.1em; font-weight: normal;}
  202. h5 {font-size: 1em; font-weight: normal;}
  203.  
  204. small {font-size: 0.9em;}
  205. big {font-size: 1.1em;}
  206. b, bold, strong {color: {color:title};}
  207. b a, bold a, strong a {color: {color:link};}
  208. b a:hover, bold a:hover, strong a:hover {color: {color:title};}
  209.  
  210. ul {list-style-type: circle;}
  211. ol {list-style-type: decimal;}
  212. li {max-width: 100%; line-height: 160%;}
  213.  
  214. .tippy-tooltip.custom-theme {
  215. background-color: {color:title};
  216. color: {color:posts};
  217. text-align: center;
  218. font-family: '{select:body font}', sans-serif;
  219. font-weight: normal;
  220. text-transform: uppercase;
  221. letter-spacing: 0.1em;
  222. {block:ifNotRoundedPostCorners}border-radius: 0;{/block:ifNotRoundedPostCorners}
  223. {block:ifRoundedPostCorners}border-radius: 5px;{/block:ifRoundedPostCorners}
  224. padding: 0.25em;
  225. margin: 20px auto auto 10px;
  226. font-size: 0.8em;
  227. }
  228.  
  229. ::-webkit-scrollbar {
  230. width: 17px;
  231. height: 17px;
  232. background-color: {color:background};
  233. }
  234.  
  235. ::-webkit-scrollbar-track {border: 8px solid {color:background}; background-color: {color:borders};}
  236.  
  237. ::-webkit-scrollbar-thumb {
  238. border: 6px solid {color:background};
  239. background-color: {color:title};
  240. min-height: 24px;
  241. min-width: 24px;
  242. }
  243.  
  244. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  245. z-index: 999999999!important;
  246. opacity: 0.6;
  247. margin-top: 8px;
  248. transform: scale(0.8);
  249. transform-origin: 100% 0;
  250. -webkit-transform: scale(0.8);
  251. -webkit-transform-origin: 100% 0;
  252. -o-transform: scale(0.8);
  253. -o-transform-origin: 100% 0;
  254. -moz-transform: scale(0.8);
  255. -moz-transform-origin: 100% 0;
  256. -ms-transform: scale(0.8);
  257. -ms-transform-origin: 100% 0;
  258. -webkit-transition: all 0.4s;
  259. -moz-transition: all 0.4s;
  260. -ms-transition: all 0.4s;
  261. -o-transition: all 0.4s;
  262. transition: all 0.4s;
  263. }
  264.  
  265. .tmblr-iframe-compact .tmblr-iframe--unified-controls:hover {
  266. opacity: 1.0;
  267. -webkit-transition: all 0.4s;
  268. -moz-transition: all 0.4s;
  269. -ms-transition: all 0.4s;
  270. -o-transition: all 0.4s;
  271. transition: all 0.4s;
  272. }
  273.  
  274. .tmblr-iframe--app-cta-button {display: none !important;}
  275.  
  276. /*----- COMMON STYLES -----*/
  277.  
  278. .subtitle {
  279. font-family: '{select:title font}', serif;
  280. font-weight: bold;
  281. color: {color:title};
  282. }
  283.  
  284. .subtitle a {color: {color:title};}
  285. .subtitle a:hover {color: {color:accent};}
  286.  
  287. .upper {
  288. text-transform: uppercase;
  289. letter-spacing: 0.1em;
  290. font-size: 0.9em;
  291. }
  292.  
  293. svg {
  294. width: 1.75em;
  295. height: 1.75em;
  296. display: inline-block;
  297. vertical-align: middle;
  298. fill: {color:link};
  299. }
  300.  
  301. a svg {
  302. fill: {color:link};
  303. -webkit-transition: all 0.4s;
  304. -moz-transition: all 0.4s;
  305. -ms-transition: all 0.4s;
  306. -o-transition: all 0.4s;
  307. transition: all 0.4s;
  308. }
  309.  
  310. a svg:hover {
  311. fill: {color:link hover};
  312. -webkit-transition: all 0.4s;
  313. -moz-transition: all 0.4s;
  314. -ms-transition: all 0.4s;
  315. -o-transition: all 0.4s;
  316. transition: all 0.4s;
  317. }
  318.  
  319. .accent {
  320. font-family: '{select:title font}', serif;
  321. font-weight: bold;
  322. color: {color:accent};
  323. }
  324.  
  325. .accent a {color: {color:accent};}
  326. .accent a:hover {color: {color:link hover};}
  327.  
  328. .infobg {
  329. padding: 2em;
  330. background-color: {color:info background};
  331. color: {color:info text};
  332. }
  333.  
  334. .infobg a {color: {color:info link};}
  335. .infobg a:hover {color: {color:link hover};}
  336.  
  337. article .icon {
  338. display: inline-block;
  339. vertical-align: middle;
  340. {block:ifNotSquareIcons}border-radius: 50%;{/block:ifNotSquareIcons}
  341. {block:ifSquareIcons}border-radius: 5px;{/block:ifSquareIcons}
  342. }
  343.  
  344. .padding {padding: 2em; box-sizing: border-box;}
  345.  
  346. /*----- SEARCH HEADER -----*/
  347.  
  348. header {position: relative; background-color: {color:posts};}
  349.  
  350. #searchbar {
  351. top: 0;
  352. left: 0;
  353. right: 0;
  354. width: 100%;
  355. border-bottom: 1px solid {color:borders};
  356. z-index: 9999;
  357. padding: 2em 2.25em;
  358. box-sizing: border-box;
  359. }
  360.  
  361. .find {
  362. display: inline-block;
  363. background-color: {color:posts};
  364. width: 100%;
  365. }
  366.  
  367. .find input {
  368. border: 0;
  369. outline: none;
  370. display: inline-block;
  371. background: inherit;
  372. margin: 0;
  373. padding: 0;
  374. color: {color:text};
  375. width: calc(100% - 3em);
  376. font-family: '{select:body font}', sans-serif;
  377. font-size: inherit;
  378. text-align: left;
  379. }
  380.  
  381. .find input[type=text] {color: {color:text};}
  382. input::-webkit-input-placeholder {color: {color:text};}
  383. input::-moz-placeholder {color: {color:text};}
  384. input:-moz-placeholder {color: {color:text};}
  385. input:-ms-input-placeholder {color: {color:text};}
  386. .find svg {margin-right: 0.5em;}
  387.  
  388. /*----- MAIN HEADER -----*/
  389.  
  390. #mainheader {
  391. width: {select:post width};
  392. border: 1px solid {color:borders};
  393. margin: {text:post margin}px auto;
  394. text-align: center;
  395. box-sizing: border-box;
  396. }
  397.  
  398. #header-img {
  399. object-fit: cover;
  400. width: 100%;
  401. min-height: 100px;
  402. position: relative;
  403. {block:ifRoundedPostCorners}
  404. border-radius: 8px 8px 0 0;
  405. {/block:ifRoundedPostCorners}
  406. }
  407.  
  408. #mainheader .icon {
  409. {block:ifNotSquareIcons}border-radius: 50%;{/block:ifNotSquareIcons}
  410. {block:ifSquareIcons}border-radius: 8px;{/block:ifSquareIcons}
  411. margin: -45px auto -10px auto;
  412. display: block;
  413. border: 5px solid {color:posts};
  414. width: 80px;
  415. height: 80px;
  416. z-index: 2;
  417. position: relative;
  418. }
  419.  
  420. #top {
  421. padding: 1.5em 2.25em 2em 2.25em;
  422. border-bottom: 1px solid {color:borders};
  423. box-sizing: border-box;
  424. }
  425.  
  426. #mainheader .title {
  427. font-size: 1.5em;
  428. letter-spacing: 0.06em;
  429. line-height: 160%;
  430. }
  431.  
  432. #description {margin-top: 1em;}
  433. nav a {margin: 0 0.5em; color: {color:accent} !important;}
  434. nav a:hover {color: {color:link hover} !important;}
  435.  
  436. /*----- POSTS -----*/
  437.  
  438. .container {
  439. margin: auto;
  440. width: {select:post width};
  441. position: relative;
  442. }
  443.  
  444. article {
  445. position: relative;
  446. width: {select:post width};
  447. margin: {text:post margin}px auto;
  448. background-color: {color:posts};
  449. border: 1px solid {color:borders};
  450. overflow: hidden;
  451. box-sizing: border-box;
  452. }
  453.  
  454. {block:ifRoundedPostCorners}
  455. #mainheader, article {border-radius: 8px;}
  456. {/block:ifRoundedPostCorners}
  457.  
  458. .posts li, .posts blockquote, .posts img {max-width: 100%;}
  459. .postsource {display: none;}
  460. .tumblr_video_container {max-height: {select:post width}!important; overflow: hidden!important; max-width: 100%;}
  461. figure, video, .video, .video iframe {max-width: 100%;}
  462.  
  463. /*----- CAPTIONS -----*/
  464.  
  465. .caption {
  466. list-style-type: none;
  467. padding: 2em;
  468. border-bottom: 1px solid {color:borders};
  469. margin: 0;
  470. }
  471.  
  472. .caption:last-of-type {border-bottom: none;}
  473.  
  474. .caption p {margin: 1em 0;}
  475. .caption p:last-of-type {margin: 1em 0 0 0;}
  476. .ogcap p:first-of-type {margin-top: 0;}
  477.  
  478. .captop:first-of-type {border-top: 1px solid {color:borders};}
  479.  
  480. .caption iframe, .caption img {max-width: 100%;}
  481.  
  482. {block:ifHideCaption}
  483. {block:IndexPage}
  484. .captop {display: none;}
  485. {/block:IndexPage}
  486. {/block:ifHideCaption}
  487.  
  488. .capicon {width: 2em; height: 2em;}
  489.  
  490. .username {
  491. margin-left: 1em;
  492. line-height: 100%;
  493. display: inline-block;
  494. }
  495.  
  496. .username a {color: {color:accent};}
  497. .username a:hover {color: {color:link hover};}
  498. .username a, .username a:hover {border-bottom: none;}
  499.  
  500. .tmblr-attribution {margin-top: 1em;}
  501.  
  502. .deactive::after {
  503. content: '(deactivated blog)';
  504. margin-left: 1em;
  505. opacity: 0.8;
  506. color: {color:text};
  507. }
  508.  
  509. /*----- TEXT -----*/
  510.  
  511. .posts .title {padding: 2em; border-bottom: 1px solid {color:borders};}
  512. .title {font-size: 1.25em; font-weight: bold;}
  513.  
  514. pre {
  515. line-height: inherit;
  516. font-size: inherit;
  517. white-space: pre-wrap;
  518. white-space: -moz-pre-wrap;
  519. white-space: -pre-wrap;
  520. white-space: -o-pre-wrap;
  521. word-wrap: break-word;
  522. }
  523.  
  524. @font-face {
  525. font-family: Calluna;
  526. src: url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.eot?3=&v=f685dc881c60c298ea22a73fe505b88a");
  527. 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");
  528. font-weight: 700;
  529. font-style: italic
  530. }
  531.  
  532. @font-face {
  533. font-family: Fairwater;
  534. 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");
  535. font-weight: 400;
  536. font-style: normal
  537. }
  538.  
  539. p.npf_quirky {font-family: Fairwater; font-size: 20px;}
  540.  
  541. .npf_color_joey {color: #e57373;}
  542. .npf_color_monica {color: #ff8a65;}
  543. .npf_color_phoebe {color: #ffee58;}
  544. .npf_color_ross {color: #81c784;}
  545. .npf_color_rachel {color: #4fc3f7;}
  546. .npf_color_chandler {color: #9575cd;}
  547. .npf_color_niles {color: #f06292;}
  548.  
  549. #k {
  550. position: fixed;
  551. bottom: 20px;
  552. right: 20px;
  553. font-size: 15px;
  554. background-color: {color:background};
  555. padding: 5px 8px;
  556. border-radius: 3px;
  557. }
  558.  
  559. #k:hover {background-color: {color:accent}; color: {color:background};}
  560.  
  561. #m {
  562. text-align: center;
  563. display: none;
  564. margin-bottom: 50px;
  565. }
  566.  
  567. /*----- LINK -----*/
  568.  
  569. .linkp {
  570. color: {color:text};
  571. -webkit-transition: all 0.4s;
  572. -moz-transition: all 0.4s;
  573. -ms-transition: all 0.4s;
  574. -o-transition: all 0.4s;
  575. transition: all 0.4s;
  576. }
  577.  
  578. .linkp:hover {
  579. background-color: {color:info background};
  580. color: {color:info text};
  581. -webkit-transition: all 0.4s;
  582. -moz-transition: all 0.4s;
  583. -ms-transition: all 0.4s;
  584. -o-transition: all 0.4s;
  585. transition: all 0.4s;
  586. }
  587.  
  588. .link {padding: 2em;}
  589. .link h1 {margin-top: 0;}
  590. .thumbnail {max-width: 100%; border-bottom: 1px solid {color:borders};}
  591. .linkhost {margin-top: 1em; font-style: italic;}
  592.  
  593. .npf-link-block {
  594. margin: 1.25em 0;
  595. border-radius: 0;
  596. -webkit-transition: all 0.4s;
  597. -moz-transition: all 0.4s;
  598. -ms-transition: all 0.4s;
  599. -o-transition: all 0.4s;
  600. transition: all 0.4s;
  601. }
  602.  
  603. .npf-link-block:hover {
  604. background-color: {color:info background};
  605. color: {color:info text};
  606. -webkit-transition: all 0.4s;
  607. -moz-transition: all 0.4s;
  608. -ms-transition: all 0.4s;
  609. -o-transition: all 0.4s;
  610. transition: all 0.4s;
  611. }
  612.  
  613. .npf-link-block .bottom {padding: 25px!important; color: {color:text};}
  614.  
  615. .npf-link-block .bottom .site-name {
  616. text-transform: lowercase;
  617. font-size: inherit;
  618. color: {color:text};
  619. font-style: italic;
  620. }
  621.  
  622. /*----- PHOTO -----*/
  623.  
  624. img {
  625. margin: 0;
  626. display: block;
  627. height: auto;
  628. }
  629.  
  630. .photo img {width: 100%;}
  631. .vignette, #vignette {opacity: 0;}
  632. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(60, 60, 60, .8) !important;}
  633.  
  634. .lightbox-image, #tumblr_lightbox img {
  635. box-shadow: none !important;
  636. border-radius: 0 !important;
  637. max-width: none;
  638. }
  639.  
  640. /*----- PHOTOSET -----*/
  641.  
  642. [photoset-layout] {
  643. grid-gap: {select:photoset gutter}px;
  644. border-radius: 0;
  645. overflow: hidden;
  646. grid-template-columns: repeat(6, auto);
  647. }
  648.  
  649. [photoset-layout] div {
  650. padding: 0;
  651. border: none;
  652. cursor: pointer;
  653. }
  654.  
  655. [photoset-layout] img {
  656. border: none;
  657. border-radius: 0;
  658. object-fit: cover;
  659. width: 100%;
  660. height: 100%;
  661. }
  662.  
  663. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  664. margin-left: 0 !important;
  665. margin-right: 0 !important;
  666. }
  667.  
  668. .caption .npf_photoset {
  669. margin: auto -2em;
  670. }
  671.  
  672. .captext figure {margin: 1em 0;}
  673. .captext figure .tmblr-full {margin-top: {select:photoset gutter}px;}
  674. .tmblr-full:hover {cursor: pointer;}
  675. .npf_image, .tmblr-full {border: none; outline: none;}
  676.  
  677. /*----- QUOTE -----*/
  678.  
  679. .quote, p.npf_quote {
  680. font-size: 1.35em;
  681. font-family: '{select:title font}', serif;
  682. line-height: 160%;
  683. color: {color:title};
  684. }
  685.  
  686. .quote p:first-of-type {margin-top: 0;}
  687. .quote p:last-of-type {margin-bottom: 0;}
  688. p.npf_quote {font-family: inherit; margin-bottom: 1em;}
  689.  
  690. .source {margin-top: 1.5em; text-align: right;}
  691.  
  692. /*----- CHAT -----*/
  693.  
  694. .chat {padding: 0; margin: 0;}
  695. .chat li {list-style-type: none;}
  696. .line {padding: 2em; border-bottom: 1px solid {color:borders};}
  697. .line:last-of-type {border-bottom: none;}
  698. p.npf_chat {font-family: inherit; margin-top: 0.5em;}
  699. p.npf_chat b {color: {color:accent}; font-family: '{select:title font}', serif;}
  700.  
  701. /*----- ASK -----*/
  702.  
  703. .askpost {padding: 2em; border-bottom: 1px solid {color:borders};}
  704.  
  705. .askicon {
  706. float: left;
  707. display: inline-block;
  708. border-radius: 50%;
  709. width: 3.25em;
  710. height: 3.25em;
  711. }
  712.  
  713. .question, .asker-name {margin-left: calc(3.25em + 1.25em);}
  714.  
  715. /*----- AUDIO -----*/
  716.  
  717. .albumart {
  718. z-index: 1;
  719. position: absolute;
  720. width: 200px;
  721. height: 200px;
  722. border-right: 1px solid {color:borders};
  723. }
  724.  
  725. .button {
  726. width: 30px;
  727. height: 30px;
  728. overflow: hidden;
  729. position: relative;
  730. z-index: 10;
  731. margin: 8px 7px 6px 7px;
  732. }
  733.  
  734. .audiobox {
  735. background-color: #f2f2f2;
  736. z-index: 50;
  737. position: absolute;
  738. margin: 75px 0 0 75px;
  739. border-radius: 50%;
  740. }
  741.  
  742. .audioinfo {
  743. position: relative;
  744. width: calc(100% - 202px);
  745. margin-left: 200px;
  746. height: 199px;
  747. display: flex;
  748. align-items: center;
  749. justify-content: center;
  750. flex-direction: column;
  751. }
  752.  
  753. .flexy {width: 75%;}
  754.  
  755. .audioinfo li {list-style-type: none;}
  756.  
  757. .track {font-size: 1.25em;}
  758.  
  759. /*----- INFO -----*/
  760.  
  761. .info {padding: 2em;}
  762.  
  763. .top-info {
  764. border-bottom: 1px solid {color:borders};
  765. display: flex;
  766. justify-content: space-between;
  767. align-items: center;
  768. flex-direction: row;
  769. }
  770.  
  771. .top-info .accent {letter-spacing: 0.05em; font-size: 1.15em;}
  772. .top-info .accent a {color: {color:accent};}
  773. .top-info .accent a:hover {color: {color:link hover};}
  774.  
  775. .top-info .icon {
  776. margin-right: 1.25em;
  777. width: 3em;
  778. height: 3em;
  779. }
  780.  
  781. .top-details {
  782. display: inline-block;
  783. vertical-align: middle;
  784. width: calc({select:post width} - 4em - 9.5em);
  785. white-space: nowrap;
  786. overflow: hidden;
  787. text-overflow: ellipsis;
  788. }
  789.  
  790. .pin-post svg {
  791. width: 1.25em;
  792. height: 1.25em;
  793. vertical-align: middle;
  794. display: inline-block;
  795. fill: {color:accent};
  796. margin-right: 0.5em;
  797. }
  798.  
  799. .lirb a {
  800. margin-left: 0.25em;
  801. display: inline-block;
  802. vertical-align: middle;
  803. }
  804.  
  805. .reblog-button svg {width: 2em; height: 2em;}
  806. .like-wrap:hover svg {fill: {color:link hover};}
  807.  
  808. .like-wrap {
  809. position: relative;
  810. display: inline-block;
  811. width: 1.75em;
  812. height: 1.75em;
  813. cursor: pointer;
  814. }
  815.  
  816. .like_button {
  817. position: absolute;
  818. top: 0;
  819. left: 0;
  820. right: 0;
  821. bottom: 0;
  822. width: 100%;
  823. height: 100%;
  824. opacity: 0;
  825. z-index: 2;
  826. }
  827.  
  828. .new-button {
  829. position: absolute;
  830. top: 0;
  831. left: 0;
  832. right: 0;
  833. bottom: 0;
  834. width: 100%;
  835. height: 100%;
  836. z-index: 1;
  837. }
  838.  
  839. .like_button iframe {width: 100% !important; height: 100% !important;}
  840. .like_button.liked + .new-button svg {fill: #d32f2f;}
  841.  
  842. .tags {
  843. text-align: center;
  844. border-top: 1px solid {color:borders};
  845. {block:IndexPage}{block:ifHideTags}display: none;{/block:ifHideTags}{/block:IndexPage}
  846. }
  847.  
  848. .tags a {margin: 0 0.5em; color: {color:accent};}
  849. .tags a:hover {color: {color:link hover};}
  850. .tagname {font-size: 0.9em;}
  851.  
  852. /*---- POST NOTES -----*/
  853.  
  854. #notetitle .subtitle {font-size: 1.25em;}
  855.  
  856. ol.notes {
  857. list-style-type: none;
  858. max-width: 100%;
  859. padding: 0;
  860. margin: 0;
  861. }
  862.  
  863. ol.notes li.note {
  864. border-top: 1px solid {color:borders};
  865. padding: 1.5em;
  866. display: block;
  867. }
  868.  
  869. ol.notes li.note img.avatar {
  870. {block:ifNotSquareIcons}border-radius: 50%;{/block:ifNotSquareIcons}
  871. {block:ifSquareIcons}border-radius: 4px;{/block:ifSquareIcons}
  872. margin-right: 1em;
  873. vertical-align: middle;
  874. display: inline-block;
  875. width: 1.5em;
  876. height: 1.5em;
  877. }
  878.  
  879. ol.notes li.note a.avatar_frame {border-bottom: none;}
  880. a.more_notes_link {font-weight: bold; color: {color:title};}
  881.  
  882. /*----- PAGINATION -----*/
  883.  
  884. .pg {margin: {text:post margin}px auto; text-align: center;}
  885.  
  886. .pg a {
  887. background-color: {color:posts};
  888. border: 1px solid {color:borders};
  889. padding: 1em 1.5em;
  890. margin: 0 0.5em;
  891. {block:ifRoundedPostCorners}border-radius: 5px;{/block:ifRoundedPostCorners}
  892. }
  893.  
  894. .pg a:hover {background-color: {color:accent}; color: {color:posts};}
  895.  
  896. #btop {
  897. position: fixed;
  898. right: 25px;
  899. bottom: 60px;
  900. }
  901.  
  902. #k, #btop {z-index: 500;}
  903.  
  904. #btop svg {width: 24px; height: 24px;}
  905.  
  906. /*----- MOBILE CONTROLS -----*/
  907.  
  908. .mobile-controls {display: none; float: right;}
  909. .mobile-controls a {margin-left: 0.5em;}
  910.  
  911. /*----- RESPONSIVE -----*/
  912.  
  913. @media only screen and (min-width: 701px) {
  914. {block:ifNotSearchBar}
  915. #searchbar {display: none;}
  916. {/block:ifNotSearchBar}
  917. }
  918.  
  919. @media only screen and (max-width: 700px) {
  920. .container {width: 100vw;}
  921. article, #mainheader {width: 90vw;}
  922.  
  923. #searchbar {padding: 1em 1.5em;}
  924.  
  925. .find {
  926. width: 50%;
  927. white-space: nowrap;
  928. text-overflow: ellipsis:
  929. }
  930.  
  931. .top-details {width: calc(90vw - 4em - 9.5em);}
  932.  
  933. .albumart {width: 100px; height: 100px;}
  934.  
  935. .audiobox {margin: 28px 0 0 28px;}
  936.  
  937. .audioinfo {
  938. width: calc(100% - 102px);
  939. margin-left: 100px;
  940. height: 99px;
  941. }
  942.  
  943. .flexy {width: 85%;}
  944.  
  945. #k, #btop {display: none;}
  946. #m {display: block;}
  947.  
  948. .tmblr-iframe-compact .tmblr-iframe--unified-controls {display: none;}
  949. .mobile-controls {display: block;}
  950. }
  951.  
  952. {CustomCSS}
  953.  
  954. </style>
  955. </head>
  956.  
  957. <body class="load-in">
  958.  
  959. <!----- SEARCH BAR ----->
  960.  
  961. <header id="searchbar">
  962. <form action="/search" method="get" class="find" name="sform">
  963. <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="48px" height="48px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
  964. <input type="text" name="q" placeholder="Search {Name}" value="{SearchQuery}" value autocomplete="off"/>
  965. </form>
  966.  
  967. <div class="mobile-controls">
  968. <a href="https://www.tumblr.com/follow/{Name}" title="follow"><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="48px" height="48px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg></a>
  969. <a href="https://www.tumblr.com/message/{Name}" title="message"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="48px" height="48px"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg></a>
  970. <a href="https://www.tumblr.com/dashboard" title="dashboard"><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="48px" height="48px"><path d="M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z"/><path d="M0 0h24v24H0z" fill="none"/></svg></a>
  971. </div>
  972.  
  973. </header>
  974.  
  975. <section class="container">
  976.  
  977. <!----- HEADER ----->
  978.  
  979. <header id="mainheader">
  980. {block:ifHeaderImage}<img src="{image:Header}" id="header-img"/>{/block:ifHeaderImage}
  981. {block:ifShowIcon}<img src="{PortraitURL-96}" class="icon"/>{/block:ifShowIcon}
  982. <div id="top">
  983. <a href="/" class="title accent">{Title}</a>
  984. <div id="description">{Description}</div>
  985. </div>
  986. <nav class="upper infobg">
  987. {block:ifHomeTitle}<a href="/">{text:Home Title}</a>{/block:ifHomeTitle}
  988. {block:ifAskTitle}<a href="/ask">{text:Ask Title}</a>{/block:ifAskTitle}
  989. {block:ifArchiveTitle}<a href="/archive">{text:Archive Title}</a>{/block:ifArchiveTitle}
  990. {block:ifLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:ifLink1}
  991. {block:ifLink2}<a href="{text:Link 2 URL}">{text:Link 2}</a>{/block:ifLink2}
  992. {block:ifLink3}<a href="{text:Link 3 URL}">{text:Link 3}</a>{/block:ifLink3}
  993. {block:ifLink4}<a href="{text:Link 4 URL}">{text:Link 4}</a>{/block:ifLink4}
  994. {block:ifLink5}<a href="{text:Link 5 URL}">{text:Link 5}</a>{/block:ifLink5}
  995. {block:ifLink6}<a href="{text:Link 6 URL}">{text:Link 6}</a>{/block:ifLink6}
  996. </nav>
  997. </header>
  998.  
  999. <!----- POST INFO ----->
  1000.  
  1001. {block:TagPage}
  1002. <article class="posts">
  1003. <div class="info">
  1004. <span class="upper tagname">viewing posts filed under</span> <span class="accent">#{Tag}</span>
  1005. </div>
  1006. </article>
  1007. {/block:TagPage}
  1008.  
  1009. {block:Posts inlineMediaWidth="1280"}
  1010. <article class="posts" id="{PostID}">
  1011.  
  1012. {block:Date}
  1013. <div class="infobg top-info">
  1014.  
  1015. <div class="top-left">
  1016. {block:RebloggedFrom}<a href="{ReblogRootURL}"><img src="{ReblogRootPortraitURL-128}" class="sourceicon icon"/></a>{/block:RebloggedFrom}
  1017. {block:NotReblog}<a href="{Permalink}"><img src="{PortraitURL-128}" class="sourceicon icon"/></a>{/block:NotReblog}
  1018.  
  1019. <div class="top-details">
  1020. <div class="source-name accent">
  1021. {block:RebloggedFrom}<a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a>{/block:RebloggedFrom}
  1022. {block:NotReblog}<a href="{Permalink}">{Name}</a>{/block:NotReblog}
  1023. </div>
  1024.  
  1025. {block:IndexPage}
  1026. <a href="{Permalink}">{DayOfMonth} {Month}</a>{block:NoteCount} with <a href="{Permalink}">{NoteCountWithLabel}</a>{block:NoteCount}
  1027. {block:PinnedPostLabel}<div class="pin-post"><a href="{Permalink}"><svg xmlns="https://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" fill="black" width="48px" height="48px"><g><rect fill="none" height="24" width="24"/></g><g><path d="M14,4v5c0,1.12,0.37,2.16,1,3H9c0.65-0.86,1-1.9,1-3V4H14 M17,2H7C6.45,2,6,2.45,6,3c0,0.55,0.45,1,1,1c0,0,0,0,0,0l1,0v5 c0,1.66-1.34,3-3,3v2h5.97v7l1,1l1-1v-7H19v-2c0,0,0,0,0,0c-1.66,0-3-1.34-3-3V4l1,0c0,0,0,0,0,0c0.55,0,1-0.45,1-1 C18,2.45,17.55,2,17,2L17,2z"/></g></svg>{PinnedPostLabel}</a></div>{/block:PinnedPostLabel}
  1028. {/block:IndexPage}
  1029.  
  1030. {block:PermalinkPage}
  1031. {block:RebloggedFrom}via <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a>{/block:RebloggedFrom}
  1032. {block:NotReblog}original post{/block:NotReblog}
  1033. {/block:PermalinkPage}
  1034. </div>
  1035.  
  1036. </div>
  1037.  
  1038. <div class="lirb">
  1039. <a href="{ReblogURL}" title="reblog" target="_blank" class="reblog-button"><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="48px" height="48px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg></a>
  1040. <a class="like-wrap" title="like">{LikeButton}<span class="new-button"><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="48px" height="48px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"/></svg></span></a>
  1041. </div>
  1042. </div>
  1043. {/block:Date}
  1044.  
  1045. <!----- POSTS ----->
  1046.  
  1047. {block:Text}
  1048. <div class="text-post">
  1049. {block:Title}<div class="title"><a href="{Permalink}">{Title}</a></div>{/block:Title}
  1050. {block:NotReblog}
  1051. <li class="caption ogcap text-cap">
  1052. <div class="captext">{Body}</div>
  1053. </li>
  1054. {/block:NotReblog}
  1055. {block:RebloggedFrom}{block:Reblogs}
  1056. <li class="caption rbcap text-cap">
  1057. <img src="{PortraitURL-64}" class="capicon icon">
  1058. <div class="username upper {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1059. <div class="captext">{Body}</div>
  1060. </li>
  1061. {/block:Reblogs}{/block:RebloggedFrom}
  1062. </div>
  1063. {/block:Text}
  1064.  
  1065. {block:Link}
  1066. <a href="{URL}"><div class="linkp {block:HasTags}tagborder{/block:HasTags}">
  1067. {block:Thumbnail}<img src="{Thumbnail-HighRes}" class="thumbnail">{/block:Thumbnail}
  1068. <div class="link">
  1069. <h1>{Name}</h1>
  1070. {block:Excerpt}<div class="linktxt">{Excerpt}</div>{/block:Excerpt}
  1071. {block:Host}<div class="linkhost">{Host}</div>{/block:Host}
  1072. </div>
  1073. </div></a>
  1074. {block:Description}
  1075. {block:NotReblog}
  1076. <li class="caption captop ogcap">
  1077. <div class="captext">{Description}</div>
  1078. </li>
  1079. {/block:NotReblog}
  1080. {/block:Description}
  1081. {block:RebloggedFrom}{block:Reblogs}
  1082. <li class="caption captop rbcap">
  1083. <img src="{PortraitURL-64}" class="capicon icon">
  1084. <div class="username upper {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1085. <div class="captext">{Body}</div>
  1086. </li>
  1087. {/block:Reblogs}{/block:RebloggedFrom}
  1088. {/block:Link}
  1089.  
  1090. {block:Photo}
  1091. <div class="photo">
  1092. {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}
  1093. </div>
  1094. {block:Caption}
  1095. {block:NotReblog}
  1096. <li class="caption captop ogcap">
  1097. <div class="captext">{Caption}</div>
  1098. </li>
  1099. {/block:NotReblog}
  1100. {block:Reblogs}
  1101. <li class="caption captop rbcap">
  1102. <img src="{PortraitURL-64}" class="capicon icon">
  1103. <div class="username upper {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1104. <div class="captext">{Body}</div>
  1105. </li>
  1106. {/block:Reblogs}
  1107. {/block:Caption}
  1108. {/block:Photo}
  1109.  
  1110. {block:Photoset}
  1111. <div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" /></div>{/block:Photos}</div>
  1112. {block:Caption}
  1113. {block:NotReblog}
  1114. <li class="caption captop ogcap">
  1115. <div class="captext">{Caption}</div>
  1116. </li>
  1117. {/block:NotReblog}
  1118. {block:Reblogs}
  1119. <li class="caption captop rbcap">
  1120. <img src="{PortraitURL-64}" class="capicon icon">
  1121. <div class="username upper {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1122. <div class="captext">{Body}</div>
  1123. </li>
  1124. {/block:Reblogs}
  1125. {/block:Caption}
  1126. {/block:Photoset}
  1127.  
  1128. {block:Video}
  1129. <div class="video">{Video-500}</div>
  1130. {block:Caption}
  1131. {block:NotReblog}
  1132. <li class="caption captop ogcap">
  1133. <div class="captext">{Caption}</div>
  1134. </li>
  1135. {/block:NotReblog}
  1136. {block:Reblogs}
  1137. <li class="caption captop rbcap">
  1138. <img src="{PortraitURL-64}" class="capicon icon">
  1139. <div class="username upper {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1140. <div class="captext">{Body}</div>
  1141. </li>
  1142. {/block:Reblogs}
  1143. {/block:Caption}
  1144. {/block:Video}
  1145.  
  1146. {block:Quote}
  1147. <div class="padding">
  1148. <div class="quote">{Quote}</div>
  1149. {block:Source}<div class="source upper">{Source}</div>{/block:Source}
  1150. </div>
  1151. {/block:Quote}
  1152.  
  1153. {block:Chat}
  1154. {block:Title}<div class="title"><a href="{Permalink}">{Title}</a></div>{/block:Title}
  1155. <ul class="chat">{block:Lines}
  1156. <li class="line">
  1157. {block:Label}<div class="accent">{Label}</div>{/block:Label}
  1158. {Line}
  1159. </li>
  1160. {/block:Lines}</ul>
  1161. {/block:Chat}
  1162.  
  1163. {block:Answer}
  1164. <div class="askpost">
  1165. <img src="{AskerPortraitURL-128}" class="askicon icon">
  1166. <div class="asker-name accent">{Asker} said:</div>
  1167. <div class="question">{Question}</div>
  1168. </div>
  1169. {block:Answerer}
  1170. <li class="caption rbcap">
  1171. <img src="{AnswererPortraitURL-64}" class="capicon icon">
  1172. <div class="username upper {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Answerer}</a></div>
  1173. <div class="captext">{Answer}</div>
  1174. </li>
  1175. {/block:Answerer}
  1176. {block:NotReblog}
  1177. <li class="caption ogcap">
  1178. <div class="captext">{Replies}</div>
  1179. </li>
  1180. {/block:NotReblog}
  1181. {block:RebloggedFrom}{block:Reblogs}
  1182. <li class="caption rbcap">
  1183. <img src="{PortraitURL-64}" class="capicon icon">
  1184. <div class="username upper {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1185. <div class="captext">{Body}</div>
  1186. </li>
  1187. {/block:Reblogs}{/block:RebloggedFrom}
  1188. {/block:Answer}
  1189.  
  1190. {block:Audio}
  1191. <div class="audiopost">
  1192. <div class="audiobox"><div class="button">
  1193. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  1194. </div></div>
  1195. {block:AlbumArt}
  1196. <img src="{AlbumArtURL}" class="albumart">
  1197. {/block:AlbumArt}
  1198. <div class="audioinfo">
  1199. <div class="flexy">
  1200. {block:TrackName}<li class="accent track">{TrackName}</li>{/block:TrackName}
  1201. {block:Artist}<li class="upper">{Artist}</li>{/block:Artist}
  1202. {block:Album}<li class="upper">{Album}</li>{/block:Album}
  1203. </div>
  1204. </div>
  1205. </div>
  1206. {block:Caption}
  1207. {block:NotReblog}
  1208. <li class="caption captop ogcap">
  1209. <div class="captext">{Caption}</div>
  1210. </li>
  1211. {/block:NotReblog}
  1212. {block:Reblogs}
  1213. <li class="caption captop rbcap">
  1214. <img src="{PortraitURL-64}" class="capicon icon">
  1215. <div class="username upper {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1216. <div class="captext">{Body}</div>
  1217. </li>
  1218. {/block:Reblogs}
  1219. {/block:Caption}
  1220. {/block:Audio}
  1221.  
  1222. <!----- INFO ----->
  1223.  
  1224. {block:HasTags}
  1225. <div class="tags infobg">
  1226. {block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
  1227. </div>
  1228. {/block:HasTags}
  1229.  
  1230. <!----- SOURCE ----->
  1231.  
  1232. <div class="postsource">
  1233. {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}
  1234. </div>
  1235.  
  1236. </article>
  1237.  
  1238. <!----- NOTES ----->
  1239.  
  1240. {block:PermalinkPage}{block:Date}
  1241. <article class="notes">
  1242. <div id="notetitle" class="infobg">
  1243. <div class="subtitle">{NoteCountWithLabel}</div>
  1244. {TimeAgo} on {DayOfMonth} {Month} {Year}
  1245. </div>
  1246. {block:PostNotes}
  1247. {PostNotes-64}
  1248. </article>
  1249. {/block:PostNotes}
  1250. {/block:Date}{/block:PermalinkPage}
  1251.  
  1252. {/block:Posts}
  1253.  
  1254. <!----- PAGINATION ----->
  1255.  
  1256. <footer class="pg upper">
  1257. {block:Pagination}
  1258. {block:PreviousPage}<a href="{PreviousPage}">back</a>{/block:PreviousPage}
  1259. {block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage}
  1260. {/block:Pagination}
  1261. </footer>
  1262.  
  1263. </section>
  1264.  
  1265. <a href="https://seyche.tumblr.com" title="wisteria theme by seyche" id="k">&.</a>
  1266.  
  1267. <a href="https://seyche.tumblr.com" id="m" class="upper">wisteria theme by seyche</a>
  1268.  
  1269. <div id="btop">
  1270. <a href="#top" title="back to top" target="_self"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="48px" height="48px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg></a>
  1271. </div>
  1272.  
  1273. <!----- PHOTOSETS ----->
  1274.  
  1275. <script src="https://static.tumblr.com/0podkko/jfMplm3f8/modified_photosets.js"></script>
  1276.  
  1277. <script src="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosets.js"></script>
  1278.  
  1279. <script src="https://static.tumblr.com/0podkko/qWqq8va08/photosets.js"></script>
  1280.  
  1281. <!----- VIDEO RESIZING ----->
  1282.  
  1283. <script src="https://seyche.github.io/external-files-hosting/plugins/flexframes-modified.js"></script>
  1284.  
  1285. <!----- TOOLTIPS ----->
  1286.  
  1287. <script src="https://unpkg.com/popper.js@1"></script>
  1288. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1289.  
  1290. <!----- SCRIPTS ----->
  1291.  
  1292. <script>
  1293.  
  1294. /// PHOTOSETS
  1295.  
  1296. $(document).ready(function(){
  1297. initPhotosets();
  1298.  
  1299. npfPhotosets(".posts", {
  1300. rowClass:"npf_row",
  1301. imageContainerClass:"tmblr-full",
  1302. generatedPhotosetContainerClass:"npf_photoset",
  1303. imageClass:"npf_image",
  1304. includeCommonPhotosets: false,
  1305. useTumblrLightbox: true,
  1306. insertGalleryIndicator: false,
  1307. galleryIndicatorClass: "npf_gallery_indicator",
  1308. galleryIndicatorContent: "<img src='image_url'>",
  1309. photosetMargins:"{select:photoset gutter}"
  1310. });
  1311.  
  1312. /// TOOLTIPS
  1313.  
  1314. tippy('[title]', {
  1315. theme: 'custom',
  1316. arrow: false,
  1317. followCursor: true,
  1318. delay: 100,
  1319. placement: 'bottom-start',
  1320. zIndex: 9999999999,
  1321. maxWidth: 400,
  1322.  
  1323. content(reference) {
  1324. const title = reference.getAttribute('title');
  1325. reference.removeAttribute('title');
  1326. return title;
  1327. },
  1328. });
  1329. });
  1330.  
  1331. /// VIDEO RESIZING
  1332.  
  1333. function flexFrame() {
  1334. $(".caption").each(function() {
  1335. $(this).find("iframe").wrap("<div class='capframe'></div>");
  1336. flexibleFrames($(".capframe"));
  1337. });
  1338. flexibleFrames($(".video"));
  1339. }
  1340. $(document).ready(flexFrame);
  1341.  
  1342. /// REMOVE REDIRECTS
  1343.  
  1344. $(document).ready(function(){
  1345. //remove tumblr redirects script by magnusthemes@tumblr
  1346. $('a[href*="t.umblr.com/redirect"]').each(function(){
  1347. var originalURL = $(this).attr("href").split("?z=")[1].split("&t=")[0];
  1348. var replaceURL = decodeURIComponent(originalURL);
  1349. $(this).attr("href", replaceURL);
  1350. });
  1351. });
  1352.  
  1353. /// SCROLL TO TOP
  1354.  
  1355. $(document).ready(function(){
  1356. $('#btop').click(function(){
  1357. $('html, body').animate({scrollTop : 0},800);
  1358. return false;
  1359. });
  1360.  
  1361. });
  1362. </script>
  1363.  
  1364. </body>
  1365. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!