API tools faq
paste
seiche

theme five: honeysuckle

seiche
Nov 29th, 2019 (edited)
10,092
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 47.79 KB | None | 1 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. HONEYSUCKLE THEME BY SEYCHE.TUMBLR.COM
  15.  
  16. CREDITS:
  17. -outicons by Anton Saputro
  18. -PXU photosets by pixelunion / modified by bychloethemes
  19. -npf photosets by codematurgy
  20. -tippy.js tooltips by atomiks
  21. -responsive video resizing by nouvae
  22. -remove redirects by magnusthemes
  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=Lato:ital,wght@0,400;0,700;1,400;1,700&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=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=PT+Sans: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&family=Raleway:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Spectral:ital,wght@0,400;0,700;1,400;1,700&family=Volkhov:ital,wght@0,400;0,700;1,400;1,700&family=Vollkorn:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  28.  
  29. <!----- PHOTOSETS ----->
  30.  
  31. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  32.  
  33. <link href="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosetstyle.css" rel="stylesheet" type="text/css">
  34.  
  35. <!---- VARIABLES ----->
  36.  
  37. <meta name="image:Icon" content=""/>
  38.  
  39. <meta name="color:Background" content="#ffffff"/>
  40. <meta name="color:Text" content="#4a4a4a"/>
  41. <meta name="color:Link" content="#8b8b8b"/>
  42. <meta name="color:Accent" content="#b5d1cf"/>
  43. <meta name="color:Title"content="#111111"/>
  44. <meta name="color:Borders" content="#dcdcdc"/>
  45. <meta name="color:Bold" content="#111111"/>
  46. <meta name="color:Italic" content="#4a4a4a"/>
  47. <meta name="color:Underline" content="#4a4a4a"/>
  48.  
  49. <meta name="select:Body Font" content="Literata" title="Literata"/>
  50. <meta name="select:Body Font" content="Libre Baskerville" title="Libre Baskerville"/>
  51. <meta name="select:Body Font" content="Lora" title="Lora"/>
  52. <meta name="select:Body Font" content="Spectral" title="Spectral"/>
  53. <meta name="select:Body Font" content="Georgia" title="Georgia"/>
  54. <meta name="select:Body Font" content="Volkhov" title="Volkhov"/>
  55. <meta name="select:Body Font" content="PT Sans" title="PT Sans"/>
  56. <meta name="select:Body Font" content="PT Serif" title="PT Serif"/>
  57. <meta name="select:Body Font" content="Vollkorn" title="Vollkorn"/>
  58. <meta name="select:Body Font" content="Lato" title="Lato"/>
  59. <meta name="select:Body Font" content="Fira Sans" title="Fira Sans"/>
  60. <meta name="select:Body Font" content="Open Sans" title="Open Sans"/>
  61. <meta name="select:Body Font" content="Source Sans Pro" title="Source Sans Pro"/>
  62.  
  63. <meta name="select:Title Font" content="Montserrat" title="Montserrat"/>
  64. <meta name="select:Title Font" content="Lato" title="Lato"/>
  65. <meta name="select:Title Font" content="Raleway" title="Raleway"/>
  66. <meta name="select:Title Font" content="Playfair Display" title="Playfair Display"/>
  67. <meta name="select:Title Font" content="PT Sans" title="PT Sans"/>
  68. <meta name="select:Title Font" content="PT Serif" title="PT Serif"/>
  69. <meta name="select:Title Font" content="Open Sans" title="Open Sans"/>
  70. <meta name="select:Title Font" content="Spectral" title="Spectral"/>
  71. <meta name="select:Title Font" content="Literata" title="Literata"/>
  72. <meta name="select:Title Font" content="Libre Baskerville" title="Libre Baskerville"/>
  73. <meta name="select:Title Font" content="Lora" title="Lora"/>
  74. <meta name="select:Title Font" content="Source Sans Pro" title="Source Sans Pro"/>
  75.  
  76. <meta name="select:Font Size" content="14px" title="14px"/>
  77. <meta name="select:Font Size" content="12px" title="12px"/>
  78. <meta name="select:Font Size" content="13px" title="13px"/>
  79. <meta name="select:Font Size" content="15px" title="15px"/>
  80. <meta name="select:Font Size" content="16px" title="16px"/>
  81. <meta name="select:Font Size" content="17px" title="17px"/>
  82. <meta name="select:Font Size" content="18px" title="18px"/>
  83.  
  84. <meta name="select:Post Width" content="450px" title="450px"/>
  85. <meta name="select:Post Width" content="500px" title="500px"/>
  86. <meta name="select:Post Width" content="540px" title="540px"/>
  87. <meta name="select:Post Width" content="600px" title="600px"/>
  88. <meta name="select:Post Width" content="650px" title="650px"/>
  89.  
  90. <meta name="select:Photoset Gutter" content="1" title="1px"/>
  91. <meta name="select:Photoset Gutter" content="2" title="2px"/>
  92. <meta name="select:Photoset Gutter" content="3" title="3px"/>
  93. <meta name="select:Photoset Gutter" content="4" title="4px"/>
  94.  
  95. <meta name="select:Tags" content="show_tags" title="Show tags"/>
  96. <meta name="select:Tags" content="hide_tags" title="Hide tags"/>
  97. <meta name="select:Tags" content="hover_tags" title="Hover tags"/>
  98.  
  99. <meta name="text:Post Margin" content="140"/>
  100. <meta name="text:Line Height" content="180%"/>
  101.  
  102. <meta name="if:Search" content="1"/>
  103. <meta name="if:Show Note Count" content="1"/>
  104. <meta name="if:Justified Text" content="0"/>
  105. <meta name="if:Bolded Titles" content="0"/>
  106.  
  107. <meta name="text:Subtitle" content=""/>
  108.  
  109. <meta name="text:Home Link" content="home"/>
  110. <meta name="text:Ask Link" content="message"/>
  111. <meta name="text:Archive Link" content="archive"/>
  112. <meta name="text:Link 1 URL" content="" />
  113. <meta name="text:Link 1" content="" />
  114. <meta name="text:Link 2 URL" content="" />
  115. <meta name="text:Link 2" content="" />
  116. <meta name="text:Link 3 URL" content="" />
  117. <meta name="text:Link 3" content="" />
  118. <meta name="text:Link 4 URL" content="" />
  119. <meta name="text:Link 4" content="" />
  120. <meta name="text:Link 5 URL" content="" />
  121. <meta name="text:Link 5" content="" />
  122.  
  123. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  124.  
  125. <!----- TOOLTIPS ----->
  126.  
  127. <script src="https://unpkg.com/popper.js@1"></script>
  128. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  129.  
  130. <!----- LOAD IN ----->
  131.  
  132. <script>
  133. $(document).ready(function(){
  134. $(function() {
  135. $('body').removeClass('load-in');
  136. });
  137. });
  138. </script>
  139.  
  140. <style type="text/css">
  141.  
  142. body {
  143. font-family: '{select:body font}', serif;
  144. color: {color:text};
  145. background-color: {color:background};
  146. text-align: left;
  147. font-size: {select:font size};
  148. line-height: {text:line height};
  149. word-wrap: break-word;
  150. letter-spacing: 0.2px;
  151. margin: 0;
  152. padding: 0;
  153. overflow-x: hidden;
  154. {block:ifJustifiedText}text-align: justify;{/block:ifJustifiedText}
  155. {block:ifNotJustifiedText}text-align: left;{/block:ifNotJustifiedText}
  156. opacity: 1.0;
  157. -webkit-transition: 2s opacity;
  158. -moz-transition: 2s opacity;
  159. -ms-transition: 2s opacity;
  160. -o-transition: 2s opacity;
  161. transition: 2s opacity;
  162. }
  163.  
  164. body.load-in {
  165. opacity: 0;
  166. -webkit-transition: none;
  167. -moz-transition: none;
  168. -ms-transition: none;
  169. -o-transition: none;
  170. transition: none;
  171. }
  172.  
  173. a {
  174. color: {color:link};
  175. text-decoration: none;
  176. -webkit-transition: all 0.3s;
  177. -moz-transition: all 0.3s;
  178. -ms-transition: all 0.3s;
  179. -o-transition: all 0.3s;
  180. transition: all 0.3s;
  181. }
  182.  
  183. a:hover {
  184. color: {color:accent};
  185. -webkit-transition: all 0.3s;
  186. -moz-transition: all 0.3s;
  187. -ms-transition: all 0.3s;
  188. -o-transition: all 0.3s;
  189. transition: all 0.3s;
  190. }
  191.  
  192. p a {
  193. border-bottom: 2px solid rgba({RGBcolor:accent}, 0.9);
  194. display: inline-block;
  195. position: relative;
  196. padding: 2px 2px 0 2px;
  197. z-index: 1;
  198. -webkit-transition: all 0.5s;
  199. -moz-transition: all 0.5s;
  200. -ms-transition: all 0.5s;
  201. -o-transition: all 0.5s;
  202. transition: all 0.5s;
  203. }
  204.  
  205. p a::before {
  206. content: '';
  207. position: absolute;
  208. top: 0;
  209. left: 0;
  210. height: 100%;
  211. width: 100%;
  212. box-sizing: border-box;
  213. padding: 2px 2px 0 2px;
  214. background-color: rgba({RGBcolor:accent}, 0.3);
  215. z-index: -1;
  216. transform: scaleX(0) scaleY(1);
  217. transform-origin: left center;
  218. -webkit-transition: all 0.5s;
  219. -moz-transition: all 0.5s;
  220. -ms-transition: all 0.5s;
  221. -o-transition: all 0.5s;
  222. transition: all 0.5s;
  223. }
  224.  
  225. p a:hover::before {transform: scaleX(1) scaleY(1);}
  226. p a:hover {color: {color:title}; border-bottom: 2px solid rgba({RGBcolor:accent}, 1.0);}
  227.  
  228. h1, h2, h3, h4, h5 {
  229. {block:ifBoldedTitles}
  230. font-weight: bold;
  231. {/block:ifBoldedTitles}
  232. {block:ifNotBoldedTitles}
  233. font-weight: normal;
  234. {/block:ifNotBoldedTitles}
  235. line-height: {text:line height};
  236. color: {color:title};
  237. }
  238.  
  239. h1 a, h2 a, h3 a, h4 a {color: {color:title};}
  240. h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {color: {color:accent}}
  241. h1 {font-size: 1.75em;}
  242. h2 {font-size: 1.5em;}
  243. h3 {font-size: 1.3em;}
  244. h4 {font-size: 1.25em;}
  245. h5 {font-size: 1.1em;}
  246.  
  247. small {font-size: 0.9em;}
  248. big {font-size: 1.1em;}
  249. b, bold, strong {color: {color:bold};}
  250. b a, bold a, strong a {color: {color:link};}
  251. i, italic {color: {color:italic};}
  252. u, underline {color: {color:underline};}
  253. hr {background-color: {color:borders}; height: 1px; border-width: 0;}
  254.  
  255. blockquote {
  256. padding: 0 0 0 1.25em;
  257. border-left: 1px solid {color:borders};
  258. margin: 1.25em 0 1.25em 1.25em;
  259. }
  260.  
  261. ul {list-style-type: circle;}
  262. ol {list-style-type: decimal;}
  263. li {max-width: 100%;}
  264.  
  265. .tippy-tooltip.custom-theme {
  266. background-color: {color:background};
  267. color: {color:title};
  268. text-align: center;
  269. font-family: '{select:title font}', serif;
  270. font-weight: normal;
  271. text-transform: uppercase;
  272. letter-spacing: 1px;
  273. border-radius: 0;
  274. font-style: normal;
  275. padding: 0.25em;
  276. margin: 20px auto auto 10px;
  277. font-size: 0.8em;
  278. border: 1px solid {color:borders};
  279. }
  280.  
  281. ::-webkit-scrollbar {
  282. width: 17px;
  283. height: 17px;
  284. background-color: {color:background};
  285. }
  286.  
  287. ::-webkit-scrollbar-track {border: 8px solid {color:background}; background-color: {color:borders};}
  288.  
  289. ::-webkit-scrollbar-thumb {
  290. border: 5px solid {color:background};
  291. background-color: {color:accent};
  292. min-height: 24px;
  293. min-width: 24px;
  294. }
  295.  
  296. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  297. z-index: 999999999!important;
  298. opacity: 0.6;
  299. transform: scale(0.8);
  300. transform-origin: 100% 0;
  301. -webkit-transform: scale(0.8);
  302. -webkit-transform-origin: 100% 0;
  303. -o-transform: scale(0.8);
  304. -o-transform-origin: 100% 0;
  305. -moz-transform: scale(0.8);
  306. -moz-transform-origin: 100% 0;
  307. -ms-transform: scale(0.8);
  308. -ms-transform-origin: 100% 0;
  309. -webkit-transition: all 0.4s;
  310. -moz-transition: all 0.4s;
  311. -ms-transition: all 0.4s;
  312. -o-transition: all 0.4s;
  313. transition: all 0.4s;
  314. }
  315.  
  316. .tmblr-iframe-compact .tmblr-iframe--unified-controls:hover {
  317. opacity: 1.0;
  318. -webkit-transition: all 0.4s;
  319. -moz-transition: all 0.4s;
  320. -ms-transition: all 0.4s;
  321. -o-transition: all 0.4s;
  322. transition: all 0.4s;
  323. }
  324.  
  325. .tmblr-iframe--app-cta-button {display: none!important;}
  326.  
  327. /*----- COMMON -----*/
  328.  
  329. .title {
  330. color: {color:title};
  331. font-size: 1.75em;
  332. line-height: {text:line height};
  333. {block:ifBoldedTitles}
  334. font-weight: bold;
  335. {/block:ifBoldedTitles}
  336. {block:ifNotBoldedTitles}
  337. font-weight: normal;
  338. {/block:ifNotBoldedTitles}
  339. }
  340.  
  341. .title a {color: {color:title};}
  342. .title a:hover {color: {color:accent};}
  343.  
  344. .secondtitle {
  345. font-family: '{select:title font}', sans-serif;
  346. text-transform: uppercase;
  347. font-size: 0.9em;
  348. letter-spacing: 1px;
  349. }
  350.  
  351. .accent {
  352. font-weight: bold;
  353. color: {color:title};
  354. font-family: '{select:title font}', sans-serif;
  355. text-transform: uppercase;
  356. font-size: 0.9em;
  357. letter-spacing: 1px;
  358. border-bottom: 4px solid {color:accent};
  359. }
  360.  
  361. .accent a {color: {color:accent};}
  362. .accent a:hover {color: {color:link};}
  363.  
  364. .aborder::after {
  365. content: '';
  366. display: block;
  367. width: 100px;
  368. height: 4px;
  369. background-color: {color:accent};
  370. margin-top: 30px;
  371. }
  372.  
  373. /*----- SIDEBAR -----*/
  374.  
  375. .sidebar {
  376. position: fixed;
  377. height: 100vh;
  378. width: 30vw;
  379. left: 0;
  380. top: 0;
  381. bottom: 0;
  382. background-color: {color:background};
  383. padding: 60px 30px 0 60px;
  384. box-sizing: border-box;
  385. overflow-y: auto;
  386. display: flex;
  387. justify-content: space-between;
  388. flex-wrap: no-wrap;
  389. flex-direction: column;
  390. -webkit-transition: all 1s;
  391. -moz-transition: all 1s;
  392. -ms-transition: all 1s;
  393. -o-transition: all 1s;
  394. transition: all 1s;
  395. }
  396.  
  397. .sidebar img {
  398. border-radius: 4px;
  399. max-width: 70px;
  400. max-height: 70px;
  401. margin-bottom: 1.5em;
  402. }
  403.  
  404. #subtitle {margin-top: 0.5em; text-align: left;}
  405.  
  406. #description::before {
  407. content: '';
  408. display: block;
  409. width: 25%;
  410. height: 4px;
  411. background-color: {color:accent};
  412. margin: 2.5em 0;
  413. }
  414.  
  415. #description {font-style: italic;}
  416. .find {margin-top: 1.25em;}
  417.  
  418. .find svg {
  419. width: 1.25em;
  420. height: 1.25em;
  421. fill: {color:title};
  422. display: inline-block;
  423. vertical-align: middle;
  424. margin-right: 1em;
  425. }
  426.  
  427. .find input {
  428. border: 0;
  429. outline: none;
  430. display: inline-block;
  431. background: inherit;
  432. margin: 0;
  433. padding: 0;
  434. color: {color:link};
  435. text-align: left;
  436. font-family: '{select:title font}', sans-serif;
  437. width: calc(100% - 1.25em - 2.25em);
  438. }
  439.  
  440. .find input[type=text] {color: {color:text};}
  441. input::-webkit-input-placeholder {color: {color:text};}
  442. input::-moz-placeholder {color: {color:text};}
  443. input:-moz-placeholder {color: {color:text};}
  444. input:-ms-input-placeholder {color: {color:text};}
  445.  
  446. #flex-wrap {
  447. flex: 1 1 30vw;
  448. order: 1;
  449. }
  450.  
  451. nav {
  452. font-family: '{select:title font}', sans-serif;
  453. line-height: 200%;
  454. min-height: 0;
  455. flex: initial;
  456. padding: 1.5em 0 60px 0;
  457. box-sizing: border-box;
  458. order: 2;
  459. }
  460.  
  461. nav a {
  462. display: inline-block;
  463. font-weight: normal;
  464. text-transform: uppercase;
  465. letter-spacing: 1px;
  466. font-size: 0.9em;
  467. vertical-align: middle;
  468. }
  469.  
  470. .numbers {
  471. font-weight: bold;
  472. margin-right: 12px;
  473. font-family: '{select:body font}', serif;
  474. font-size: 1.2em;
  475. color: {color:title};
  476. -webkit-transition: all 0.3s;
  477. -moz-transition: all 0.3s;
  478. -ms-transition: all 0.3s;
  479. -o-transition: all 0.3s;
  480. transition: all 0.3s;
  481. }
  482.  
  483. .numbers::after {
  484. content: '/';
  485. color: {color:borders};
  486. margin-left: 12px;
  487. font-size: 1.5em;
  488. vertical-align: -0.3em;
  489. }
  490.  
  491. nav a::after {
  492. content: '';
  493. width: 1.7em;
  494. height: 4px;
  495. position: relative;
  496. display: block;
  497. bottom: 1em;
  498. background: {color:accent};
  499. z-index: -5;
  500. -webkit-transition: all 0.6s;
  501. -moz-transition: all 0.6s;
  502. -ms-transition: all 0.6s;
  503. -o-transition: all 0.6s;
  504. transition: all 0.6s;
  505. }
  506.  
  507. nav a:hover::after {
  508. width: 100%;
  509. -webkit-transition: all 0.6s;
  510. -moz-transition: all 0.6s;
  511. -ms-transition: all 0.6s;
  512. -o-transition: all 0.6s;
  513. transition: all 0.6s;
  514. }
  515.  
  516. nav a:hover {color: {color:link};}
  517.  
  518. /*----- POSTS -----*/
  519.  
  520. .container {
  521. margin: auto auto auto calc(30vw - 30px);
  522. width: 70vw;
  523. }
  524.  
  525. .posts {
  526. position: relative;
  527. width: {select:post width};
  528. margin: auto;
  529. padding: {text:post margin}px 0;
  530. border-bottom: 1px solid {color:borders};
  531. }
  532.  
  533. .posts:first-of-type {padding: 70px 0 {text:post margin}px 0;}
  534.  
  535. .tumblr_video_container {max-height: {select:post width}!important; overflow: hidden!important;
  536. }
  537. .posts li, .posts blockquote, .posts img, figure, video, .video, .video iframe {max-width: 100%;}
  538. .postsource {display: none;}
  539.  
  540. /*----- CAPTION -----*/
  541.  
  542. .caption {
  543. list-style-type: none;
  544. padding: 0 0 30px 0;
  545. margin: 0;
  546. }
  547.  
  548. .caption p {margin: 1em 0;}
  549. .ogcap p:first-of-type {margin: 0 0 1em 0;}
  550. .caption p:last-of-type, .ogcap p:last-of-type {margin-bottom: 0;}
  551. .body:first-of-type {margin-top: 0;}
  552.  
  553. .caption:last-of-type {padding-bottom: 0;}
  554. .caption:first-of-type {margin: 30px 0 0 0;}
  555.  
  556. .caption iframe, .caption img {max-width: 100%;}
  557.  
  558. .capicon {
  559. display: inline-block;
  560. vertical-align: middle;
  561. width: 20px;
  562. height: 20px;
  563. border-radius: 4px;
  564. }
  565.  
  566. .username::before {
  567. content: '/';
  568. color: {color:borders};
  569. margin-right: 10px;
  570. font-size: 1.3em;
  571. vertical-align: middle;
  572. }
  573.  
  574. .username {
  575. margin-left: 10px;
  576. line-height: 1em;
  577. display: inline-block;
  578. }
  579.  
  580. .deactive::after {
  581. content: '(deactivated)';
  582. margin-left: 10px;
  583. color: {color:text};
  584. opacity: 0.8;
  585. }
  586.  
  587. p.tmblr-attribution {margin-top: 1em !important;}
  588.  
  589. /*----- TEXT -----*/
  590.  
  591. pre {
  592. line-height: inherit;
  593. font-size: inherit;
  594. white-space: pre-wrap;
  595. white-space: -moz-pre-wrap;
  596. white-space: -pre-wrap;
  597. white-space: -o-pre-wrap;
  598. word-wrap: break-word;
  599. }
  600.  
  601. a.read_more {
  602. text-transform: uppercase;
  603. letter-spacing: 1px;
  604. font-family: '{select:title font}', serif;
  605. font-weight: bold;
  606. }
  607.  
  608. p.read_more_container {text-align: center;}
  609.  
  610. @font-face {
  611. font-family: Calluna;
  612. src: url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.eot?3=&v=f685dc881c60c298ea22a73fe505b88a");
  613. 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");
  614. font-weight: 700;
  615. font-style: italic;
  616. }
  617.  
  618. @font-face {
  619. font-family: Fairwater;
  620. 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");
  621. font-weight: 400;
  622. font-style: normal;
  623. }
  624.  
  625. p.npf_quirky {font-family: Fairwater; font-size: 1.75em;}
  626.  
  627. .npf_color_joey {color: #e57373;}
  628. .npf_color_monica {color: #ff8a65;}
  629. .npf_color_phoebe {color: #ffee58;}
  630. .npf_color_ross {color: #81c784;}
  631. .npf_color_rachel {color: #4fc3f7;}
  632. .npf_color_chandler {color: #9575cd;}
  633. .npf_color_niles {color: #f06292;}
  634.  
  635. /*----- LINK -----*/
  636.  
  637. .linkp {
  638. color: {color:text};
  639. border: 1px solid {color:borders};
  640. border-radius: 4px;
  641. overflow: hidden;
  642. -webkit-transition: all 0.3s;
  643. -moz-transition: all 0.3s;
  644. -ms-transition: all 0.3s;
  645. -o-transition: all 0.3s;
  646. transition: all 0.3s;
  647. }
  648.  
  649. .linkp:hover, .npf-link-block:hover {
  650. border: 1px solid {color:accent};
  651. -webkit-transition: all 0.3s;
  652. -moz-transition: all 0.3s;
  653. -ms-transition: all 0.3s;
  654. -o-transition: all 0.3s;
  655. transition: all 0.3s;
  656. }
  657.  
  658. .thumbnail {max-width: 100%; border-bottom: 1px solid {color:borders};}
  659. .link {padding: 30px;}
  660. .linkhost {color: {color:title}; margin-top: 1.5em;}
  661. .linktxt {color: {color:text}; margin-top: 1.5em;}
  662.  
  663. .npf-link-block {
  664. margin-top: 1.25em;
  665. border-radius: 4px;
  666. -webkit-transition: all 0.3s;
  667. -moz-transition: all 0.3s;
  668. -ms-transition: all 0.3s;
  669. -o-transition: all 0.3s;
  670. transition: all 0.3s;
  671. }
  672.  
  673. .npf-link-block .poster .title {background-color: initial; padding: 1.5em;}
  674. .npf-link-block.no-poster .title {padding: 1.5em 1.5em 0 1.5em;}
  675. .npf-link-block .title {font-size: 1.25em; border-bottom: none;}
  676. .npf-link-block .bottom {padding: 1.5em !important; color: {color:text};}
  677.  
  678. .npf-link-block .bottom .site-name {
  679. font-size: 0.9em;
  680. color: {color:text};
  681. font-weight: normal;
  682. letter-spacing: 1px;
  683. font-family: '{select:title font}', sans-serif;
  684. }
  685.  
  686. /*----- PHOTO -----*/
  687.  
  688. img {
  689. margin: 0;
  690. display: block;
  691. height: auto;
  692. }
  693.  
  694. .photo img {width: 100%; border-radius: 4px;}
  695. .vignette, #vignette {opacity: 0;}
  696. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(60, 60, 60, .8) !important;}
  697.  
  698. .lightbox-image, #tumblr_lightbox img {
  699. box-shadow: none !important;
  700. border-radius: 4px !important;
  701. max-width: none;
  702. }
  703.  
  704. /*----- PHOTOSET -----*/
  705.  
  706. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  707. margin-left: 0 !important;
  708. margin-right: 0 !important;
  709. }
  710.  
  711. .captext figure {margin: 1em 0;}
  712. .captext figure .tmblr-full {margin-top: {select:photoset gutter}px;}
  713. .npf_photoset {border-radius: 4px; overflow: hidden;}
  714. .tmblr-full:hover {cursor: pointer;}
  715. .npf_image, .tmblr-full {border: none; outline: none;}
  716.  
  717. .photo-slideshow.processed {border-radius: 4px; overflow: hidden;}
  718. .text-post .photo-slideshow.processed {margin-bottom: 30px;}
  719.  
  720. /*----- QUOTE -----*/
  721.  
  722. .quote, p.npf_quote {
  723. font-size: 1.25em;
  724. line-height: {text:line height};
  725. color: {color:title};
  726. font-style: italic;
  727. }
  728.  
  729. .quote p:first-of-type {margin-top: 0;}
  730. .quote p:last-of-type {margin-bottom: 0;}
  731. p.npf_quote {font-family: inherit; margin-bottom: 1em;}
  732.  
  733. .source {margin-top: 30px;}
  734.  
  735. /*----- CHAT -----*/
  736.  
  737. .chat {padding: 0; margin: 0;}
  738. .chat li {list-style-type: none;}
  739. .line {padding: 1em 0;}
  740. .line:first-of-type {padding: 0 0 1em 0;}
  741. .line:last-of-type {padding: 1em 0 0 0;}
  742. .chattxt {margin-top: 0.2em;}
  743.  
  744. p.npf_chat {font-family: inherit; margin-top: 1em;}
  745.  
  746. p.npf_chat b {
  747. color: {color:title};
  748. text-transform: uppercase;
  749. letter-spacing: 1px;
  750. font-family: '{select:title font}', sans-serif;
  751. font-size: 0.9em;
  752. }
  753.  
  754. /*----- ANSWER -----*/
  755.  
  756. .askpost p:first-of-type {margin-top: 0;}
  757. .askpost p:last-of-type {margin-bottom: 0;}
  758. .question {font-size: 1.25em; color: {color:title};}
  759. .askpost .secondtitle {margin-top: 30px;}
  760.  
  761. /*----- AUDIO -----*/
  762.  
  763. .albumart {
  764. width: 120px;
  765. height: 120px;
  766. display: block;
  767. margin: auto;
  768. border-radius: 4px;
  769. }
  770.  
  771. .audioinfo {
  772. text-align: center;
  773. margin-top: 20px;
  774. }
  775.  
  776. .audioinfo li {list-style-type: none;}
  777.  
  778. .button {
  779. width: 30px;
  780. height: 30px;
  781. overflow: hidden;
  782. position: relative;
  783. z-index: 10;
  784. margin: 8px 7px 6px 7px;
  785. }
  786.  
  787. .audiobox {
  788. background-color: #f2f2f2;
  789. z-index: 50;
  790. border-radius: 50%;
  791. position: absolute;
  792. border: 1px solid {color:borders};
  793. }
  794.  
  795. .audioinfo::after {
  796. content: '';
  797. width: 100%;
  798. height: 1px;
  799. background-color: {color:borders};
  800. position: absolute;
  801. right: 0;
  802. z-index: -5;
  803. margin-top: calc(22px + 1em);
  804. }
  805.  
  806. #wrap {min-height: 50px; margin-top: 1em;}
  807. .margin {margin-top: 0.5em;}
  808.  
  809. .play {
  810. float: right;
  811. margin-top: 0.7em;
  812. background-color: {color:background};
  813. padding-left: 1em;
  814. }
  815.  
  816. .track {
  817. border-bottom: 4px solid {color:accent};
  818. font-weight: bold;
  819. color: {color:title};
  820. font-size: 1.2em;
  821. }
  822.  
  823. /*----- INFO -----*/
  824.  
  825. .info {margin-top: 30px; text-align: left;}
  826. .info a {display: inline-block; margin-right: 1em;}
  827.  
  828. .date {
  829. font-weight: bold;
  830. border-bottom: 4px solid {color:accent};
  831. color: {color:title};
  832. }
  833.  
  834. .lirb {display: inline-block;}
  835.  
  836. .like-b {
  837. position: relative;
  838. display: inline-block;
  839. height: 1em;
  840. line-height: 1em;
  841. }
  842.  
  843. .like-b .like_button iframe {
  844. position: absolute;
  845. top: 0;
  846. left: 0;
  847. bottom: 0;
  848. right: 0;
  849. z-index: 2;
  850. opacity: 0;
  851. }
  852.  
  853. .like_button iframe {width: 100% !important; height: 100% !important;}
  854. .like-b .liked + .b {color: {color:accent};}
  855. .like-b .liked + .b:after {content: 'd';}
  856.  
  857. .tags {
  858. word-wrap: break-word;
  859. font-style: italic;
  860. margin-top: 0.25em;
  861. text-transform: lowercase;
  862. text-align: left;
  863. }
  864.  
  865. .show_tags {display: block;}
  866. .hide_tags {display: none;}
  867.  
  868. .hover_tags {
  869. opacity: 0;
  870. -webkit-transition: all 0.5s;
  871. -moz-transition: all 0.5s;
  872. -ms-transition: all 0.5s;
  873. -o-transition: all 0.5s;
  874. transition: all 0.5s;
  875. }
  876.  
  877. .posts:hover .hover_tags {
  878. opacity: 1.0;
  879. -webkit-transition: all 0.5s;
  880. -moz-transition: all 0.5s;
  881. -ms-transition: all 0.5s;
  882. -o-transition: all 0.5s;
  883. transition: all 0.5s;
  884. }
  885.  
  886. .tags a {margin-right: 1em;}
  887. #viasrc {margin-top: 0.25em;}
  888. #viasrc a {margin: 0;}
  889.  
  890. .pin-post {text-align: center; margin-bottom: 2em; font-size: 1.15em;}
  891. .pin-post a {color: {color:title};}
  892. .pin-post a:hover {color: {color:accent};}
  893.  
  894. .pin-post svg {
  895. width: 1.5em;
  896. height: 1.5em;
  897. vertical-align: middle;
  898. display: inline-block;
  899. fill: {color:accent};
  900. margin-right: 0.5em;
  901. }
  902.  
  903. /*---- POST NOTES -----*/
  904.  
  905. .notes {margin: 100px 0;}
  906. #notetitle {margin-bottom: 1em;}
  907. #pnotes {font-size: 0.8em;}
  908.  
  909. ol.notes {
  910. list-style-type: none;
  911. max-width: 100%;
  912. padding: 0;
  913. margin: 1em 0 0 0;
  914. }
  915.  
  916. ol.notes li.note {padding: 0.4em; display: block;}
  917.  
  918. ol.notes li.note img.avatar {
  919. border-radius: 50%;
  920. margin-right: 1em;
  921. vertical-align: middle;
  922. display: inline-block;
  923. }
  924.  
  925. /*---- PAGINATION -----*/
  926.  
  927. #pg {text-align: center; margin: {text:post margin}px auto calc({text:post margin}px + 50px) auto;}
  928. #pg a {margin: 0 0.5em; color: {color:title};}
  929. #pg a:hover {color: {color:accent};}
  930.  
  931. .currentpg {
  932. color: {color:accent};
  933. font-weight: bold;
  934. margin: 0 0.5em;
  935. }
  936.  
  937. .jumppg {font-weight: bold;}
  938.  
  939. #k {
  940. position: fixed;
  941. bottom: 30px;
  942. right: 30px;
  943. font-size: 14px;
  944. background-color: {color:background};
  945. padding: 5px 9px;
  946. border-radius: 3px;
  947. box-sizing: border-box;
  948. }
  949.  
  950. #pg a#k:hover {
  951. background-color: {color:accent};
  952. color: {color:background};
  953. }
  954.  
  955. /*----- MOBILE HEADER -----*/
  956.  
  957. header {
  958. position: fixed;
  959. top: 0;
  960. left: 0;
  961. right: 0;
  962. border-bottom: 1px solid {color:borders};
  963. background-color: {color:background};
  964. z-index: 9999;
  965. padding: 30px;
  966. width: 100%;
  967. box-sizing: border-box;
  968. display: none;
  969. }
  970.  
  971. .menu-button {
  972. display: inline-block;
  973. vertical-align: middle;
  974. }
  975.  
  976. .menu-button svg {
  977. width: 34px;
  978. height: 34px;
  979. fill: {color:title};
  980. cursor: help;
  981. -webkit-transition: all 0.3s;
  982. -moz-transition: all 0.3s;
  983. -ms-transition: all 0.3s;
  984. -o-transition: all 0.3s;
  985. transition: all 0.3s;
  986. }
  987.  
  988. .menu-button svg:hover, a.close:hover svg, .mobile-controls a:hover svg {
  989. fill: {color:accent};
  990. -webkit-transition: all 0.3s;
  991. -moz-transition: all 0.3s;
  992. -ms-transition: all 0.3s;
  993. -o-transition: all 0.3s;
  994. transition: all 0.3s;
  995. }
  996.  
  997. header .secondtitle {
  998. display: inline-block;
  999. font-size: 1em;
  1000. margin-left: 1em;
  1001. line-height: 100%;
  1002. }
  1003.  
  1004. .close {
  1005. color: {color:title};
  1006. cursor: help;
  1007. display: none;
  1008. }
  1009.  
  1010. .close svg {
  1011. width: 24px;
  1012. height: 24px;
  1013. fill: {color:title};
  1014. display: inline-block;
  1015. vertical-align: middle;
  1016. margin-left: 0.5em;
  1017. -webkit-transition: all 0.3s;
  1018. -moz-transition: all 0.3s;
  1019. -ms-transition: all 0.3s;
  1020. -o-transition: all 0.3s;
  1021. transition: all 0.3s;
  1022. }
  1023.  
  1024. /*----- MOBILE CONTROLS -----*/
  1025.  
  1026. .mobile-controls {
  1027. float: right;
  1028. display: inline-block;
  1029. margin-top: 5px;
  1030. }
  1031.  
  1032. .mobile-controls a {margin-left: 8px;}
  1033.  
  1034. .mobile-controls a svg {
  1035. width: 24px;
  1036. height: 24px;
  1037. fill: {color:link};
  1038. -webkit-transition: all 0.3s;
  1039. -moz-transition: all 0.3s;
  1040. -ms-transition: all 0.3s;
  1041. -o-transition: all 0.3s;
  1042. transition: all 0.3s;
  1043. }
  1044.  
  1045. /*----- RESPONSIVE -----*/
  1046.  
  1047. @media only screen and (min-width: 1600px) {
  1048. .container {margin: auto auto auto 20vw;}
  1049. nav {padding-bottom: 80px;}
  1050. }
  1051.  
  1052. @media only screen and (max-height: 768px) {
  1053. .sidebar {padding: 50px 30px 0 70px;}
  1054. nav {padding-bottom: 50px;}
  1055. .posts:first-of-type {padding: 50px 0 {text:post margin}px 0;}
  1056. }
  1057.  
  1058. @media only screen and (min-width: 1100px) {
  1059. header {display: none;}
  1060. .close {display: none;}
  1061.  
  1062. .sidebar {
  1063. width: 30%;
  1064. left: 0;
  1065. }
  1066. }
  1067.  
  1068. @media only screen and (max-width: 1099px) {
  1069. header {display: block;}
  1070. .close {display: block; margin-bottom: 1.5em;}
  1071.  
  1072. .sidebar {
  1073. width: 80vw;
  1074. left: -80vw;
  1075. z-index: 9999;
  1076. background-color: {color:background};
  1077. border-right: 1px solid {color:borders};
  1078. padding: 50px 70px;
  1079. overflow-y: auto;
  1080. }
  1081.  
  1082. .sidebar.show {left: 0;}
  1083. nav {padding-bottom: 0;}
  1084.  
  1085. .container {margin: auto;}
  1086.  
  1087. .posts:first-of-type {margin-top: 160px; padding: 0 auto {text:post margin}px auto;}
  1088. }
  1089.  
  1090. @media only screen and (max-width: 670px) {
  1091. .container {width: 100vw;}
  1092. .posts {width: 75vw;}
  1093.  
  1094. #k {position: static;}
  1095. }
  1096.  
  1097. {CustomCSS}
  1098.  
  1099. </style>
  1100. </head>
  1101.  
  1102. <body class="load-in">
  1103.  
  1104. <!----- MOBILE HEADER ----->
  1105.  
  1106. <header>
  1107. <div class="menu-button"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M45,72h128c3.3,0,6-2.7,6-6s-2.7-6-6-6H45c-3.3,0-6,2.7-6,6S41.7,72,45,72z"/><path d="M45,117h128c3.3,0,6-2.7,6-6s-2.7-6-6-6H45c-3.3,0-6,2.7-6,6S41.7,117,45,117z"/><path d="M45,162h128c3.3,0,6-2.7,6-6s-2.7-6-6-6H45c-3.3,0-6,2.7-6,6S41.7,162,45,162z"/></svg></div>
  1108. <div class="secondtitle">navigation</div>
  1109. <div class="mobile-controls">
  1110. <a href="https://www.tumblr.com/follow/{Name}" title="follow"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M57,114h45v45c0,3.3,2.7,6,6,6s6-2.7,6-6v-45h45c3.3,0,6-2.7,6-6s-2.7-6-6-6h-45V57c0-3.3-2.7-6-6-6s-6,2.7-6,6v45H57c-3.3,0-6,2.7-6,6S53.7,114,57,114z"/><path d="M108,196.1c48.6,0,88.1-39.5,88.1-88.1S156.6,19.9,108,19.9S19.9,59.4,19.9,108S59.4,196.1,108,196.1z M108,31.9c42,0,76.1,34.1,76.1,76.1S150,184.1,108,184.1S31.9,150,31.9,108S66,31.9,108,31.9z"/></svg></a>
  1111. <a href="https://www.tumblr.com/message/{Name}" title="message"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M51.6,144.6l-6,34.1c-0.4,2.3,0.5,4.6,2.4,5.9c1,0.8,2.3,1.1,3.5,1.1c1,0,2-0.2,2.8-0.7l44.3-23.8c3.2,0.3,6.3,0.4,9.4,0.4c46.3,0,83.9-29.5,83.9-65.7c0-36.2-37.6-65.7-83.9-65.7S24.1,59.7,24.1,95.9C24.1,114.6,34.1,132.2,51.6,144.6z M108,42.3c39.6,0,71.9,24.1,71.9,53.7c0,29.6-32.3,53.7-71.9,53.7c-3.2,0-6.6-0.2-10-0.5c-1.2-0.1-2.4,0.1-3.5,0.7l-35,18.8l4.5-25.7c0.4-2.4-0.6-4.8-2.7-6.1c-16.1-10.3-25.3-25.1-25.3-40.8C36.1,66.4,68.4,42.3,108,42.3z"/></svg></a>
  1112. <a href="https://www.tumblr.com/dashboard" title="dashboard"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M113.7,20.4c-2.3,0.9-3.7,3.1-3.7,5.6v39.1c-6.2,0.3-16.3,1.2-27.1,3.7c-20.4,4.9-34.6,13.6-42.3,26c-8.7,14.1-1.3,35.4,22.2,63.5c16.4,19.6,34.7,35.5,35.4,36.2c1.1,1,2.5,1.5,3.9,1.5c0,0,0,0,0,0c3.3,0,6-2.7,6-6c0-1.2-0.4-2.3-1-3.3c-1.2-2.1-7-13-12.4-25.3c-10.5-23.9-10.6-32.7-10.1-35.3c1-5.6,11.1-6.5,17.1-6.5c3.6,0,7.1,0.3,9.7,0.6l2,36.1c0.1,2.3,1.5,4.3,3.6,5.2c2.1,0.9,4.5,0.5,6.3-1l67.2-58c1.3-1.1,2-2.6,2.1-4.3s-0.6-3.3-1.7-4.5l-70.7-72C118.6,20.1,116,19.5,113.7,20.4z M122,40.7l55.9,57l-53.2,45.9l-1.6-28.8c-0.2-2.7-2.1-5-4.8-5.5c-0.3-0.1-7.9-1.5-16.6-1.5c-21.5,0-27.6,8.9-28.9,16.4c-1.4,7.7,1.6,20.2,9.1,37.9c-3.3-3.6-6.7-7.4-10-11.3c-19.2-23-26.7-40.5-21.1-49.4C65.4,77.7,110.2,77,115.3,77c0.3,0,0.5,0,0.6,0c1.6,0,3.2-0.6,4.3-1.7c1.2-1.1,1.8-2.7,1.8-4.3V40.7z"/></svg></a>
  1113. </div>
  1114. </header>
  1115.  
  1116. <!----- SIDEBAR ----->
  1117.  
  1118. <aside class="sidebar">
  1119. <div id="flex-wrap">
  1120. <a class="close secondtitle">close<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M67,149c1.2,1.2,2.7,1.8,4.2,1.8c1.5,0,3.1-0.6,4.2-1.8l32.6-32.6l32.6,32.6c1.2,1.2,2.7,1.8,4.2,1.8s3.1-0.6,4.2-1.8c2.3-2.3,2.3-6.1,0-8.5L116.5,108L149,75.4c2.3-2.3,2.3-6.1,0-8.5s-6.1-2.3-8.5,0L108,99.5L75.4,67c-2.3-2.3-6.1-2.3-8.5,0c-2.3,2.3-2.3,6.1,0,8.5L99.5,108L67,140.6C64.6,142.9,64.6,146.7,67,149z"/><path d="M108,196.1c48.6,0,88.1-39.5,88.1-88.1S156.6,19.9,108,19.9S19.9,59.4,19.9,108S59.4,196.1,108,196.1z M108,31.9c42,0,76.1,34.1,76.1,76.1S150,184.1,108,184.1S31.9,150,31.9,108S66,31.9,108,31.9z"/></svg></a>
  1121. {block:ifIconImage}<a href="/"><img src="{image:Icon}"/></a>{/block:ifIconImage}
  1122. <a href="/" id="stitle" class="title">{Title}</a>
  1123. <div id="subtitle" class="secondtitle">{text:Subtitle}</div>
  1124. <div id="description">{Description}</div>
  1125. {block:ifSearch}
  1126. <form action="/search" method="get" class="find" name="sform">
  1127. <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M140,134.2c10.9-11.8,17.7-27.6,17.7-45c0-36.5-29.7-66.3-66.3-66.3S25.1,52.7,25.1,89.2s29.7,66.3,66.3,66.3c14.9,0,28.6-4.9,39.7-13.2l49.3,49.3c1.2,1.2,2.7,1.8,4.2,1.8c1.5,0,3.1-0.6,4.2-1.8c2.3-2.3,2.3-6.1,0-8.5L140,134.2z M37.1,89.2c0-29.9,24.3-54.3,54.3-54.3c29.9,0,54.3,24.3,54.3,54.3s-24.3,54.3-54.3,54.3C61.4,143.5,37.1,119.1,37.1,89.2z"/></svg>
  1128. <input type="text" name="q" placeholder="search" value="{SearchQuery}" class="secondtitle" value autocomplete="off"/>
  1129. </form>
  1130. {/block:ifSearch}
  1131. </div>
  1132.  
  1133. <nav>
  1134. {block:ifHomeLink}<a href="/"><span class="numbers">01</span>{text:Home Link}</a><br>{/block:ifHomeLink}
  1135. {block:ifAskLink}<a href="/ask"><span class="numbers">02</span>{text:Ask Link}</a><br>{/block:ifAskLink}
  1136. {block:ifArchiveLink}<a href="/archive"><span class="numbers">03</span>{text:Archive Link}</a><br>{/block:ifArchiveLink}
  1137. {block:ifLink1}<a href="{text:Link 1 URL}"><span class="numbers">04</span>{text:Link 1}</a><br>{/block:ifLink1}
  1138. {block:ifLink2}<a href="{text:Link 2 URL}"><span class="numbers">05</span>{text:Link 2}</a><br>{/block:ifLink2}
  1139. {block:ifLink3}<a href="{text:Link 3 URL}"><span class="numbers">06</span>{text:Link 3}</a><br>{/block:ifLink3}
  1140. {block:ifLink4}<a href="{text:Link 4 URL}"><span class="numbers">07</span>{text:Link 4}</a><br>{/block:ifLink4}
  1141. {block:ifLink5}<a href="{text:Link 5 URL}"><span class="numbers">08</span>{text:Link 5}</a><br>{/block:ifLink5}
  1142. </nav>
  1143. </aside>
  1144.  
  1145. <!----- POSTS ----->
  1146.  
  1147. <section class="container">
  1148.  
  1149. {block:TagPage}
  1150. <div class="posts">
  1151. viewing posts filed under <span class="accent">#{Tag}</span>
  1152. </div>
  1153. {/block:TagPage}
  1154.  
  1155. {block:Posts inlineMediaWidth="1280"}
  1156. <article class="posts" id="{PostID}">
  1157.  
  1158. {block:IndexPage}
  1159. {block:PinnedPostLabel}<div class="pin-post"><a href="{Permalink}" class="secondtitle"><svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M134.1,11c-1.7-1.7-4.2-2.2-6.4-1.4c-2.2,0.8-3.7,2.9-3.9,5.3l-1.5,25.8L90.1,73.1l-39.2-4.7c-2.5-0.3-5,1-6.1,3.3c-1.1,2.3-0.7,5.1,1.2,6.9l28.8,28.8l-49.9,67.8c-1.7,2.3-1.5,5.6,0.5,7.7c1.2,1.2,2.7,1.8,4.3,1.8c1.2,0,2.3-0.3,3.3-1l70.6-47.4l29,29c1.2,1.2,2.7,1.8,4.2,1.8c0.9,0,1.8-0.2,2.6-0.6c2.3-1.1,3.7-3.5,3.4-6l-3.9-38.4l32.2-32.2l26.4-1.3c2.4-0.1,4.5-1.6,5.3-3.8c0.9-2.2,0.3-4.7-1.4-6.4L134.1,11z M55,154.5L83.3,116L95,127.6L55,154.5z M168.2,77.9c-1.5,0.1-2.9,0.7-4,1.8l-35.9,35.9c-1.3,1.3-1.9,3.1-1.7,4.9l2.5,24.5L66.7,82.3l24.9,3c1.8,0.2,3.7-0.4,5-1.7l36-36c1-1,1.7-2.4,1.7-3.9l0.8-14.7l48.2,48.2L168.2,77.9z"/></svg>{PinnedPostLabel}</a></div>{/block:PinnedPostLabel}
  1160. {/block:IndexPage}
  1161.  
  1162. {block:Text}
  1163. <div class="text-post" id="{PostID}">
  1164. {block:Title}<h1 class="posttitle aborder"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1165. {block:NotReblog}
  1166. <li class="caption ogcap body">
  1167. <div class="captext">{Body}</div>
  1168. </li>
  1169. {/block:NotReblog}
  1170. {block:RebloggedFrom}{block:Reblogs}
  1171. <li class="caption rbcap body">
  1172. <img src="{PortraitURL-64}" class="capicon">
  1173. <div class="username secondtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1174. <div class="captext">{Body}</div>
  1175. </li>
  1176. {/block:Reblogs}{/block:RebloggedFrom}
  1177. </div>
  1178. {/block:Text}
  1179.  
  1180. {block:Link}
  1181. <a href="{URL}"><div class="linkp">
  1182. {block:Thumbnail}<img src="{Thumbnail-HighRes}" class="thumbnail">{/block:Thumbnail}
  1183. <div class="link">
  1184. <div class="title">{Name}</div>
  1185. {block:Excerpt}<div class="linktxt">{Excerpt}</div>{/block:Excerpt}
  1186. {block:Host}<div class="linkhost secondtitle">by {Host}</div>{/block:Host}
  1187. </div>
  1188. </div></a>
  1189. {block:Description}
  1190. {block:NotReblog}
  1191. <li class="caption ogcap">
  1192. <div class="captext">{Description}</div>
  1193. </li>
  1194. {/block:NotReblog}
  1195. {/block:Description}
  1196. {block:RebloggedFrom}
  1197. {block:Reblogs}
  1198. <li class="caption rbcap">
  1199. <a href="{Permalink}" class="username secondtitle {block:IsDeactivated}deactive{/block:IsDeactivated}">{Username}</a>
  1200. <div class="captext">{Body}</div>
  1201. </li>
  1202. {/block:Reblogs}
  1203. {/block:RebloggedFrom}
  1204. {/block:Link}
  1205.  
  1206. {block:Photo}
  1207. <div class="photo">
  1208. {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}
  1209. </div>
  1210. {block:Caption}
  1211. {block:NotReblog}
  1212. <li class="caption ogcap">
  1213. <div class="captext">{Caption}</div>
  1214. </li>
  1215. {/block:NotReblog}
  1216. {block:Reblogs}
  1217. <li class="caption rbcap">
  1218. <img src="{PortraitURL-64}" class="capicon">
  1219. <div class="username secondtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1220. <div class="captext">{Body}</div>
  1221. </li>
  1222. {/block:Reblogs}
  1223. {/block:Caption}
  1224. {/block:Photo}
  1225.  
  1226. {block:Photoset}
  1227. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" alt="{PhotoAlt}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  1228. {block:Caption}
  1229. {block:NotReblog}
  1230. <li class="caption ogcap">
  1231. <div class="captext">{Caption}</div>
  1232. </li>
  1233. {/block:NotReblog}
  1234. {block:Reblogs}
  1235. <li class="caption rbcap">
  1236. <img src="{PortraitURL-64}" class="capicon">
  1237. <div class="username secondtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1238. <div class="captext">{Body}</div>
  1239. </li>
  1240. {/block:Reblogs}
  1241. {/block:Caption}
  1242. {/block:Photoset}
  1243.  
  1244. {block:Video}
  1245. <div class="video">{Video-500}</div>
  1246. {block:Caption}
  1247. {block:NotReblog}
  1248. <li class="caption ogcap">
  1249. <div class="captext">{Caption}</div>
  1250. </li>
  1251. {/block:NotReblog}
  1252. {block:Reblogs}
  1253. <li class="caption rbcap">
  1254. <img src="{PortraitURL-64}" class="capicon">
  1255. <div class="username secondtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1256. <div class="captext">{Body}</div>
  1257. </li>
  1258. {/block:Reblogs}
  1259. {/block:Caption}
  1260. {/block:Video}
  1261.  
  1262. {block:Quote}
  1263. <div class="quote aborder">{Quote}</div>
  1264. {block:Source}<div class="source secondtitle">{Source}</div>{/block:Source}
  1265. {/block:Quote}
  1266.  
  1267. {block:Chat}
  1268. {block:Title}<h1 class="posttitle aborder"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1269. <ul class="chat">{block:Lines}
  1270. <li class="line">
  1271. {block:Label}<span class="accent chatter">{Label}</span>{/block:Label}
  1272. <div class="chattxt">{Line}</div>
  1273. </li>
  1274. {/block:Lines}</ul>
  1275. {/block:Chat}
  1276.  
  1277. {block:Answer}
  1278. <div class="askpost">
  1279. <div class="aborder question">{Question}</div>
  1280. <div class="secondtitle">{Asker} inquired</div>
  1281. </div>
  1282. {block:Answerer}
  1283. <li class="caption rbcap">
  1284. <img src="{AnswererPortraitURL-64}" class="capicon">
  1285. <div class="username secondtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Answerer}</a></div>
  1286. <div class="captext">{Answer}</div>
  1287. </li>
  1288. {/block:Answerer}
  1289. {block:NotReblog}
  1290. <li class="caption ogcap">
  1291. <div class="captext">{Replies}</div>
  1292. </li>
  1293. {/block:NotReblog}
  1294. {block:RebloggedFrom}{block:Reblogs}
  1295. <li class="caption rbcap">
  1296. <img src="{PortraitURL-64}" class="capicon">
  1297. <div class="username secondtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1298. <div class="captext">{Body}</div>
  1299. </li>
  1300. {/block:Reblogs}{/block:RebloggedFrom}
  1301. {/block:Answer}
  1302.  
  1303. {block:Audio}
  1304. {block:AlbumArt}
  1305. <img src="{AlbumArtURL}" class="albumart">
  1306. {/block:AlbumArt}
  1307. <div class="audioinfo">
  1308. {block:TrackName}<span class="track">{TrackName}</span>{/block:TrackName}
  1309. <div class="margin">
  1310. {block:Artist}<li class="secondtitle">by {Artist}</li>{/block:Artist}
  1311. {block:Album}<li class="secondtitle">from {Album}</li>{/block:Album}
  1312. </div>
  1313. </div>
  1314. <div id="wrap">
  1315. <div class="audiobox"><div class="button">
  1316. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  1317. </div></div>
  1318. <span class="play">Listen?</span>
  1319. </div>
  1320. {block:Caption}
  1321. {block:NotReblog}
  1322. <li class="caption ogcap">
  1323. <div class="captext">{Caption}</div>
  1324. </li>
  1325. {/block:NotReblog}
  1326. {block:Reblogs}
  1327. <li class="caption rbcap">
  1328. <img src="{PortraitURL-64}" class="capicon">
  1329. <div class="username secondtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1330. <div class="captext">{Body}</div>
  1331. </li>
  1332. {/block:Reblogs}
  1333. {/block:Caption}
  1334. {/block:Audio}
  1335.  
  1336. <!----- INFO ----->
  1337.  
  1338. {block:Date}
  1339. <div class="info">
  1340. <a href="{Permalink}" class="date accent" title="{TimeAgo}">{DayOfMonthWithZero} {Month} {Year}</a>
  1341. <span class="secondtitle">
  1342. {block:IndexPage}{block:NoteCount}{block:ifShowNoteCount}<a href="{Permalink}" class="notecount">{NoteCountWithLabel}</a>{/block:ifShowNoteCount}{/block:NoteCount}{/block:IndexPage}
  1343. <span class="lirb">
  1344. <span class="rb">
  1345. <a href="{ReblogURL}" target="_blank">reblog</a>
  1346. </span>
  1347. <a class="like-b" href="#">{LikeButton}<span class="b">like</span></a>
  1348. </span>
  1349. {block:PermalinkPage}
  1350. {block:RebloggedFrom}<div id="viasrc">
  1351. via <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a>; by <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a>
  1352. </div>{/block:RebloggedFrom}
  1353. {/block:PermalinkPage}
  1354. </span>
  1355. </div>
  1356. {/block:Date}
  1357.  
  1358. {block:HasTags}
  1359. <div class="tags {block:IndexPage}{select:tags}{/block:IndexPage}">
  1360. {block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
  1361. </div>
  1362. {/block:HasTags}
  1363.  
  1364. <!----- POST NOTES ----->
  1365.  
  1366. {block:PermalinkPage}{block:Date}
  1367. <div class="notes">
  1368. {block:NoteCount}<div class="title" id="notetitle">{NoteCountWithLabel}</div>{/block:NoteCount}
  1369. {block:PostNotes}
  1370. <div class="secondtitle" id="pnotes">{PostNotes}</div>
  1371. {/block:PostNotes}
  1372. </div>
  1373. {/block:Date}{/block:PermalinkPage}
  1374.  
  1375. <!----- SOURCE ----->
  1376.  
  1377. <div class="postsource">
  1378. {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}
  1379. </div>
  1380.  
  1381. </article>
  1382.  
  1383. {/block:Posts}
  1384.  
  1385. <!----- PAGINATION ----->
  1386.  
  1387. <footer id="pg">
  1388. {block:Pagination}
  1389. {block:PreviousPage}<a href="{PreviousPage}" class="secondtitle">back</a>{/block:PreviousPage}
  1390. {block:JumpPagination length="5"}
  1391. {block:CurrentPage}<span class="currentpg">{PageNumber}</span>{/block:CurrentPage}
  1392. {block:JumpPage}<a class="jumppg" href="{URL}">{PageNumber}</a>{/block:JumpPage}
  1393. {/block:JumpPagination}
  1394. {block:NextPage}<a href="{NextPage}" class="secondtitle">next</a>{/block:NextPage}<br>
  1395. {/block:Pagination}
  1396.  
  1397. <a href="https://seyche.tumblr.com" title="honeysuckle theme by seyche" id="k">&.</a>
  1398. </footer>
  1399.  
  1400. </section>
  1401.  
  1402. <!----- PHOTOSETS ----->
  1403.  
  1404. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  1405. <script src="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosets.js"></script>
  1406.  
  1407. <!----- VIDEO RESIZING ----->
  1408.  
  1409. <script src="https://seyche.github.io/external-files-hosting/plugins/flexframes-modified.js"></script>
  1410.  
  1411. <!----- SCRIPTS ----->
  1412.  
  1413. <script type="text/javascript">
  1414.  
  1415. /// PHOTOSETS
  1416.  
  1417. $(document).ready(function(){
  1418. $('.photo-slideshow').pxuPhotoset({
  1419. lightbox: true,
  1420. rounded: false,
  1421. gutter: '{select:photoset gutter}px',
  1422. borderRadius: '4px',
  1423. photoset: '.photo-slideshow',
  1424. photoWrap: '.photo-data',
  1425. photo: '.pxu-photo'
  1426. });
  1427.  
  1428. npfPhotosets(".posts", {
  1429. rowClass:"npf_row",
  1430. imageContainerClass:"tmblr-full",
  1431. generatedPhotosetContainerClass:"npf_photoset",
  1432. imageClass:"npf_image",
  1433. includeCommonPhotosets: false,
  1434. useTumblrLightbox: true,
  1435. insertGalleryIndicator: false,
  1436. galleryIndicatorClass: "npf_gallery_indicator",
  1437. galleryIndicatorContent: "<img src='image_url'>",
  1438. photosetMargins:"{select:photoset gutter}"
  1439. });
  1440. });
  1441.  
  1442. /// TOOLTIPS
  1443.  
  1444. tippy('[title]', {
  1445. theme: 'custom',
  1446. arrow: false,
  1447. followCursor: true,
  1448. delay: 100,
  1449. placement: 'bottom-start',
  1450. zIndex: 9999999999,
  1451. maxWidth: 400,
  1452.  
  1453. content(reference) {
  1454. const title = reference.getAttribute('title');
  1455. reference.removeAttribute('title');
  1456. return title;
  1457. },
  1458. });
  1459.  
  1460. /// VIDEO RESIZING
  1461.  
  1462. function flexFrame() {
  1463. $(".caption").each(function() {
  1464. $(this).find("iframe").wrap("<div class='capframe'></div>");
  1465. flexibleFrames($(".capframe"));
  1466. });
  1467. flexibleFrames($(".video"));
  1468. }
  1469. $(document).ready(flexFrame);
  1470.  
  1471. /// REMOVE REDIRECTS
  1472.  
  1473. $(document).ready(function(){
  1474. $('a[href*="t.umblr.com/redirect"]').each(function(){
  1475. var originalURL = $(this).attr("href").split("?z=")[1].split("&t=")[0];
  1476. var replaceURL = decodeURIComponent(originalURL);
  1477. $(this).attr("href", replaceURL);
  1478. });
  1479. });
  1480.  
  1481. /// SLIDE MOBILE NAV
  1482.  
  1483. $(document).ready(function() {
  1484. $('.menu-button').click(function(){
  1485. $('.sidebar').addClass('show', 1000);
  1486. });
  1487.  
  1488. $('.close').click(function(){
  1489. $('.sidebar').removeClass('show', 1000);
  1490. });
  1491. });
  1492.  
  1493. </script>
  1494.  
  1495. </body>
  1496. </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!