API tools faq
paste
seiche

theme twelve: anemone

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