API tools faq
paste
Advertisement
seiche

theme six: holly

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