API tools faq
paste
seiche

theme nine: lilac

seiche
May 19th, 2020 (edited)
27,748
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 71.06 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. LILAC THEME BY SEYCHE.TUMBLR.COM
  15.  
  16. CREDITS:
  17. -feather icons by Cole Bemis
  18. -css photosets by annasthms and espoirthemes
  19. -tippy.js tooltips by atomiks
  20. -notecount shortening by shythemes
  21. -responsive videos by nouvae
  22. -remove redirects by magnusthemes
  23. -npf photosets by codematurgy
  24. -copy link to post tutorial by glenthemes, with clipboard.js by Zeno Rocha
  25. -time ago plugin by bychloethemes
  26. (full list of credits @ seyche.tumblr.com/credits)
  27.  
  28. --->
  29.  
  30. <link href="https://fonts.googleapis.com/css2?family=ABeeZee:ital@0;1&family=Barlow:ital,wght@0,400;0,700;1,400;1,700&family=Karla:ital,wght@0,400;0,700;1,400;1,700&family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Lora: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=Public+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  31.  
  32. <!----- VARIABLES ----->
  33.  
  34. <meta name="image:Sidebar" content=""/>
  35. <meta name="image:Header" content=""/>
  36.  
  37. <meta name="color:Background" content="#f0f0f0"/>
  38. <meta name="color:Posts" content="#ffffff"/>
  39. <meta name="color:Text" content="#5a5a5a"/>
  40. <meta name="color:Link" content="#8c8c8c"/>
  41. <meta name="color:Accent" content="#9fa8da"/>
  42. <meta name="color:Gradient 1" content="#7986cb"/>
  43. <meta name="color:Gradient 2" content="#e1bee7"/>
  44. <meta name="color:Icon Background" content="#e8eaf6"/>
  45. <meta name="color:Sidebar Link Background" content="#f5f5f5"/>
  46. <meta name="color:Borders" content="#dcdcdc"/>
  47. <meta name="color:Title" content="#212121"/>
  48. <meta name="color:Sidebar" content="#ffffff"/>
  49.  
  50. <meta name="select:Font" content="Public Sans" title="Public Sans"/>
  51. <meta name="select:Font" content="ABeeZee" title="ABeeZee"/>
  52. <meta name="select:Font" content="Barlow" title="Barlow"/>
  53. <meta name="select:Font" content="Karla" title="Karla"/>
  54. <meta name="select:Font" content="Lato" title="Lato"/>
  55. <meta name="select:Font" content="Lora" title="Lora"/>
  56. <meta name="select:Font" content="Open Sans" title="Open Sans"/>
  57. <meta name="select:Font" content="PT Sans" title="PT Sans"/>
  58. <meta name="select:Font" content="PT Serif" title="PT Serif"/>
  59. <meta name="select:Font" content="Roboto" title="Roboto"/>
  60.  
  61. <meta name="select:Font Size" content="14px" title="14px"/>
  62. <meta name="select:Font Size" content="12px" title="12px"/>
  63. <meta name="select:Font Size" content="13px" title="13px"/>
  64. <meta name="select:Font Size" content="15px" title="15px"/>
  65. <meta name="select:Font Size" content="16px" title="16px"/>
  66. <meta name="select:Font Size" content="17px" title="17px"/>
  67. <meta name="select:Font Size" content="18px" title="18px"/>
  68.  
  69. <meta name="select:Post Width" content="540px" title="540px"/>
  70. <meta name="select:Post Width" content="400px" title="400px"/>
  71. <meta name="select:Post Width" content="450px" title="450px"/>
  72. <meta name="select:Post Width" content="500px" title="500px"/>
  73. <meta name="select:Post Width" content="600px" title="600px"/>
  74.  
  75. <meta name="select:Photoset Gutter" content="1" title="1px"/>
  76. <meta name="select:Photoset Gutter" content="2" title="2px"/>
  77. <meta name="select:Photoset Gutter" content="3" title="3px"/>
  78. <meta name="select:Photoset Gutter" content="4" title="4px"/>
  79.  
  80. <meta name="if:Header Above Posts" content="1"/>
  81. <meta name="if:Rounded Post Corners" content="1"/>
  82. <meta name="if:Rounded Photo Corners" content="1"/>
  83. <meta name="if:Hide Caption" content="0"/>
  84. <meta name="if:Post Info Dropdown" content="1"/>
  85. <meta name="if:Tags On Click" content="1"/>
  86. <meta name="if:Drop Shadows" content="1"/>
  87.  
  88. <meta name="text:Post Margin" content="100"/>
  89. <meta name="text:Search Placeholder" content="What are you looking for?"/>
  90.  
  91. <meta name="text:Sidebar Icon" content="moon"/>
  92. <meta name="text:Sidebar Subtitle" content=""/>
  93.  
  94. <meta name="text:Home Link" content="home"/>
  95. <meta name="text:Home Icon" content="home"/>
  96. <meta name="text:Ask Link" content="message"/>
  97. <meta name="text:Ask Icon" content="mail"/>
  98. <meta name="text:Archive Link" content="archive"/>
  99. <meta name="text:Archive Icon" content="grid"/>
  100. <meta name="text:Submit Link" content="submit"/>
  101. <meta name="text:Submit Icon" content="upload"/>
  102.  
  103. <meta name="text:Sidebar Link 1 URL" content=""/>
  104. <meta name="text:Sidebar Link 1" content=""/>
  105. <meta name="text:Sidebar Link 1 Icon" content="user"/>
  106. <meta name="text:Sidebar Link 2 URL" content=""/>
  107. <meta name="text:Sidebar Link 2" content="" />
  108. <meta name="text:Sidebar Link 2 Icon" content="menu"/>
  109. <meta name="text:Sidebar Link 3 URL" content=""/>
  110. <meta name="text:Sidebar Link 3" content=""/>
  111. <meta name="text:Sidebar Link 3 Icon" content="bookmark"/>
  112.  
  113. <meta name="text:Header Link 1 URL" content=""/>
  114. <meta name="text:Header Link 1" content=""/>
  115. <meta name="text:Header Link 1 Icon" content="sun"/>
  116. <meta name="text:Header Link 2 URL" content=""/>
  117. <meta name="text:Header Link 2" content=""/>
  118. <meta name="text:Header Link 2 Icon" content="zap"/>
  119. <meta name="text:Header Link 3 URL" content=""/>
  120. <meta name="text:Header Link 3" content=""/>
  121. <meta name="text:Header Link 3 Icon" content="wind"/>
  122. <meta name="text:Header Link 4 URL" content=""/>
  123. <meta name="text:Header Link 4" content=""/>
  124. <meta name="text:Header Link 4 Icon" content="star"/>
  125. <meta name="text:Header Link 5 URL" content=""/>
  126. <meta name="text:Header Link 5" content="" />
  127. <meta name="text:Header Link 5 Icon" content="map"/>
  128. <meta name="text:Header Link 6 URL" content=""/>
  129. <meta name="text:Header Link 6" content=""/>
  130. <meta name="text:Header Link 6 Icon" content="calendar"/>
  131. <meta name="text:Header Link 7 URL" content=""/>
  132. <meta name="text:Header Link 7" content=""/>
  133. <meta name="text:Header Link 7 Icon" content="tv"/>
  134.  
  135. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  136.  
  137. <!----- PHOTOSETS ----->
  138.  
  139. <link href="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosetstyle.css" rel="stylesheet" type="text/css">
  140.  
  141. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  142.  
  143. <script src="https://unpkg.com/feather-icons"></script>
  144.  
  145. <!----- LOAD IN ----->
  146.  
  147. <script>
  148. $(document).ready(function(){
  149. $(function() {
  150. $('body').removeClass('load-in');
  151. });
  152. });
  153. </script>
  154.  
  155. <style type="text/css">
  156.  
  157. body {
  158. font-family: '{select:font}', sans-serif;
  159. font-size: {select:font size};
  160. color: {color:text};
  161. background-color: {color:background};
  162. text-align: left;
  163. line-height: 160%;
  164. word-wrap: break-word;
  165. letter-spacing: 0.2px;
  166. margin: 0;
  167. padding: 0;
  168. overflow-x: hidden;
  169. opacity: 1.0;
  170. -webkit-transition: 2s opacity;
  171. -moz-transition: 2s opacity;
  172. -ms-transition: 2s opacity;
  173. -o-transition: 2s opacity;
  174. transition: 2s opacity;
  175. }
  176.  
  177. body.load-in {
  178. opacity: 0;
  179. -webkit-transition: none;
  180. -moz-transition: none;
  181. -ms-transition: none;
  182. -o-transition: none;
  183. transition: none;
  184. }
  185.  
  186. a {
  187. color: {color:link};
  188. text-decoration: none;
  189. -webkit-transition: all 0.3s;
  190. -moz-transition: all 0.3s;
  191. -ms-transition: all 0.3s;
  192. -o-transition: all 0.3s;
  193. transition: all 0.3s;
  194. }
  195.  
  196. a:hover {
  197. color: {color:accent};
  198. -webkit-transition: all 0.3s;
  199. -moz-transition: all 0.3s;
  200. -ms-transition: all 0.3s;
  201. -o-transition: all 0.3s;
  202. transition: all 0.3s;
  203. }
  204.  
  205. p a, li a {border-bottom: 2px solid rgba({RGBcolor:accent}, 0.6);}
  206. p a:hover, li a:hover {border-bottom: 2px solid rgba({RGBcolor:accent}, 1.0);}
  207.  
  208. blockquote {
  209. padding: 0 0 0 1.25em;
  210. border-left: 1px solid {color:borders};
  211. margin: 1.25em 0 1.25em 1.25em;
  212. }
  213.  
  214. h1, h2, h3, h4, h5, .title {
  215. color: {color:title};
  216. letter-spacing: 2px;
  217. line-height: 160%;
  218. font-weight: bold;
  219. text-transform: uppercase;
  220. }
  221.  
  222. h1 a, h2 a, h3 a, h4 a, h5 a, .title a {color: {color:title};}
  223. h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, .title a:hover {color: {color:accent}}
  224. h1, .title {font-size: 1.25em;}
  225. h2 {font-size: 1.15em;}
  226. h3 {font-size: 1.1em;}
  227. h4 {font-size: 1em;}
  228. h5 {font-size: 0.9em;}
  229.  
  230. small {font-size: 0.9em;}
  231. big {font-size: 1.1em;}
  232. b, bold, strong {color: {color:title};}
  233. b a, bold a, strong a {color: {color:title};}
  234. b a:hover, bold a:hover, strong a:hover {color: {color:accent};}
  235.  
  236. ul {list-style-type: circle;}
  237. ol {list-style-type: decimal;}
  238. li {max-width: 100%; line-height: 160%;}
  239.  
  240. .tippy-tooltip.custom-theme {
  241. background-color: {color:title};
  242. color: {color:posts};
  243. text-align: center;
  244. font-family: inherit;
  245. font-weight: normal;
  246. text-transform: uppercase;
  247. letter-spacing: 1px;
  248. {block:ifRoundedPostCorners}border-radius: 3px;{/block:ifRoundedPostCorners}
  249. font-style: normal;
  250. padding: 0.25em;
  251. margin: 20px auto auto 10px;
  252. font-size: 0.8em;
  253. }
  254.  
  255. ::-webkit-scrollbar {
  256. width: 17px;
  257. height: 17px;
  258. background-color: {color:background};
  259. }
  260.  
  261. ::-webkit-scrollbar-track {border: 8px solid {color:background}; background-color: {color:borders};}
  262.  
  263. ::-webkit-scrollbar-thumb {
  264. border: 6px solid {color:background};
  265. background-color: {color:title};
  266. min-height: 24px;
  267. min-width: 24px;
  268. }
  269.  
  270. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  271. z-index: 999999999!important;
  272. opacity: 0.6;
  273. transform: scale(0.8);
  274. transform-origin: 100% 0;
  275. -webkit-transform: scale(0.8);
  276. -webkit-transform-origin: 100% 0;
  277. -o-transform: scale(0.8);
  278. -o-transform-origin: 100% 0;
  279. -moz-transform: scale(0.8);
  280. -moz-transform-origin: 100% 0;
  281. -ms-transform: scale(0.8);
  282. -ms-transform-origin: 100% 0;
  283. -webkit-transition: all 0.4s;
  284. -moz-transition: all 0.4s;
  285. -ms-transition: all 0.4s;
  286. -o-transition: all 0.4s;
  287. transition: all 0.4s;
  288. }
  289.  
  290. .tmblr-iframe-compact .tmblr-iframe--unified-controls:hover {
  291. opacity: 1.0;
  292. -webkit-transition: all 0.4s;
  293. -moz-transition: all 0.4s;
  294. -ms-transition: all 0.4s;
  295. -o-transition: all 0.4s;
  296. transition: all 0.4s;
  297. }
  298.  
  299. .tmblr-iframe--app-cta-button {display: none!important;}
  300.  
  301. /*----- SIDEBAR -----*/
  302.  
  303. #sidebar {
  304. background-color: {color:posts};
  305. width: 300px;
  306. text-align: center;
  307. height: 100%;
  308. position: fixed;
  309. top: 0;
  310. bottom: 0;
  311. left: 0;
  312. {block:ifDropShadows}box-shadow: 1px 1px 3px {color:borders};{/block:ifDropShadows}
  313. overflow-y: auto;
  314. box-sizing: border-box;
  315. }
  316.  
  317. #side-content {
  318. padding: 50px;
  319. }
  320.  
  321. #sidebar .icon {
  322. width: 100px;
  323. height: 100px;
  324. padding: 5px;
  325. background-color: {color:icon background};
  326. }
  327.  
  328. #side-icon {
  329. background: linear-gradient(to bottom right, {color:gradient 1}, {color:gradient 2});
  330. border-radius: 50%;
  331. padding: 5px;
  332. display: inline-block;
  333. margin-bottom: 1.25em;
  334. }
  335.  
  336. #status-icon {
  337. position: absolute;
  338. margin: -22px auto auto 37px;
  339. width: 24px;
  340. height: 24px;
  341. padding: 7px;
  342. line-height: 24px;
  343. }
  344.  
  345. #status-icon .feather {
  346. width: 24px;
  347. height: 24px;
  348. }
  349.  
  350. #sidebar .title {
  351. display: block;
  352. {block:ifSidebarImage}
  353. margin-top: 0.5em;
  354. {/block:ifSidebarImage}
  355. }
  356.  
  357. #description {margin-top: 1.5em;}
  358.  
  359. #side-nav {margin-top: 2.25em; text-align: left;}
  360.  
  361. #side-nav li {
  362. list-style-type: none;
  363. margin-bottom: 0.75em;
  364. display: block;
  365. }
  366.  
  367. #side-nav li a, #side-nav li a:hover {border-bottom: none;}
  368.  
  369. #side-nav a {
  370. width: 100%;
  371. display: flex;
  372. justify-content: space-between;
  373. align-items: center;
  374. border-radius: 2em;
  375. padding: 0.75em 1em;
  376. box-sizing: border-box;
  377. background-color: {color:sidebar link background};
  378. }
  379.  
  380. nav .feather {
  381. display: inline-block;
  382. vertical-align: middle;
  383. margin-right: 1em;
  384. width: 1.5em;
  385. height: 1.5em;
  386. color: {color:accent};
  387. }
  388.  
  389. #side-nav a:hover {
  390. background-color: {color:accent};
  391. color: {color:sidebar};
  392. {block:ifDropShadows}
  393. box-shadow: 1px 1px 3px {color:borders},
  394. -1px 1px 3px {color:borders};
  395. {/block:ifDropShadows}
  396. }
  397.  
  398. #side-nav a:hover .feather {color: {color:sidebar};}
  399.  
  400. /*----- POSTS -----*/
  401.  
  402. #container {
  403. position: relative;
  404. width: calc(99vw - 300px);
  405. margin: 50px auto 50px 300px;
  406. }
  407.  
  408. article {
  409. width: calc({select:post width} + 100px);
  410. position: relative;
  411. margin: {text:post margin}px auto;
  412. background-color: {color:posts};
  413. {block:ifRoundedPostCorners}border-radius: 10px;{/block:ifRoundedPostCorners}
  414. padding: 50px;
  415. box-sizing: border-box;
  416. {block:ifDropShadows}
  417. box-shadow: 1px 1px 3px {color:borders},
  418. -1px 1px 3px {color:borders};
  419. {/block:ifDropShadows}
  420. }
  421.  
  422. article:first-of-type {margin-top: 0;}
  423.  
  424. .tumblr_video_container {max-height: {select:post width}!important; overflow: hidden!important;
  425. }
  426. .posts li, .posts blockquote, .posts img, figure, video, iframe, .video, .video iframe {max-width: 100%;}
  427.  
  428. /*----- EXTREA HEADER -----*/
  429.  
  430. #header-img {
  431. width: 100%;
  432. margin-bottom: 2.5em;
  433. {block:ifRoundedPhotoCorners}border-radius: 10px;{/block:ifRoundedPhotoCorners}
  434. }
  435.  
  436. #extra-header .icon {
  437. display: inline-block;
  438. vertical-align: middle;
  439. padding: 3px;
  440. width: 3.25em;
  441. height: 3.25em;
  442. }
  443.  
  444. .find svg {
  445. width: 1.5em;
  446. height: 1.5em;
  447. display: inline-block;
  448. text-align: right;
  449. float: right;
  450. color: {color:accent};
  451. }
  452.  
  453. .find {
  454. background-color: inherit;
  455. width: calc(100% - 6.75em);
  456. margin: auto auto auto 2em;
  457. border: 1px solid {color:borders};
  458. background-color: {color:sidebar link background};
  459. border-radius: 2em;
  460. padding: 1em 1.5em;
  461. box-sizing: border-box;
  462. vertical-align: middle;
  463. display: inline-block;
  464. }
  465.  
  466. .find input {
  467. border: none;
  468. outline: none;
  469. display: inline-block;
  470. background: inherit;
  471. margin: 0;
  472. padding: 0;
  473. color: {color:text};
  474. width: calc(100% - 1.5em);
  475. font-family: inherit;
  476. font-size: inherit;
  477. }
  478.  
  479. .find input[type=text] {color: {color:text};}
  480. input::-webkit-input-placeholder {color: {color:text};}
  481. input::-moz-placeholder {color: {color:text};}
  482. input:-moz-placeholder {color: {color:text};}
  483. input:-ms-input-placeholder {color: {color:text};}
  484.  
  485. #header-nav {
  486. text-align: right;
  487. {block:ifHeaderLink1}margin-top: 1.5em;{/block:ifHeaderLink1}
  488. }
  489.  
  490. #header-nav a {margin-left: 0.5em;}
  491. #header-nav a:hover .feather {color: {color:title};}
  492.  
  493. /*----- COMMON STYLES -----*/
  494.  
  495. .subtitle {
  496. color: {color:title};
  497. text-transform: uppercase;
  498. letter-spacing: 1px;
  499. font-weight: bold;
  500. }
  501.  
  502. .subtitle a {color: {color:title};}
  503. .subtitle a:hover {color: {color:accent};}
  504.  
  505. .upper {
  506. font-size: 0.9em;
  507. text-transform: uppercase;
  508. letter-spacing: 1px;
  509. }
  510.  
  511. .icon {
  512. display: inline-block;
  513. border-radius: 50%;
  514. vertical-align: middle;
  515. background-color: {color:icon background};
  516. }
  517.  
  518. .icon-gradient {
  519. background: linear-gradient(to bottom right, {color:gradient 1}, {color:gradient 2});
  520. border-radius: 50%;
  521. padding: 3px;
  522. display: inline-block;
  523. }
  524.  
  525. .ui-icon {
  526. position: absolute;
  527. background-color: {color:accent};
  528. border-radius: 50%;
  529. text-align: center;
  530. display: block;
  531. }
  532.  
  533. .ui-icon .feather {color: {color:posts}; text-align: center;}
  534.  
  535. .dec-icon .feather {
  536. width: 1.25em;
  537. height: 1.25em;
  538. color: {color:accent};
  539. display: inline-block;
  540. vertical-align: middle;
  541. }
  542.  
  543. .sub-ital {font-style: italic; color: {color:link};}
  544.  
  545. a .feather {
  546. -webkit-transition: all 0.3s;
  547. -moz-transition: all 0.3s;
  548. -ms-transition: all 0.3s;
  549. -o-transition: all 0.3s;
  550. transition: all 0.3s;
  551. }
  552.  
  553. a:hover .feather {
  554. -webkit-transition: all 0.3s;
  555. -moz-transition: all 0.3s;
  556. -ms-transition: all 0.3s;
  557. -o-transition: all 0.3s;
  558. transition: all 0.3s;
  559. }
  560.  
  561. /*----- CAPTION -----*/
  562.  
  563. .caption {
  564. padding: 2.5em 0;
  565. list-style-type: none;
  566. border-bottom: 1px solid {color:borders};
  567. }
  568.  
  569. .caption:last-of-type {border-bottom: none; padding-bottom: 0;}
  570. .og-text:first-of-type {padding-top: 0;}
  571.  
  572. .caption p {margin: 1em 0;}
  573. .caption p:last-of-type {margin-bottom: 0;}
  574. .is-og p, .ogcap p:first-of-type {margin: 0 0 1em 0;}
  575. .caption iframe, .caption img {max-width: 100%;}
  576.  
  577. .capicon {
  578. width: 30px;
  579. height: 30px;
  580. padding: 3px;
  581. background-color: {color:icon background};
  582. }
  583.  
  584. .comment-icon {
  585. margin: -22px auto auto 22px;
  586. width: 14px;
  587. height: 14px;
  588. padding: 5px;
  589. line-height: 14px;
  590. }
  591.  
  592. .comment-icon .feather {
  593. width: 14px;
  594. height: 14px;
  595. }
  596.  
  597. .username {
  598. display: inline-block;
  599. margin-left: 1em;
  600. font-size: 0.9em;
  601. }
  602.  
  603. .username a, .username a:hover {border-bottom: none;}
  604.  
  605. .deactive::after {
  606. content: '(deactivated)';
  607. margin-left: 1em;
  608. opacity: 0.7;
  609. color: {color:text};
  610. }
  611.  
  612. p.tmblr-attribution {margin-top: 1em;}
  613.  
  614. {block:ifHideCaption}{block:IndexPage}
  615. .hide-cap {display: none;}
  616. {/block:IndexPage}{/block:ifHideCaption}
  617.  
  618. /*----- TEXT -----*/
  619.  
  620. .post-title {margin-top: 0;}
  621.  
  622. pre {
  623. line-height: inherit;
  624. font-size: inherit;
  625. white-space: pre-wrap;
  626. white-space: -moz-pre-wrap;
  627. white-space: -pre-wrap;
  628. white-space: -o-pre-wrap;
  629. word-wrap: break-word;
  630. }
  631.  
  632. @font-face {
  633. font-family: Calluna;
  634. src: url("https://assets.tumblr.com/fonts/calluna/Calluna-BoldIt-webfont.eot?3=&v=f685dc881c60c298ea22a73fe505b88a");
  635. 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");
  636. font-weight: 700;
  637. font-style: italic
  638. }
  639.  
  640. @font-face {
  641. font-family: Fairwater;
  642. 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");
  643. font-weight: 400;
  644. font-style: normal
  645. }
  646.  
  647. p.npf_quirky {font-family: Fairwater; font-size: 1.75em;}
  648.  
  649. .npf_color_joey {color: #e57373;}
  650. .npf_color_monica {color: #ff8a65;}
  651. .npf_color_phoebe {color: #ffee58;}
  652. .npf_color_ross {color: #81c784;}
  653. .npf_color_rachel {color: #4fc3f7;}
  654. .npf_color_chandler {color: #9575cd;}
  655. .npf_color_niles {color: #f06292;}
  656.  
  657. a.read_more {
  658. text-transform: uppercase;
  659. letter-spacing: 1px;
  660. background-color: {color:accent};
  661. color: {color:posts};
  662. padding: 0.5em 0.75em;
  663. {block:ifRoundedPostCorners}border-radius: 3px;{/block:ifRoundedPostCorners}
  664. box-sizing: border-box;
  665. font-size: 0.9em;
  666. }
  667.  
  668. a.read_more:hover {background-color: {color:title};}
  669. a.read_more, a.read_more:hover {border-bottom: none;}
  670.  
  671. p.read_more_container {margin-top: 2em;}
  672.  
  673. #k {
  674. position: fixed;
  675. bottom: 15px;
  676. right: 15px;
  677. font-size: 15px;
  678. background-color: {color:background};
  679. padding: 5px 8px;
  680. border-radius: 3px;
  681. }
  682.  
  683. #k:hover {background-color: {color:accent}; color: {color:background};}
  684.  
  685. /*----- LINK -----*/
  686.  
  687. .linkp {
  688. color: {color:text};
  689. border: 1px solid {color:borders};
  690. {block:ifRoundedPhotoCorners}border-radius: 10px;{/block:ifRoundedPhotoCorners}
  691. overflow: hidden;
  692. -webkit-transition: all 0.4s;
  693. -moz-transition: all 0.4s;
  694. -ms-transition: all 0.4s;
  695. -o-transition: all 0.4s;
  696. transition: all 0.4s;
  697. }
  698.  
  699. .linkp:hover, .npf-link-block:hover {
  700. border: 1px solid {color:accent};
  701. background-color: {color:sidebar link background};
  702. -webkit-transition: all 0.4s;
  703. -moz-transition: all 0.4s;
  704. -ms-transition: all 0.4s;
  705. -o-transition: all 0.4s;
  706. transition: all 0.4s;
  707. }
  708.  
  709. .thumbnail {max-width: 100%; border-bottom: 1px solid {color:borders};}
  710. .link {padding: 30px;}
  711. .link-host, .link-txt {color: {color:text}; margin-top: 1.5em;}
  712.  
  713. .npf-link-block {
  714. margin-top: 1.25em;
  715. {block:ifRoundedPhotoCorners}border-radius: 10px;{/block:ifRoundedPhotoCorners}
  716. {block:ifNotRoundedPhotoCorners}border-radius: 0;{/block:ifNotRoundedPhotoCorners}
  717. -webkit-transition: all 0.4s;
  718. -moz-transition: all 0.4s;
  719. -ms-transition: all 0.4s;
  720. -o-transition: all 0.4s;
  721. transition: all 0.4s;
  722. }
  723.  
  724. .npf-link-block .poster .title {background-color: initial; padding: 30px;}
  725. .npf-link-block .title {font-size: 1.25em; border-bottom: none;}
  726. .npf-link-block .bottom {padding: 30px !important; color: {color:text};}
  727.  
  728. .npf-link-block .bottom .site-name {
  729. font-size: 0.9em;
  730. color: {color:text};
  731. font-weight: normal;
  732. letter-spacing: 1px;
  733. }
  734.  
  735. /*----- PHOTO -----*/
  736.  
  737. img {
  738. margin: 0;
  739. display: block;
  740. height: auto;
  741. }
  742.  
  743. .photo img {
  744. width: 100%;
  745. {block:ifRoundedPhotoCorners}border-radius: 10px;{/block:ifRoundedPhotoCorners}
  746. }
  747.  
  748. .vignette, #vignette {opacity: 0;}
  749. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(60, 60, 60, .8) !important;}
  750.  
  751. .lightbox-image, #tumblr_lightbox img {
  752. box-shadow: none !important;
  753. {block:ifRoundedPhotoCorners}border-radius: 10px !important;{/block:ifRoundedPhotoCorners}
  754. max-width: none;
  755. }
  756.  
  757. /*----- PHOTOSET -----*/
  758.  
  759. .npf_photoset, .photo-slideshow {
  760. {block:ifRoundedPhotoCorners}border-radius: 10px;{/block:ifRoundedPhotoCorners}
  761. overflow: hidden;
  762. }
  763.  
  764. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  765. margin-left: 0 !important;
  766. margin-right: 0 !important;
  767. }
  768.  
  769. .captext figure {margin: 1em 0;}
  770. .captext figure .tmblr-full {margin-top: {select:photoset gutter}px;}
  771. {block:ifRoundedPhotoCorners}.npf_photoset {border-radius: 10px; overflow: hidden;}{/block:ifRoundedPhotoCorners}
  772. .tmblr-full:hover {cursor: pointer;}
  773. .npf_image, .tmblr-full {border: none; outline: none;}
  774.  
  775. .text-post .photo-slideshow.processed {margin-bottom: 2.5em;}
  776.  
  777. /*----- QUOTE -----*/
  778.  
  779. .quote, p.npf_quote {
  780. color: {color:title};
  781. font-weight: bold;
  782. font-size: 1.5em;
  783. line-height: 160%;
  784. letter-spacing: 0.6px;
  785. }
  786.  
  787. .quote::before, .quote::after {
  788. content: '❝';
  789. color: {color:accent};
  790. font-size: 1.5em;
  791. display: inline-block;
  792. }
  793.  
  794. .quote::before { margin-right: 0.25em;}
  795.  
  796. .quote::after {
  797. -webkit-transform: rotate(180deg);
  798. -moz-transform: rotate(180deg);
  799. -ms-transition: rotate(180deg);
  800. -o-transition: rotate(180deg);
  801. transform: rotate(180deg);
  802. margin: -0.35em auto auto 0.25em;
  803. position: absolute;
  804. }
  805.  
  806. .quote, .source {text-align: center;}
  807.  
  808. .quote p:first-of-type {margin-top: 0;}
  809. .quote p:last-of-type {margin-bottom: 0;}
  810. p.npf_quote {font-family: inherit; margin-bottom: 1em;}
  811.  
  812. .source {margin-top: 1.5em; font-style: italic;}
  813.  
  814. /*----- CHAT -----*/
  815.  
  816. .chat {padding: 0; margin: 0;}
  817. .chat li {list-style-type: none;}
  818. .line {padding: 2em 0; border-bottom: 1px solid {color:borders};}
  819. .line:first-of-type {padding: 0 0 2em 0;}
  820. .line:last-of-type {padding: 2em 0 0 0; border-bottom: none;}
  821.  
  822. .chatter .dec-icon {margin-right: 0.75em; display: inline-block;}
  823. .chatter {display: inline-block; margin-bottom: 0.25em;}
  824.  
  825. p.npf_chat {font-family: inherit; margin-top: 1em;}
  826.  
  827. p.npf_chat b {
  828. color: {color:title};
  829. text-transform: uppercase;
  830. letter-spacing: 1px;
  831. font-family: inherit;
  832. font-size: 0.9em;
  833. }
  834.  
  835. /*----- ANSWER -----*/
  836.  
  837. .askpost {text-align: center;}
  838. .askpost p:last-of-type {margin-bottom: 0;}
  839.  
  840. .question-wrap {
  841. border: 1px solid {color:borders};
  842. {block:ifRoundedPhotoCorners}border-radius: 10px;{/block:ifRoundedPhotoCorners}
  843. padding: 2em;
  844. margin-top: 4.5em;
  845. }
  846.  
  847. .askicon {
  848. padding: 3px;
  849. background-color: {color:icon background};
  850. width: 64px;
  851. height: 64px;
  852. }
  853.  
  854. .askpost .icon-gradient {
  855. position: absolute;
  856. margin: -38px auto auto -38px;
  857. }
  858.  
  859. .askpost .ui-icon {
  860. width: 18px;
  861. height: 18px;
  862. margin: 15px auto auto -12px;
  863. display: inline-block;
  864. padding: 6px;
  865. line-height: 18px;
  866. }
  867.  
  868. .askpost .ui-icon .feather {
  869. width: 18px;
  870. height: 18px;
  871. }
  872.  
  873. .askpost .subtitle {margin-top: 2em;}
  874. .question {margin-top: 1em;}
  875.  
  876. /*----- AUDIO -----*/
  877.  
  878. .audio-art-wrap {
  879. display: flex;
  880. justify-content: center;
  881. margin-bottom: 2em;
  882. }
  883.  
  884. .albumart {
  885. z-index: 1;
  886. margin: auto;
  887. width: 90px;
  888. height: 90px;
  889. border: 3px solid {color:icon background};
  890. }
  891.  
  892. .audio-art-wrap .ui-icon {
  893. width: 18px;
  894. height: 18px;
  895. display: inline-block;
  896. padding: 7px;
  897. margin: 80px auto auto 5px;
  898. line-height: 18px;
  899. }
  900.  
  901. .audio-art-wrap .ui-icon .feather {
  902. width: 18px;
  903. height: 18px;
  904. }
  905.  
  906. .audiopost {
  907. text-align: right;
  908. border: 1px solid {color:borders};
  909. padding: 2em;
  910. {block:ifRoundedPhotoCorners}border-radius: 10px;{/block:ifRoundedPhotoCorners}
  911. display: flex;
  912. justify-content: space-between;
  913. align-items: center;
  914. flex-direction: row;
  915. }
  916.  
  917. .button {
  918. width: 30px;
  919. height: 30px;
  920. overflow: hidden;
  921. position: relative;
  922. z-index: 10;
  923. margin: 10px 9px 8px 9px;
  924. }
  925.  
  926. .audiobox {
  927. background-color: #f2f2f2;
  928. z-index: 50;
  929. float: left;
  930. margin: 0;
  931. border-radius: 50%;
  932. }
  933.  
  934. .audioinfo {
  935. display: inline-block;
  936. width: calc(100% - 90px);
  937. text-align: right;
  938. white-space: nowrap;
  939. overflow: hidden;
  940. text-overflow: ellipsis;
  941. }
  942.  
  943. .audioinfo .subtitle {font-size: 1.1em;}
  944.  
  945. /*----- TOP INFO -----*/
  946.  
  947. .top-info {margin-bottom: 2.5em;}
  948.  
  949. .top-info .icon {
  950. width: 40px;
  951. height: 40px;
  952. padding: 3px;
  953. }
  954.  
  955. .top-info .ui-icon {
  956. width: 16px;
  957. height: 16px;
  958. margin: -26px auto auto 32px;
  959. padding: 6px;
  960. line-height: 16px;
  961. }
  962.  
  963. .top-info .ui-icon .feather {
  964. width: 16px;
  965. height: 16px;
  966. }
  967.  
  968. .top-details {
  969. display: inline-block;
  970. margin-left: 18px;
  971. vertical-align: middle;
  972. width: calc(100% - 1.5em - 56px - 44px);
  973. white-space: nowrap;
  974. overflow: hidden;
  975. text-overflow: ellipsis;
  976. }
  977.  
  978. {block:ifPostInfoDropdown}
  979. .info-button {
  980. text-align: right;
  981. float: right;
  982. cursor: help;
  983. padding: 5px 0 0 10px;
  984. }
  985.  
  986. .info-button a svg {
  987. width: 24px;
  988. height: 24px;
  989. color: {color:link};
  990. }
  991.  
  992. .info-clicked svg {color: {color:accent};}
  993.  
  994. .info-dropdown {
  995. position: absolute;
  996. width: 200px;
  997. background-color: {color:posts};
  998. {block:ifRoundedPostCorners}border-radius: 10px;{block:ifRoundedPostCorners}
  999. overflow: hidden;
  1000. z-index: 5;
  1001. margin: -15px 0 0 calc({select:post width} - 20px);
  1002. display: none;
  1003. {block:ifDropShadows}
  1004. box-shadow: 1px 1px 3px {color:borders},
  1005. -1px 1px 3px {color:borders};
  1006. {/block:ifDropShadows}
  1007. {block:ifNotDropShadows}
  1008. border: 1px solid {color:borders};
  1009. {/block:ifNotDropShadows}
  1010. }
  1011.  
  1012. .info-dropdown a {
  1013. display: block;
  1014. padding: 0.5em 0.75em;
  1015. border-top: 1px solid {color:borders};
  1016. }
  1017.  
  1018. .info-dropdown a:first-of-type {border-top: none;}
  1019.  
  1020. .info-dropdown a .feather {
  1021. display: inline-block;
  1022. width: 1em;
  1023. height: 1em;
  1024. vertical-align: middle;
  1025. margin-right: 0.5em;
  1026. color: {color:accent};
  1027. }
  1028.  
  1029. .info-dropdown a:hover {background-color: {color:accent}; color: {color:posts};}
  1030.  
  1031. .info-dropdown a:hover .feather {color: {color:posts};}
  1032.  
  1033. .copy-button {
  1034. cursor: pointer;
  1035. display: inline-block;
  1036. width: 100%;
  1037. border-top: 1px solid {color:borders};
  1038. }
  1039.  
  1040. .copy-message {
  1041. background-color: {color:title};
  1042. color: {color:posts};
  1043. z-index: 10;
  1044. position: absolute;
  1045. padding: 0.25em 0.75em;
  1046. display: none;
  1047. {block:ifRoundedPostCorners}border-radius: 4px;{/block:ifRoundedPostCorners}
  1048. margin: -1em auto auto calc({select:post width} - 150px);
  1049. }
  1050. {/block:ifPostInfoDropdown}
  1051.  
  1052. /*----- BOTTOM INFO -----*/
  1053.  
  1054. .info {
  1055. margin-top: 2.5em;
  1056. {block:IndexPage}
  1057. display: flex;
  1058. justify-content: space-between;
  1059. align-items: center;
  1060. {/block:IndexPage}
  1061. }
  1062.  
  1063. {block:PermalinkPage}
  1064. .info .dec-icon .feather, .tags .dec-icon {margin-right: 0.75em; display: inline-block;}
  1065. .info .subtitle {display: inline-block;}
  1066. {/block:PermalinkPage}
  1067.  
  1068. .pin-post {margin-left: 0.75em;}
  1069.  
  1070. .pin-post .feather {
  1071. width: 1em;
  1072. height: 1em;
  1073. vertical-align: middle;
  1074. margin-right: 0.5em;
  1075. color: {color:accent};
  1076. }
  1077.  
  1078. .lirb {vertical-align: middle; text-align: right;}
  1079.  
  1080. .lirb a {
  1081. margin-left: 0.75em;
  1082. display: inline-block;
  1083. width: 1em;
  1084. height: 1em;
  1085. border-radius: 50%;
  1086. padding: 0.5em;
  1087. line-height: 1em;
  1088. background-color: {color:sidebar link background};
  1089. }
  1090.  
  1091. .lirb a .feather {
  1092. width: 1em;
  1093. height: 1em;
  1094. text-align: center;
  1095. color: {color:link};
  1096. }
  1097.  
  1098. .lirb a:hover {
  1099. background-color: {color:accent};
  1100. color: {color:posts};
  1101. {block:ifDropShadows}
  1102. box-shadow: 1px 1px 3px {color:borders},
  1103. -1px 1px 3px {color:borders};
  1104. {/block:ifDropShadows}
  1105. }
  1106.  
  1107. .lirb a:hover .feather {color: {color:posts};}
  1108.  
  1109. .like-b {
  1110. position: relative;
  1111. display: inline-block;
  1112. height: 1em;
  1113. margin-bottom: -1px;
  1114. cursor: pointer;
  1115. }
  1116.  
  1117. .like-b .like_button iframe {
  1118. position: absolute;
  1119. top: 0;
  1120. left: 0;
  1121. bottom: 0;
  1122. right: 0;
  1123. z-index: 2;
  1124. opacity: 0.000001;
  1125. }
  1126.  
  1127. .like_button iframe {width: 100% !important; height: 100% !important;}
  1128. .like-b .liked + .b {color: #d32f2f;}
  1129. .like-b .liked + .b .feather {fill: #d32f2f; color: #d32f2f;}
  1130.  
  1131. .tag-button {cursor: help;}
  1132.  
  1133. {block:IndexPage}
  1134. .tags {
  1135. margin-top: 0.5em;
  1136. {block:ifTagsOnClick}
  1137. display: none;
  1138. {/block:ifTagsOnClick}
  1139. }
  1140.  
  1141. .tags a::after {
  1142. content: '';
  1143. width: 5px;
  1144. height: 5px;
  1145. background-color: {color:accent};
  1146. border-radius: 50%;
  1147. margin: 0 1em 0.15em 1em;
  1148. display: inline-block;
  1149. vertical-align: middle;
  1150. }
  1151.  
  1152. .tags a:last-of-type::after {display: none;}
  1153. {/block:IndexPage}
  1154.  
  1155. {block:PermalinkPage}
  1156. .tags a {margin-right: 0.5em;}
  1157. .tags a::after {content: ',';}
  1158. .tags a:last-of-type::after {content: '.';}
  1159. {/block:PermalinkPage}
  1160.  
  1161. {block:ifTagsOnClick}
  1162. a.fill {background-color: {color:accent};}
  1163. a.fill .feather {color: {color:posts};}
  1164. {/block:ifTagsOnClick}
  1165.  
  1166. /*---- POST NOTES -----*/
  1167.  
  1168. .notes .title {font-size: 1.25em;}
  1169.  
  1170. ol.notes {
  1171. list-style-type: none;
  1172. max-width: 100%;
  1173. padding: 0;
  1174. margin: 2em 0 0 0;
  1175. }
  1176.  
  1177. ol.notes li.note {padding: 0.5em; display: block;}
  1178.  
  1179. ol.notes li.note a {
  1180. text-transform: uppercase;
  1181. letter-spacing: 1px;
  1182. font-size: 0.9em;
  1183. }
  1184.  
  1185. ol.notes li.note a.avatar_frame {border-bottom: none;}
  1186.  
  1187. ol.notes li.note img.avatar {
  1188. border-radius: 50%;
  1189. margin-right: 1em;
  1190. vertical-align: middle;
  1191. display: inline-block;
  1192. width: 1.5em;
  1193. height: 1.5em;
  1194. background-image: linear-gradient(to bottom right, {color:gradient 1}, {color:gradient 2});
  1195. padding: 3px;
  1196. }
  1197.  
  1198. a.more_notes_link {font-weight: bold; color: {color:title};}
  1199.  
  1200. /*---- PAGINATION -----*/
  1201.  
  1202. #pg {text-align: center;}
  1203. #pg a {margin: 0 0.75em;}
  1204. #pg a:hover {color: {color:accent};}
  1205.  
  1206. .currentpg {
  1207. color: {color:accent};
  1208. font-weight: bold;
  1209. margin: 0 0.75em;
  1210. }
  1211.  
  1212. #pg a .feather {
  1213. width: 1.5em;
  1214. height: 1.5em;
  1215. vertical-align: middle;
  1216. display: inline-block;
  1217. }
  1218.  
  1219. #pg a:hover .feather {color: {color:accent};}
  1220.  
  1221. #btop {
  1222. position: fixed;
  1223. right: 18px;
  1224. bottom: 40px;
  1225. }
  1226.  
  1227. #btop svg {
  1228. width: 30px;
  1229. height: 30px;
  1230. }
  1231.  
  1232. /*---- DAY AND TAG PAGES -----*/
  1233.  
  1234. .tag-page .subtitle {color: {color:accent};}
  1235. .tag-page .upper {font-size: 1em;}
  1236. .tag-page.upper, .tag-page .upper {text-align: center;}
  1237.  
  1238. .day-pagination .dec-icon {display: inline-block;}
  1239.  
  1240. .day-pagination {
  1241. margin-top: 1em;
  1242. display: flex;
  1243. justify-content: space-between;
  1244. }
  1245.  
  1246. .day-pagination a {
  1247. background-color: {color:sidebar link background};
  1248. padding: 0.25em 0.5em;
  1249. border-radius: 1.5em;
  1250. }
  1251.  
  1252. .day-pagination a:hover {background-color: {color:accent}; color: {color:posts};}
  1253. .day-pagination a:hover .feather {color: {color:posts};}
  1254.  
  1255. .ar-1 {margin-right: 0.5em;}
  1256. .ar-2 {margin-left: 0.5em;}
  1257.  
  1258. /*---- MOBILE HEADER -----*/
  1259.  
  1260. #mobile-header {
  1261. position: fixed;
  1262. z-index: 100;
  1263. padding: 1.75em 2em;
  1264. top: 0;
  1265. left: 0;
  1266. right: 0;
  1267. box-sizing: border-box;
  1268. {block:ifDropShadows}box-shadow: 1px 1px 3px {color:borders};{/block:ifDropShadows}
  1269. background-color: {color:posts};
  1270. display: none;
  1271. }
  1272.  
  1273. .menu-button {
  1274. display: inline-block;
  1275. cursor: help;
  1276. vertical-align: middle;
  1277. -webkit-transition: all 0.3s;
  1278. -moz-transition: all 0.3s;
  1279. -ms-transition: all 0.3s;
  1280. -o-transition: all 0.3s;
  1281. transition: all 0.3s;
  1282. }
  1283.  
  1284. .menu-button .feather, .close a .feather {
  1285. color: {color:posts};
  1286. width: 1.5em;
  1287. height: 1.5em;
  1288. background-color: {color:accent};
  1289. border-radius: 50%;
  1290. padding: 0.75em;
  1291. -webkit-transition: all 0.3s;
  1292. -moz-transition: all 0.3s;
  1293. -ms-transition: all 0.3s;
  1294. -o-transition: all 0.3s;
  1295. transition: all 0.3s;
  1296. }
  1297.  
  1298. .menu-button:hover .feather, .close a:hover .feather {
  1299. background-color: {color:title};
  1300. -webkit-transition: all 0.3s;
  1301. -moz-transition: all 0.3s;
  1302. -ms-transition: all 0.3s;
  1303. -o-transition: all 0.3s;
  1304. transition: all 0.3s;
  1305. }
  1306.  
  1307. #mobile-header .subtitle {
  1308. display: inline-block;
  1309. font-size: 1.15em;
  1310. margin-left: 1em;
  1311. }
  1312.  
  1313. #mobile-flex {
  1314. display: flex;
  1315. justify-content: space-between;
  1316. align-items: center;
  1317. }
  1318.  
  1319. .mobile-controls a .feather {
  1320. width: 1.75em;
  1321. height: 1.75em;
  1322. -webkit-transition: all 0s;
  1323. -moz-transition: all 0s;
  1324. -ms-transition: all 0s;
  1325. -o-transition: all 0s;
  1326. transition: all 0s;
  1327. }
  1328.  
  1329. .mobile-controls a {margin-left: 1em;}
  1330.  
  1331. .close {
  1332. display: none;
  1333. text-align: right;
  1334. margin-bottom: 1em;
  1335. }
  1336.  
  1337. .close a {cursor: help;}
  1338.  
  1339. #m {
  1340. text-align: center;
  1341. display: none;
  1342. margin-bottom: 50px;
  1343. }
  1344.  
  1345. /*---- RESPONSIVENESS -----*/
  1346.  
  1347. @media only screen and (max-width: 1200px) {
  1348. #mobile-header, .close {display: block;}
  1349.  
  1350. #sidebar {
  1351. left: -300px;
  1352. z-index: 9999;
  1353. -webkit-transition: ease-in-out 1s;
  1354. -moz-transition: ease-in-out 1s;
  1355. -ms-transition: ease-in-out 1s;
  1356. -o-transition: ease-in-out 1s;
  1357. transition: ease-in-out 1s;
  1358. }
  1359.  
  1360. #sidebar.show {left: 0;}
  1361.  
  1362. #container {
  1363. width: 100%;
  1364. margin: 150px auto 50px auto;
  1365. }
  1366.  
  1367. .info-dropdown {margin-left: calc({select:post width} - 200px);}
  1368. }
  1369.  
  1370. @media only screen and (max-width: 800px) {
  1371. article {width: 90vw;}
  1372.  
  1373. .info-dropdown {margin-left: calc(90vw - 250px);}
  1374.  
  1375. #k {display: none;}
  1376. #m {display: block;}
  1377. }
  1378.  
  1379. @media only screen and (max-width: 500px) {
  1380. article {
  1381. width: 100vw;
  1382. padding: 30px;
  1383. border-radius: 0;
  1384. }
  1385.  
  1386. #sidebar {width: 80vw; left: -80vw;}
  1387.  
  1388. .info-dropdown {margin-left: calc(100vw - 260px);}
  1389. #btop {display: none;}
  1390. }
  1391.  
  1392. @media only screen and (max-width: 400px) {
  1393. #mobile-header .subtitle {display: none;}
  1394. }
  1395.  
  1396. {CustomCSS}
  1397.  
  1398. </style>
  1399. </head>
  1400.  
  1401. <body class="load-in">
  1402.  
  1403. <!----- MOBILE HEADER ----->
  1404.  
  1405. <header id="mobile-header">
  1406. <div id="mobile-flex">
  1407. <div id="mobile-left">
  1408. <div class="menu-button" title="open menu"><svg xmlns="https://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-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></div>
  1409. <div class="subtitle">navigation</div>
  1410. </div>
  1411. <div class="mobile-controls">
  1412. <a href="https://www.tumblr.com/follow/{Name}" title="follow"><svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>
  1413. <a href="https://www.tumblr.com/message/{Name}" title="message">
  1414. <svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-square"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg></a>
  1415. <a href="https://www.tumblr.com/dashboard" title="dashboard"><svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-compass"><circle cx="12" cy="12" r="10"></circle><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon></svg></a>
  1416. </div>
  1417. </div>
  1418. </header>
  1419.  
  1420. <!----- SIDEBAR ----->
  1421.  
  1422. <aside id="sidebar">
  1423. <div id="side-content">
  1424. <div class="close"><a title="close menu"><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-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></a></div>
  1425.  
  1426. {block:ifSidebarImage}<div id="side-icon">
  1427. <img src="{image:Sidebar}" class="icon"/>
  1428. <div class="ui-icon" id="status-icon"><i data-feather="{text:Sidebar Icon}" aria-hidden="true"></i></div>
  1429. </div>{/block:ifSidebarImage}
  1430.  
  1431. <div class="title"><a href="/">{Title}</a></div>
  1432. {block:ifSidebarSubtitle}<div class="sub-ital">{text:Sidebar Subtitle}</div>{/block:ifSidebarSubtitle}
  1433.  
  1434. <div id="description">{Description}</div>
  1435.  
  1436. <nav class="upper" id="side-nav">
  1437. {block:ifHomeLink}<li><a href="/">
  1438. <i data-feather="{text:Home Icon}" aria-hidden="true"></i>
  1439. <span class="nav-txt">{text:Home Link}</span>
  1440. </a></li>{/block:ifHomeLink}
  1441. {block:AskEnabled}{block:ifAskLink}<li><a href="/ask">
  1442. <i data-feather="{text:Ask Icon}" aria-hidden="true"></i>
  1443. <span class="nav-txt">{text:Ask Link}</span>
  1444. </a></li>{/block:ifAskLink}{/block:AskEnabled}
  1445. {block:ifArchiveLink}<li><a href="/archive">
  1446. <i data-feather="{text:Archive Icon}" aria-hidden="true"></i>
  1447. <span class="nav-txt">{text:Archive Link}</span>
  1448. </a></li>{/block:ifArchiveLink}
  1449. {block:SubmissionsEnabled}{block:ifSubmitLink}<li><a href="/submit">
  1450. <i data-feather="{text:Submit Icon}" aria-hidden="true"></i>
  1451. <span class="nav-txt">{text:Submit Link}</span>
  1452. </a></li>{/block:ifSubmitLink}{/block:SubmissionsEnabled}
  1453.  
  1454. {block:ifSidebarLink1}<li><a href="{text:Sidebar Link 1 URL}">
  1455. <i data-feather="{text:Sidebar Link 1 Icon}" aria-hidden="true"></i>
  1456. <span class="nav-txt">{text:Sidebar Link 1}</span>
  1457. </a></li>{/block:ifSidebarLink1}
  1458. {block:ifSidebarLink2}<li><a href="{text:Sidebar Link 2 URL}">
  1459. <i data-feather="{text:Sidebar Link 2 Icon}" aria-hidden="true"></i>
  1460. <span class="nav-txt">{text:Sidebar Link 2}</span>
  1461. </a></li>{/block:ifSidebarLink2}
  1462. {block:ifSidebarLink3}<li><a href="{text:Sidebar Link 3 URL}">
  1463. <i data-feather="{text:Sidebar Link 3 Icon}" aria-hidden="true"></i>
  1464. <span class="nav-txt">{text:Sidebar Link 3}</span>
  1465. </a></li>{/block:ifSidebarLink3}
  1466. {block:HasPages}
  1467. {block:Pages}
  1468. <li><a href="{URL}">
  1469. <i data-feather="link" aria-hidden="true"></i>
  1470. <span class="nav-txt">{Label}</span>
  1471. </a></li>
  1472. {/block:Pages}
  1473. {/block:HasPages}
  1474. </nav>
  1475. </div>
  1476. </aside>
  1477.  
  1478. <!----- POSTS CONTAINER ----->
  1479.  
  1480. <section id="container">
  1481.  
  1482. <!----- EXTRA HEADER ----->
  1483.  
  1484. {block:ifHeaderAbovePosts}
  1485. <article id="extra-header">
  1486. {block:ifHeaderImage}<img src="{image:Header}" id="header-img"/>{/block:ifHeaderImage}
  1487. <div class="icon-gradient"><img src="{PortraitURL-64}" class="icon"/></div>
  1488. <form action="/search" method="get" class="find" name="sform">
  1489. <input type="text" name="q" placeholder="{text:search placeholder}" value="{SearchQuery}" value autocomplete="off"/>
  1490. <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-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
  1491. </form>
  1492.  
  1493. <nav id="header-nav">
  1494. {block:ifHeaderLink1}<a href="{text:Header Link 1 URL}" title="{text:Header Link 1}"><i data-feather="{text:Header Link 1 Icon}"></i></a>{/block:ifHeaderLink1}
  1495. {block:ifHeaderLink2}<a href="{text:Header Link 2 URL}" title="{text:Header Link 2}"><i data-feather="{text:Header Link 2 Icon}"></i></a>{/block:ifHeaderLink2}
  1496. {block:ifHeaderLink3}<a href="{text:Header Link 3 URL}" title="{text:Header Link 3}"><i data-feather="{text:Header Link 3 Icon}"></i></a>{/block:ifHeaderLink3}
  1497. {block:ifHeaderLink4}<a href="{text:Header Link 4 URL}" title="{text:Header Link 4}"><i data-feather="{text:Header Link 4 Icon}"></i></a>{/block:ifHeaderLink4}
  1498. {block:ifHeaderLink5}<a href="{text:Header Link 5 URL}" title="{text:Header Link 5}"><i data-feather="{text:Header Link 5 Icon}"></i></a>{/block:ifHeaderLink5}
  1499. {block:ifHeaderLink6}<a href="{text:Header Link 6 URL}" title="{text:Header Link 6}"><i data-feather="{text:Header Link 6 Icon}"></i></a>{/block:ifHeaderLink6}
  1500. {block:ifHeaderLink7}<a href="{text:Header Link 7 URL}" title="{text:Header Link 7}"><i data-feather="{text:Header Link 7 Icon}"></i></a>{/block:ifHeaderLink7}
  1501. </nav>
  1502. </article>
  1503. {/block:ifHeaderAbovePosts}
  1504.  
  1505. <!----- TAG AND DAY PAGES ----->
  1506.  
  1507. {block:TagPage}
  1508. <article class="tag-page upper">
  1509. Viewing posts filed under <span class="subtitle">#{Tag}</span>
  1510. </article>
  1511. {/block:TagPage}
  1512.  
  1513. {block:SearchPage}
  1514. <article class="tag-page upper">
  1515. {lang:Found SearchResultCount results for SearchQuery}
  1516. </article>
  1517. {/block:SearchPage}
  1518.  
  1519. {block:DayPage}
  1520. <article class="tag-page">
  1521. <div class="upper">Viewing posts made on <span class="subtitle">{DayOfMonth} {Month} {Year}</span></div>
  1522. {block:DayPagination}
  1523. <div class="day-pagination">
  1524. {block:PreviousDayPage}<a href="{PreviousDayPage}"><div class="dec-icon ar-1"><svg xmlns="https://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-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg></div>previous day</a>{/block:PreviousDayPage}
  1525. {block:NextDayPage}<a href="{NextDayPage}">next day<div class="dec-icon ar-2"><svg xmlns="https://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-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></div></a>{/block:NextDayPage}
  1526. </div>
  1527. {/block:DayPagination}
  1528. </article>
  1529. {/block:DayPage}
  1530.  
  1531. {block:Posts inlineMediaWidth="1280"}
  1532. <article class="posts" id="{PostID}">
  1533.  
  1534. <!----- TOP INFO ----->
  1535.  
  1536. {block:Date}
  1537. <div class="top-info">
  1538.  
  1539. {block:RebloggedFrom}
  1540. <div class="icon-gradient"><a href="{ReblogRootURL}" title="{ReblogRootTitle}"><img src="{ReblogRootPortraitURL-64}" class="icon"/></a></div>
  1541. {/block:RebloggedFrom}
  1542.  
  1543. {block:NotReblog}
  1544. <div class="icon-gradient"><a href="{Permalink}" title="original post"><img src="{PortraitURL-64}" class="icon"/></a></div>
  1545. {/block:NotReblog}
  1546.  
  1547. <div class="ui-icon">
  1548. {block:Text}<i data-feather="type" aria-hidden="true"></i>{/block:Text}
  1549. {block:Link}<i data-feather="link" aria-hidden="true"></i>{/block:Link}
  1550. {block:Photo}<i data-feather="camera" aria-hidden="true"></i>{/block:Photo}
  1551. {block:Panorama}<i data-feather="camera" aria-hidden="true"></i>{/block:Panorama}
  1552. {block:Photoset}<i data-feather="image" aria-hidden="true"></i>{/block:Photoset}
  1553. {block:Video}<i data-feather="tv" aria-hidden="true"></i>{/block:Video}
  1554. {block:Quote}<i data-feather="bookmark" aria-hidden="true"></i>{/block:Quote}
  1555. {block:Chat}<i data-feather="message-square" aria-hidden="true"></i>{/block:Chat}
  1556. {block:Answer}<i data-feather="mail" aria-hidden="true"></i>{/block:Answer}
  1557. {block:Audio}<i data-feather="headphones" aria-hidden="true"></i>{/block:Audio}
  1558. </div>
  1559.  
  1560. <div class="top-details">
  1561. {block:RebloggedFrom}
  1562. <a href="{ReblogRootURL}" title="{ReblogRootTitle}" class="subtitle">{ReblogRootName}</a>
  1563. {block:RebloggedFrom}
  1564. {block:NotReblog}
  1565. <a href="{Permalink}" title="original post" class="subtitle">{Name}</a>
  1566. {/block:NotReblog}
  1567.  
  1568. <div class="upper">
  1569. {block:IndexPage}<a href="{Permalink}" class="time-ago">{Timestamp}</a>{/block:IndexPage}
  1570.  
  1571. {block:PermalinkPage}
  1572. {PostType} post
  1573. {/block:PermalinkPage}
  1574. </div>
  1575.  
  1576. </div>
  1577.  
  1578. {block:ifPostInfoDropdown}{block:IndexPage}
  1579. <a class="info-button" title="more info"><svg xmlns="https://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-more-vertical"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg></a>
  1580.  
  1581. <div class="info-dropdown upper">
  1582. <a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}/"><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-clock"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>{DayOfMonth} {Month} {Year}</a>
  1583. {block:RebloggedFrom}
  1584. <a href="{ReblogParentURL}"><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-rotate-cw"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>reblogged from</a>
  1585. {/block:RebloggedFrom}
  1586. {block:ContentSource}<a href="{SourceURL}"><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-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>{lang:Source}</a>{/block:ContentSource}
  1587. <div class="copy-button" data-clipboard-text="{Permalink}"><a><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-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>copy link to post</a></div>
  1588. <a href="{Permalink}"><svg xmlns="https://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-link-2"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg>permalink</a>
  1589. </div>
  1590.  
  1591. <div class="copy-message upper">link copied</div>
  1592.  
  1593. {/block:IndexPage}{/block:ifPostInfoDropdown}
  1594.  
  1595. </div>
  1596. {block:Date}
  1597.  
  1598. <!----- POSTS ----->
  1599.  
  1600. {block:Text}
  1601. <div class="text-post" id="{PostID}">
  1602. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1603. {block:NotReblog}
  1604. <li class="caption ogcap og-text">
  1605. <div class="captext">{Body}</div>
  1606. </li>
  1607. {/block:NotReblog}
  1608. {block:RebloggedFrom}{block:Reblogs}
  1609. <li class="caption rbcap og-text">
  1610. {block:IsNotOriginalEntry}
  1611. <div class="icon-gradient"><img src="{PortraitURL-64}" class="capicon icon"></div>
  1612. <div class="ui-icon comment-icon"><i data-feather="message-circle" aria-hidden="true"></i></div>
  1613. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1614. {/block:IsNotOriginalEntry}
  1615. <div class="captext">{Body}</div>
  1616. </li>
  1617. {/block:Reblogs}{/block:RebloggedFrom}
  1618. </div>
  1619. {/block:Text}
  1620.  
  1621. {block:Link}
  1622. <a href="{URL}"><div class="linkp">
  1623. {block:Thumbnail}<img src="{Thumbnail-HighRes}" class="thumbnail">{/block:Thumbnail}
  1624. <div class="link">
  1625. <div class="title">{Name}</div>
  1626. {block:Excerpt}<div class="link-txt">{Excerpt}</div>{/block:Excerpt}
  1627. {block:Host}<div class="link-host upper">by {Host}</div>{/block:Host}
  1628. </div>
  1629. </div></a>
  1630. {block:Description}
  1631. {block:NotReblog}
  1632. <li class="caption ogcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1633. <div class="captext">{Description}</div>
  1634. </li>
  1635. {/block:NotReblog}
  1636. {/block:Description}
  1637. {block:RebloggedFrom}
  1638. {block:Reblogs}
  1639. <li class="caption rbcap {block:IsOriginalEntry}is-og{/block:IsOriginalEntry} {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1640. {block:IsNotOriginalEntry}
  1641. <div class="icon-gradient"><img src="{PortraitURL-64}" class="capicon icon"></div>
  1642. <div class="ui-icon comment-icon"><i data-feather="message-circle" aria-hidden="true"></i></div>
  1643. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1644. {/block:IsNotOriginalEntry}
  1645. <div class="captext">{Body}</div>
  1646. </li>
  1647. {/block:Reblogs}
  1648. {/block:RebloggedFrom}
  1649. {/block:Link}
  1650.  
  1651. {block:Photo}
  1652. <div class="photo">
  1653. {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}
  1654. </div>
  1655. {block:Caption}
  1656. {block:NotReblog}
  1657. <li class="caption ogcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1658. <div class="captext">{Caption}</div>
  1659. </li>
  1660. {/block:NotReblog}
  1661. {block:Reblogs}
  1662. <li class="caption rbcap {block:IsOriginalEntry}is-og{/block:IsOriginalEntry} {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1663. {block:IsNotOriginalEntry}
  1664. <div class="icon-gradient"><img src="{PortraitURL-64}" class="capicon icon"></div>
  1665. <div class="ui-icon comment-icon"><i data-feather="message-circle" aria-hidden="true"></i></div>
  1666. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1667. {/block:IsNotOriginalEntry}
  1668. <div class="captext">{Body}</div>
  1669. </li>
  1670. {/block:Reblogs}
  1671. {/block:Caption}
  1672. {/block:Photo}
  1673.  
  1674. {block:Panorama}
  1675. <div class="photo">
  1676. {LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}">{LinkCloseTag}
  1677. </div>
  1678. {block:Caption}
  1679. {block:NotReblog}
  1680. <li class="caption ogcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1681. <div class="captext">{Caption}</div>
  1682. </li>
  1683. {/block:NotReblog}
  1684. {block:Reblogs}
  1685. <li class="caption rbcap {block:IsOriginalEntry}is-og{/block:IsOriginalEntry} {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1686. {block:IsNotOriginalEntry}
  1687. <div class="icon-gradient"><img src="{PortraitURL-64}" class="capicon icon"></div>
  1688. <div class="ui-icon comment-icon"><i data-feather="message-circle" aria-hidden="true"></i></div>
  1689. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1690. {/block:IsNotOriginalEntry}
  1691. <div class="captext">{Body}</div>
  1692. </li>
  1693. {/block:Reblogs}
  1694. {/block:Caption}
  1695. {/block:Panorama}
  1696.  
  1697. {block:Photoset}
  1698. <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>
  1699. {block:Caption}
  1700. {block:NotReblog}
  1701. <li class="caption ogcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1702. <div class="captext">{Caption}</div>
  1703. </li>
  1704. {/block:NotReblog}
  1705. {block:Reblogs}
  1706. <li class="caption rbcap {block:IsOriginalEntry}is-og{/block:IsOriginalEntry} {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1707. {block:IsNotOriginalEntry}
  1708. <div class="icon-gradient"><img src="{PortraitURL-64}" class="capicon icon"></div>
  1709. <div class="ui-icon comment-icon"><i data-feather="message-circle" aria-hidden="true"></i></div>
  1710. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1711. {/block:IsNotOriginalEntry}
  1712. <div class="captext">{Body}</div>
  1713. </li>
  1714. {/block:Reblogs}
  1715. {/block:Caption}
  1716. {/block:Photoset}
  1717.  
  1718. {block:Video}
  1719. <div class="video">{Video-700}</div>
  1720. {block:Caption}
  1721. {block:NotReblog}
  1722. <li class="caption ogcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1723. <div class="captext">{Caption}</div>
  1724. </li>
  1725. {/block:NotReblog}
  1726. {block:Reblogs}
  1727. <li class="caption rbcap {block:IsOriginalEntry}is-og{/block:IsOriginalEntry} {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1728. {block:IsNotOriginalEntry}
  1729. <div class="icon-gradient"><img src="{PortraitURL-64}" class="capicon icon"></div>
  1730. <div class="ui-icon comment-icon"><i data-feather="message-circle" aria-hidden="true"></i></div>
  1731. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1732. {/block:IsNotOriginalEntry}
  1733. <div class="captext">{Body}</div>
  1734. </li>
  1735. {/block:Reblogs}
  1736. {/block:Caption}
  1737. {/block:Video}
  1738.  
  1739. {block:Quote}
  1740. <div class="quote">{Quote}</div>
  1741. {block:Source}<div class="source">{Source}</div>{/block:Source}
  1742. {/block:Quote}
  1743.  
  1744. {block:Chat}
  1745. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1746. <ul class="chat">{block:Lines}
  1747. <li class="line">
  1748. {block:Label}<div class="subtitle chatter"><div class="dec-icon"><i data-feather="message-circle" aria-hidden="true"></i></div>{Label}</div>{/block:Label}
  1749. <div class="chattxt">{Line}</div>
  1750. </li>
  1751. {/block:Lines}</ul>
  1752. {/block:Chat}
  1753.  
  1754. {block:Answer}
  1755. <div class="askpost">
  1756. <div class="icon-gradient"><img src="{AskerPortraitURL-64}" class="askicon icon"></div>
  1757. <div class="ui-icon" id="ask-dec-icon"><i data-feather="mail" aria-hidden="true"></i></div>
  1758. <div class="question-wrap">
  1759. <div class="subtitle">{Asker}</div>
  1760. <div class="sub-ital">sent a message</div>
  1761. <div class="question">{Question}</div>
  1762. </div>
  1763. </div>
  1764. {block:Answerer}
  1765. <li class="caption rbcap">
  1766. <div class="icon-gradient"><img src="{AnswererPortraitURL-64}" class="capicon icon"></div>
  1767. <div class="ui-icon comment-icon"><i data-feather="message-circle" aria-hidden="true"></i></div>
  1768. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Answerer}</a></div>
  1769. <div class="captext">{Answer}</div>
  1770. </li>
  1771. {/block:Answerer}
  1772. {block:NotReblog}
  1773. <li class="caption ogcap">
  1774. <div class="captext">{Replies}</div>
  1775. </li>
  1776. {/block:NotReblog}
  1777. {block:RebloggedFrom}{block:Reblogs}
  1778. <li class="caption rbcap">
  1779. <div class="icon-gradient"><img src="{PortraitURL-64}" class="capicon icon"></div>
  1780. <div class="ui-icon comment-icon"><i data-feather="message-circle" aria-hidden="true"></i></div>
  1781. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1782. <div class="captext">{Body}</div>
  1783. </li>
  1784. {/block:Reblogs}{/block:RebloggedFrom}
  1785. {/block:Answer}
  1786.  
  1787. {block:Audio}
  1788. {block:AlbumArt}
  1789. <div class="audio-art-wrap">
  1790. <div class="icon-gradient"><img src="{AlbumArtURL}" class="albumart icon"></div>
  1791. <div class="ui-icon" id="ask-dec-icon"><i data-feather="music" aria-hidden="true"></i></div>
  1792. </div>
  1793. {/block:AlbumArt}
  1794. <div class="audiopost">
  1795. <div class="audiobox"><div class="button">
  1796. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  1797. </div></div>
  1798. <div class="audioinfo">
  1799. {block:TrackName}<div class="subtitle">{TrackName}</div>{/block:TrackName}
  1800. {block:Artist}<div class="sub-ital">by {Artist}</div>{/block:Artist}
  1801. </div>
  1802. </div>
  1803. {block:Caption}
  1804. {block:NotReblog}
  1805. <li class="caption ogcap {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1806. <div class="captext">{Caption}</div>
  1807. </li>
  1808. {/block:NotReblog}
  1809. {block:Reblogs}
  1810. <li class="caption rbcap {block:IsOriginalEntry}is-og{/block:IsOriginalEntry} {block:ifHideCaption}hide-cap{/block:ifHideCaption}">
  1811. {block:IsNotOriginalEntry}
  1812. <div class="icon-gradient"><img src="{PortraitURL-64}" class="capicon icon"></div>
  1813. <div class="ui-icon comment-icon"><i data-feather="message-circle" aria-hidden="true"></i></div>
  1814. <div class="username subtitle {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1815. {/block:IsNotOriginalEntry}
  1816. <div class="captext">{Body}</div>
  1817. </li>
  1818. {/block:Reblogs}
  1819. {/block:Caption}
  1820. {/block:Audio}
  1821.  
  1822. <!----- INFO ----->
  1823.  
  1824. {block:Date}
  1825. <div class="info">
  1826.  
  1827. {block:IndexPage}<div class="info-flexy upper">
  1828. <a href="{Permalink}" class="notecount">{NoteCount} notes</a>
  1829. {block:PinnedPostLabel}<a href="{Permalink}" class="pin-post"><i data-feather="map-pin" aria-hidden="true"></i>{PinnedPostLabel}</a>{/block:PinnedPostLabel}
  1830. </div>{/block:IndexPage}
  1831.  
  1832. {block:PermalinkPage}
  1833. <div class="dec-icon">
  1834.  
  1835. <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-clock"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><div class="subtitle">{TimeAgo} on {Month} {DayOfMonthWithZero}, {Year} at {12Hour}:{Minutes} {AmPm}</div><br>
  1836.  
  1837. {block:RebloggedFrom}
  1838. <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-rotate-cw"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>reblogged via <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a><br>
  1839. <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>original post by <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a>
  1840. {/block:RebloggedFrom}
  1841.  
  1842. {block:NotReblog}<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>original post{/block:NotReblog}
  1843.  
  1844. {block:ContentSource}<div class="postsource"><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-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>content source at <a href="{SourceURL}">{SourceTitle}</a></div>{/block:ContentSource}
  1845.  
  1846. </div>
  1847. {/block:PermalinkPage}
  1848.  
  1849. {block:IndexPage}
  1850. <span class="lirb">
  1851. {block:ifTagsOnClick}{block:HasTags}<a class="tag-button" title="show tags"><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-tag"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7.01" y2="7"></line></svg></a>{/block:HasTags}{/block:ifTagsOnClick}
  1852. <a href="{ReblogURL}" title="reblog" target="_blank"><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-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>
  1853. <a class="like-b" href="#" title="like">{LikeButton}<span class="b"><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-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>
  1854. </span>
  1855. {/block:IndexPage}
  1856. </div>
  1857. {/block:Date}
  1858.  
  1859. {block:HasTags}
  1860. <div class="tags {block:IndexPage}{block:ifTagsOnClick}tag-click{/block:ifTagsOnClick}{/block:IndexPage}">
  1861. {block:PermalinkPage}<div class="dec-icon"><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-tag"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" y1="7" x2="7.01" y2="7"></line></svg></div>{/block:PermalinkPage}
  1862. {block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
  1863. </div>
  1864. {/block:HasTags}
  1865.  
  1866. </article>
  1867.  
  1868. <!----- POST NOTES ----->
  1869.  
  1870. {block:PermalinkPage}{block:Date}{block:PostNotes}
  1871. <article class="notes">
  1872. {block:NoteCount}<div class="title" id="notetitle">{NoteCountWithLabel}</div>{/block:NoteCount}
  1873. {PostNotes-64}
  1874. </article>
  1875. {/block:PostNotes}{/block:Date}{/block:PermalinkPage}
  1876.  
  1877. {/block:Posts}
  1878.  
  1879. <!----- PAGINATION ----->
  1880.  
  1881. {block:Pagination}
  1882. <article id="pg">
  1883. {block:PreviousPage}<a href="{PreviousPage}" title="go back"><svg xmlns="https://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-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg></a>{/block:PreviousPage}
  1884. {block:JumpPagination length="5"}
  1885. {block:CurrentPage}<span class="currentpg">{PageNumber}</span>{/block:CurrentPage}
  1886. {block:JumpPage}<a class="jumppg" href="{URL}">{PageNumber}</a>{/block:JumpPage}
  1887. {/block:JumpPagination}
  1888. {block:NextPage}<a href="{NextPage}" title="go forward"><svg xmlns="https://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-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>{/block:NextPage}
  1889. </article>
  1890. {/block:Pagination}
  1891.  
  1892. </section>
  1893.  
  1894. <div id="btop">
  1895. <a href="#top" title="back to top" target="_self"><i data-feather="chevron-up"></i></a>
  1896. </div>
  1897.  
  1898. <a href="https://seyche.tumblr.com" title="lilac theme by seyche" id="k">&.</a>
  1899.  
  1900. <a href="https://seyche.tumblr.com" id="m" class="upper">lilac theme by seyche</a>
  1901.  
  1902. <!----- PHOTOSETS ----->
  1903.  
  1904. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  1905. <script src="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosets.js"></script>
  1906.  
  1907. <!----- TOOLTIPS ----->
  1908.  
  1909. <script src="https://unpkg.com/popper.js@1"></script>
  1910. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1911.  
  1912. <!----- VIDEO RESIZING ----->
  1913.  
  1914. <script src="https://seyche.github.io/external-files-hosting/plugins/flexframes-modified.js"></script>
  1915.  
  1916. <!----- NOTECOUNT ----->
  1917.  
  1918. <script type="text/javascript" src="https://static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script>
  1919.  
  1920. <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
  1921.  
  1922. <!----- JQUERY ----->
  1923.  
  1924. <script>
  1925.  
  1926. $(document).ready(function(){
  1927.  
  1928. /// PHOTOSETS
  1929.  
  1930. /// pxu photosets by pixelunion
  1931.  
  1932. $('.photo-slideshow').pxuPhotoset({
  1933. lightbox: true,
  1934. rounded: false,
  1935. gutter: '{select:photoset gutter}px',
  1936. photoset: '.photo-slideshow',
  1937. photoWrap: '.photo-data',
  1938. photo: '.pxu-photo'
  1939. });
  1940.  
  1941. /// npfPhotosets by @codematurgy
  1942.  
  1943. npfPhotosets(".posts", {
  1944. rowClass:"npf_row",
  1945. imageContainerClass:"tmblr-full",
  1946. generatedPhotosetContainerClass:"npf_photoset",
  1947. imageClass:"npf_image",
  1948. includeCommonPhotosets: false,
  1949. useTumblrLightbox: true,
  1950. insertGalleryIndicator: false,
  1951. galleryIndicatorClass: "npf_gallery_indicator",
  1952. galleryIndicatorContent: "<img src='image_url'>",
  1953. photosetMargins:"{select:photoset gutter}"
  1954. });
  1955.  
  1956. /// NOTECOUNT by @shythemes
  1957.  
  1958. $('article').find('.notecount').each(function(){
  1959. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  1960. if (n > 999) {
  1961. n = Math.floor(n / 100) / 10;
  1962. $(this).text(n + 'k notes');
  1963. }
  1964. });
  1965.  
  1966. /// TOOLTIPS by atomiks @ atomiks.github.io
  1967.  
  1968. tippy('[title]', {
  1969. theme: 'custom',
  1970. arrow: false,
  1971. followCursor: true,
  1972. delay: 100,
  1973. placement: 'bottom-start',
  1974. zIndex: 9999999999,
  1975. maxWidth: 400,
  1976.  
  1977. content(reference) {
  1978. const title = reference.getAttribute('title');
  1979. reference.removeAttribute('title');
  1980. return title;
  1981. },
  1982. });
  1983.  
  1984. /// TAGS ON CLICK AND INFO DROPDOWN
  1985.  
  1986. {block:IndexPage}
  1987.  
  1988. {block:ifTagsOnClick}
  1989. $('.tag-click').hide();
  1990. $('.tag-button').click(function(event) {
  1991. $(this).closest('.posts').find('.tag-click').slideToggle(500)
  1992. event.preventDefault();
  1993. $(this).toggleClass('fill', 500);
  1994. });
  1995. {/block:ifTagsOnClick}
  1996.  
  1997. {block:ifPostInfoDropdown}
  1998. $('.info-dropdown').hide();
  1999. $('.info-button').click(function(event) {
  2000. $(this).closest('.posts').find('.info-dropdown').slideToggle(500)
  2001. event.preventDefault();
  2002. $(this).toggleClass('info-clicked', 500);
  2003. });
  2004. {/block:ifPostInfoDropdown}
  2005.  
  2006. var clipboard = new ClipboardJS(".copy-button");
  2007.  
  2008. $('.copy-message').hide();
  2009. $('.copy-button').click(function(event) {
  2010. $(this).closest('.posts').find('.copy-message').fadeIn(500)
  2011. event.preventDefault();
  2012.  
  2013. setTimeout(function(){
  2014. $('.copy-message').fadeOut(500);}, 2000);
  2015. });
  2016.  
  2017. {/block:IndexPage}
  2018.  
  2019. /// TIME AGO by @bychloethemes
  2020.  
  2021. $(".time-ago").timeAgo({
  2022. time: "letter",
  2023. spaces: true,
  2024. words: false,
  2025. prefix: "",
  2026. suffix: "ago",
  2027. });
  2028.  
  2029. /// REDIRECTS by @magnusthemes
  2030.  
  2031. $('a[href*="t.umblr.com/redirect"]').each(function(){
  2032. var originalURL = $(this).attr("href").split("?z=")[1].split("&t=")[0];
  2033. var replaceURL = decodeURIComponent(originalURL);
  2034. $(this).attr("href", replaceURL);
  2035. });
  2036.  
  2037. /// SLIDE MOBILE NAV
  2038.  
  2039. $('.menu-button').click(function(){
  2040. $('#sidebar').addClass('show');
  2041. });
  2042.  
  2043. $('.close').click(function(){
  2044. $('#sidebar').removeClass('show');
  2045. });
  2046.  
  2047. /// SCROLL TO TOP
  2048.  
  2049. $('#btop').click(function(){
  2050. $('html, body').animate({scrollTop : 0},800);
  2051. return false;
  2052. });
  2053.  
  2054. });
  2055.  
  2056. /// RESPONSIVE VIDEOS
  2057.  
  2058. function flexFrame() {
  2059. $(".caption").each(function() {
  2060. $(this).find("iframe").wrap("<div class='capframe'></div>");
  2061. flexibleFrames($(".capframe"));
  2062. });
  2063. flexibleFrames($(".video"));
  2064. }
  2065. $(document).ready(flexFrame);
  2066.  
  2067. feather.replace()
  2068.  
  2069. </script>
  2070.  
  2071.  
  2072. </body>
  2073. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!